From 9acdff19e1ec93c01adc043c39e5d6ebc1b2ac1a Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@cimt-ag.de>
Date: Wed, 10 Sep 2025 17:25:22 +0200
Subject: [PATCH] add routing for comics and media

---
 .../src/app/{app.css => app.component.css}    |  0
 kontor-angular/src/app/app.component.html     |  9 +++++
 kontor-angular/src/app/app.component.ts       | 13 +++++++
 kontor-angular/src/app/app.html               | 23 ------------
 kontor-angular/src/app/app.routes.ts          | 35 +++++++++++++------
 kontor-angular/src/app/app.ts                 | 14 --------
 .../{artist.css => artist-list.component.css} |  0
 ...artist.html => artist-list.component.html} |  0
 ....spec.ts => artist-list.component.spec.ts} |  2 +-
 .../app/comic/artist/artist-list.component.ts | 11 ++++++
 kontor-angular/src/app/comic/artist/artist.ts | 11 ------
 ...rview.css => comic-overview.component.css} |  0
 ...iew.html => comic-overview.component.html} |  0
 ...ec.ts => comic-overview.component.spec.ts} |  2 +-
 ...verview.ts => comic-overview.component.ts} |  6 ++--
 .../{comics.css => comics-list.component.css} |  0
 ...comics.html => comics-list.component.html} |  0
 ....spec.ts => comics-list.component.spec.ts} | 10 +++---
 .../app/comic/comics/comics-list.component.ts | 11 ++++++
 kontor-angular/src/app/comic/comics/comics.ts | 12 -------
 ...isher.css => publisher-list.component.css} |  0
 ...her.html => publisher-list.component.html} |  0
 ...ec.ts => publisher-list.component.spec.ts} |  2 +-
 .../publisher/publisher-list.component.ts     | 11 ++++++
 .../src/app/comic/publisher/publisher.ts      | 11 ------
 .../footer.component.css}                     |  0
 .../app/kontor/footer/footer.component.html   |  3 ++
 .../kontor/footer/footer.component.spec.ts    | 23 ++++++++++++
 .../src/app/kontor/footer/footer.component.ts | 13 +++++++
 .../app/kontor/header/header.component.css    |  0
 .../app/kontor/header/header.component.html   | 13 +++++++
 .../kontor/header/header.component.spec.ts    | 23 ++++++++++++
 .../src/app/kontor/header/header.component.ts | 13 +++++++
 .../src/app/kontor/kontor.component.css       |  0
 .../{kontor.html => kontor.component.html}    |  0
 ...ontor.spec.ts => kontor.component.spec.ts} | 10 +++---
 .../src/app/kontor/kontor.component.ts        | 11 ++++++
 kontor-angular/src/app/kontor/kontor.ts       | 11 ------
 .../media-actors-list.component.css           |  0
 .../media-actors-list.component.html          |  1 +
 .../media-actors-list.component.spec.ts       | 23 ++++++++++++
 .../media-actors-list.component.ts            | 11 ++++++
 .../media-files-list.component.css            |  0
 .../media-files-list.component.html           |  1 +
 .../media-files-list.component.spec.ts        | 23 ++++++++++++
 .../media-files-list.component.ts             | 11 ++++++
 .../media-overview.component.css              |  0
 .../media-overview.component.html             | 10 ++++++
 .../media-overview.component.spec.ts          | 23 ++++++++++++
 .../media-overview.component.ts               | 12 +++++++
 .../media-videos-list.component.css           |  0
 .../media-videos-list.component.html          |  1 +
 .../media-videos-list.component.spec.ts       | 23 ++++++++++++
 .../media-videos-list.component.ts            | 11 ++++++
 kontor-angular/src/main.ts                    |  4 +--
 55 files changed, 346 insertions(+), 111 deletions(-)
 rename kontor-angular/src/app/{app.css => app.component.css} (100%)
 create mode 100644 kontor-angular/src/app/app.component.html
 create mode 100644 kontor-angular/src/app/app.component.ts
 delete mode 100644 kontor-angular/src/app/app.html
 delete mode 100644 kontor-angular/src/app/app.ts
 rename kontor-angular/src/app/comic/artist/{artist.css => artist-list.component.css} (100%)
 rename kontor-angular/src/app/comic/artist/{artist.html => artist-list.component.html} (100%)
 rename kontor-angular/src/app/comic/artist/{artist.spec.ts => artist-list.component.spec.ts} (90%)
 create mode 100644 kontor-angular/src/app/comic/artist/artist-list.component.ts
 delete mode 100644 kontor-angular/src/app/comic/artist/artist.ts
 rename kontor-angular/src/app/comic/comic-overview/{comic-overview.css => comic-overview.component.css} (100%)
 rename kontor-angular/src/app/comic/comic-overview/{comic-overview.html => comic-overview.component.html} (100%)
 rename kontor-angular/src/app/comic/comic-overview/{comic-overview.spec.ts => comic-overview.component.spec.ts} (89%)
 rename kontor-angular/src/app/comic/comic-overview/{comic-overview.ts => comic-overview.component.ts} (59%)
 rename kontor-angular/src/app/comic/comics/{comics.css => comics-list.component.css} (100%)
 rename kontor-angular/src/app/comic/comics/{comics.html => comics-list.component.html} (100%)
 rename kontor-angular/src/app/comic/comics/{comics.spec.ts => comics-list.component.spec.ts} (58%)
 create mode 100644 kontor-angular/src/app/comic/comics/comics-list.component.ts
 delete mode 100644 kontor-angular/src/app/comic/comics/comics.ts
 rename kontor-angular/src/app/comic/publisher/{publisher.css => publisher-list.component.css} (100%)
 rename kontor-angular/src/app/comic/publisher/{publisher.html => publisher-list.component.html} (100%)
 rename kontor-angular/src/app/comic/publisher/{publisher.spec.ts => publisher-list.component.spec.ts} (90%)
 create mode 100644 kontor-angular/src/app/comic/publisher/publisher-list.component.ts
 delete mode 100644 kontor-angular/src/app/comic/publisher/publisher.ts
 rename kontor-angular/src/app/kontor/{kontor.css => footer/footer.component.css} (100%)
 create mode 100644 kontor-angular/src/app/kontor/footer/footer.component.html
 create mode 100644 kontor-angular/src/app/kontor/footer/footer.component.spec.ts
 create mode 100644 kontor-angular/src/app/kontor/footer/footer.component.ts
 create mode 100644 kontor-angular/src/app/kontor/header/header.component.css
 create mode 100644 kontor-angular/src/app/kontor/header/header.component.html
 create mode 100644 kontor-angular/src/app/kontor/header/header.component.spec.ts
 create mode 100644 kontor-angular/src/app/kontor/header/header.component.ts
 create mode 100644 kontor-angular/src/app/kontor/kontor.component.css
 rename kontor-angular/src/app/kontor/{kontor.html => kontor.component.html} (100%)
 rename kontor-angular/src/app/kontor/{kontor.spec.ts => kontor.component.spec.ts} (61%)
 create mode 100644 kontor-angular/src/app/kontor/kontor.component.ts
 delete mode 100644 kontor-angular/src/app/kontor/kontor.ts
 create mode 100644 kontor-angular/src/app/media/media-actors-list/media-actors-list.component.css
 create mode 100644 kontor-angular/src/app/media/media-actors-list/media-actors-list.component.html
 create mode 100644 kontor-angular/src/app/media/media-actors-list/media-actors-list.component.spec.ts
 create mode 100644 kontor-angular/src/app/media/media-actors-list/media-actors-list.component.ts
 create mode 100644 kontor-angular/src/app/media/media-files-list/media-files-list.component.css
 create mode 100644 kontor-angular/src/app/media/media-files-list/media-files-list.component.html
 create mode 100644 kontor-angular/src/app/media/media-files-list/media-files-list.component.spec.ts
 create mode 100644 kontor-angular/src/app/media/media-files-list/media-files-list.component.ts
 create mode 100644 kontor-angular/src/app/media/media-overview/media-overview.component.css
 create mode 100644 kontor-angular/src/app/media/media-overview/media-overview.component.html
 create mode 100644 kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
 create mode 100644 kontor-angular/src/app/media/media-overview/media-overview.component.ts
 create mode 100644 kontor-angular/src/app/media/media-videos-list/media-videos-list.component.css
 create mode 100644 kontor-angular/src/app/media/media-videos-list/media-videos-list.component.html
 create mode 100644 kontor-angular/src/app/media/media-videos-list/media-videos-list.component.spec.ts
 create mode 100644 kontor-angular/src/app/media/media-videos-list/media-videos-list.component.ts

