diff --git a/kontor-angular/angular.json b/kontor-angular/angular.json
index 6c196b3..96caa46 100644
--- a/kontor-angular/angular.json
+++ b/kontor-angular/angular.json
@@ -15,7 +15,6 @@
           "options": {
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
diff --git a/kontor-angular/src/app/app.component.html b/kontor-angular/src/app/app.component.html
index def9b90..0fc5b3d 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-kontor-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..a4f231b 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 { KontorNavigationComponent } from "./kontor/navigation/kontor-navigation/kontor-navigation.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent, KontorNavigationComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/kontor-angular/src/app/app.config.ts b/kontor-angular/src/app/app.config.ts
index 97842c8..874fd39 100644
--- a/kontor-angular/src/app/app.config.ts
+++ b/kontor-angular/src/app/app.config.ts
@@ -1,4 +1,4 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -7,7 +7,8 @@ import { provideHttpClient } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideZonelessChangeDetection(),
+    // provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(),
   ]
diff --git a/kontor-angular/src/app/app.routes.ts b/kontor-angular/src/app/app.routes.ts
index 7740668..9b196dd 100644
--- a/kontor-angular/src/app/app.routes.ts
+++ b/kontor-angular/src/app/app.routes.ts
@@ -1,52 +1,27 @@
 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 { routes as comicRoutes } from './kontor/comic/comic.routes';
+import { routes as tyscRoutes } from './kontor/tysc/tysc.routes';
+import { routes as mediaRoutes } from './kontor/media/media.routes';
+import { TyscSectionComponent } from './kontor/tysc/tysc-section.component';
+import { ComicSectionComponent } from './kontor/comic/comic-section.component';
+import { MediaComponent } from './kontor/media/media.component';
+import { KontorHomeComponent } from './kontor/home/kontor-home/kontor-home.component';
 
 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: '',
+    component: KontorHomeComponent,
   },
   {
-    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: 'comic', component: ComicSectionComponent,
+    children: comicRoutes,
   },
   {
-    path: 'media', component: MediaOverviewComponent,
-    children: [
-      { path: '', component: MediaFileListComponent},
-      { path: 'mediafiles', component: MediaFileListComponent},
-      { path: 'mediaactors', component: MediaActorListComponent},
-      { path: 'mediavideos', component: MediaVideoListComponent},
-    ],
+    path: 'tysc', component: TyscSectionComponent,
+    children: tyscRoutes,
+  },
+  {
+    path: 'media', component: MediaComponent,
+    children: mediaRoutes,
   },
 ];
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
deleted file mode 100644
index c34bfa6..0000000
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
+++ /dev/null
@@ -1,5 +0,0 @@
-div {
-  border-radius: 6px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
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/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.spec.ts b/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts
deleted file mode 100644
index 00f7266..0000000
--- a/kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PublisherListComponent } from './publisher-list.component';
-
-describe('PublisherListComponent', () => {
-  let component: PublisherListComponent;
-  let fixture: ComponentFixture<PublisherListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PublisherListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PublisherListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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-list/artist-list.component.css b/kontor-angular/src/app/kontor/comic/artists/artist-list/artist-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/artists/artist-list/artist-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/artists/artist-list/artist-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/artists/artist-list/artist-list.component.html
index 984357c..4912d0a 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
+++ b/kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.html
@@ -1,7 +1,7 @@
 <ul>
   @for (artist of artists(); track artist.id) {
     <li>
-      <app-artist-detail [artist]="artist"/>
+      <app-artist [artist]="artist"/>
     </li>
   }
 </ul>
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.spec.ts
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.spec.ts
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts b/kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.ts
similarity index 72%
rename from kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
rename to kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.ts
index 441b24a..71d78ab 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
+++ b/kontor-angular/src/app/kontor/comic/artists/artist-list/artist-list.component.ts
@@ -1,11 +1,11 @@
+import { ArtistComponent } from './../artist/artist.component';
 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 { ArtistsService } from '../artists.service';
 
 @Component({
   selector: 'app-artist-list',
-  imports: [ArtistDetailComponent],
+  imports: [ArtistComponent],
   templateUrl: './artist-list.component.html',
   styleUrl: './artist-list.component.css'
 })
@@ -13,12 +13,12 @@ export class ArtistListComponent implements OnInit {
   artists = signal<Artist[] | undefined>(undefined);
   isFetching = signal(false);
   error = signal('');
-  private artistService = inject(ArtistService);
+  private artistsService = inject(ArtistsService);
   private destroyRef = inject(DestroyRef);
 
   ngOnInit() {
     this.isFetching.set(true);
-    const subscription = this.artistService.loadArtists().subscribe({
+    const subscription = this.artistsService.loadArtists().subscribe({
       next: (artists) => {
         this.artists.set(artists);
       },
@@ -27,12 +27,11 @@ export class ArtistListComponent implements OnInit {
       },
       complete: () => {
         this.isFetching.set(false);
-      },
+      }
     });
 
     this.destroyRef.onDestroy(() => {
       subscription.unsubscribe();
-    });
+    })
   }
-
 }
diff --git a/kontor-angular/src/app/comic/artist/artist.model.ts b/kontor-angular/src/app/kontor/comic/artists/artist.model.ts
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist.model.ts
rename to kontor-angular/src/app/kontor/comic/artists/artist.model.ts
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.css b/kontor-angular/src/app/kontor/comic/artists/artist/artist.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/artists/artist/artist.component.css
diff --git a/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.html b/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.html
new file mode 100644
index 0000000..de0a005
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'artists', artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts b/kontor-angular/src/app/kontor/comic/artists/artist/artist.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/comic/artists/artist/artist.component.spec.ts
index 61baa16..fe60ea6 100644
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TyscMenuComponent } from './tysc-menu.component';
+import { ArtistComponent } from './artist.component';
 
