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
index b24e6de..99a7938 100644
--- 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
@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { Artist } from '../comic-artists/artist.model';
+import { Artist } from '../comic.model';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
index 025d9a6..44e22cc 100644
--- a/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Artist } from '../comic-artists/artist.model';
+import { Artist } from '../comic.model';
 import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
 import { ArtistService } from '../comic-artists/artist.service';
 
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts b/kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts
deleted file mode 100644
index 9a7ec9f..0000000
--- a/kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface Artist {
-  id: string;
-  name: string;
-}
-
-export interface ArtistDetails {
-  id: string;
-  name: string;
-  weblink: string;
-}
\ No newline at end of file
diff --git a/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts b/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
index 10a61e4..a755f91 100644
--- a/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts
@@ -2,7 +2,7 @@ import { inject, Injectable, signal } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { catchError, map, throwError } from "rxjs";
 import { ErrorService } from "../../../shared/error.service";
-import { Artist, ArtistDetails } from "./artist.model";
+import { Artist, ArtistDetails } from "../comic.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
index 03c2857..6825193 100644
--- 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
@@ -2,4 +2,12 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 20px;
+}
+section {
+margin-left: 10px;
+padding: 10px;
+}
+article {
+    margin-left: 10px;
+    padding: 5px;
 }
\ No newline at end of file
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
index 736d4a3..1d79cc3 100644
--- 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
@@ -7,6 +7,16 @@
     @if (artist()) {
       <h2>{{ artist().name }}</h2>
       <a href="{{ artist().weblink }}">{{ artist().name }}</a>
+        @for (work of artist().works; track work.worktype.id) {
+          <section>
+            <app-comic-worktype [worktype]="work.worktype"/>
+              @for (comic of work.comics; track comic.id) {
+                <article>
+                  <app-comic-comic [comic]="comic"/>
+                </article>
+              }
+          </section>
+        }
     } @else {
       <h2>Artist Details</h2>
     }
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
index 43cd7d7..9542c18 100644
--- 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
@@ -1,12 +1,14 @@
 import { Component, inject, input } from '@angular/core';
 import { ComicArtistsListComponent } from '../comic-artists-list/comic-artists-list.component';
-import { ArtistDetails } from './artist.model';
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 import { ArtistService } from './artist.service';
+import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+import { ComicWorktypeComponent } from "../comic-worktype/comic-worktype.component";
+import { ArtistDetails } from '../comic.model';
 
 @Component({
   selector: 'app-comic-artists',
-  imports: [ComicArtistsListComponent],
+  imports: [ComicArtistsListComponent, ComicComicComponent, ComicWorktypeComponent],
   templateUrl: './comic-artists.component.html',
   styleUrl: './comic-artists.component.css'
 })
diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
index 5508e11..ad24f26 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { Comic } from '../comic-comics/comic.model';
+import { Comic } from '../comic.model';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
index ec94c71..057306c 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Comic } from '../comic-comics/comic.model';
+import { Comic } from '../comic.model';
 import { ComicService } from '../comic-comics/comic.service';
 import { ComicComicComponent } from "../comic-comic/comic-comic.component";
 
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
index 3c15733..89a983f 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
@@ -1,6 +1,6 @@
 import { Component, inject, input } from '@angular/core';
 import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
-import { ComicDetails } from './comic.model';
+import { ComicDetails } from '../comic.model';
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 import { ComicService } from './comic.service';
 
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
index 9ba608f..76a8d35 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable, signal } from "@angular/core";
-import { Comic, ComicDetails } from "./comic.model";
+import { Comic, ComicDetails } from "../comic.model";
 import { catchError, map, throwError } from "rxjs";
 
 @Injectable({
diff --git a/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.css b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.html b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.html
new file mode 100644
index 0000000..a9709ce
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'worktype', worktype().id]" routerLinkActive="active">
+    <span>{{ worktype().name }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts
new file mode 100644
index 0000000..88c4876
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicWorktypeComponent } from './comic-worktype.component';
+
+describe('ComicWorktypeComponent', () => {
+  let component: ComicWorktypeComponent;
+  let fixture: ComponentFixture<ComicWorktypeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicWorktypeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicWorktypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.ts b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.ts
new file mode 100644
index 0000000..260ad68
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Worktype } from '../comic.model';
+
+@Component({
+  selector: 'app-comic-worktype',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-worktype.component.html',
+  styleUrl: './comic-worktype.component.css'
+})
+export class ComicWorktypeComponent {
+  worktype = input.required<Worktype>();
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts b/kontor-angular/src/app/kontor/comic/comic.model.ts
similarity index 51%
rename from kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
rename to kontor-angular/src/app/kontor/comic/comic.model.ts
index 98bdc10..ecbb790 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
+++ b/kontor-angular/src/app/kontor/comic/comic.model.ts
@@ -1,3 +1,15 @@
+
+
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export interface Worktype {
+  id: string;
+  name: string;
+}
+
 export interface Comic {
   id: string;
   title: string;
@@ -20,3 +32,15 @@ export interface ComicDetails {
     name: string,
   ];
 }
+
+export interface ArtistWorktypeComics {
+  worktype: Worktype;
+  comics: Comic[];
+}
+
+export interface ArtistDetails {
+  id: string;
+  name: string;
+  weblink: string;
+  works: ArtistWorktypeComics[];
+}