diff --git a/kontor-angular/src/app/app.css b/kontor-angular/src/app/app.component.css
similarity index 100%
rename from kontor-angular/src/app/app.css
rename to kontor-angular/src/app/app.component.css
diff --git a/kontor-angular/src/app/app.component.html b/kontor-angular/src/app/app.component.html
new file mode 100644
index 0000000..def9b90
--- /dev/null
+++ b/kontor-angular/src/app/app.component.html
@@ -0,0 +1,9 @@
+<div class="app">
+  <kontor-header />
+  <main>
+    <router-outlet />
+  </main>
+
+  <kontor-footer />
+</div>
+
diff --git a/kontor-angular/src/app/app.component.ts b/kontor-angular/src/app/app.component.ts
new file mode 100644
index 0000000..f8f2137
--- /dev/null
+++ b/kontor-angular/src/app/app.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { KontorHeaderComponent } from "./kontor/header/header.component";
+import { KontorFooterComponent } from './kontor/footer/footer.component';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+}
diff --git a/kontor-angular/src/app/app.html b/kontor-angular/src/app/app.html
deleted file mode 100644
index 1e17a33..0000000
--- a/kontor-angular/src/app/app.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="app">
-  <header>
-    <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>
-  <main>
-    <router-outlet />
-  </main>
-
-  <footer>
-    <a href="{{ footerUrl }}">{{ footerLink }}</a>
-  </footer>
-</div>
-
diff --git a/kontor-angular/src/app/app.routes.ts b/kontor-angular/src/app/app.routes.ts
index 7adad53..7763476 100644
--- a/kontor-angular/src/app/app.routes.ts
+++ b/kontor-angular/src/app/app.routes.ts
@@ -1,21 +1,34 @@
 import { Routes } from '@angular/router';
