diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html
deleted file mode 100644
index 8c949f3..0000000
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div>
-  <a [routerLink]="[artist().id]" routerLinkActive="active">
-    <span>{{ artist().name }}</span>
-  </a>
-</div>
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts
deleted file mode 100644
index 5bf9f95..0000000
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, input, signal } from '@angular/core';
-import { Artist } from '../artist.model';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-artist-detail',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './artist-detail.component.html',
-  styleUrl: './artist-detail.component.css'
-})
-export class ArtistDetailComponent {
-  artist = input.required<Artist>();
-
-}
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
rename to kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.html b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.html
new file mode 100644
index 0000000..b702b13
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'artist', artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.spec.ts
index 4a58cbb..19737d5 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistListComponent } from './artist-list.component';
+import { ComicArtistComponent } from './comic-artist.component';
 
-describe('ArtistListComponent', () => {
-  let component: ArtistListComponent;
-  let fixture: ComponentFixture<ArtistListComponent>;
+describe('ComicArtistComponent', () => {
+  let component: ComicArtistComponent;
+  let fixture: ComponentFixture<ComicArtistComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistListComponent]
+      imports: [ComicArtistComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistListComponent);
+    fixture = TestBed.createComponent(ComicArtistComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.ts b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.ts
new file mode 100644
index 0000000..b24e6de
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Artist } from '../comic-artists/artist.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-artist',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-artist.component.html',
+  styleUrl: './comic-artist.component.css'
+})
+export class ComicArtistComponent {
+  artist = input.required<Artist>();
+}
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.css
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.html
similarity index 64%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
rename to kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.html
index 984357c..1bbc4f3 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
+++ b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.html
@@ -1,7 +1,7 @@
 <ul>
   @for (artist of artists(); track artist.id) {
     <li>
-      <app-artist-detail [artist]="artist"/>
+      <app-comic-artist [artist]="artist"/>
     </li>
   }
 </ul>
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.spec.ts
new file mode 100644
index 0000000..dd0c4d3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicArtistsListComponent } from './comic-artists-list.component';
+
+describe('ComicArtistsListComponent', () => {
+  let component: ComicArtistsListComponent;
+  let fixture: ComponentFixture<ComicArtistsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicArtistsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicArtistsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
similarity index 55%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
rename to kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
index 441b24a..f1972da 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
@@ -1,16 +1,18 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Artist } from '../artist.model';
-import { ArtistService } from '../artist.service';
-import { ArtistDetailComponent } from "../artist-detail/artist-detail.component";
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Artist } from '../comic-artists/artist.model';
+import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
+import { ArtistService } from '../comic-artists/artist.service';
 
 @Component({
-  selector: 'app-artist-list',
-  imports: [ArtistDetailComponent],
-  templateUrl: './artist-list.component.html',
-  styleUrl: './artist-list.component.css'
+  selector: 'app-comic-artists-list',
+  imports: [ComicArtistComponent],
+  templateUrl: './comic-artists-list.component.html',
+  styleUrl: './comic-artists-list.component.css'
 })
-export class ArtistListComponent implements OnInit {
-  artists = signal<Artist[] | undefined>(undefined);
+export class ComicArtistsListComponent implements OnInit {
+  
+  artists = signal<Artist[]>([]);
   isFetching = signal(false);
   error = signal('');
   private artistService = inject(ArtistService);
@@ -34,5 +36,4 @@ export class ArtistListComponent implements OnInit {
       subscription.unsubscribe();
     });
   }
-
 }
diff --git a/kontor-angular/src/app/comic/artist/artist.model.ts b/kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist.model.ts
rename to kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts
diff --git a/kontor-angular/src/app/comic/artist/artist.service.ts b/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
similarity index 93%
rename from kontor-angular/src/app/comic/artist/artist.service.ts
rename to kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
index 6852eba..7b29420 100644
--- a/kontor-angular/src/app/comic/artist/artist.service.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
@@ -1,8 +1,8 @@
 import { inject, Injectable, signal } from "@angular/core";
-import { ErrorService } from "../../shared/error.service";
 import { HttpClient } from "@angular/common/http";
-import { Artist } from "./artist.model";
 import { catchError, map, throwError } from "rxjs";
+import { ErrorService } from "../../../shared/error.service";
+import { Artist } from "./artist.model";
 
 @Injectable({
   providedIn: 'root',
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.css b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html
new file mode 100644
index 0000000..a083862
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html
@@ -0,0 +1,7 @@
+<p>artists works!</p>
+<div>
+  <app-comic-artists-list />
+</div>
+<div>
+  <h2>Artist Details</h2>
+</div>
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.spec.ts
index cf1fa88..99f3089 100644
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistDetailComponent } from './artist-detail.component';
+import { ComicArtistsComponent } from './comic-artists.component';
 
-describe('ArtistDetailComponent', () => {
-  let component: ArtistDetailComponent;
-  let fixture: ComponentFixture<ArtistDetailComponent>;
+describe('ComicArtistsComponent', () => {
+  let component: ComicArtistsComponent;
+  let fixture: ComponentFixture<ComicArtistsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistDetailComponent]
+      imports: [ComicArtistsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistDetailComponent);
+    fixture = TestBed.createComponent(ComicArtistsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts
new file mode 100644
index 0000000..d5e70a2
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ComicArtistsListComponent } from '../comic-artists-list/comic-artists-list.component';
+
+@Component({
+  selector: 'app-comic-artists',
+  imports: [ComicArtistsListComponent],
+  templateUrl: './comic-artists.component.html',
+  styleUrl: './comic-artists.component.css'
+})
+export class ComicArtistsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
index 940a22b..c8e8867 100644
--- a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
@@ -1,19 +1,31 @@
 import { Routes } from "@angular/router";
 import { ComicListComponent } from "../../../comic/comic/comic-list/comic-list.component";
 import { PublisherListComponent } from "../../../comic/publisher/publisher-list/publisher-list.component";
-import { ArtistListComponent } from "../../../comic/artist/artist-list/artist-list.component";
+import { ComicArtistsComponent } from "../comic-artists/comic-artists.component";
 
 export const comicRoutes: Routes = [
     {
         path: 'comics', 
         component: ComicListComponent
     },
+    // {
+    //     path: 'comics/:comicId',
+    //     component: ComicDetailsComponent,
+    // },
     { 
         path: 'publisher', 
         component: PublisherListComponent
     },
+    // {
+    //     path: 'publishers/:publisherId',
+    //     component: PublishersComponent,
+    // },
     { 
         path: 'artist', 
-        component: ArtistListComponent
+        component: ComicArtistsComponent
     },    
+    {
+        path: 'artist/:artistId',
+        component: ComicArtistsComponent,
+    },
 ];