diff --git a/kontor-angular/src/app/app.component.html b/kontor-angular/src/app/app.component.html
index def9b90..604f43b 100644
--- a/kontor-angular/src/app/app.component.html
+++ b/kontor-angular/src/app/app.component.html
@@ -1,5 +1,6 @@
 <div class="app">
   <kontor-header />
+  <app-navigation/>
   <main>
     <router-outlet />
   </main>
diff --git a/kontor-angular/src/app/app.component.ts b/kontor-angular/src/app/app.component.ts
index f8f2137..d4b268e 100644
--- a/kontor-angular/src/app/app.component.ts
+++ b/kontor-angular/src/app/app.component.ts
@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { KontorHeaderComponent } from "./kontor/header/header.component";
 import { KontorFooterComponent } from './kontor/footer/footer.component';
+import { NavigationComponent } from "./kontor/navigation/navigation.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent, NavigationComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.css b/kontor-angular/src/app/kontor/footer/footer.component.css
index 1d66ed7..2b55a97 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.css
+++ b/kontor-angular/src/app/kontor/footer/footer.component.css
@@ -1,7 +1,10 @@
 /* Footer */
-a {
+.footer {
   padding: 20px;
   text-align: center;
-  background: #ddd;
-  margin-top: 20px;
+  background-color: lightblue;
+}
+
+.footer a {
+  font-size: 20px;
 }
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.html b/kontor-angular/src/app/kontor/footer/footer.component.html
index 1f376c3..1e7ad38 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.html
+++ b/kontor-angular/src/app/kontor/footer/footer.component.html
@@ -1,3 +1,3 @@
-<div>
+<footer class="footer">
   <a href="{{ footerUrl }}">{{ footerLink }}</a>
-</div>
+</footer>
\ No newline at end of file
diff --git a/kontor-angular/src/app/kontor/footer/footer.component.ts b/kontor-angular/src/app/kontor/footer/footer.component.ts
index 8262425..7ded191 100644
--- a/kontor-angular/src/app/kontor/footer/footer.component.ts
+++ b/kontor-angular/src/app/kontor/footer/footer.component.ts
@@ -9,5 +9,4 @@ import { Component } from '@angular/core';
 export class KontorFooterComponent {
   footerUrl = "https://kontor.thpeetz.de";
   footerLink = "kontor.thpeetz.de";
-
 }
diff --git a/kontor-angular/src/app/kontor/header/header.component.html b/kontor-angular/src/app/kontor/header/header.component.html
index 9c1f7a2..3191f24 100644
--- a/kontor-angular/src/app/kontor/header/header.component.html
+++ b/kontor-angular/src/app/kontor/header/header.component.html
@@ -2,18 +2,4 @@
   <section>
     <h1>{{ title() }}</h1>
   </section>
-  <!-- <nav>
-    <ul>
-      <li><a routerLink="/">Kontor</a></li>
-      <li><a routerLink="/comic">Comics</a></li>
-      <li><a routerLink="/tysc">TradeYourSportsCards</a></li>
-      <li><a routerLink="/media">Media</a></li>
-    </ul>
-  </nav> -->
 </header>
-<div class="topnav">
-  <a routerLink="/" routerLinkActive="active">Kontor</a>
-  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
-  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
-  <a routerLink="/media"  routerLinkActive="active">Media</a>
-</div>
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.css b/kontor-angular/src/app/kontor/navigation/navigation.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.html b/kontor-angular/src/app/kontor/navigation/navigation.component.html
new file mode 100644
index 0000000..f7c8699
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.html
@@ -0,0 +1,6 @@
+<div class="topnav">
+  <a routerLink="/" >Kontor</a>
+  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
+  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
+  <a routerLink="/media"  routerLinkActive="active">Media</a>
+</div>
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts b/kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts
new file mode 100644
index 0000000..a161d31
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/navigation/navigation.component.ts b/kontor-angular/src/app/kontor/navigation/navigation.component.ts
new file mode 100644
index 0000000..c5feb48
--- /dev/null
+++ b/kontor-angular/src/app/kontor/navigation/navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-navigation',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './navigation.component.html',
+  styleUrl: './navigation.component.css'
+})
+export class NavigationComponent {
+
+}