diff --git a/kontor-angular/public/cross.png b/kontor-angular/public/cross.png
new file mode 100644
index 0000000..6b9fa6d
Binary files /dev/null and b/kontor-angular/public/cross.png differ
diff --git a/kontor-angular/public/logo.png b/kontor-angular/public/logo.png
new file mode 100644
index 0000000..7499bdf
Binary files /dev/null and b/kontor-angular/public/logo.png differ
diff --git a/kontor-angular/public/tick.png b/kontor-angular/public/tick.png
new file mode 100644
index 0000000..2414885
Binary files /dev/null and b/kontor-angular/public/tick.png differ
diff --git a/kontor-angular/src/app/app.component.html b/kontor-angular/src/app/app.component.html
index def9b90..604f43b 100644
--- a/kontor-angular/src/app/app.component.html
+++ b/kontor-angular/src/app/app.component.html
@@ -1,5 +1,6 @@
 <div class="app">
   <kontor-header />
+  <app-navigation/>
   <main>
     <router-outlet />
   </main>
diff --git a/kontor-angular/src/app/app.component.ts b/kontor-angular/src/app/app.component.ts
index f8f2137..d4b268e 100644
--- a/kontor-angular/src/app/app.component.ts
+++ b/kontor-angular/src/app/app.component.ts
@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { KontorHeaderComponent } from "./kontor/header/header.component";
 import { KontorFooterComponent } from './kontor/footer/footer.component';
+import { NavigationComponent } from "./kontor/navigation/navigation.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent, NavigationComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/kontor-angular/src/app/app.routes.ts b/kontor-angular/src/app/app.routes.ts
index 7740668..07d6491 100644
--- a/kontor-angular/src/app/app.routes.ts
+++ b/kontor-angular/src/app/app.routes.ts
@@ -1,52 +1,26 @@
 import { Routes } from '@angular/router';
 import { KontorComponent } from './kontor/kontor.component';
 import { Login } from './common/login/login';
-import { ComicOverviewComponent } from './comic/comic-overview/comic-overview.component';
-import { MediaOverviewComponent } from './media/media-overview/media-overview.component';
-import { ArtistListComponent } from './comic/artist/artist-list/artist-list.component';
-import { ComicListComponent } from './comic/comic/comic-list/comic-list.component';
-import { MediaFileListComponent } from './media/media-file/media-file-list/media-file-list.component';
-import { MediaActorListComponent } from './media/media-actor/media-actor-list/media-actor-list.component';
-import { MediaVideoListComponent } from './media/media-video/media-video-list/media-video-list.component';
-import { PublisherListComponent } from './comic/publisher/publisher-list/publisher-list.component';
-import { TyscMenuComponent } from './tysc/tysc-menu/tysc-menu.component';
-import { TeamListComponent } from './tysc/team/team-list/team-list.component';
-import { VendorListComponent } from './tysc/vendor/vendor-list/vendor-list.component';
-import { CardsetListComponent } from './tysc/cardset/cardset-list/cardset-list.component';
-import { PositionListComponent } from './tysc/position/position-list/position-list.component';
-import { PlayerListComponent } from './tysc/player/player-list/player-list.component';
-import { SportListComponent } from './tysc/sport/sport-list/sport-list.component';
+import { ComicSectionComponent } from './kontor/comic/comic-section/comic-section.component';
+import { comicRoutes } from './kontor/comic/comic-section/comic-section.routes';
+import { TyscSectionComponent } from './kontor/tysc/tysc-section/tysc-section.component';
+import { tyscRoutes } from './kontor/tysc/tysc-section/tysc-section.routes';
+import { MediaSectionComponent } from './kontor/media/media-section/media-section.component';
+import { mediaRoutes } from './kontor/media/media-section/media-section.routes';
 
 export const routes: Routes = [
   { path: '', component: KontorComponent, },
   { path: 'login', component: Login, },
   {
-    path: 'comic', component: ComicOverviewComponent,
-    children: [
-      { path: '', component: ComicListComponent},
-      { path: 'comics', component: ComicListComponent},
-      { path: 'publisher', component: PublisherListComponent},
-      { path: 'artist', component: ArtistListComponent},
-    ],
+    path: 'comic', component: ComicSectionComponent,
+    children: comicRoutes,
   },
   {
-    path: 'tysc', component: TyscMenuComponent,
-    children: [
-      { path: '', component: SportListComponent},
-      { path: 'team', component: TeamListComponent},
-      { path: 'player', component: PlayerListComponent},
-      { path: 'position', component: PositionListComponent},
-      { path: 'cardset', component: CardsetListComponent},
-      { path: 'vendor', component: VendorListComponent},
-    ],
+    path: 'tysc', component: TyscSectionComponent,
+    children: tyscRoutes,
   },
   {
-    path: 'media', component: MediaOverviewComponent,
-    children: [
-      { path: '', component: MediaFileListComponent},
-      { path: 'mediafiles', component: MediaFileListComponent},
-      { path: 'mediaactors', component: MediaActorListComponent},
-      { path: 'mediavideos', component: MediaVideoListComponent},
-    ],
+    path: 'media', component: MediaSectionComponent,
+    children: mediaRoutes,
   },
 ];
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.model.ts b/kontor-angular/src/app/comic/artist/artist.model.ts
deleted file mode 100644
index 8529fa7..0000000
--- a/kontor-angular/src/app/comic/artist/artist.model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Artist {
-  id: string;
-  name: string;
-}
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.html b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.html
deleted file mode 100644
index 54c8b3c..0000000
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- <p>comic-overview works!</p>
-<div class="subnav">
-  <ul>
-    <li><a routerLink="/comic/comics" routerLinkActive>Comics</a></li>
-    <li><a routerLink="/comic/publisher">Publisher</a></li>
-    <li><a routerLink="/comic/artist">Artists</a></li>
-  </ul>
-  <h4>Child Routes Result</h4>
-  <router-outlet></router-outlet>
-</div> -->
-<div class="subnav">
-  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
-  <a routerLink="/comic/publisher" routerLinkActive="active">Publisher</a>
-  <a routerLink="/comic/artist" routerLinkActive="active">Artists</a>
-</div>
-<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts
deleted file mode 100644
index 32c15f4..0000000
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-comic-overview',
-  imports: [RouterLink, RouterOutlet, RouterLinkActive],
-  templateUrl: './comic-overview.component.html',
-  styleUrl: './comic-overview.component.css'
-})
-export class ComicOverviewComponent {
-
-}
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.html b/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.html
deleted file mode 100644
index 5beb054..0000000
--- a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>comic-list works!</p>
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.ts b/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.ts
deleted file mode 100644
index a09eb12..0000000
--- a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-comic-list',
-  imports: [],
-  templateUrl: './comic-list.component.html',
-  styleUrl: './comic-list.component.css'
-})
-export class ComicListComponent {
-
-}
diff --git a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.html b/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.html
deleted file mode 100644
index d533325..0000000
--- a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>publisher-list works!</p>
diff --git a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.ts b/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.ts
deleted file mode 100644
index 43daa01..0000000
--- a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-publisher-list',
-  imports: [],
-  templateUrl: './publisher-list.component.html',
-  styleUrl: './publisher-list.component.css'
-})
-export class PublisherListComponent {
-
-}
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/tysc/cardset/cardset-list/cardset-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/tysc/cardset/cardset-list/cardset-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.spec.ts
index c957e68..19737d5 100644
--- a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-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 { CardsetListComponent } from './cardset-list.component';
+import { ComicArtistComponent } from './comic-artist.component';
 
-describe('CardsetListComponent', () => {
-  let component: CardsetListComponent;
-  let fixture: ComponentFixture<CardsetListComponent>;
+describe('ComicArtistComponent', () => {
+  let component: ComicArtistComponent;
+  let fixture: ComponentFixture<ComicArtistComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CardsetListComponent]
+      imports: [ComicArtistComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(CardsetListComponent);
+    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..99a7938
--- /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.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 59%
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..44e22cc 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,17 @@
 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 { Artist } from '../comic.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 +35,4 @@ export class ArtistListComponent implements OnInit {
       subscription.unsubscribe();
     });
   }
-
 }
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 55%
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..a755f91 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, ArtistDetails } from "../comic.model";
 
 @Injectable({
   providedIn: 'root',
@@ -18,6 +18,10 @@ export class ArtistService {
     return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later-');
   }
 
+  loadArtistDetails(artistId: string | null) {
+    return this.fetchArtistDetails('http://127.0.0.1:8800/api/comics/artists/' + artistId, 'Someting went wrong fetching comic artists. Please try again later.');
+  }
+
   private fetchArtists(url: string, errorMessage: string) {
     return this.httpClient.get<Artist[]>(url).pipe(
       map((resData) => resData),
@@ -27,4 +31,17 @@ export class ArtistService {
       })
     );
   }
+
+  private fetchArtistDetails(url: string, errorMessage: string) {
+    return this.httpClient.get<ArtistDetails>(url).pipe(
+      map((resData) => {
+        console.log(resData);
+        return resData;
+      }),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
 }
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..4008df7
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.css
@@ -0,0 +1,16 @@
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+}
+section {
+    margin-left: 10px;
+    padding: 10px;
+    background-color: darkgrey;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+article {
+    margin-left: 10px;
+    padding: 5px;
+}
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..af4861d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html
@@ -0,0 +1,35 @@
+<div class="grid-container">
+  <div>
+    <app-comic-artists-list />
+  </div>
+  <div>
+    @if (artist()) {
+      <section>
+        <h2>{{ artist().name }}</h2>
+        <a href="{{ artist().weblink }}" style="background-color: green;">{{ artist().name }}</a>
+      </section>
+      <section>
+      @for (work of artist().comic_works; track work.worktype.id) {
+          <app-comic-worktype [worktype]="work.worktype"/>
+            @for (comic of work.comics; track comic.id) {
+              <article>
+                <app-comic-comic [comic]="comic"/>
+              </article>
+            }
+      }
+      </section>
+      <section>
+      @for (work of artist().issue_works; track work.worktype.id) {
+          <app-comic-worktype [worktype]="work.worktype"/>
+            @for (issue of work.issues; track issue.id) {
+              <article>
+                <app-comic-comic [comic]="issue.comic"/>
+              </article>
+            }
+      }
+      </section>
+    } @else {
+      <h2>Artist Details</h2>
+    }
+  </div>
+</div>
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.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/tysc/position/position-list/position-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.spec.ts
index 9034de6..99f3089 100644
--- a/kontor-angular/src/app/tysc/position/position-list/position-list.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 { PositionListComponent } from './position-list.component';
+import { ComicArtistsComponent } from './comic-artists.component';
 
-describe('PositionListComponent', () => {
-  let component: PositionListComponent;
-  let fixture: ComponentFixture<PositionListComponent>;
+describe('ComicArtistsComponent', () => {
+  let component: ComicArtistsComponent;
+  let fixture: ComponentFixture<ComicArtistsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PositionListComponent]
+      imports: [ComicArtistsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PositionListComponent);
+    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..9542c18
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts
@@ -0,0 +1,25 @@
+import { Component, inject, input } from '@angular/core';
+import { ComicArtistsListComponent } from '../comic-artists-list/comic-artists-list.component';
+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, ComicComicComponent, ComicWorktypeComponent],
+  templateUrl: './comic-artists.component.html',
+  styleUrl: './comic-artists.component.css'
+})
+export class ComicArtistsComponent {
+  artist = input.required<ArtistDetails>();
+}
+
+export const artistResolver: ResolveFn<ArtistDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const artistService = inject(ArtistService);
+  const artistId = route.paramMap.get('artistId');
+  const artistDetails = artistService.loadArtistDetails(artistId);
+  console.log(artistDetails);
+  return artistDetails;
+};
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.css b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.component.css
rename to kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html
new file mode 100644
index 0000000..ac9bb02
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'comics', comic().id]" routerLinkActive="active">
+    <span>{{ comic().title }}</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-comic/comic-comic.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-comic/comic-comic.component.spec.ts
index 4a58cbb..c390c8d 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistListComponent } from './artist-list.component';
+import { ComicComicComponent } from './comic-comic.component';
 