-describe('TyscMenuComponent', () => {
-  let component: TyscMenuComponent;
-  let fixture: ComponentFixture<TyscMenuComponent>;
+describe('ArtistComponent', () => {
+  let component: ArtistComponent;
+  let fixture: ComponentFixture<ArtistComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TyscMenuComponent]
+      imports: [ArtistComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TyscMenuComponent);
+    fixture = TestBed.createComponent(ArtistComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.ts b/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.ts
new file mode 100644
index 0000000..5903c94
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/artists/artist/artist.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Artist } from '../artist.model';
+
+@Component({
+  selector: 'app-artist',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './artist.component.html',
+  styleUrl: './artist.component.css'
+})
+export class ArtistComponent {
+  artist = input.required<Artist>();
+}
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.css b/kontor-angular/src/app/kontor/comic/artists/artists.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/artists/artists.component.css
diff --git a/kontor-angular/src/app/kontor/comic/artists/artists.component.html b/kontor-angular/src/app/kontor/comic/artists/artists.component.html
new file mode 100644
index 0000000..4e1ec74
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/artists/artists.component.html
@@ -0,0 +1,7 @@
+<p>artists works!</p>
+<div>
+  <app-artist-list />
+</div>
+<div>
+  <h2>Artist Details</h2>
+</div>
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/artists/artists.component.spec.ts
similarity index 54%
rename from kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/artists/artists.component.spec.ts
index b8a8711..be721bf 100644
--- a/kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/artists/artists.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TeamListComponent } from './team-list.component';
+import { ArtistsComponent } from './artists.component';
 
-describe('TeamListComponent', () => {
-  let component: TeamListComponent;
-  let fixture: ComponentFixture<TeamListComponent>;
+describe('ArtistsComponent', () => {
+  let component: ArtistsComponent;
+  let fixture: ComponentFixture<ArtistsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TeamListComponent]
+      imports: [ArtistsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TeamListComponent);
+    fixture = TestBed.createComponent(ArtistsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/artists/artists.component.ts b/kontor-angular/src/app/kontor/comic/artists/artists.component.ts
new file mode 100644
index 0000000..f063a8e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/artists/artists.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ArtistListComponent } from "./artist-list/artist-list.component";
+
+@Component({
+  selector: 'app-artists',
+  imports: [ArtistListComponent],
+  templateUrl: './artists.component.html',
+  styleUrl: './artists.component.css'
+})
+export class ArtistsComponent {
+
+}
diff --git a/kontor-angular/src/app/comic/artist/artist.service.ts b/kontor-angular/src/app/kontor/comic/artists/artists.service.ts
similarity index 82%
rename from kontor-angular/src/app/comic/artist/artist.service.ts
rename to kontor-angular/src/app/kontor/comic/artists/artists.service.ts
index 6852eba..e2ae1e6 100644
--- a/kontor-angular/src/app/comic/artist/artist.service.ts
+++ b/kontor-angular/src/app/kontor/comic/artists/artists.service.ts
@@ -1,21 +1,19 @@
-import { inject, Injectable, signal } from "@angular/core";
-import { ErrorService } from "../../shared/error.service";
 import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
 import { Artist } from "./artist.model";
 import { catchError, map, throwError } from "rxjs";
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
-export class ArtistService {
-  private errorService = inject(ErrorService);
+export class ArtistsService {
   private httpClient = inject(HttpClient);
   private artists = signal<Artist[]>([]);
 
   loadedArtists = this.artists.asReadonly();
 
   loadArtists() {
-    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later-');
+    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later.');
   }
 
   private fetchArtists(url: string, errorMessage: string) {
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..c7fb516
--- /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/publishers" routerLinkActive="active">Publisher</a>
+  <a routerLink="/comic/artists" 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-section.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-section.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comic-section.component.html b/kontor-angular/src/app/kontor/comic/comic-section.component.html
new file mode 100644
index 0000000..570e4d6
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section.component.html
@@ -0,0 +1,2 @@
+<app-comic-navigation />
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/comic/comic-section.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-section.component.spec.ts
new file mode 100644
index 0000000..0ce4d09
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicSectionComponent } from './comic-section.component';
+
+describe('ComicComponent', () => {
+  let component: ComicSectionComponent;
+  let fixture: ComponentFixture<ComicSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicSectionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-section.component.ts b/kontor-angular/src/app/kontor/comic/comic-section.component.ts
new file mode 100644
index 0000000..3ee6a6f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-section.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ComicNavigationComponent } from "./comic-navigation/comic-navigation.component";
+
+@Component({
+  selector: 'app-comic-section',
+  imports: [RouterOutlet, ComicNavigationComponent],
+  templateUrl: './comic-section.component.html',
+  styleUrl: './comic-section.component.css'
+})
+export class ComicSectionComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic.routes.ts b/kontor-angular/src/app/kontor/comic/comic.routes.ts
new file mode 100644
index 0000000..389e589
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic.routes.ts
@@ -0,0 +1,39 @@
+import { Routes } from "@angular/router";
+import { ArtistsComponent } from "./artists/artists.component";
+import { PublishersComponent } from "./publishers/publishers.component";
+import { ComicDetailsComponent } from "./comics/comic-details/comic-details.component";
+import { ComicSectionComponent } from "./comic-section.component";
+import { ComicsComponent } from "./comics/comics.component";
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: ComicSectionComponent,
+    children: [
+      {
+        path: 'comics',
+        component: ComicsComponent,
+      },
+      {
+        path: 'comics/:comicId',
+        component: ComicDetailsComponent,
+      },
+      {
+        path: 'artists',
+        component: ArtistsComponent,
+      },
+      {
+        path: 'artists/:artistId',
+        component: ArtistsComponent,
+      },
+      {
+        path: 'publishers',
+        component: PublishersComponent,
+      },
+      {
+        path: 'publishers/:publisherId',
+        component: PublishersComponent,
+      },
+    ],
+  },
+];
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/comics/comic-details/comic-details.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/comics/comic-details/comic-details.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.html b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.html
new file mode 100644
index 0000000..e6f30bf
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.html
@@ -0,0 +1,7 @@
+<p>comic-details works!</p>
+<div>
+  <app-comic-list />
+</div>
+<div>
+  <h2>Comic Title</h2>
+</div>
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.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/comics/comic-details/comic-details.component.spec.ts
index 9034de6..5d7d15a 100644
--- a/kontor-angular/src/app/tysc/position/position-list/position-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PositionListComponent } from './position-list.component';
+import { ComicDetailsComponent } from './comic-details.component';
 
-describe('PositionListComponent', () => {
-  let component: PositionListComponent;
-  let fixture: ComponentFixture<PositionListComponent>;
+describe('ComicDetailsComponent', () => {
+  let component: ComicDetailsComponent;
+  let fixture: ComponentFixture<ComicDetailsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PositionListComponent]
+      imports: [ComicDetailsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PositionListComponent);
+    fixture = TestBed.createComponent(ComicDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.ts b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.ts
new file mode 100644
index 0000000..89e3909
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic-details/comic-details.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { ComicListComponent } from "../comic-list/comic-list.component";
+import { Comic } from '../comic.model';
+
+@Component({
+  selector: 'app-comic-details',
+  imports: [ComicListComponent],
+  templateUrl: './comic-details.component.html',
+  styleUrl: './comic-details.component.css'
+})
+export class ComicDetailsComponent {
+  comic = input.required<Comic>();
+}
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.css b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.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/comics/comic-list/comic-list.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.html b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.html
new file mode 100644
index 0000000..755e184
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.html
@@ -0,0 +1,8 @@
+<p>comic-list works!</p>
+<ul>
+  @for (comic of comics(); track comic.id) {
+    <li>
+      <app-comic [comic]="comic"/>
+    </li>
+  }
+</ul>
diff --git a/kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.spec.ts
similarity index 100%
rename from kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.spec.ts
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.ts b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.ts
new file mode 100644
index 0000000..2858e39
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic-list/comic-list.component.ts
@@ -0,0 +1,38 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Comic } from '../comic.model';
+import { ComicComponent } from "../comic/comic.component";
+import { ComicsService } from '../comics.service';
+
+@Component({
+  selector: 'app-comic-list',
+  imports: [ComicComponent],
+  templateUrl: './comic-list.component.html',
+  styleUrl: './comic-list.component.css'
+})
+export class ComicListComponent implements OnInit {
+  comics = signal<Comic[] | undefined>(undefined);
+  isFetching = signal(false);
+  error = signal('');
+  private comicsService = inject(ComicsService);
+  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/comics/comic.model.ts b/kontor-angular/src/app/kontor/comic/comics/comic.model.ts
new file mode 100644
index 0000000..444d197
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic.model.ts
@@ -0,0 +1,5 @@
+export interface Comic {
+  id: string;
+  title: string;
+  completed: boolean;
+}
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/comics/comic/comic.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/comics/comic/comic.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.html b/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.html
new file mode 100644
index 0000000..6113794
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.html
@@ -0,0 +1,6 @@
+<p>comic works!</p>
+<div>
+  <a [routerLink]="['/', 'comic', 'comics', comic().id]" routerLinkActive="active">
+    <span>{{ comic().title }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts b/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.spec.ts
similarity index 55%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
rename to kontor-angular/src/app/kontor/comic/comics/comic/comic.component.spec.ts
index a61f624..7516987 100644
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicOverview } from './comic-overview.component';
+import { ComicComponent } from './comic.component';
 
-describe('ComicOverview', () => {
-  let component: ComicOverview;
-  let fixture: ComponentFixture<ComicOverview>;
+describe('ComicComponent', () => {
+  let component: ComicComponent;
+  let fixture: ComponentFixture<ComicComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComicOverview]
+      imports: [ComicComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ComicOverview);
+    fixture = TestBed.createComponent(ComicComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.ts b/kontor-angular/src/app/kontor/comic/comics/comic/comic.component.ts
new file mode 100644
index 0000000..a45e42c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/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',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic.component.html',
+  styleUrl: './comic.component.css'
+})
+export class ComicComponent {
+  comic = input.required<Comic>();
+}
diff --git a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.css b/kontor-angular/src/app/kontor/comic/comics/comics.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/comic/comics/comics.component.css
diff --git a/kontor-angular/src/app/kontor/comic/comics/comics.component.html b/kontor-angular/src/app/kontor/comic/comics/comics.component.html
new file mode 100644
index 0000000..b29db66
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comics.component.html
@@ -0,0 +1,4 @@
+<p>comics works!</p>
+<div>
+  <app-comic-list />
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comics/comics.component.spec.ts b/kontor-angular/src/app/kontor/comic/comics/comics.component.spec.ts
new file mode 100644
index 0000000..3b0af25
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comics.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicsComponent } from './comics.component';
+
+describe('ComicsComponent', () => {
+  let component: ComicsComponent;
+  let fixture: ComponentFixture<ComicsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comics/comics.component.ts b/kontor-angular/src/app/kontor/comic/comics/comics.component.ts
new file mode 100644
index 0000000..742b179
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comics.component.ts
@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { ComicListComponent } from "./comic-list/comic-list.component";
+import { ComicDetailsComponent } from './comic-details/comic-details.component';
+
+@Component({
+  selector: 'app-comics',
+  imports: [ComicListComponent],
+  templateUrl: './comics.component.html',
+  styleUrl: './comics.component.css'
+})
+export class ComicsComponent {
+}
diff --git a/kontor-angular/src/app/kontor/comic/comics/comics.service.ts b/kontor-angular/src/app/kontor/comic/comics/comics.service.ts
new file mode 100644
index 0000000..b747385
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comics/comics.service.ts
@@ -0,0 +1,29 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
+import { Comic } from "./comic.model";
+import { catchError, map, throwError } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ComicsService {
+  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.');
+  }
+
+  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/tysc/player/player-list/player-list.component.css b/kontor-angular/src/app/kontor/comic/publishers/publishers.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/comic/publishers/publishers.component.css
diff --git a/kontor-angular/src/app/kontor/comic/publishers/publishers.component.html b/kontor-angular/src/app/kontor/comic/publishers/publishers.component.html
new file mode 100644
index 0000000..2268b57
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/publishers/publishers.component.html
@@ -0,0 +1 @@
+<p>publishers works!</p>
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/publishers/publishers.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/comic/publishers/publishers.component.spec.ts
index 7a1c646..91bfdee 100644
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/comic/publishers/publishers.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SportListComponent } from './sport-list.component';
+import { PublishersComponent } from './publishers.component';
 
-describe('SportListComponent', () => {
-  let component: SportListComponent;
-  let fixture: ComponentFixture<SportListComponent>;
+describe('PublishersComponent', () => {
+  let component: PublishersComponent;
+  let fixture: ComponentFixture<PublishersComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SportListComponent]
+      imports: [PublishersComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SportListComponent);
+    fixture = TestBed.createComponent(PublishersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/comic/publishers/publishers.component.ts b/kontor-angular/src/app/kontor/comic/publishers/publishers.component.ts
new file mode 100644
index 0000000..a7711a7
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/publishers/publishers.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-publishers',
+  imports: [],
+  templateUrl: './publishers.component.html',
+  styleUrl: './publishers.component.css'
+})
+export class PublishersComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.css b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.css
new file mode 100644
index 0000000..5bec969
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.css
@@ -0,0 +1,9 @@
+footer {
+  padding: 30px;
+  text-align: center;
+  background-color: lightblue;
+}
+
+footer div {
+  font-size: 20px;
+}
diff --git a/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.html b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.html
new file mode 100644
index 0000000..0cb97f4
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.html
@@ -0,0 +1,3 @@
+<footer>
+  <div>Kontor Footer</div>
+</footer>
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.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/footer/kontor-footer/kontor-footer.component.spec.ts
index cf1fa88..a957c42 100644
--- a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
+++ b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistDetailComponent } from './artist-detail.component';
+import { KontorFooterComponent } from './kontor-footer.component';
 
-describe('ArtistDetailComponent', () => {
-  let component: ArtistDetailComponent;
-  let fixture: ComponentFixture<ArtistDetailComponent>;
+describe('KontorFooterComponent', () => {
+  let component: KontorFooterComponent;
+  let fixture: ComponentFixture<KontorFooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistDetailComponent]
+      imports: [KontorFooterComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistDetailComponent);
+    fixture = TestBed.createComponent(KontorFooterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.ts b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.ts
new file mode 100644
index 0000000..9c80368
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/kontor-footer/kontor-footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-kontor-footer',
+  imports: [],
+  templateUrl: './kontor-footer.component.html',
+  styleUrl: './kontor-footer.component.css'
+})
+export class KontorFooterComponent {
+
+}
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..269b9f0 100644
--- a/kontor-angular/src/app/kontor/header/header.component.ts
+++ b/kontor-angular/src/app/kontor/header/header.component.ts
@@ -3,7 +3,7 @@ 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/kontor/header/kontor-header/kontor-header.component.css b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.css
new file mode 100644
index 0000000..e8a1a80
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.css
@@ -0,0 +1,9 @@
+.header {
+  padding: 30px;
+  text-align: center;
+  background-color: lightblue;
+}
+
+.header h1 {
+  font-size: 50px;
+}
diff --git a/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.html b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.html
new file mode 100644
index 0000000..3191f24
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.html
@@ -0,0 +1,5 @@
+<header class="header">
+  <section>
+    <h1>{{ title() }}</h1>
+  </section>
+</header>
diff --git a/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.spec.ts b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.spec.ts
new file mode 100644
index 0000000..2e4ac4b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KontorHeaderComponent } from './kontor-header.component';
+
+describe('KontorHeaderComponent', () => {
+  let component: KontorHeaderComponent;
+  let fixture: ComponentFixture<KontorHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KontorHeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KontorHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.ts b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.ts
new file mode 100644
index 0000000..703d87a
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/kontor-header/kontor-header.component.ts
@@ -0,0 +1,11 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-kontor-header',
+  imports: [],
+  templateUrl: './kontor-header.component.html',
+  styleUrl: './kontor-header.component.css'
+})
+export class KontorHeaderComponent {
+  protected readonly title = signal('Kontor');
+}
diff --git a/kontor-angular/src/app/tysc/position/position-list/position-list.component.css b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.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/home/kontor-home/kontor-home.component.css
diff --git a/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.html b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.html
new file mode 100644
index 0000000..2caacf9
--- /dev/null
+++ b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.html
@@ -0,0 +1 @@
+<p>kontor-home works!</p>
diff --git a/kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.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/home/kontor-home/kontor-home.component.spec.ts
index 0d08ee9..a38facd 100644
--- a/kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PlayerListComponent } from './player-list.component';
+import { KontorHomeComponent } from './kontor-home.component';
 
-describe('PlayerListComponent', () => {
-  let component: PlayerListComponent;
-  let fixture: ComponentFixture<PlayerListComponent>;
+describe('KontorHomeComponent', () => {
+  let component: KontorHomeComponent;
+  let fixture: ComponentFixture<KontorHomeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PlayerListComponent]
+      imports: [KontorHomeComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PlayerListComponent);
+    fixture = TestBed.createComponent(KontorHomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.ts b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.ts
new file mode 100644
index 0000000..d0e3990
--- /dev/null
+++ b/kontor-angular/src/app/kontor/home/kontor-home/kontor-home.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-kontor-home',
+  imports: [],
+  templateUrl: './kontor-home.component.html',
+  styleUrl: './kontor-home.component.css'
+})
+export class KontorHomeComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-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/sport/sport-list/sport-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/tysc/cardset/cardset-list/cardset-list.component.spec.ts b/kontor-angular/src/app/kontor/media/media-actors/media-actors.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/media/media-actors/media-actors.component.spec.ts
index c957e68..1448ea4 100644
--- a/kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-actors/media-actors.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CardsetListComponent } from './cardset-list.component';
+import { MediaActorsComponent } from './media-actors.component';
 
-describe('CardsetListComponent', () => {
-  let component: CardsetListComponent;
-  let fixture: ComponentFixture<CardsetListComponent>;
+describe('MediaActorsComponent', () => {
+  let component: MediaActorsComponent;
+  let fixture: ComponentFixture<MediaActorsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CardsetListComponent]
+      imports: [MediaActorsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(CardsetListComponent);
+    fixture = TestBed.createComponent(MediaActorsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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/sport/sport-selector/sport-selector.component.css b/kontor-angular/src/app/kontor/media/media-files/media-files.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-files/media-files.component.css
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..367cd62
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.html
@@ -0,0 +1 @@
+<p>media-files works!</p>
diff --git a/kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts b/kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts
new file mode 100644
index 0000000..c8f1c9f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaFilesComponent } from './media-files.component';
+
+describe('MediaFilesComponent', () => {
+  let component: MediaFilesComponent;
+  let fixture: ComponentFixture<MediaFilesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaFilesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaFilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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..58d983c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-files/media-files.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-files',
+  imports: [],
+  templateUrl: './media-files.component.html',
+  styleUrl: './media-files.component.css'
+})
+export class MediaFilesComponent {
+
+}
diff --git a/kontor-angular/src/app/tysc/team/team-list/team-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/team/team-list/team-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..cd3857f
--- /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/mediafiles" routerLinkActive="active">MediaFiles</a>
+  <a routerLink="/media/mediaactors" routerLinkActive="active">MediaActors</a>
+  <a routerLink="/media/mediavideos" 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/tysc-menu/tysc-menu.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/tysc-menu/tysc-menu.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/vendor/vendor-list/vendor-list.component.css b/kontor-angular/src/app/kontor/media/media.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/media/media.component.css
diff --git a/kontor-angular/src/app/kontor/media/media.component.html b/kontor-angular/src/app/kontor/media/media.component.html
new file mode 100644
index 0000000..935917e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media.component.html
@@ -0,0 +1,2 @@
+<app-media-navigation />
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/media/media.component.spec.ts b/kontor-angular/src/app/kontor/media/media.component.spec.ts
new file mode 100644
index 0000000..366f292
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaComponent } from './media.component';
+
+describe('MediaComponent', () => {
+  let component: MediaComponent;
+  let fixture: ComponentFixture<MediaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/media/media.component.ts b/kontor-angular/src/app/kontor/media/media.component.ts
new file mode 100644
index 0000000..6dc8018
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media.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',
+  imports: [MediaNavigationComponent, RouterOutlet],
+  templateUrl: './media.component.html',
+  styleUrl: './media.component.css'
+})
+export class MediaComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/media/media.routes.ts b/kontor-angular/src/app/kontor/media/media.routes.ts
new file mode 100644
index 0000000..556e9cd
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media.routes.ts
@@ -0,0 +1,26 @@
+import { Routes } from "@angular/router";
+import { MediaComponent } from "./media.component";
+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 routes: Routes = [
+  {
+    path: '',
+    component: MediaComponent,
+    children: [
+      {
+        path: 'mediafiles',
+        component: MediaFilesComponent,
+      },
+      {
+        path: 'mediaactors',
+        component: MediaActorsComponent,
+      },
+      {
+        path: 'mediavideos',
+        component: MediaVideosComponent,
+      },
+    ],
+  },
+];
diff --git a/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.css b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.css
new file mode 100644
index 0000000..d90b8e6
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.css
@@ -0,0 +1 @@
+/* Style the top navigation bar */
diff --git a/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.html b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.html
new file mode 100644
index 0000000..bd3d6a0
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.html
@@ -0,0 +1,6 @@
+<div class="topnav">
+  <a routerLink="/">Kontor</a>
+  <a routerLink="/comic" routerLinkActive="active">Comic</a>
+  <a routerLink="/tysc" routerLinkActive="active">TradeYourSportsCard</a>
+  <a routerLink="/media" routerLinkActive="active">Media</a>
+</div>
diff --git a/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.spec.ts b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.spec.ts
new file mode 100644
index 0000000..1575b00
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KontorNavigationComponent } from './kontor-navigation.component';
+
+describe('KontorNavigationComponent', () => {
+  let component: KontorNavigationComponent;
+  let fixture: ComponentFixture<KontorNavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KontorNavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KontorNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.ts b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.ts
new file mode 100644
index 0000000..d571a25
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/kontor-navigation/kontor-navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-kontor-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './kontor-navigation.component.html',
+  styleUrl: './kontor-navigation.component.css'
+})
+export class KontorNavigationComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.css b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.html b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.html
new file mode 100644
index 0000000..59cab54
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.html
@@ -0,0 +1 @@
+<p>cardsets works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.spec.ts b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.spec.ts
new file mode 100644
index 0000000..1b8a4b5
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardsetsComponent } from './cardsets.component';
+
+describe('CardsetsComponent', () => {
+  let component: CardsetsComponent;
+  let fixture: ComponentFixture<CardsetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardsetsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardsetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.ts b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.ts
new file mode 100644
index 0000000..78f83fe
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/cardsets/cardsets.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cardsets',
+  imports: [],
+  templateUrl: './cardsets.component.html',
+  styleUrl: './cardsets.component.css'
+})
+export class CardsetsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/players/players.component.css b/kontor-angular/src/app/kontor/tysc/players/players.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/players/players.component.html b/kontor-angular/src/app/kontor/tysc/players/players.component.html
new file mode 100644
index 0000000..2db5c66
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/players/players.component.html
@@ -0,0 +1 @@
+<p>players works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/players/players.component.spec.ts b/kontor-angular/src/app/kontor/tysc/players/players.component.spec.ts
new file mode 100644
index 0000000..2a4a85f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/players/players.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayersComponent } from './players.component';
+
+describe('PlayersComponent', () => {
+  let component: PlayersComponent;
+  let fixture: ComponentFixture<PlayersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/players/players.component.ts b/kontor-angular/src/app/kontor/tysc/players/players.component.ts
new file mode 100644
index 0000000..fe51eba
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/players/players.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-players',
+  imports: [],
+  templateUrl: './players.component.html',
+  styleUrl: './players.component.css'
+})
+export class PlayersComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/positions/positions.component.css b/kontor-angular/src/app/kontor/tysc/positions/positions.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/positions/positions.component.html b/kontor-angular/src/app/kontor/tysc/positions/positions.component.html
new file mode 100644
index 0000000..9f6f0df
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/positions/positions.component.html
@@ -0,0 +1 @@
+<p>positions works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/positions/positions.component.spec.ts b/kontor-angular/src/app/kontor/tysc/positions/positions.component.spec.ts
new file mode 100644
index 0000000..3e71a33
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/positions/positions.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PositionsComponent } from './positions.component';
+
+describe('PositionsComponent', () => {
+  let component: PositionsComponent;
+  let fixture: ComponentFixture<PositionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PositionsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PositionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/positions/positions.component.ts b/kontor-angular/src/app/kontor/tysc/positions/positions.component.ts
new file mode 100644
index 0000000..8aa4d12
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/positions/positions.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-positions',
+  imports: [],
+  templateUrl: './positions.component.html',
+  styleUrl: './positions.component.css'
+})
+export class PositionsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/sports/sports.component.css b/kontor-angular/src/app/kontor/tysc/sports/sports.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/sports/sports.component.html b/kontor-angular/src/app/kontor/tysc/sports/sports.component.html
new file mode 100644
index 0000000..b76e0d7
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/sports/sports.component.html
@@ -0,0 +1 @@
+<p>sports works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/sports/sports.component.spec.ts b/kontor-angular/src/app/kontor/tysc/sports/sports.component.spec.ts
new file mode 100644
index 0000000..c9feb0e
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/sports/sports.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SportsComponent } from './sports.component';
+
+describe('SportsComponent', () => {
+  let component: SportsComponent;
+  let fixture: ComponentFixture<SportsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SportsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/sports/sports.component.ts b/kontor-angular/src/app/kontor/tysc/sports/sports.component.ts
new file mode 100644
index 0000000..0467766
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/sports/sports.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sports',
+  imports: [],
+  templateUrl: './sports.component.html',
+  styleUrl: './sports.component.css'
+})
+export class SportsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/teams/teams.component.css b/kontor-angular/src/app/kontor/tysc/teams/teams.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/teams/teams.component.html b/kontor-angular/src/app/kontor/tysc/teams/teams.component.html
new file mode 100644
index 0000000..4f2dfda
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/teams/teams.component.html
@@ -0,0 +1 @@
+<p>teams works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/teams/teams.component.spec.ts b/kontor-angular/src/app/kontor/tysc/teams/teams.component.spec.ts
new file mode 100644
index 0000000..224a144
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/teams/teams.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamsComponent } from './teams.component';
+
+describe('TeamsComponent', () => {
+  let component: TeamsComponent;
+  let fixture: ComponentFixture<TeamsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TeamsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TeamsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/teams/teams.component.ts b/kontor-angular/src/app/kontor/tysc/teams/teams.component.ts
new file mode 100644
index 0000000..922c64c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/teams/teams.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-teams',
+  imports: [],
+  templateUrl: './teams.component.html',
+  styleUrl: './teams.component.css'
+})
+export class TeamsComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.css b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html
new file mode 100644
index 0000000..67b5fb9
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-navigation/tysc-navigation.component.html
@@ -0,0 +1,7 @@
+<div class="subnav">
+  <a routerLink="/tysc/teams" routerLinkActive="active">Teams</a>
+  <a routerLink="/tysc/positions" routerLinkActive="active">Positions</a>
+  <a routerLink="/tysc/players" routerLinkActive="active">Players</a>
+  <a routerLink="/tysc/cardsets" routerLinkActive="active">Card Sets</a>
+  <a routerLink="/tysc/vendors" routerLinkActive="active">Vendors</a>
+</div>
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-section.component.css b/kontor-angular/src/app/kontor/tysc/tysc-section.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section.component.html b/kontor-angular/src/app/kontor/tysc/tysc-section.component.html
new file mode 100644
index 0000000..6e5aeb1
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section.component.html
@@ -0,0 +1,2 @@
+<app-tysc-navigation />
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/kontor/tysc/tysc-section.component.spec.ts b/kontor-angular/src/app/kontor/tysc/tysc-section.component.spec.ts
new file mode 100644
index 0000000..c8c34ec
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/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.component.ts b/kontor-angular/src/app/kontor/tysc/tysc-section.component.ts
new file mode 100644
index 0000000..9c05e01
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc-section.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TyscNavigationComponent } from './tysc-navigation/tysc-navigation.component';
+
+@Component({
+  selector: 'app-tysc-section',
+  imports: [RouterOutlet, TyscNavigationComponent],
+  templateUrl: './tysc-section.component.html',
+  styleUrl: './tysc-section.component.css'
+})
+export class TyscSectionComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/tysc/tysc.routes.ts b/kontor-angular/src/app/kontor/tysc/tysc.routes.ts
new file mode 100644
index 0000000..bec1dae
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/tysc.routes.ts
@@ -0,0 +1,36 @@
+import { Routes } from "@angular/router";
+import { TyscSectionComponent } from "./tysc-section.component";
+import { TeamsComponent } from "./teams/teams.component";
+import { PositionsComponent } from "./positions/positions.component";
+import { PlayersComponent } from "./players/players.component";
+import { CardsetsComponent } from "./cardsets/cardsets.component";
+import { VendorsComponent } from "./vendors/vendors.component";
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: TyscSectionComponent,
+    children: [
+      {
+        path: 'teams',
+        component: TeamsComponent,
+      },
+      {
+        path: 'positions',
+        component: PositionsComponent,
+      },
+      {
+        path: 'players',
+        component: PlayersComponent,
+      },
+      {
+        path: 'cardsets',
+        component: CardsetsComponent,
+      },
+      {
+        path: 'vendors',
+        component: VendorsComponent,
+      },
+    ],
+  },
+];
diff --git a/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.css b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.html b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.html
new file mode 100644
index 0000000..a4fc884
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.html
@@ -0,0 +1 @@
+<p>vendors works!</p>
diff --git a/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.spec.ts b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.spec.ts
new file mode 100644
index 0000000..48ed75f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VendorsComponent } from './vendors.component';
+
+describe('VendorsComponent', () => {
+  let component: VendorsComponent;
+  let fixture: ComponentFixture<VendorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VendorsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VendorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.ts b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.ts
new file mode 100644
index 0000000..edacb9b
--- /dev/null
+++ b/kontor-angular/src/app/kontor/tysc/vendors/vendors.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-vendors',
+  imports: [],
+  templateUrl: './vendors.component.html',
+  styleUrl: './vendors.component.css'
+})
+export class VendorsComponent {
+
+}
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.spec.ts b/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts
deleted file mode 100644
index 1eae192..0000000
--- a/kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaActorListComponent } from './media-actor-list.component';
-
-describe('MediaActorListComponent', () => {
-  let component: MediaActorListComponent;
-  let fixture: ComponentFixture<MediaActorListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaActorListComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaActorListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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.spec.ts b/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
deleted file mode 100644
index ccaf8b5..0000000
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaOverviewComponent } from './media-overview.component';
-
-describe('MediaOverview', () => {
-  let component: MediaOverviewComponent;
-  let fixture: ComponentFixture<MediaOverviewComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaOverviewComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaOverviewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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-list/sport-list.component.html b/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html
deleted file mode 100644
index 36f5c85..0000000
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>sport-list works!</p>
-<ul>
-  @for (sport of sports(); track sport.id) {
-  <li>
-    <h3>{{ sport.name }}</h3>
-  </li>
-  }
-</ul>
diff --git a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts b/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts
deleted file mode 100644
index a22dd75..0000000
--- a/kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Sport } from '../sport.model';
-import { SportService } from '../sport.service';
-
-@Component({
-  selector: 'app-sport-list',
-  imports: [],
-  templateUrl: './sport-list.component.html',
-  styleUrl: './sport-list.component.css'
-})
-export class SportListComponent implements OnInit {
-  sports = signal<Sport[] | undefined>(undefined);
-  isFetching = signal(false);
-  error = signal('');
-  private sportService = inject(SportService);
-  private destroyRef = inject(DestroyRef);
-
-
-  ngOnInit() {
-    this.isFetching.set(true);
-    const subscription = this.sportService.loadSports().subscribe({
-      next: (sports) => {
-        this.sports.set(sports);
-      },
-      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/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/sport/sport.model.ts b/kontor-angular/src/app/tysc/sport/sport.model.ts
deleted file mode 100644
index a9bc9a2..0000000
--- a/kontor-angular/src/app/tysc/sport/sport.model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Sport {
-  id: string;
-  name: string;
-}
diff --git a/kontor-angular/src/app/tysc/sport/sport.service.ts b/kontor-angular/src/app/tysc/sport/sport.service.ts
deleted file mode 100644
index 31945dd..0000000
--- a/kontor-angular/src/app/tysc/sport/sport.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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";
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SportService {
-  private errorService = inject(ErrorService);
-  private httpClient = inject(HttpClient);
-  private sports = signal<Sport[]>([]);
-
-  loadedSports = this.sports.asReadonly();
-
-  loadSports() {
-    return this.fetchSports('http://127.0.0.1:8800/api/tysc/sports', 'Someting went wrong fetching sports. Please try again later-');
-  }
-
-  private fetchSports(url: string, errorMessage: string) {
-    return this.httpClient.get<Sport[]>(url).pipe(
-      map((resData) => resData),
-      catchError((error) => {
-        console.log(error);
-        return throwError(() => new Error(errorMessage));
-      })
-    );
-  }
-}
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.html b/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html
deleted file mode 100644
index 7f5e8d2..0000000
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="subnav">
-  <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/vendor" routerLinkActive="active">Vendor</a>
-</div>
-<router-outlet></router-outlet>
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 {
-
-}