-import { Kontor } from './kontor/kontor';
+import { KontorComponent } from './kontor/kontor.component';
 import { Login } from './common/login/login';
-import { Comics } from './comic/comics/comics';
-import { Publisher } from './comic/publisher/publisher';
-import { Artist } from './comic/artist/artist';
-import { ComicOverview } from './comic/comic-overview/comic-overview';
+import { ComicsListComponent } from './comic/comics/comics-list.component';
+import { PublisherListComponent } from './comic/publisher/publisher-list.component';
+import { ArtistListComponent } from './comic/artist/artist-list.component';
+import { ComicOverviewComponent } from './comic/comic-overview/comic-overview.component';
+import { MediaOverviewComponent } from './media/media-overview/media-overview.component';
+import { MediaFilesListComponent } from './media/media-files-list/media-files-list.component';
+import { MediaActorsListComponent } from './media/media-actors-list/media-actors-list.component';
+import { MediaVideosListComponent } from './media/media-videos-list/media-videos-list.component';
 
 export const routes: Routes = [
-  { path: '', component: Kontor, },
+  { path: '', component: KontorComponent, },
   { path: 'login', component: Login, },
   {
-    path: 'comic', component: ComicOverview,
+    path: 'comic', component: ComicOverviewComponent,
     children: [
-      { path: 'comics', component: Comics},
-      { path: 'publisher', component: Publisher},
-      { path: 'artist', component: Artist},
+      { path: '', component: ComicsListComponent},
+      { path: 'comics', component: ComicsListComponent},
+      { path: 'publisher', component: PublisherListComponent},
+      { path: 'artist', component: ArtistListComponent},
+    ],
+  },
+  {
+    path: 'media', component: MediaOverviewComponent,
+    children: [
+      { path: '', component: MediaFilesListComponent},
+      { path: 'mediafiles', component: MediaFilesListComponent},
+      { path: 'mediaactors', component: MediaActorsListComponent},
+      { path: 'mediavideos', component: MediaVideosListComponent},
     ],
   },
-
 ];