-describe('ArtistListComponent', () => {
-  let component: ArtistListComponent;
-  let fixture: ComponentFixture<ArtistListComponent>;
+describe('ComicComicComponent', () => {
+  let component: ComicComicComponent;
+  let fixture: ComponentFixture<ComicComicComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistListComponent]
+      imports: [ComicComicComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistListComponent);
+    fixture = TestBed.createComponent(ComicComicComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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
new file mode 100644
index 0000000..ad24f26
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Comic } from '../comic.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-comic',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-comic.component.html',
+  styleUrl: './comic-comic.component.css'
+})
+export class ComicComicComponent {
+  comic = input.required<Comic>();
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css
new file mode 100644
index 0000000..d95c44d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css
@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html
new file mode 100644
index 0000000..3c6d0ba
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html
@@ -0,0 +1,7 @@
+<ul>
+  @for (comic of comics(); track comic.id) {
+    <li>
+      <app-comic-comic [comic]="comic"/>
+    </li>
+  }
+</ul>
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts
new file mode 100644
index 0000000..a68ff6d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicComicsListComponent } from './comic-comics-list.component';
+
+describe('ComicComicsListComponent', () => {
+  let component: ComicComicsListComponent;
+  let fixture: ComponentFixture<ComicComicsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicComicsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicComicsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..057306c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
@@ -0,0 +1,37 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Comic } from '../comic.model';
+import { ComicService } from '../comic-comics/comic.service';
+import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+
+@Component({
+  selector: 'app-comic-comics-list',
+  imports: [ComicComicComponent],
+  templateUrl: './comic-comics-list.component.html',
+  styleUrl: './comic-comics-list.component.css'
+})
+export class ComicComicsListComponent implements OnInit {
+  comics = signal<Comic[] | undefined>(undefined);
+  isFetching = signal(false);
+  error = signal('');
+  private comicsService = inject(ComicService);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.isFetching.set(true);
+    const subscription = this.comicsService.loadComics().subscribe({
+      next: (comics) => {
+        this.comics.set(comics);
+      },
+      error: (error: Error) => {
+        this.error.set(error.message);
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      subscription.unsubscribe();
+    })
+  }
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.css b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.css
new file mode 100644
index 0000000..9ec0bbd
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.css
@@ -0,0 +1,29 @@
+.float-parent-element { 
+    width: 50%; 
+} 
+.float-child-element { 
+    float: left; 
+    width: 50%;
+    border-width: 10px;
+    border-color: black;
+}
+.float-details-element {
+    border: 1px solid darkgreen;
+    background-color: lightgreen;
+    margin: 5px;
+    padding: 1rem;
+    height: 100%;
+}
+
+.parent {
+  border: 1px solid black;
+  margin: 1rem;
+  padding: 2rem 2rem;
+  text-align: left;
+}
+.child {
+  display: inline-block;
+  border: 1px solid red;
+  padding: 1rem 1rem;
+  vertical-align: top;
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html
new file mode 100644
index 0000000..7f8a5ac
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html
@@ -0,0 +1,32 @@
+<div class="grid-container">
+  <div>
+    <app-comic-comics-list/>
+  </div>
+  <div>
+    @if (comic()) {
+      <section>
+        <h2>{{ comic().title }}</h2>
+        <a href="{{ comic().weblink }}" style="background-color: green;">{{ comic().title }}</a>
+        <app-comic-publisher [publisher]="comic().publisher" />
+      </section>
+      <section>
+      @for (issue of comic().issues; track issue.id) {
+          <app-comic-issue [issue]="issue"/>
+      }
+      </section>
+      <section>
+      @for (work of comic().works; track work.worktype.id) {
+          <app-comic-worktype [worktype]="work.worktype"/>
+            @for (artist of work.artists; track artist.id) {
+              <article>
+                <app-comic-artist [artist]="artist"/>
+              </article>
+            }
+      }
+      </section>
+    } @else {
+      <h2>Comic Details</h2>
+    }
+  </div>
+</div>
+
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.spec.ts
new file mode 100644
index 0000000..66a2c25
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicComicsComponent } from './comic-comics.component';
+
+describe('ComicComicsComponent', () => {
+  let component: ComicComicsComponent;
+  let fixture: ComponentFixture<ComicComicsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicComicsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicComicsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..983f1a1
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
@@ -0,0 +1,27 @@
+import { Component, inject, input } from '@angular/core';
+import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
+import { ComicDetails } from '../comic.model';
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
+import { ComicService } from './comic.service';
+import { ComicWorktypeComponent } from '../comic-worktype/comic-worktype.component';
+import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
+import { ComicIssueComponent } from '../comic-issue/comic-issue.component';
+import { ComicPublisherComponent } from "../comic-publisher/comic-publisher.component";
+
+@Component({
+  selector: 'app-comic-comics',
+  imports: [ComicComicsListComponent, ComicWorktypeComponent, ComicArtistComponent, ComicIssueComponent, ComicPublisherComponent],
+  templateUrl: './comic-comics.component.html',
+  styleUrl: './comic-comics.component.css'
+})
+export class ComicComicsComponent {
+  comic = input.required<ComicDetails>();
+}
+
+export const comicResolver: ResolveFn<ComicDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const comicService = inject(ComicService);
+  const comicId = route.paramMap.get('comicId');
+  const comicDetails = comicService.loadComicDetails(comicId);
+  console.log(comicDetails);
+  return comicDetails;
+};
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
new file mode 100644
index 0000000..76a8d35
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
@@ -0,0 +1,45 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
+import { Comic, ComicDetails } from "../comic.model";
+import { catchError, map, throwError } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ComicService {
+  private httpClient = inject(HttpClient);
+  private comics = signal<Comic[]>([]);
+
+  loadedComics = this.comics.asReadonly();
+
+  loadComics() {
+    return this.fetchComics('http://127.0.0.1:8800/api/comics/comics', 'Someting went wrong fetching comics. Please try again later.');
+  }
+
+  loadComicDetails(comicId: string | null) {
+    return this.fetchComicDetails('http://127.0.0.1:8800/api/comics/comics/' + comicId, 'Someting went wrong fetching comics. Please try again later.');
+  }
+
+  private fetchComicDetails(url: string, errorMessage: string) {
+    return this.httpClient.get<ComicDetails>(url).pipe(
+      map((resData) => {
+        console.log(resData);
+        return resData;
+      }),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+
+  private fetchComics(url: string, errorMessage: string) {
+    return this.httpClient.get<Comic[]>(url).pipe(
+      map((resData) => resData),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+}
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.css b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/comic/comic-list/comic-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.html b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.html
new file mode 100644
index 0000000..a96f8c1
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'issue', issue().id]" routerLinkActive="active">
+    <span>{{ issue().issue_number }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.spec.ts
index 0d08ee9..51c1fb0 100644
--- a/kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PlayerListComponent } from './player-list.component';
+import { ComicIssueComponent } from './comic-issue.component';
 
-describe('PlayerListComponent', () => {
-  let component: PlayerListComponent;
-  let fixture: ComponentFixture<PlayerListComponent>;
+describe('ComicIssueComponent', () => {
+  let component: ComicIssueComponent;
+  let fixture: ComponentFixture<ComicIssueComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PlayerListComponent]
+      imports: [ComicIssueComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PlayerListComponent);
+    fixture = TestBed.createComponent(ComicIssueComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.ts b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.ts
new file mode 100644
index 0000000..ec004e6
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-issue/comic-issue.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Issue } from '../comic.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-issue',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-issue.component.html',
+  styleUrl: './comic-issue.component.css'
+})
+export class ComicIssueComponent {
+  issue = input.required<Issue>();
+}
diff --git a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.css b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.html b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.html
new file mode 100644
index 0000000..87b4fd0
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.html
@@ -0,0 +1,5 @@
+<div class="subnav">
+  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
+  <a routerLink="/comic/publisher" routerLinkActive="active">Publisher</a>
+  <a routerLink="/comic/artist" routerLinkActive="active">Artists</a>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.spec.ts
new file mode 100644
index 0000000..faab5bb
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicNavigationComponent } from './comic-navigation.component';
+
+describe('ComicNavigationComponent', () => {
+  let component: ComicNavigationComponent;
+  let fixture: ComponentFixture<ComicNavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicNavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.ts b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.ts
new file mode 100644
index 0000000..62dce29
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-navigation/comic-navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-navigation.component.html',
+  styleUrl: './comic-navigation.component.css'
+})
+export class ComicNavigationComponent {
+
+}
diff --git a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.css b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.css
similarity index 100%
rename from kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.html b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.html
new file mode 100644
index 0000000..e964901
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'publisher', publisher().id]" routerLinkActive="active">
+    <span>{{ publisher().name }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.spec.ts
new file mode 100644
index 0000000..10036f5
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicPublisherComponent } from './comic-publisher.component';
+
+describe('ComicPublisherComponent', () => {
+  let component: ComicPublisherComponent;
+  let fixture: ComponentFixture<ComicPublisherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicPublisherComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicPublisherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.ts b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.ts
new file mode 100644
index 0000000..33d903b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publisher/comic-publisher.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Publisher } from '../comic.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-publisher',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-publisher.component.html',
+  styleUrl: './comic-publisher.component.css'
+})
+export class ComicPublisherComponent {
+  publisher = input.required<Publisher>();
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.css b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.css
new file mode 100644
index 0000000..d95c44d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.css
@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.html b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.html
new file mode 100644
index 0000000..6592f11
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.html
@@ -0,0 +1,7 @@
+<ul>
+  @for (publisher of publishers(); track publisher.id) {
+  <li>
+    <app-comic-publisher [publisher]="publisher" />
+  </li>
+  }
+</ul>
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.spec.ts
new file mode 100644
index 0000000..c83a6fe
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicPublishersListComponent } from './comic-publishers-list.component';
+
+describe('ComicPublishersListComponent', () => {
+  let component: ComicPublishersListComponent;
+  let fixture: ComponentFixture<ComicPublishersListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicPublishersListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicPublishersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.ts b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.ts
new file mode 100644
index 0000000..6f47536
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers-list/comic-publishers-list.component.ts
@@ -0,0 +1,37 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Publisher } from '../comic.model';
+import { PublisherService } from '../comic-publishers/publisher.service';
+import { ComicPublisherComponent } from "../comic-publisher/comic-publisher.component";
+
+@Component({
+  selector: 'app-comic-publishers-list',
+  imports: [ComicPublisherComponent],
+  templateUrl: './comic-publishers-list.component.html',
+  styleUrl: './comic-publishers-list.component.css'
+})
+export class ComicPublishersListComponent implements OnInit {
+  publishers = signal<Publisher[]>([]);
+  isFetching = signal(false);
+  error = signal('');
+  private publisherService = inject(PublisherService);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.isFetching.set(true);
+    const subscription = this.publisherService.loadPublishers().subscribe({
+      next: (publishers) => {
+        this.publishers.set(publishers);
+      },
+      error: (error: Error) => {
+        this.error.set(error.message);
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      },
+    });
+
+    this.destroyRef.onDestroy(() => {
+      subscription.unsubscribe();
+    });
+  }
+}
diff --git a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.css b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.css
similarity index 100%
rename from kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.html b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.html
new file mode 100644
index 0000000..3507aff
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.html
@@ -0,0 +1,14 @@
+<div class="grid-container">
+  <div>
+    <app-comic-publishers-list />
+  </div>
+  <div>
+    @if (publisher()) {
+    <section>
+      <h2>{{ publisher().name }}</h2>
+    </section>
+    } @else {
+      <h2>Publisher Details</h2>
+    }
+  </div>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.spec.ts
new file mode 100644
index 0000000..184f6e7
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicPublishersComponent } from './comic-publishers.component';
+
+describe('ComicPublishersComponent', () => {
+  let component: ComicPublishersComponent;
+  let fixture: ComponentFixture<ComicPublishersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicPublishersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicPublishersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.ts b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.ts
new file mode 100644
index 0000000..068d81c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers/comic-publishers.component.ts
@@ -0,0 +1,23 @@
+import { Component, inject, input } from '@angular/core';
+import { Publisher, PublisherDetails } from '../comic.model';
+import { ComicPublishersListComponent } from '../comic-publishers-list/comic-publishers-list.component';
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
+import { PublisherService } from './publisher.service';
+
+@Component({
+  selector: 'app-comic-publishers',
+  imports: [ComicPublishersListComponent],
+  templateUrl: './comic-publishers.component.html',
+  styleUrl: './comic-publishers.component.css'
+})
+export class ComicPublishersComponent {
+  publisher = input.required<Publisher>();
+}
+
+export const publisherResolver: ResolveFn<PublisherDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const publisherService = inject(PublisherService);
+  const publisherId = route.paramMap.get('publisherId');
+  const publisherDetails = publisherService.loadPublisherDetails(publisherId);
+  console.log(publisherDetails);
+  return publisherDetails;
+};
diff --git a/kontor-angular/src/app/kontor/comic/comic-publishers/publisher.service.ts b/kontor-angular/src/app/kontor/comic/comic-publishers/publisher.service.ts
new file mode 100644
index 0000000..7ff0bff
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-publishers/publisher.service.ts
@@ -0,0 +1,47 @@
+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 { Publisher, PublisherDetails } from "../comic.model";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PublisherService {
+  private errorService = inject(ErrorService);
+  private httpClient = inject(HttpClient);
+  private publishers = signal<Publisher[]>([]);
+
+  loadedPublishers = this.publishers.asReadonly();
+
+  loadPublishers() {
+    return this.fetchPublishers('http://127.0.0.1:8800/api/comics/publishers', 'Someting went wrong fetching artists. Please try again later-');
+  }
+
+  loadPublisherDetails(artistId: string | null) {
+    return this.fetchPublisherDetails('http://127.0.0.1:8800/api/comics/publishers/' + artistId, 'Someting went wrong fetching comic artists. Please try again later.');
+  }
+
+  private fetchPublishers(url: string, errorMessage: string) {
+    return this.httpClient.get<Publisher[]>(url).pipe(
+      map((resData) => resData),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+
+  private fetchPublisherDetails(url: string, errorMessage: string) {
+    return this.httpClient.get<PublisherDetails>(url).pipe(
+      map((resData) => {
+        console.log(resData);
+        return resData;
+      }),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+}
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.css b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.css
similarity index 100%
rename from kontor-angular/src/app/media/media-overview/media-overview.component.css
rename to kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.html b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.html
new file mode 100644
index 0000000..570e4d6
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.html
@@ -0,0 +1,2 @@
+<app-comic-navigation />
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.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-section/comic-section.component.spec.ts
index cf1fa88..9acbb1a 100644
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistDetailComponent } from './artist-detail.component';
+import { ComicSectionComponent } from './comic-section.component';
 
-describe('ArtistDetailComponent', () => {
-  let component: ArtistDetailComponent;
-  let fixture: ComponentFixture<ArtistDetailComponent>;
+describe('ComicSectionComponent', () => {
+  let component: ComicSectionComponent;
+  let fixture: ComponentFixture<ComicSectionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistDetailComponent]
+      imports: [ComicSectionComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistDetailComponent);
+    fixture = TestBed.createComponent(ComicSectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.ts b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.ts
new file mode 100644
index 0000000..76c2cef
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ComicNavigationComponent } from "../comic-navigation/comic-navigation.component";
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-section',
+  imports: [ComicNavigationComponent, RouterOutlet],
+  templateUrl: './comic-section.component.html',
+  styleUrl: './comic-section.component.css'
+})
+export class ComicSectionComponent {
+
+}
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
new file mode 100644
index 0000000..cc57991
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
@@ -0,0 +1,40 @@
+import { Routes } from "@angular/router";
+import { artistResolver, ComicArtistsComponent } from "../comic-artists/comic-artists.component";
+import { ComicPublishersComponent, publisherResolver } from './../comic-publishers/comic-publishers.component';
+import { ComicComicsComponent, comicResolver } from "../comic-comics/comic-comics.component";
+
+export const comicRoutes: Routes = [
+    {
+        path: 'comics',
+        component: ComicComicsComponent
+    },
+    {
+      path: 'comics/:comicId',
+      component: ComicComicsComponent,
+      resolve: {
+        comic: comicResolver
+      }
+    },
+    {
+        path: 'publisher',
+        component: ComicPublishersComponent
+    },
+    {
+        path: 'publisher/:publisherId',
+        component: ComicPublishersComponent,
+        resolve: {
+          publisher: publisherResolver
+        }
+    },
+    {
+        path: 'artist',
+        component: ComicArtistsComponent
+    },
+    {
+        path: 'artist/:artistId',
+        component: ComicArtistsComponent,
+        resolve: {
+            artist: artistResolver
+        }
+    },
+];
diff --git a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.css b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.css
similarity index 100%
rename from kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.css
rename to kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.css
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/comic/publisher/publisher-list/publisher-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts
index 00f7266..88c4876 100644
--- a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PublisherListComponent } from './publisher-list.component';
+import { ComicWorktypeComponent } from './comic-worktype.component';
 
-describe('PublisherListComponent', () => {
-  let component: PublisherListComponent;
-  let fixture: ComponentFixture<PublisherListComponent>;
+describe('ComicWorktypeComponent', () => {
+  let component: ComicWorktypeComponent;
+  let fixture: ComponentFixture<ComicWorktypeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PublisherListComponent]
+      imports: [ComicWorktypeComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PublisherListComponent);
+    fixture = TestBed.createComponent(ComicWorktypeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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.model.ts b/kontor-angular/src/app/kontor/comic/comic.model.ts
new file mode 100644
index 0000000..16ec960
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic.model.ts
@@ -0,0 +1,78 @@
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export interface Worktype {
+  id: string;
+  name: string;
+}
+
+export interface Publisher {
+  id: string;
+  name: string;
+}
+
+export interface PublisherDetails {
+  id: string;
+  name: string;
+
+}
+export interface Comic {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export interface Volume {
+  id: string;
+  name: string;
+}
+
+export interface Issue {
+  id: string;
+  issue_number: string;
+  in_stock: boolean;
+  is_read: boolean;
+  comic: Comic;
+  volume: Volume;
+}
+
+export interface ComicWork {
+  worktype: string;
+}
+
+export interface ComicWorktypeArtists {
+  worktype: Worktype;
+  artists: Artist[];
+}
+
+export interface ComicDetails {
+  id: string;
+  created: string;
+  title: string;
+  completed: boolean;
+  current_order: boolean;
+  weblink: string;
+  publisher: Publisher;
+  issues: Issue[];
+  volumes: Volume[];
+  works: ComicWorktypeArtists[];
+}
+
+export interface ArtistWorktypeComics {
+  worktype: Worktype;
+  comics: Comic[];
+}
+
+export interface ArtistWorktypeIssues {
+  worktype: Worktype;
+  issues: Issue[];
+}
+export interface ArtistDetails {
+  id: string;
+  name: string;
+  weblink: string;
+  comic_works: ArtistWorktypeComics[];
+  issue_works: ArtistWorktypeIssues[];
+}
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.css b/kontor-angular/src/app/kontor/footer/footer.component.css
index 1d66ed7..1a660c1 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.css
+++ b/kontor-angular/src/app/kontor/footer/footer.component.css
@@ -1,7 +1,12 @@
 /* Footer */
-a {
+.footer {
   padding: 20px;
   text-align: center;
-  background: #ddd;
-  margin-top: 20px;
+  background-color: lightblue;
+  position: sticky;
+  bottom: 0px;
+}
+
+.footer a {
+  font-size: 20px;
 }
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.html b/kontor-angular/src/app/kontor/footer/footer.component.html
index 1f376c3..912cc1d 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.html
+++ b/kontor-angular/src/app/kontor/footer/footer.component.html
@@ -1,3 +1,5 @@
-<div>
-  <a href="{{ footerUrl }}">{{ footerLink }}</a>
-</div>
+<!-- <div> -->
+  <footer class="footer">
+    <a href="{{ footerUrl }}">{{ footerLink }}</a>
+  </footer>
+<!-- </div> -->
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.ts b/kontor-angular/src/app/kontor/footer/footer.component.ts
index 8262425..7ded191 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.ts
+++ b/kontor-angular/src/app/kontor/footer/footer.component.ts
@@ -9,5 +9,4 @@ import { Component } from '@angular/core';
 export class KontorFooterComponent {
   footerUrl = "https://kontor.thpeetz.de";
   footerLink = "kontor.thpeetz.de";
-
 }
diff --git a/kontor-angular/src/app/kontor/header/header.component.html b/kontor-angular/src/app/kontor/header/header.component.html
index 9c1f7a2..3191f24 100644
--- a/kontor-angular/src/app/kontor/header/header.component.html
+++ b/kontor-angular/src/app/kontor/header/header.component.html
@@ -2,18 +2,4 @@
   <section>
     <h1>{{ title() }}</h1>
   </section>
-  <!-- <nav>
-    <ul>
-      <li><a routerLink="/">Kontor</a></li>
-      <li><a routerLink="/comic">Comics</a></li>
-      <li><a routerLink="/tysc">TradeYourSportsCards</a></li>
-      <li><a routerLink="/media">Media</a></li>
-    </ul>
-  </nav> -->
 </header>
-<div class="topnav">
-  <a routerLink="/" routerLinkActive="active">Kontor</a>
-  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
-  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
-  <a routerLink="/media"  routerLinkActive="active">Media</a>
-</div>
diff --git a/kontor-angular/src/app/kontor/header/header.component.ts b/kontor-angular/src/app/kontor/header/header.component.ts
index 8808cc8..3b8a262 100644
--- a/kontor-angular/src/app/kontor/header/header.component.ts
+++ b/kontor-angular/src/app/kontor/header/header.component.ts
@@ -1,9 +1,8 @@
 import { Component, signal } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'kontor-header',
-  imports: [RouterLink, RouterLinkActive],
+  imports: [],
   templateUrl: './header.component.html',
   styleUrl: './header.component.css'
 })
diff --git a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.css b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.css
rename to kontor-angular/src/app/kontor/media/media-actors/media-actors.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.html b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.html
new file mode 100644
index 0000000..3904b79
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.html
@@ -0,0 +1 @@
+<p>media-actors works!</p>
diff --git a/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.spec.ts b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.spec.ts
new file mode 100644
index 0000000..1448ea4
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaActorsComponent } from './media-actors.component';
+
+describe('MediaActorsComponent', () => {
+  let component: MediaActorsComponent;
+  let fixture: ComponentFixture<MediaActorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaActorsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaActorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.ts b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.ts
new file mode 100644
index 0000000..8fbb7f8
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-actors',
+  imports: [],
+  templateUrl: './media-actors.component.html',
+  styleUrl: './media-actors.component.css'
+})
+export class MediaActorsComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/player/player-list/player-list.component.css b/kontor-angular/src/app/kontor/media/media-file/media-file.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/player/player-list/player-list.component.css
rename to kontor-angular/src/app/kontor/media/media-file/media-file.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-file/media-file.component.html b/kontor-angular/src/app/kontor/media/media-file/media-file.component.html
new file mode 100644
index 0000000..b735566
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-file/media-file.component.html
@@ -0,0 +1,17 @@
+<div>
+  <article>
+    <a [routerLink]="['/', 'media', 'file', mediafile().id]" routerLinkActive="active">
+      <span>{{ mediafile().title }}</span>
+    </a>
+    <a href="{{ mediafile().url }}"> &gt;&gt;</a>
+    <p>
+      <span>
+        @if (mediafile().review) {
+          Review<img class="images" src="tick.png" />
+        } @else {
+          Review<img class="images" src="cross.png" />
+        }
+      </span>
+    </p>
+  </article>
+</div>
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts b/kontor-angular/src/app/kontor/media/media-file/media-file.component.spec.ts
similarity index 53%
rename from kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts
rename to kontor-angular/src/app/kontor/media/media-file/media-file.component.spec.ts
index 7a1c646..4050101 100644
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-file/media-file.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SportListComponent } from './sport-list.component';
+import { MediaFileComponent } from './media-file.component';
 
-describe('SportListComponent', () => {
-  let component: SportListComponent;
-  let fixture: ComponentFixture<SportListComponent>;
+describe('MediaFileComponent', () => {
+  let component: MediaFileComponent;
+  let fixture: ComponentFixture<MediaFileComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SportListComponent]
+      imports: [MediaFileComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SportListComponent);
+    fixture = TestBed.createComponent(MediaFileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/media/media-file/media-file.component.ts b/kontor-angular/src/app/kontor/media/media-file/media-file.component.ts
new file mode 100644
index 0000000..924844b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-file/media-file.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { MediaFile } from '../media-files/media-file.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-media-file',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './media-file.component.html',
+  styleUrl: './media-file.component.css'
+})
+export class MediaFileComponent {
+  mediafile = input.required<MediaFile>();
+}
diff --git a/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.css b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.css
new file mode 100644
index 0000000..d95c44d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.css
@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}
diff --git a/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.html b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.html
new file mode 100644
index 0000000..1688d6b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.html
@@ -0,0 +1,7 @@
+<ul>
+    @for (mediafile of files(); track mediafile.id) {
+        <li>
+            <app-media-file [mediafile]="mediafile" />
+        </li>
+    }
+</ul>
\ No newline at end of file
diff --git a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.spec.ts
similarity index 51%
rename from kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts
rename to kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.spec.ts
index 1eae192..a97b136 100644
--- a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MediaActorListComponent } from './media-actor-list.component';
+import { MediaFilesListComponent } from './media-files-list.component';
 
-describe('MediaActorListComponent', () => {
-  let component: MediaActorListComponent;
-  let fixture: ComponentFixture<MediaActorListComponent>;
+describe('MediaFilesListComponent', () => {
+  let component: MediaFilesListComponent;
+  let fixture: ComponentFixture<MediaFilesListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MediaActorListComponent]
+      imports: [MediaFilesListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MediaActorListComponent);
+    fixture = TestBed.createComponent(MediaFilesListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.ts b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.ts
new file mode 100644
index 0000000..eac3322
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files-list/media-files-list.component.ts
@@ -0,0 +1,37 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { MediaFileComponent } from '../media-file/media-file.component';
+import { MediaFileService } from '../media-files/media-file.service';
+import { MediaFile } from '../media-files/media-file.model';
+
+@Component({
+  selector: 'app-media-files-list',
+  imports: [MediaFileComponent],
+  templateUrl: './media-files-list.component.html',
+  styleUrl: './media-files-list.component.css'
+})
+export class MediaFilesListComponent implements OnInit {
+  files = signal<MediaFile[]>([]);
+  isFetching = signal(false);
+  error = signal('');
+  private mediaFileService = inject(MediaFileService);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.isFetching.set(true);
+    const subscription = this.mediaFileService.loadFiles().subscribe({
+      next: (files) => {
+        this.files.set(files);
+      },
+      error: (error: Error) => {
+        this.error.set(error.message);
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      },
+    });
+
+    this.destroyRef.onDestroy(() => {
+      subscription.unsubscribe();
+    });
+  }
+}
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-file.model.ts b/kontor-angular/src/app/kontor/media/media-files/media-file.model.ts
new file mode 100644
index 0000000..9418003
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-file.model.ts
@@ -0,0 +1,11 @@
+import { StreamingResourceOptions } from "@angular/core";
+
+export interface MediaFile {
+    id: string;
+    title: string;
+    file_name: string;
+    cloud_link: string;
+    url: string;
+    review: boolean;
+    should_download: boolean;
+}
\ No newline at end of file
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-file.service.ts b/kontor-angular/src/app/kontor/media/media-files/media-file.service.ts
new file mode 100644
index 0000000..96e24e7
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-file.service.ts
@@ -0,0 +1,30 @@
+import { inject, Injectable, signal } from "@angular/core";
+import { ErrorService } from "../../../shared/error.service";
+import { HttpClient } from "@angular/common/http";
+import { MediaFile } from "./media-file.model";
+import { catchError, map, throwError } from "rxjs";
+
+@Injectable({
+    providedIn: 'root',
+})
+export class MediaFileService {
+    private errorService = inject(ErrorService);
+    private httpClient = inject(HttpClient);
+    private files = signal<MediaFile[]>([]);
+
+    loadedFiles = this.files.asReadonly();
+
+    loadFiles() {
+        return this.fetchMediaFiles('http://127.0.0.1:8800/api/media/files', 'Someting went wrong fetching artists. Please try again later-');
+    }
+
+    private fetchMediaFiles(url: string, errorMessage: string) {
+    return this.httpClient.get<MediaFile[]>(url).pipe(
+           map((resData) => resData),
+           catchError((error) => {
+             console.log(error);
+             return throwError(() => new Error(errorMessage));
+           })
+         );        
+    }
+}
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-files.component.css b/kontor-angular/src/app/kontor/media/media-files/media-files.component.css
new file mode 100644
index 0000000..a997f58
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.css
@@ -0,0 +1,5 @@
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+}
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-files.component.html b/kontor-angular/src/app/kontor/media/media-files/media-files.component.html
new file mode 100644
index 0000000..ac8ed9f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.html
@@ -0,0 +1,7 @@
+<div class="grid-container">
+    <div>
+        <app-media-files-list />
+    </div>
+    <div>
+    </div>
+</div>
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts b/kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts
rename to kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts
index 6a5109e..c8f1c9f 100644
--- a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicListComponent } from './comic-list.component';
+import { MediaFilesComponent } from './media-files.component';
 
-describe('ComicListComponent', () => {
-  let component: ComicListComponent;
-  let fixture: ComponentFixture<ComicListComponent>;
+describe('MediaFilesComponent', () => {
+  let component: MediaFilesComponent;
+  let fixture: ComponentFixture<MediaFilesComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComicListComponent]
+      imports: [MediaFilesComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ComicListComponent);
+    fixture = TestBed.createComponent(MediaFilesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-files.component.ts b/kontor-angular/src/app/kontor/media/media-files/media-files.component.ts
new file mode 100644
index 0000000..06fbc0e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { MediaFilesListComponent } from '../media-files-list/media-files-list.component';
+
+@Component({
+  selector: 'app-media-files',
+  imports: [MediaFilesListComponent],
+  templateUrl: './media-files.component.html',
+  styleUrl: './media-files.component.css'
+})
+export class MediaFilesComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.component.css b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/position/position-list/position-list.component.css
rename to kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.html b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.html
new file mode 100644
index 0000000..846dd50
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.html
@@ -0,0 +1,5 @@
+<div class="subnav">
+  <a routerLink="/media/file" routerLinkActive="active">MediaFiles</a>
+  <a routerLink="/media/actor" routerLinkActive="active">MediaActors</a>
+  <a routerLink="/media/video" routerLinkActive="active">MediaVideos</a>
+</div>
diff --git a/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts
new file mode 100644
index 0000000..e1c7fdf
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaNavigationComponent } from './media-navigation.component';
+
+describe('MediaNavigationComponent', () => {
+  let component: MediaNavigationComponent;
+  let fixture: ComponentFixture<MediaNavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaNavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.ts b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.ts
new file mode 100644
index 0000000..673afd9
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-media-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './media-navigation.component.html',
+  styleUrl: './media-navigation.component.css'
+})
+export class MediaNavigationComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.css b/kontor-angular/src/app/kontor/media/media-section/media-section.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.css
rename to kontor-angular/src/app/kontor/media/media-section/media-section.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.component.html b/kontor-angular/src/app/kontor/media/media-section/media-section.component.html
new file mode 100644
index 0000000..d31e086
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.html
@@ -0,0 +1,2 @@
+<app-media-navigation/>
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts
new file mode 100644
index 0000000..fa766d5
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaSectionComponent } from './media-section.component';
+
+describe('MediaSectionComponent', () => {
+  let component: MediaSectionComponent;
+  let fixture: ComponentFixture<MediaSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaSectionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts
new file mode 100644
index 0000000..a4c17d3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MediaNavigationComponent } from "../media-navigation/media-navigation.component";
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-media-section',
+  imports: [MediaNavigationComponent, RouterOutlet],
+  templateUrl: './media-section.component.html',
+  styleUrl: './media-section.component.css'
+})
+export class MediaSectionComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts
new file mode 100644
index 0000000..8214e84
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts
@@ -0,0 +1,31 @@
+import { Routes } from "@angular/router";
+import { MediaFilesComponent } from './../media-files/media-files.component';
+import { MediaActorsComponent } from '../media-actors/media-actors.component';
+import { MediaVideosComponent } from '../media-videos/media-videos.component';
+
+export const mediaRoutes: Routes = [
+    { 
+        path: 'file', 
+        component: MediaFilesComponent
+    },
+    {
+        path: 'file/:fileId',
+        component: MediaFilesComponent,
+    },
+    { 
+        path: 'actor', 
+        component: MediaActorsComponent
+    },
+    {
+        path: 'actor/:actorId',
+        component: MediaActorsComponent,
+    },
+    { 
+        path: 'video', 
+        component: MediaVideosComponent
+    },
+    {
+        path: 'video/:videoId',
+        component: MediaVideosComponent,
+    },
+];
diff --git a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.css b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.css
rename to kontor-angular/src/app/kontor/media/media-videos/media-videos.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.html b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.html
new file mode 100644
index 0000000..2aaafcb
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.html
@@ -0,0 +1 @@
+<p>media-videos works!</p>
diff --git a/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.spec.ts b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.spec.ts
new file mode 100644
index 0000000..ccde24c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaVideosComponent } from './media-videos.component';
+
+describe('MediaVideosComponent', () => {
+  let component: MediaVideosComponent;
+  let fixture: ComponentFixture<MediaVideosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaVideosComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.ts b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.ts
new file mode 100644
index 0000000..5b1f52e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-videos/media-videos.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-videos',
+  imports: [],
+  templateUrl: './media-videos.component.html',
+  styleUrl: './media-videos.component.css'
+})
+export class MediaVideosComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-list.component.css b/kontor-angular/src/app/kontor/navigation/navigation.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/team/team-list/team-list.component.css
rename to kontor-angular/src/app/kontor/navigation/navigation.component.css
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.html b/kontor-angular/src/app/kontor/navigation/navigation.component.html
new file mode 100644
index 0000000..f7c8699
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.html
@@ -0,0 +1,6 @@
+<div class="topnav">
+  <a routerLink="/" >Kontor</a>
+  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
+  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
+  <a routerLink="/media"  routerLinkActive="active">Media</a>
+</div>
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts b/kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts
similarity index 53%
rename from kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts
rename to kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts
index b8a8711..a161d31 100644
--- a/kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TeamListComponent } from './team-list.component';
+import { NavigationComponent } from './navigation.component';
 
-describe('TeamListComponent', () => {
-  let component: TeamListComponent;
-  let fixture: ComponentFixture<TeamListComponent>;
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TeamListComponent]
+      imports: [NavigationComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TeamListComponent);
+    fixture = TestBed.createComponent(NavigationComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.ts b/kontor-angular/src/app/kontor/navigation/navigation.component.ts
new file mode 100644
index 0000000..c5feb48
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './navigation.component.html',
+  styleUrl: './navigation.component.css'
+})
+export class NavigationComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.css b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.css
rename to kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.css
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.html b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.html
new file mode 100644
index 0000000..72cccd1
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.html
@@ -0,0 +1 @@
+<p>tysc-cardsets works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.spec.ts
new file mode 100644
index 0000000..b01812b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscCardsetsComponent } from './tysc-cardsets.component';
+
+describe('TyscCardsetsComponent', () => {
+  let component: TyscCardsetsComponent;
+  let fixture: ComponentFixture<TyscCardsetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscCardsetsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscCardsetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.ts
new file mode 100644
index 0000000..fc3bc35
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-cardsets/tysc-cardsets.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-cardsets',
+  imports: [],
+  templateUrl: './tysc-cardsets.component.html',
+  styleUrl: './tysc-cardsets.component.css'
+})
+export class TyscCardsetsComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.css b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.css
similarity index 100%
rename from kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.css
rename to kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.css
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html
similarity index 74%
rename from kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html
rename to kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html
index 7f5e8d2..1baa47f 100644
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html
+++ b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html
@@ -2,7 +2,6 @@
   <a routerLink="/tysc/team" routerLinkActive="active">Team</a>
   <a routerLink="/tysc/player" routerLinkActive="active">Player</a>
   <a routerLink="/tysc/position" routerLinkActive="active">Position</a>
-  <a routerLink="/tysc/cadset" routerLinkActive="active">CardSets</a>
+  <a routerLink="/tysc/cardset" routerLinkActive="active">CardSets</a>
   <a routerLink="/tysc/vendor" routerLinkActive="active">Vendor</a>
 </div>
-<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.spec.ts
new file mode 100644
index 0000000..363a185
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscNavigationComponent } from './tysc-navigation.component';
+
+describe('TyscNavigationComponent', () => {
+  let component: TyscNavigationComponent;
+  let fixture: ComponentFixture<TyscNavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscNavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.ts
new file mode 100644
index 0000000..0a8cc16
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-tysc-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './tysc-navigation.component.html',
+  styleUrl: './tysc-navigation.component.css'
+})
+export class TyscNavigationComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.css b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.html b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.html
new file mode 100644
index 0000000..e5c03a6
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.html
@@ -0,0 +1 @@
+<p>tysc-players works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.spec.ts
new file mode 100644
index 0000000..eb0ac63
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscPlayersComponent } from './tysc-players.component';
+
+describe('TyscPlayersComponent', () => {
+  let component: TyscPlayersComponent;
+  let fixture: ComponentFixture<TyscPlayersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscPlayersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscPlayersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.ts
new file mode 100644
index 0000000..230670e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-players/tysc-players.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-players',
+  imports: [],
+  templateUrl: './tysc-players.component.html',
+  styleUrl: './tysc-players.component.css'
+})
+export class TyscPlayersComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.css b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.html b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.html
new file mode 100644
index 0000000..1348c4f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.html
@@ -0,0 +1 @@
+<p>tysc-positions works!</p>
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.spec.ts
similarity index 52%
rename from kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.spec.ts
index ccaf8b5..97425a7 100644
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
+++ b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MediaOverviewComponent } from './media-overview.component';
+import { TyscPositionsComponent } from './tysc-positions.component';
 
-describe('MediaOverview', () => {
-  let component: MediaOverviewComponent;
-  let fixture: ComponentFixture<MediaOverviewComponent>;
+describe('TyscPositionsComponent', () => {
+  let component: TyscPositionsComponent;
+  let fixture: ComponentFixture<TyscPositionsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MediaOverviewComponent]
+      imports: [TyscPositionsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MediaOverviewComponent);
+    fixture = TestBed.createComponent(TyscPositionsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.ts
new file mode 100644
index 0000000..c77f1d3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-positions/tysc-positions.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-positions',
+  imports: [],
+  templateUrl: './tysc-positions.component.html',
+  styleUrl: './tysc-positions.component.css'
+})
+export class TyscPositionsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.css b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.html b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.html
new file mode 100644
index 0000000..4b8a158
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.html
@@ -0,0 +1,3 @@
+<app-tysc-navigation/>
+<app-tysc-sports/>
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.spec.ts
new file mode 100644
index 0000000..c8c34ec
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscSectionComponent } from './tysc-section.component';
+
+describe('TyscSectionComponent', () => {
+  let component: TyscSectionComponent;
+  let fixture: ComponentFixture<TyscSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscSectionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.ts
new file mode 100644
index 0000000..bb33bc2
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { TyscNavigationComponent } from "../tysc-navigation/tysc-navigation.component";
+import { RouterOutlet } from '@angular/router';
+import { TyscSportsComponent } from "../tysc-sports/tysc-sports.component";
+
+@Component({
+  selector: 'app-tysc-section',
+  imports: [TyscNavigationComponent, RouterOutlet, TyscSportsComponent],
+  templateUrl: './tysc-section.component.html',
+  styleUrl: './tysc-section.component.css'
+})
+export class TyscSectionComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.routes.ts b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.routes.ts
new file mode 100644
index 0000000..6f2a995
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section/tysc-section.routes.ts
@@ -0,0 +1,29 @@
+import { Routes } from "@angular/router";
+import { TyscTeamsComponent } from "../tysc-teams/tysc-teams.component";
+import { TyscPlayersComponent } from "../tysc-players/tysc-players.component";
+import { TyscPositionsComponent } from "../tysc-positions/tysc-positions.component";
+import { TyscVendorsComponent } from "../tysc-vendors/tysc-vendors.component";
+import { TyscCardsetsComponent } from "../tysc-cardsets/tysc-cardsets.component";
+
+export const tyscRoutes: Routes = [
+    { 
+        path: 'team', 
+        component: TyscTeamsComponent
+    },
+    { 
+        path: 'player', 
+        component: TyscPlayersComponent
+    },
+    { 
+        path: 'position', 
+        component: TyscPositionsComponent
+    },
+    { 
+        path: 'cardset', 
+        component: TyscCardsetsComponent
+    },
+    { 
+        path: 'vendor', 
+        component: TyscVendorsComponent
+    },
+];
diff --git a/kontor-angular/src/app/tysc/sport/sport.model.ts b/kontor-angular/src/app/kontor/tysc/tysc-sports/sport.model.ts
similarity index 100%
rename from kontor-angular/src/app/tysc/sport/sport.model.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-sports/sport.model.ts
diff --git a/kontor-angular/src/app/tysc/sport/sport.service.ts b/kontor-angular/src/app/kontor/tysc/tysc-sports/sport.service.ts
similarity index 93%
rename from kontor-angular/src/app/tysc/sport/sport.service.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-sports/sport.service.ts
index 31945dd..bae168c 100644
--- a/kontor-angular/src/app/tysc/sport/sport.service.ts
+++ b/kontor-angular/src/app/kontor/tysc/tysc-sports/sport.service.ts
@@ -1,8 +1,8 @@
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable, signal } from "@angular/core";
-import { Sport } from "./sport.model";
 import { catchError, map, throwError } from "rxjs";
-import { ErrorService } from "../../shared/error.service";
+import { ErrorService } from "../../../shared/error.service";
+import { Sport } from "./sport.model";
 
 @Injectable({
   providedIn: 'root',
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.css b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.html
similarity index 83%
rename from kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html
rename to kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.html
index 36f5c85..1f62960 100644
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html
+++ b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.html
@@ -1,3 +1,4 @@
+<p>tysc-sports works!</p>
 <p>sport-list works!</p>
 <ul>
   @for (sport of sports(); track sport.id) {
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.spec.ts
new file mode 100644
index 0000000..5854048
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscSportsComponent } from './tysc-sports.component';
+
+describe('TyscSportsComponent', () => {
+  let component: TyscSportsComponent;
+  let fixture: ComponentFixture<TyscSportsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscSportsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscSportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.ts
similarity index 73%
rename from kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.ts
index a22dd75..7808133 100644
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts
+++ b/kontor-angular/src/app/kontor/tysc/tysc-sports/tysc-sports.component.ts
@@ -1,14 +1,14 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Sport } from '../sport.model';
-import { SportService } from '../sport.service';
+import { Sport } from './sport.model';
+import { SportService } from './sport.service';
 
 @Component({
-  selector: 'app-sport-list',
+  selector: 'app-tysc-sports',
   imports: [],
-  templateUrl: './sport-list.component.html',
-  styleUrl: './sport-list.component.css'
+  templateUrl: './tysc-sports.component.html',
+  styleUrl: './tysc-sports.component.css'
 })
-export class SportListComponent implements OnInit {
+export class TyscSportsComponent implements OnInit {
   sports = signal<Sport[] | undefined>(undefined);
   isFetching = signal(false);
   error = signal('');
@@ -34,5 +34,4 @@ export class SportListComponent implements OnInit {
       subscription.unsubscribe();
     });
   }
-
 }
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.css b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.html b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.html
new file mode 100644
index 0000000..d4584d4
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.html
@@ -0,0 +1 @@
+<p>tysc-team works!</p>
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.spec.ts
similarity index 54%
rename from kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.spec.ts
index 61baa16..15d76cb 100644
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts
+++ b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TyscMenuComponent } from './tysc-menu.component';
+import { TyscTeamComponent } from './tysc-team.component';
 
-describe('TyscMenuComponent', () => {
-  let component: TyscMenuComponent;
-  let fixture: ComponentFixture<TyscMenuComponent>;
+describe('TyscTeamComponent', () => {
+  let component: TyscTeamComponent;
+  let fixture: ComponentFixture<TyscTeamComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TyscMenuComponent]
+      imports: [TyscTeamComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TyscMenuComponent);
+    fixture = TestBed.createComponent(TyscTeamComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.ts
new file mode 100644
index 0000000..62ca09c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-team/tysc-team.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-team',
+  imports: [],
+  templateUrl: './tysc-team.component.html',
+  styleUrl: './tysc-team.component.css'
+})
+export class TyscTeamComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.css b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.html b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.html
new file mode 100644
index 0000000..8cfc44f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.html
@@ -0,0 +1 @@
+<p>tysc-teams works!</p>
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.spec.ts
similarity index 53%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
rename to kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.spec.ts
index a61f624..dc60252 100644
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
+++ b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicOverview } from './comic-overview.component';
+import { TyscTeamsComponent } from './tysc-teams.component';
 
-describe('ComicOverview', () => {
-  let component: ComicOverview;
-  let fixture: ComponentFixture<ComicOverview>;
+describe('TyscTeamsComponent', () => {
+  let component: TyscTeamsComponent;
+  let fixture: ComponentFixture<TyscTeamsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComicOverview]
+      imports: [TyscTeamsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ComicOverview);
+    fixture = TestBed.createComponent(TyscTeamsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.ts
new file mode 100644
index 0000000..070d4c3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-teams/tysc-teams.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-teams',
+  imports: [],
+  templateUrl: './tysc-teams.component.html',
+  styleUrl: './tysc-teams.component.css'
+})
+export class TyscTeamsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.css b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.html b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.html
new file mode 100644
index 0000000..3b47744
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.html
@@ -0,0 +1 @@
+<p>tysc-vendors works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.spec.ts
new file mode 100644
index 0000000..6bbd10f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TyscVendorsComponent } from './tysc-vendors.component';
+
+describe('TyscVendorsComponent', () => {
+  let component: TyscVendorsComponent;
+  let fixture: ComponentFixture<TyscVendorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TyscVendorsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TyscVendorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.ts
new file mode 100644
index 0000000..7071433
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-vendors/tysc-vendors.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tysc-vendors',
+  imports: [],
+  templateUrl: './tysc-vendors.component.html',
+  styleUrl: './tysc-vendors.component.css'
+})
+export class TyscVendorsComponent {
+
+}
diff --git a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.html b/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.html
deleted file mode 100644
index 43702b0..0000000
--- a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>media-actor-list works!</p>
diff --git a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.ts b/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.ts
deleted file mode 100644
index f765de4..0000000
--- a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-actor-list',
-  imports: [],
-  templateUrl: './media-actor-list.component.html',
-  styleUrl: './media-actor-list.component.css'
-})
-export class MediaActorListComponent {
-
-}
diff --git a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.html b/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.html
deleted file mode 100644
index 0c46e27..0000000
--- a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>media-file-list works!</p>
diff --git a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.spec.ts b/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.spec.ts
deleted file mode 100644
index 331bea0..0000000
--- a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaFileListComponent } from './media-file-list.component';
-
-describe('MediaFileListComponent', () => {
-  let component: MediaFileListComponent;
-  let fixture: ComponentFixture<MediaFileListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaFileListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaFileListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.ts b/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.ts
deleted file mode 100644
index f64918a..0000000
--- a/kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-file-list',
-  imports: [],
-  templateUrl: './media-file-list.component.html',
-  styleUrl: './media-file-list.component.css'
-})
-export class MediaFileListComponent {
-
-}
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.html b/kontor-angular/src/app/media/media-overview/media-overview.component.html
deleted file mode 100644
index 4a72d42..0000000
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- <p>media-overview works!</p>
-<div>
-  <ul>
-    <li><a routerLink="/media/mediafiles">MediaFiles</a></li>
-    <li><a routerLink="/media/mediaactors">MediaActors</a></li>
-    <li><a routerLink="/media/mediavideos">MediaVideos</a></li>
-  </ul>
-  <h4>Child Routes Result</h4>
-  <router-outlet></router-outlet>
-</div> -->
-<div class="subnav">
-  <a routerLink="/media/mediafiles" routerLinkActive="active">MediaFiles</a>
-  <a routerLink="/media/mediaactors" routerLinkActive="active">MediaActors</a>
-  <a routerLink="/media/mediavideos" routerLinkActive="active">MediaVideos</a>
-</div>
-<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.ts b/kontor-angular/src/app/media/media-overview/media-overview.component.ts
deleted file mode 100644
index ea7711b..0000000
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'kontor-media-overview',
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
-  templateUrl: './media-overview.component.html',
-  styleUrl: './media-overview.component.css'
-})
-export class MediaOverviewComponent {
-
-}
diff --git a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.html b/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.html
deleted file mode 100644
index ae42ba1..0000000
--- a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>media-video-list works!</p>
diff --git a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.spec.ts b/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.spec.ts
deleted file mode 100644
index e18eb84..0000000
--- a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaVideoListComponent } from './media-video-list.component';
-
-describe('MediaVideoListComponent', () => {
-  let component: MediaVideoListComponent;
-  let fixture: ComponentFixture<MediaVideoListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaVideoListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaVideoListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.ts b/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.ts
deleted file mode 100644
index bae8344..0000000
--- a/kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-video-list',
-  imports: [],
-  templateUrl: './media-video-list.component.html',
-  styleUrl: './media-video-list.component.css'
-})
-export class MediaVideoListComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.html b/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.html
deleted file mode 100644
index 45f5e7b..0000000
--- a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>cardset-list works!</p>
diff --git a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.ts b/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.ts
deleted file mode 100644
index 67d92e0..0000000
--- a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-cardset-list',
-  imports: [],
-  templateUrl: './cardset-list.component.html',
-  styleUrl: './cardset-list.component.css'
-})
-export class CardsetListComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/player/player-list/player-list.component.html b/kontor-angular/src/app/tysc/player/player-list/player-list.component.html
deleted file mode 100644
index 66a8ec9..0000000
--- a/kontor-angular/src/app/tysc/player/player-list/player-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>player-list works!</p>
diff --git a/kontor-angular/src/app/tysc/player/player-list/player-list.component.ts b/kontor-angular/src/app/tysc/player/player-list/player-list.component.ts
deleted file mode 100644
index 72646c0..0000000
--- a/kontor-angular/src/app/tysc/player/player-list/player-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-player-list',
-  imports: [],
-  templateUrl: './player-list.component.html',
-  styleUrl: './player-list.component.css'
-})
-export class PlayerListComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.component.html b/kontor-angular/src/app/tysc/position/position-list/position-list.component.html
deleted file mode 100644
index 652033e..0000000
--- a/kontor-angular/src/app/tysc/position/position-list/position-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>position-list works!</p>
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.component.ts b/kontor-angular/src/app/tysc/position/position-list/position-list.component.ts
deleted file mode 100644
index f76b808..0000000
--- a/kontor-angular/src/app/tysc/position/position-list/position-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-position-list',
-  imports: [],
-  templateUrl: './position-list.component.html',
-  styleUrl: './position-list.component.css'
-})
-export class PositionListComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.html b/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.html
deleted file mode 100644
index 8339199..0000000
--- a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>sport-selector works!</p>
diff --git a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.spec.ts b/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.spec.ts
deleted file mode 100644
index 1bc65be..0000000
--- a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SportSelectorComponent } from './sport-selector.component';
-
-describe('SportSelectorComponent', () => {
-  let component: SportSelectorComponent;
-  let fixture: ComponentFixture<SportSelectorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SportSelectorComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SportSelectorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.ts b/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.ts
deleted file mode 100644
index 896f350..0000000
--- a/kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-sport-selector',
-  imports: [],
-  templateUrl: './sport-selector.component.html',
-  styleUrl: './sport-selector.component.css'
-})
-export class SportSelectorComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-list.component.html b/kontor-angular/src/app/tysc/team/team-list/team-list.component.html
deleted file mode 100644
index 5f0a00a..0000000
--- a/kontor-angular/src/app/tysc/team/team-list/team-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>team-list works!</p>
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-list.component.ts b/kontor-angular/src/app/tysc/team/team-list/team-list.component.ts
deleted file mode 100644
index f3b7766..0000000
--- a/kontor-angular/src/app/tysc/team/team-list/team-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-team-list',
-  imports: [],
-  templateUrl: './team-list.component.html',
-  styleUrl: './team-list.component.css'
-})
-export class TeamListComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.ts b/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.ts
deleted file mode 100644
index 12710f8..0000000
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-tysc-menu',
-  imports: [RouterLink, RouterLinkActive, RouterOutlet],
-  templateUrl: './tysc-menu.component.html',
-  styleUrl: './tysc-menu.component.css'
-})
-export class TyscMenuComponent {
-
-}
diff --git a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.html b/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.html
deleted file mode 100644
index aedf60d..0000000
--- a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>vendor-list works!</p>
diff --git a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.spec.ts b/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.spec.ts
deleted file mode 100644
index fc3ed2c..0000000
--- a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { VendorListComponent } from './vendor-list.component';
-
-describe('VendorListComponent', () => {
-  let component: VendorListComponent;
-  let fixture: ComponentFixture<VendorListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [VendorListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(VendorListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.ts b/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.ts
deleted file mode 100644
index 073a098..0000000
--- a/kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-vendor-list',
-  imports: [],
-  templateUrl: './vendor-list.component.html',
-  styleUrl: './vendor-list.component.css'
-})
-export class VendorListComponent {
-
-}
diff --git a/kontor-angular/src/styles.css b/kontor-angular/src/styles.css
index 1d3192c..d8c6b3a 100644
--- a/kontor-angular/src/styles.css
+++ b/kontor-angular/src/styles.css
@@ -67,3 +67,23 @@ a.active {
   background-color: royalblue;
   color: white;
 }
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+}
+
+section {
+    margin-left: 10px;
+    padding: 10px;
+    background-color: darkgrey;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+article {
+    margin-left: 10px;
+    padding: 5px;
+}
+
diff --git a/kontor-api/src/apis/version1/comic.py b/kontor-api/src/apis/version1/comic.py
index 7bd0c59..3d3446a 100644
--- a/kontor-api/src/apis/version1/comic.py
+++ b/kontor-api/src/apis/version1/comic.py
@@ -1,13 +1,25 @@
-from typing import List, AnyStr
+from typing import List
+
 from fastapi import APIRouter, HTTPException, status
 
 from src.apis.utils import SessionDep
+from src.core.log_conf import logger
+from src.db.models.comic import Artist, Comic, Issue, Publisher
 from src.db.repository.comics.artist import get_artist_details
-from src.db.repository.comics.comic import list_comics, get_issue_details
-from src.schema.comics.comic import ComicResponse, ComicDetailsResponse, get_comic_details, get_short_info
-from src.schema.comics.artist import ArtistCreation, ArtistDetailResponse, ArtistResponse
-from src.db.models.comic import Comic, Artist, Issue
-from src.schema.comics.issue import IssueDetailsResponse
+from src.db.repository.comics.comic import (
+    get_comic_details,
+    get_issue_details,
+    get_short_info,
+    list_comics,
+)
+from src.db.repository.comics.publisher import get_publisher_details
+from src.schema.comics.artist import ArtistCreation, ArtistResponse
+from src.schema.comics.artist_details import ArtistDetailResponse
+from src.schema.comics.comic import ComicResponse
+from src.schema.comics.comic_details import ComicDetailsResponse
+from src.schema.comics.issue_details import IssueDetailsResponse
+from src.schema.comics.publisher import PublisherResponse
+from src.schema.comics.publisher_details import PublisherDetailsResponse
 
 router = APIRouter()
 
@@ -21,30 +33,36 @@ def get_all_comics(db: SessionDep) -> List[ComicResponse]:
         results.append(response)
     return results
 
+
 @router.get("/comics/{comic_id}", response_model=ComicDetailsResponse)
-def get_comic(comic_id: AnyStr, db: SessionDep) -> ComicDetailsResponse:
+def get_comic(comic_id: str, db: SessionDep) -> ComicDetailsResponse:
     comic = db.get(Comic, comic_id)
     if comic is None:
         raise HTTPException(status_code=404, detail="Comic could not be found")
+    logger.info(f"create ComicDetailsResponse for {comic}")
     response: ComicDetailsResponse = get_comic_details(comic)
+    logger.info(f"ComicDetailsResponse: {response}")
     return response
 
+
 @router.get("/artists", response_model=List[ArtistResponse])
 def get_all_artists(db: SessionDep) -> List[ArtistResponse]:
     results: List[ArtistResponse] = []
     artists = db.query(Artist).all()
     for artist in artists:
-        results.append(ArtistResponse(id=artist.id, name=artist.name))
+        results.append(ArtistResponse(id=artist.id, name=str(artist.name))) # type: ignore
     return results
 
+
 @router.get("/artists/{artist_id}", response_model=ArtistDetailResponse)
-def get_artist(artist_id: AnyStr, db: SessionDep) -> ArtistDetailResponse:
+def get_artist(artist_id: str, db: SessionDep) -> ArtistDetailResponse:
     artist = db.get(Artist, artist_id)
     if artist is None:
         raise HTTPException(status_code=404, detail="Artist could not be found")
     response: ArtistDetailResponse = get_artist_details(artist)
     return response
 
+
 @router.post("/artists", status_code=status.HTTP_201_CREATED)
 def add_artist(db: SessionDep, artist_creation: ArtistCreation) -> ArtistResponse:
     artist: Artist = Artist()
@@ -54,9 +72,28 @@ def add_artist(db: SessionDep, artist_creation: ArtistCreation) -> ArtistRespons
         db.commit()
     except:
         raise HTTPException(status_code=409, detail="Artist already added")
-    response = ArtistResponse(id=artist.id, name=artist.name)
+    response = ArtistResponse(id=artist.id, name=str(artist.name))
     return response
 
+
+@router.get("/publishers", response_model=List[PublisherResponse])
+def get_all_publishers(db: SessionDep) -> List[PublisherResponse]:
+    results: List[PublisherResponse] = []
+    publishers = db.query(Publisher).all()
+    for publisher in publishers:
+        results.append(PublisherResponse(id=publisher.id, name=str(publisher.name)))
+    return results
+
+
+@router.get("/publishers/{publisher_id}", response_model=PublisherDetailsResponse)
+def get_publisher(publisher_id: str, db: SessionDep) -> PublisherDetailsResponse:
+    publisher = db.get(Publisher, publisher_id)
+    if publisher is None:
+        raise HTTPException(status_code=404, detail="Publisher could not be found")
+    response: PublisherDetailsResponse = get_publisher_details(publisher)
+    return response
+
+
 @router.get("/issues", response_model=List[IssueDetailsResponse])
 def get_issues(db: SessionDep) -> List[IssueDetailsResponse]:
     results: List[IssueDetailsResponse] = []
@@ -64,4 +101,3 @@ def get_issues(db: SessionDep) -> List[IssueDetailsResponse]:
     for issue in issues:
         results.append(get_issue_details(issue))
     return results
-
diff --git a/kontor-api/src/db/models/comic.py b/kontor-api/src/db/models/comic.py
index 09109ab..b22214a 100644
--- a/kontor-api/src/db/models/comic.py
+++ b/kontor-api/src/db/models/comic.py
@@ -107,10 +107,10 @@ class Issue(Base, BaseMixin):
     story_arc = relationship("StoryArc", back_populates="issues")
     issue_works = relationship("IssueWork")
 
-    def get_full_title(self) -> AnyStr:
-        full_title: AnyStr = self.issue_number
+    def get_full_title(self) -> str:
+        full_title: str = str(self.issue_number)
         if self.title:
-            full_title += ": " + self.title
+            full_title += str(": " + self.title)
         return full_title
 
     def get_artists(self) -> Dict[Any, List[Any]]:
@@ -186,4 +186,3 @@ class IssueWork(Base, BaseMixin):
     artist = relationship("Artist", back_populates="issue_works")
     work_type_id = Column(String, ForeignKey("worktype.id"), nullable=False)
     work_type = relationship("WorkType", back_populates="issue_works")
-
diff --git a/kontor-api/src/db/repository/comics/artist.py b/kontor-api/src/db/repository/comics/artist.py
index 8dda467..b8b16c3 100644
--- a/kontor-api/src/db/repository/comics/artist.py
+++ b/kontor-api/src/db/repository/comics/artist.py
@@ -1,19 +1,31 @@
+from typing import List
 from src.db.models.comic import Artist
-from src.schema.comics.artist import ArtistDetailResponse
+from src.schema.comics.artist_details import ArtistDetailResponse, ArtistWorktypeComicResponse, ArtistWorktypeIssueResponse
+from src.schema.comics.comic import ComicResponse
+from src.schema.comics.worktype import WorktypeResponse
 
 
 def get_artist_details(artist: Artist) -> ArtistDetailResponse:
-    works = {}
+    comic_works: List[ArtistWorktypeComicResponse] = []
+    comic_works_map = {}
     for work in artist.comic_works:
-        work_type = work.work_type.name
-        comic_title = work.comic.title
-        if work_type in works:
-            works[work_type].append(comic_title)
+        worktype_id = work.work_type.id
+        if worktype_id in comic_works_map:
+            comic = ComicResponse(id=work.comic.id, title=work.comic.title, completed=work.comic.completed)
+            comic_works_map[worktype_id].comics.append(comic)
         else:
-            works[work_type] = [comic_title]
+            comic_works_map[worktype_id] = ArtistWorktypeComicResponse(
+                worktype=WorktypeResponse(id=worktype_id, name=work.work_type.name),
+                comics=[ComicResponse(id=work.comic.id, title=work.comic.title, completed=work.comic.completed)]
+            )
+    for value in comic_works_map.values():
+        comic_works.append(value)
+    issue_works: List[ArtistWorktypeIssueResponse] = []
     response = ArtistDetailResponse(
         id=artist.id,
-        name=artist.name,
-        works=works
+        name=str(artist.name),
+        weblink=str(artist.weblink),
+        comic_works=comic_works,
+        issue_works=issue_works,
     )
     return response
diff --git a/kontor-api/src/db/repository/comics/comic.py b/kontor-api/src/db/repository/comics/comic.py
index 0f208c1..4821d29 100644
--- a/kontor-api/src/db/repository/comics/comic.py
+++ b/kontor-api/src/db/repository/comics/comic.py
@@ -1,14 +1,20 @@
-from typing import List, Type, AnyStr
+from typing import Dict, List
 
 from sqlalchemy.orm import Session
 
 from src.core.log_conf import logger
 from src.db.models.comic import Comic, Issue
-from src.schema.comics.comic import ComicSchema
-from src.schema.comics.issue import IssueDetailsResponse
+from src.schema.comics.artist import ArtistResponse
+from src.schema.comics.comic import ComicResponse, ComicSchema
+from src.schema.comics.comic_details import ComicDetailsResponse, ComicWorktypeArtistResponse
+from src.schema.comics.issue import IssueResponse
+from src.schema.comics.issue_details import IssueDetailsResponse
+from src.schema.comics.publisher import PublisherResponse
+from src.schema.comics.volume import VolumeResponse
+from src.schema.comics.worktype import WorktypeResponse
 
 
-def list_comics(db: Session) -> List[Type[Comic]]:
+def list_comics(db: Session) -> List[Comic]:
     comics = db.query(Comic).all()
     return comics
 
@@ -16,16 +22,66 @@ def list_comics(db: Session) -> List[Type[Comic]]:
 def get_issue_details(issue: Issue) -> IssueDetailsResponse:
     response = IssueDetailsResponse(
         id=issue.id,
-        issue_number=issue.issue_number,
-        in_stock=issue.in_stock,
-        is_read=issue.is_read,
-        comic_id=issue.comic_id,
-        volume_id=issue.volume_id
+        issue_number=str(issue.issue_number),
+        in_stock=bool(issue.in_stock),
+        is_read=bool(issue.is_read),
+        comic=ComicResponse(id=issue.comic.id, title=issue.comic.title, completed=issue.comic.completed),
+        volume=VolumeResponse(id=issue.volume.id, name=issue.volume.name)
     )
     return response
 
 
-def update_comic(comic: ComicSchema, comic_id: AnyStr, db: Session) -> type[Comic] | None:
+def update_comic(comic: ComicSchema, comic_id: str, db: Session) -> type[Comic] | None:
     logger.info(f"update_comic: {comic} with {comic_id}")
-    comic = db.get(Comic, comic_id)
-    return comic
+    comic = db.get(Comic, comic_id) # type: ignore
+    return comic # type: ignore
+
+def get_short_info(comic: Comic) -> ComicResponse:
+    response = ComicResponse(
+        id=comic.id,
+        title=str(comic.title),
+        completed=bool(comic.completed == 1)
+    )
+    return response
+
+def get_comic_details(comic: Comic) -> ComicDetailsResponse:
+    volumes: List[VolumeResponse] = []
+    for volume in comic.volumes:
+        volumes.append(VolumeResponse(id=volume.id, name=volume.name))
+    issues: List[IssueResponse] = []
+    for issue in comic.issues:
+        issues.append(IssueResponse(
+            id=issue.id,
+            issue_number=issue.issue_number,
+            in_stock=issue.in_stock,
+            is_read=issue.is_read
+        ))
+    works: List[ComicWorktypeArtistResponse] = []
+    works_map: Dict[str, ComicWorktypeArtistResponse] = {}
+    for work in comic.comic_works:
+        worktype_id = work.work_type.id
+        if worktype_id in works_map:
+            artist = ArtistResponse(id=work.artist.id, name=work.artist.name)
+            works_map[worktype_id].artists.append(artist)
+            logger.info(f"add artist to response map: {artist} -> {works_map}")
+            print(f"add artist to response map: {artist} -> {works_map}")
+        else:
+            works_map[worktype_id] = ComicWorktypeArtistResponse(
+                worktype=WorktypeResponse(id=worktype_id, name=work.work_type.name), 
+                artists=[ArtistResponse(id=work.artist.id, name=work.artist.name)]
+            )
+    for value in works_map.values():
+        works.append(value)
+    response = ComicDetailsResponse(
+        id=str(comic.id),
+        created=str(comic.created_date),
+        title=str(comic.title),
+        completed=bool(comic.completed),
+        current_order=bool(comic.current_order),
+        weblink=str(comic.weblink),
+        publisher=PublisherResponse(id=comic.publisher.id, name=comic.publisher.name),
+        issues=issues,
+        volumes=volumes,
+        works=works
+    )
+    return response
diff --git a/kontor-api/src/db/repository/comics/publisher.py b/kontor-api/src/db/repository/comics/publisher.py
new file mode 100644
index 0000000..0b62a24
--- /dev/null
+++ b/kontor-api/src/db/repository/comics/publisher.py
@@ -0,0 +1,7 @@
+from src.db.models.comic import Publisher
+from src.schema.comics.publisher_details import PublisherDetailsResponse
+
+
+def get_publisher_details(publisher: Publisher):
+    response: PublisherDetailsResponse = PublisherDetailsResponse(id=publisher.id, name=str(publisher.name))
+    return response
diff --git a/kontor-api/src/schema/comics/artist.py b/kontor-api/src/schema/comics/artist.py
index 48d6210..4a967d4 100644
--- a/kontor-api/src/schema/comics/artist.py
+++ b/kontor-api/src/schema/comics/artist.py
@@ -1,9 +1,6 @@
-from typing import List, Dict
-
 from pydantic import BaseModel
 
 
-
 class ArtistCreation(BaseModel):
     id: str
     name: str
@@ -11,9 +8,3 @@ class ArtistCreation(BaseModel):
 class ArtistResponse(BaseModel):
     id: str
     name: str
-
-class ArtistDetailResponse(BaseModel):
-    id: str
-    name: str
-    weblink: str
-    works: Dict[str, List[str]]
diff --git a/kontor-api/src/schema/comics/artist_details.py b/kontor-api/src/schema/comics/artist_details.py
new file mode 100644
index 0000000..416257c
--- /dev/null
+++ b/kontor-api/src/schema/comics/artist_details.py
@@ -0,0 +1,22 @@
+from typing import List
+from pydantic import BaseModel
+
+from src.schema.comics.comic import ComicResponse
+from src.schema.comics.issue_details import IssueDetailsResponse
+from src.schema.comics.worktype import WorktypeResponse
+
+
+class ArtistWorktypeComicResponse(BaseModel):
+    worktype: WorktypeResponse
+    comics: List[ComicResponse]
+
+class ArtistWorktypeIssueResponse(BaseModel):
+    worktype: WorktypeResponse
+    issues: List[IssueDetailsResponse]
+
+class ArtistDetailResponse(BaseModel):
+    id: str
+    name: str
+    weblink: str
+    comic_works: List[ArtistWorktypeComicResponse]
+    issue_works: List[ArtistWorktypeIssueResponse]
diff --git a/kontor-api/src/schema/comics/comic.py b/kontor-api/src/schema/comics/comic.py
index b6b89dc..a57c7ff 100644
--- a/kontor-api/src/schema/comics/comic.py
+++ b/kontor-api/src/schema/comics/comic.py
@@ -1,8 +1,6 @@
-from typing import List, Dict, Optional
-
+from typing import Optional
 from pydantic import BaseModel, AnyUrl
-
-from src.db.models.comic import Comic
+from src.core.log_conf import logger
 
 
 class ComicResponse(BaseModel):
@@ -10,17 +8,6 @@ class ComicResponse(BaseModel):
     title: str
     completed: bool
 
-class ComicDetailsResponse(BaseModel):
-    id: str
-    created: str
-    title: str
-    completed : bool
-    current_order : bool
-    weblink: str
-    publisher: str
-    volumes: List[str]
-    works: Dict[str, List[str]]
-
 
 class ComicSchema(BaseModel):
     id: str
@@ -28,38 +15,3 @@ class ComicSchema(BaseModel):
     weblink: Optional[AnyUrl]
     completed: Optional[bool]
     current_order: Optional[bool]
-
-
-def get_short_info(comic: Comic) -> ComicResponse:
-    response = ComicResponse(
-        id=comic.id,
-        title=comic.title,
-        completed=(comic.completed == 1)
-    )
-    return response
-
-
-def get_comic_details(comic: Comic) -> ComicDetailsResponse | None:
-    volumes = []
-    for volume in comic.volumes:
-        volumes.append(volume.name)
-    works = {}
-    for work in comic.comic_works:
-        work_type = work.work_type.name
-        artist_name = work.artist.name
-        if work_type in works:
-            works[work_type].append(artist_name)
-        else:
-            works[work_type] = [artist_name]
-    response = ComicDetailsResponse(
-        id=comic.id,
-        created=str(comic.created_date),
-        title=comic.title,
-        completed=comic.completed,
-        current_order=comic.current_order,
-        weblink=comic.weblink,
-        publisher=comic.publisher.name,
-        volumes=volumes,
-        works=works
-    )
-    return response
diff --git a/kontor-api/src/schema/comics/comic_details.py b/kontor-api/src/schema/comics/comic_details.py
new file mode 100644
index 0000000..16de453
--- /dev/null
+++ b/kontor-api/src/schema/comics/comic_details.py
@@ -0,0 +1,26 @@
+from typing import List
+from pydantic import BaseModel
+
+from src.schema.comics.artist import ArtistResponse
+from src.schema.comics.issue import IssueResponse
+from src.schema.comics.publisher import PublisherResponse
+from src.schema.comics.volume import VolumeResponse
+from src.schema.comics.worktype import WorktypeResponse
+
+
+class ComicWorktypeArtistResponse(BaseModel):
+    worktype: WorktypeResponse
+    artists: List[ArtistResponse]
+
+
+class ComicDetailsResponse(BaseModel):
+    id: str
+    created: str
+    title: str
+    completed : bool
+    current_order : bool
+    weblink: str
+    publisher: PublisherResponse
+    issues: List[IssueResponse]
+    volumes: List[VolumeResponse]
+    works: List[ComicWorktypeArtistResponse]
diff --git a/kontor-api/src/schema/comics/issue.py b/kontor-api/src/schema/comics/issue.py
index 465085b..719114c 100644
--- a/kontor-api/src/schema/comics/issue.py
+++ b/kontor-api/src/schema/comics/issue.py
@@ -1,10 +1,8 @@
 from pydantic import BaseModel
 
 
-class IssueDetailsResponse(BaseModel):
+class IssueResponse(BaseModel):
     id: str
     issue_number: str
     in_stock: bool
     is_read: bool
-    comic_id: str
-    volume_id: str | None
diff --git a/kontor-api/src/schema/comics/issue_details.py b/kontor-api/src/schema/comics/issue_details.py
new file mode 100644
index 0000000..3c39799
--- /dev/null
+++ b/kontor-api/src/schema/comics/issue_details.py
@@ -0,0 +1,13 @@
+from pydantic import BaseModel
+
+from src.schema.comics.comic import ComicResponse
+from src.schema.comics.volume import VolumeResponse
+
+
+class IssueDetailsResponse(BaseModel):
+    id: str
+    issue_number: str
+    in_stock: bool
+    is_read: bool
+    comic: ComicResponse
+    volume: VolumeResponse | None
diff --git a/kontor-api/src/schema/comics/publisher.py b/kontor-api/src/schema/comics/publisher.py
new file mode 100644
index 0000000..bbbe175
--- /dev/null
+++ b/kontor-api/src/schema/comics/publisher.py
@@ -0,0 +1,6 @@
+from pydantic import BaseModel
+
+
+class PublisherResponse(BaseModel):
+    id: str
+    name: str
diff --git a/kontor-api/src/schema/comics/publisher_details.py b/kontor-api/src/schema/comics/publisher_details.py
new file mode 100644
index 0000000..d62303a
--- /dev/null
+++ b/kontor-api/src/schema/comics/publisher_details.py
@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+class PublisherDetailsResponse(BaseModel):
+    id: str
+    name: str
diff --git a/kontor-api/src/schema/comics/volume.py b/kontor-api/src/schema/comics/volume.py
new file mode 100644
index 0000000..81d7985
--- /dev/null
+++ b/kontor-api/src/schema/comics/volume.py
@@ -0,0 +1,6 @@
+from pydantic import BaseModel
+
+
+class VolumeResponse(BaseModel):
+    id: str
+    name: str
diff --git a/kontor-api/src/schema/comics/worktype.py b/kontor-api/src/schema/comics/worktype.py
index 9efccd1..a072938 100644
--- a/kontor-api/src/schema/comics/worktype.py
+++ b/kontor-api/src/schema/comics/worktype.py
@@ -2,3 +2,8 @@ from pydantic import BaseModel
 
 class AddWorkType(BaseModel):
     worktype: str
+
+class WorktypeResponse(BaseModel):
+    id: str
+    name: str
+