diff --git a/kontor-angular/src/app/app.routes.ts b/kontor-angular/src/app/app.routes.ts
index 3a8a612..07d6491 100644
--- a/kontor-angular/src/app/app.routes.ts
+++ b/kontor-angular/src/app/app.routes.ts
@@ -1,14 +1,12 @@
 import { Routes } from '@angular/router';
 import { KontorComponent } from './kontor/kontor.component';
 import { Login } from './common/login/login';
-import { MediaOverviewComponent } from './media/media-overview/media-overview.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 { ComicSectionComponent } from './kontor/comic/comic-section/comic-section.component';
 import { comicRoutes } from './kontor/comic/comic-section/comic-section.routes';
-import { tyscRoutes } from './kontor/tysc/tysc-section/tysc-section.routes';
 import { TyscSectionComponent } from './kontor/tysc/tysc-section/tysc-section.component';
+import { tyscRoutes } from './kontor/tysc/tysc-section/tysc-section.routes';
+import { MediaSectionComponent } from './kontor/media/media-section/media-section.component';
+import { mediaRoutes } from './kontor/media/media-section/media-section.routes';
 
 export const routes: Routes = [
   { path: '', component: KontorComponent, },
@@ -22,12 +20,7 @@ export const routes: Routes = [
     children: tyscRoutes,
   },
   {
-    path: 'media', component: MediaOverviewComponent,
-    children: [
-      { path: '', component: MediaFileListComponent},
-      { path: 'mediafiles', component: MediaFileListComponent},
-      { path: 'mediaactors', component: MediaActorListComponent},
-      { path: 'mediavideos', component: MediaVideoListComponent},
-    ],
+    path: 'media', component: MediaSectionComponent,
+    children: mediaRoutes,
   },
 ];
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.css b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.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/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/media/media-overview/media-overview.component.spec.ts b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts
similarity index 50%
rename from kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
rename to kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts
index ccaf8b5..e1c7fdf 100644
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-navigation/media-navigation.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MediaOverviewComponent } from './media-overview.component';
+import { MediaNavigationComponent } from './media-navigation.component';
 
-describe('MediaOverview', () => {
-  let component: MediaOverviewComponent;
-  let fixture: ComponentFixture<MediaOverviewComponent>;
+describe('MediaNavigationComponent', () => {
+  let component: MediaNavigationComponent;
+  let fixture: ComponentFixture<MediaNavigationComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MediaOverviewComponent]
+      imports: [MediaNavigationComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MediaOverviewComponent);
+    fixture = TestBed.createComponent(MediaNavigationComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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-section/media-section.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-section/media-section.component.css
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.component.html b/kontor-angular/src/app/kontor/media/media-section/media-section.component.html
new file mode 100644
index 0000000..d31e086
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.html
@@ -0,0 +1,2 @@
+<app-media-navigation/>
+<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts
similarity index 51%
rename from kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts
rename to kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts
index 61baa16..fa766d5 100644
--- a/kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TyscMenuComponent } from './tysc-menu.component';
+import { MediaSectionComponent } from './media-section.component';
 
-describe('TyscMenuComponent', () => {
-  let component: TyscMenuComponent;
-  let fixture: ComponentFixture<TyscMenuComponent>;
+describe('MediaSectionComponent', () => {
+  let component: MediaSectionComponent;
+  let fixture: ComponentFixture<MediaSectionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TyscMenuComponent]
+      imports: [MediaSectionComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TyscMenuComponent);
+    fixture = TestBed.createComponent(MediaSectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts
new file mode 100644
index 0000000..a4c17d3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MediaNavigationComponent } from "../media-navigation/media-navigation.component";
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-media-section',
+  imports: [MediaNavigationComponent, RouterOutlet],
+  templateUrl: './media-section.component.html',
+  styleUrl: './media-section.component.css'
+})
+export class MediaSectionComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts b/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts
new file mode 100644
index 0000000..fbd256c
--- /dev/null
+++ b/kontor-angular/src/app/kontor/media/media-section/media-section.routes.ts
@@ -0,0 +1,19 @@
+import { Routes } from "@angular/router";
+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";
+
+export const mediaRoutes: Routes = [
+    { 
+        path: 'mediafiles', 
+        component: MediaFileListComponent
+    },
+    { 
+        path: 'mediaactors', 
+        component: MediaActorListComponent
+    },
+    { 
+        path: 'mediavideos', 
+        component: MediaVideoListComponent
+    },
+];
\ No newline at end of file
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.html b/kontor-angular/src/app/media/media-overview/media-overview.component.html
deleted file mode 100644
index 4a72d42..0000000
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- <p>media-overview works!</p>
-<div>
-  <ul>
-    <li><a routerLink="/media/mediafiles">MediaFiles</a></li>
-    <li><a routerLink="/media/mediaactors">MediaActors</a></li>
-    <li><a routerLink="/media/mediavideos">MediaVideos</a></li>
-  </ul>
-  <h4>Child Routes Result</h4>
-  <router-outlet></router-outlet>
-</div> -->
-<div class="subnav">
-  <a routerLink="/media/mediafiles" routerLinkActive="active">MediaFiles</a>
-  <a routerLink="/media/mediaactors" routerLinkActive="active">MediaActors</a>
-  <a routerLink="/media/mediavideos" routerLinkActive="active">MediaVideos</a>
-</div>
-<router-outlet></router-outlet>
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.ts b/kontor-angular/src/app/media/media-overview/media-overview.component.ts
deleted file mode 100644
index ea7711b..0000000
--- a/kontor-angular/src/app/media/media-overview/media-overview.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'kontor-media-overview',
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
-  templateUrl: './media-overview.component.html',
-  styleUrl: './media-overview.component.css'
-})
-export class MediaOverviewComponent {
-
-}
diff --git a/kontor-angular/src/app/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 {
-
-}