diff --git a/kontor-angular/src/app/app.ts b/kontor-angular/src/app/app.ts
deleted file mode 100644
index 43a2368..0000000
--- a/kontor-angular/src/app/app.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet, RouterLink],
-  templateUrl: './app.html',
-  styleUrl: './app.css'
-})
-export class App {
-  protected readonly title = signal('kontor-angular');
-  footerUrl = "https://kontor.thpeetz.de";
-  footerLink = "kontor.thpeetz.de";
-}
diff --git a/kontor-angular/src/app/comic/artist/artist.css b/kontor-angular/src/app/comic/artist/artist-list.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist.css
rename to kontor-angular/src/app/comic/artist/artist-list.component.css
diff --git a/kontor-angular/src/app/comic/artist/artist.html b/kontor-angular/src/app/comic/artist/artist-list.component.html
similarity index 100%
rename from kontor-angular/src/app/comic/artist/artist.html
rename to kontor-angular/src/app/comic/artist/artist-list.component.html
diff --git a/kontor-angular/src/app/comic/artist/artist.spec.ts b/kontor-angular/src/app/comic/artist/artist-list.component.spec.ts
similarity index 90%
rename from kontor-angular/src/app/comic/artist/artist.spec.ts
rename to kontor-angular/src/app/comic/artist/artist-list.component.spec.ts
index 9b37c32..977b2ac 100644
--- a/kontor-angular/src/app/comic/artist/artist.spec.ts
+++ b/kontor-angular/src/app/comic/artist/artist-list.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Artist } from './artist';
+import { Artist } from './artist-list.component';
 
 describe('Artist', () => {
   let component: Artist;
diff --git a/kontor-angular/src/app/comic/artist/artist-list.component.ts b/kontor-angular/src/app/comic/artist/artist-list.component.ts
new file mode 100644
index 0000000..29318a9
--- /dev/null
+++ b/kontor-angular/src/app/comic/artist/artist-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kontor-artist-list',
+  imports: [],
+  templateUrl: './artist-list.component.html',
+  styleUrl: './artist-list.component.css'
+})
+export class ArtistListComponent {
+
+}
diff --git a/kontor-angular/src/app/comic/artist/artist.ts b/kontor-angular/src/app/comic/artist/artist.ts
deleted file mode 100644
index f023d2c..0000000
--- a/kontor-angular/src/app/comic/artist/artist.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-artist',
-  imports: [],
-  templateUrl: './artist.html',
-  styleUrl: './artist.css'
-})
-export class Artist {
-
-}
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.css b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.css
rename to kontor-angular/src/app/comic/comic-overview/comic-overview.component.css
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.html b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.html
similarity index 100%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.html
rename to kontor-angular/src/app/comic/comic-overview/comic-overview.component.html
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.spec.ts b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
similarity index 89%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.spec.ts
rename to kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
index 431a1b3..a61f624 100644
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.spec.ts
+++ b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicOverview } from './comic-overview';
+import { ComicOverview } from './comic-overview.component';
 
 describe('ComicOverview', () => {
   let component: ComicOverview;
diff --git a/kontor-angular/src/app/comic/comic-overview/comic-overview.ts b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts
similarity index 59%
rename from kontor-angular/src/app/comic/comic-overview/comic-overview.ts
rename to kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts
index 656454a..dbb049a 100644
--- a/kontor-angular/src/app/comic/comic-overview/comic-overview.ts
+++ b/kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts
@@ -4,9 +4,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 @Component({
   selector: 'app-comic-overview',
   imports: [RouterLink, RouterOutlet],
-  templateUrl: './comic-overview.html',
-  styleUrl: './comic-overview.css'
+  templateUrl: './comic-overview.component.html',
+  styleUrl: './comic-overview.component.css'
 })
-export class ComicOverview {
+export class ComicOverviewComponent {
 
 }
diff --git a/kontor-angular/src/app/comic/comics/comics.css b/kontor-angular/src/app/comic/comics/comics-list.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/comics/comics.css
rename to kontor-angular/src/app/comic/comics/comics-list.component.css
diff --git a/kontor-angular/src/app/comic/comics/comics.html b/kontor-angular/src/app/comic/comics/comics-list.component.html
similarity index 100%
rename from kontor-angular/src/app/comic/comics/comics.html
rename to kontor-angular/src/app/comic/comics/comics-list.component.html
diff --git a/kontor-angular/src/app/comic/comics/comics.spec.ts b/kontor-angular/src/app/comic/comics/comics-list.component.spec.ts
similarity index 58%
rename from kontor-angular/src/app/comic/comics/comics.spec.ts
rename to kontor-angular/src/app/comic/comics/comics-list.component.spec.ts
index 14de3e5..89f8178 100644
--- a/kontor-angular/src/app/comic/comics/comics.spec.ts
+++ b/kontor-angular/src/app/comic/comics/comics-list.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Comics } from './comics';
+import { ComicsListComponent } from './comics-list.component';
 
 describe('Comics', () => {
-  let component: Comics;
-  let fixture: ComponentFixture<Comics>;
+  let component: ComicsListComponent;
+  let fixture: ComponentFixture<ComicsListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Comics]
+      imports: [ComicsListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Comics);
+    fixture = TestBed.createComponent(ComicsListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/comic/comics/comics-list.component.ts b/kontor-angular/src/app/comic/comics/comics-list.component.ts
new file mode 100644
index 0000000..3c6f981
--- /dev/null
+++ b/kontor-angular/src/app/comic/comics/comics-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kontor-comics-list',
+  imports: [],
+  templateUrl: './comics-list.component.html',
+  styleUrl: './comics-list.component.css'
+})
+export class ComicsListComponent {
+
+}
diff --git a/kontor-angular/src/app/comic/comics/comics.ts b/kontor-angular/src/app/comic/comics/comics.ts
deleted file mode 100644
index ab44817..0000000
--- a/kontor-angular/src/app/comic/comics/comics.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-comics',
-  imports: [RouterLink, RouterOutlet],
-  templateUrl: './comics.html',
-  styleUrl: './comics.css'
-})
-export class Comics {
-
-}
diff --git a/kontor-angular/src/app/comic/publisher/publisher.css b/kontor-angular/src/app/comic/publisher/publisher-list.component.css
similarity index 100%
rename from kontor-angular/src/app/comic/publisher/publisher.css
rename to kontor-angular/src/app/comic/publisher/publisher-list.component.css
diff --git a/kontor-angular/src/app/comic/publisher/publisher.html b/kontor-angular/src/app/comic/publisher/publisher-list.component.html
similarity index 100%
rename from kontor-angular/src/app/comic/publisher/publisher.html
rename to kontor-angular/src/app/comic/publisher/publisher-list.component.html
diff --git a/kontor-angular/src/app/comic/publisher/publisher.spec.ts b/kontor-angular/src/app/comic/publisher/publisher-list.component.spec.ts
similarity index 90%
rename from kontor-angular/src/app/comic/publisher/publisher.spec.ts
rename to kontor-angular/src/app/comic/publisher/publisher-list.component.spec.ts
index 6d676fc..27bd34d 100644
--- a/kontor-angular/src/app/comic/publisher/publisher.spec.ts
+++ b/kontor-angular/src/app/comic/publisher/publisher-list.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Publisher } from './publisher';
+import { Publisher } from './publisher-list.component';
 
 describe('Publisher', () => {
   let component: Publisher;
diff --git a/kontor-angular/src/app/comic/publisher/publisher-list.component.ts b/kontor-angular/src/app/comic/publisher/publisher-list.component.ts
new file mode 100644
index 0000000..a74ff7b
--- /dev/null
+++ b/kontor-angular/src/app/comic/publisher/publisher-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kontor-publisher-list',
+  imports: [],
+  templateUrl: './publisher-list.component.html',
+  styleUrl: './publisher-list.component.css'
+})
+export class PublisherListComponent {
+
+}
diff --git a/kontor-angular/src/app/comic/publisher/publisher.ts b/kontor-angular/src/app/comic/publisher/publisher.ts
deleted file mode 100644
index 769135b..0000000
--- a/kontor-angular/src/app/comic/publisher/publisher.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-publisher',
-  imports: [],
-  templateUrl: './publisher.html',
-  styleUrl: './publisher.css'
-})
-export class Publisher {
-
-}
diff --git a/kontor-angular/src/app/kontor/kontor.css b/kontor-angular/src/app/kontor/footer/footer.component.css
similarity index 100%
rename from kontor-angular/src/app/kontor/kontor.css
rename to kontor-angular/src/app/kontor/footer/footer.component.css
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.html b/kontor-angular/src/app/kontor/footer/footer.component.html
new file mode 100644
index 0000000..e286f81
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/footer.component.html
@@ -0,0 +1,3 @@
+  <footer>
+    <a href="{{ footerUrl }}">{{ footerLink }}</a>
+  </footer>
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.spec.ts b/kontor-angular/src/app/kontor/footer/footer.component.spec.ts
new file mode 100644
index 0000000..0f4e3e0
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KontorFooterComponent } from './footer.component';
+
+describe('KontorFooterComponent', () => {
+  let component: KontorFooterComponent;
+  let fixture: ComponentFixture<KontorFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KontorFooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KontorFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.ts b/kontor-angular/src/app/kontor/footer/footer.component.ts
new file mode 100644
index 0000000..8262425
--- /dev/null
+++ b/kontor-angular/src/app/kontor/footer/footer.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kontor-footer',
+  imports: [],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.css'
+})
+export class KontorFooterComponent {
+  footerUrl = "https://kontor.thpeetz.de";
+  footerLink = "kontor.thpeetz.de";
+
+}
diff --git a/kontor-angular/src/app/kontor/header/header.component.css b/kontor-angular/src/app/kontor/header/header.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/header/header.component.html b/kontor-angular/src/app/kontor/header/header.component.html
new file mode 100644
index 0000000..ff00120
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/header.component.html
@@ -0,0 +1,13 @@
+<header>
+  <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>
diff --git a/kontor-angular/src/app/kontor/header/header.component.spec.ts b/kontor-angular/src/app/kontor/header/header.component.spec.ts
new file mode 100644
index 0000000..e5cc393
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KontorHeaderComponent } from './header.component';
+
+describe('Header', () => {
+  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/header.component.ts b/kontor-angular/src/app/kontor/header/header.component.ts
new file mode 100644
index 0000000..a0357fb
--- /dev/null
+++ b/kontor-angular/src/app/kontor/header/header.component.ts
@@ -0,0 +1,13 @@
+import { Component, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'kontor-header',
+  imports: [RouterLink],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css'
+})
+export class KontorHeaderComponent {
+  protected readonly title = signal('Kontor');
+
+}
diff --git a/kontor-angular/src/app/kontor/kontor.component.css b/kontor-angular/src/app/kontor/kontor.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/kontor.html b/kontor-angular/src/app/kontor/kontor.component.html
similarity index 100%
rename from kontor-angular/src/app/kontor/kontor.html
rename to kontor-angular/src/app/kontor/kontor.component.html
diff --git a/kontor-angular/src/app/kontor/kontor.spec.ts b/kontor-angular/src/app/kontor/kontor.component.spec.ts
similarity index 61%
rename from kontor-angular/src/app/kontor/kontor.spec.ts
rename to kontor-angular/src/app/kontor/kontor.component.spec.ts
index 4f77766..1b5bc70 100644
--- a/kontor-angular/src/app/kontor/kontor.spec.ts
+++ b/kontor-angular/src/app/kontor/kontor.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Kontor } from './kontor';
+import { KontorComponent } from './kontor.component';
 
 describe('Kontor', () => {
-  let component: Kontor;
-  let fixture: ComponentFixture<Kontor>;
+  let component: KontorComponent;
+  let fixture: ComponentFixture<KontorComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Kontor]
+      imports: [KontorComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Kontor);
+    fixture = TestBed.createComponent(KontorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/kontor-angular/src/app/kontor/kontor.component.ts b/kontor-angular/src/app/kontor/kontor.component.ts
new file mode 100644
index 0000000..bb432f4
--- /dev/null
+++ b/kontor-angular/src/app/kontor/kontor.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-kontor',
+  imports: [],
+  templateUrl: './kontor.component.html',
+  styleUrl: './kontor.component.css'
+})
+export class KontorComponent {
+
+}
diff --git a/kontor-angular/src/app/kontor/kontor.ts b/kontor-angular/src/app/kontor/kontor.ts
deleted file mode 100644
index 0dea63d..0000000
--- a/kontor-angular/src/app/kontor/kontor.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-kontor',
-  imports: [],
-  templateUrl: './kontor.html',
-  styleUrl: './kontor.css'
-})
-export class Kontor {
-
-}
diff --git a/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.css b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.html b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.html
new file mode 100644
index 0000000..633f6b1
--- /dev/null
+++ b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.html
@@ -0,0 +1 @@
+<p>media-actors-list works!</p>
diff --git a/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.spec.ts b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.spec.ts
new file mode 100644
index 0000000..6fcb447
--- /dev/null
+++ b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaActorsListComponent } from './media-actors-list.component';
+
+describe('MediaActorsList', () => {
+  let component: MediaActorsListComponent;
+  let fixture: ComponentFixture<MediaActorsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaActorsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaActorsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.ts b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.ts
new file mode 100644
index 0000000..99e2ed3
--- /dev/null
+++ b/kontor-angular/src/app/media/media-actors-list/media-actors-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-actors-list',
+  imports: [],
+  templateUrl: './media-actors-list.component.html',
+  styleUrl: './media-actors-list.component.css'
+})
+export class MediaActorsListComponent {
+
+}
diff --git a/kontor-angular/src/app/media/media-files-list/media-files-list.component.css b/kontor-angular/src/app/media/media-files-list/media-files-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/media/media-files-list/media-files-list.component.html b/kontor-angular/src/app/media/media-files-list/media-files-list.component.html
new file mode 100644
index 0000000..4eba07e
--- /dev/null
+++ b/kontor-angular/src/app/media/media-files-list/media-files-list.component.html
@@ -0,0 +1 @@
+<p>media-files-list works!</p>
diff --git a/kontor-angular/src/app/media/media-files-list/media-files-list.component.spec.ts b/kontor-angular/src/app/media/media-files-list/media-files-list.component.spec.ts
new file mode 100644
index 0000000..15de5c1
--- /dev/null
+++ b/kontor-angular/src/app/media/media-files-list/media-files-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaFilesListComponent } from './media-files-list.component';
+
+describe('MediaFilesList', () => {
+  let component: MediaFilesListComponent;
+  let fixture: ComponentFixture<MediaFilesListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaFilesListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaFilesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/media/media-files-list/media-files-list.component.ts b/kontor-angular/src/app/media/media-files-list/media-files-list.component.ts
new file mode 100644
index 0000000..4abc354
--- /dev/null
+++ b/kontor-angular/src/app/media/media-files-list/media-files-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-files-list',
+  imports: [],
+  templateUrl: './media-files-list.component.html',
+  styleUrl: './media-files-list.component.css'
+})
+export class MediaFilesListComponent {
+
+}
diff --git a/kontor-angular/src/app/media/media-overview/media-overview.component.css b/kontor-angular/src/app/media/media-overview/media-overview.component.css
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..cf87835
--- /dev/null
+++ b/kontor-angular/src/app/media/media-overview/media-overview.component.html
@@ -0,0 +1,10 @@
+<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>
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
new file mode 100644
index 0000000..ccaf8b5
--- /dev/null
+++ b/kontor-angular/src/app/media/media-overview/media-overview.component.spec.ts
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 0000000..b5584a0
--- /dev/null
+++ b/kontor-angular/src/app/media/media-overview/media-overview.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'kontor-media-overview',
+  imports: [RouterOutlet, RouterLink],
+  templateUrl: './media-overview.component.html',
+  styleUrl: './media-overview.component.css'
+})
+export class MediaOverviewComponent {
+
+}
diff --git a/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.css b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.html b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.html
new file mode 100644
index 0000000..3802b3f
--- /dev/null
+++ b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.html
@@ -0,0 +1 @@
+<p>media-videos-list works!</p>
diff --git a/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.spec.ts b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.spec.ts
new file mode 100644
index 0000000..c8f4bc0
--- /dev/null
+++ b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaVideosListComponent } from './media-videos-list.component';
+
+describe('MediaVideosList', () => {
+  let component: MediaVideosListComponent;
+  let fixture: ComponentFixture<MediaVideosListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaVideosListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaVideosListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.ts b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.ts
new file mode 100644
index 0000000..7c4fc7e
--- /dev/null
+++ b/kontor-angular/src/app/media/media-videos-list/media-videos-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-videos-list',
+  imports: [],
+  templateUrl: './media-videos-list.component.html',
+  styleUrl: './media-videos-list.component.css'
+})
+export class MediaVideosListComponent {
+
+}
diff --git a/kontor-angular/src/main.ts b/kontor-angular/src/main.ts
index 5df75f9..35b00f3 100644
--- a/kontor-angular/src/main.ts
+++ b/kontor-angular/src/main.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import { AppComponent } from './app/app.component';
 
-bootstrapApplication(App, appConfig)
+bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));