diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 8c58311..71bbfab 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -4,19 +4,26 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing-module';
 import { App } from './app';
 import { PocModelComponent } from './poc-model-component/poc-model-component';
-import { HomeComponent } from './home-component/home-component';
+import { HomeComponent } from './home/home.component';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { MainPage } from './main-page/main-page';
-
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
+import { HeaderComponent } from './header/header.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { ScheduleComponent } from './schedule/schedule.component';
+import { MainComponent } from './main/main.component';
 
 @NgModule({
   declarations: [
     App,
     PocModelComponent,
     HomeComponent,
-    MainPage
+    MainLayoutComponent,
+    HeaderComponent,
+    NavbarComponent,
+    ScheduleComponent,
+    MainComponent
   ],
   imports: [
     AppRoutingModule,
diff --git a/src/app/app-routing-module.ts b/src/app/app-routing-module.ts
index f889ae7..d8ea875 100644
--- a/src/app/app-routing-module.ts
+++ b/src/app/app-routing-module.ts
@@ -1,13 +1,27 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PocModelComponent } from './poc-model-component/poc-model-component';
-import { HomeComponent } from './home-component/home-component';
-import { MainPage } from './main-page/main-page';
+import { HomeComponent } from './home/home.component';
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
+import { MainComponent } from './main/main.component';
+import { ScheduleComponent } from './schedule/schedule.component';
 
 const routes: Routes = [
-  { path: '', component: MainPage, pathMatch: 'full' },
+  // Seiten ohne Layout
   { path: 'info', component: HomeComponent },
   { path: 'poc-model', component: PocModelComponent },
+
+  // Seiten mit MainLayout
+  {
+    path: '',
+    component: MainLayoutComponent,
+    children: [
+      { path: '', component: MainComponent },
+      { path: 'schedule', component: ScheduleComponent },
+    ],
+  },
+
+  // Fallback-Route
   { path: '**', component: HomeComponent },
 ];
 
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
new file mode 100644
index 0000000..e31239f
--- /dev/null
+++ b/src/app/header/header.component.css
@@ -0,0 +1,9 @@
+header {
+  display: flex;
+  width: 100%;
+}
+
+.header {
+  height: 60px;
+  background-color: greenyellow;
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000..f45fd70
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1,2 @@
+<header class="header">
+</header>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
new file mode 100644
index 0000000..f572069
--- /dev/null
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  standalone: false,
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css'
+})
+export class HeaderComponent {
+
+}
diff --git a/src/app/home-component/home-component.css b/src/app/home/home.component.css
similarity index 100%
rename from src/app/home-component/home-component.css
rename to src/app/home/home.component.css
diff --git a/src/app/home-component/home-component.html b/src/app/home/home.component.html
similarity index 100%
rename from src/app/home-component/home-component.html
rename to src/app/home/home.component.html
diff --git a/src/app/home-component/home-component.ts b/src/app/home/home.component.ts
similarity index 50%
rename from src/app/home-component/home-component.ts
rename to src/app/home/home.component.ts
index b1ebe07..906862d 100644
--- a/src/app/home-component/home-component.ts
+++ b/src/app/home/home.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-home-component',
+  selector: 'app-home',
   standalone: false,
-  templateUrl: './home-component.html',
-  styleUrl: './home-component.css'
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
 })
 export class HomeComponent {
 
diff --git a/src/app/layouts/main-layout/main-layout.component.css b/src/app/layouts/main-layout/main-layout.component.css
new file mode 100644
index 0000000..efa3db6
--- /dev/null
+++ b/src/app/layouts/main-layout/main-layout.component.css
@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+}
+
+/* Body: Sidebar + Content */
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Content rechts */
+.content {
+  flex: 1;
+  background-color: #004cff;
+  overflow-y: auto;
+  box-sizing: border-box;
+  height: 100%;
+}
diff --git a/src/app/layouts/main-layout/main-layout.component.html b/src/app/layouts/main-layout/main-layout.component.html
new file mode 100644
index 0000000..b65e80a
--- /dev/null
+++ b/src/app/layouts/main-layout/main-layout.component.html
@@ -0,0 +1,9 @@
+<app-header></app-header>
+
+<div class="body">
+  <app-navbar></app-navbar>
+
+  <main class="content">
+    <router-outlet></router-outlet> <!-- Hier werden die Kinder-Routen geladen -->
+  </main>
+</div>
diff --git a/src/app/layouts/main-layout/main-layout.component.ts b/src/app/layouts/main-layout/main-layout.component.ts
new file mode 100644
index 0000000..c0e90c9
--- /dev/null
+++ b/src/app/layouts/main-layout/main-layout.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main-layout',
+  standalone: false,
+  templateUrl: './main-layout.component.html',
+  styleUrl: './main-layout.component.css'
+})
+export class MainLayoutComponent {
+
+}
diff --git a/src/app/main-page/main-page.html b/src/app/main-page/main-page.html
deleted file mode 100644
index 9720622..0000000
--- a/src/app/main-page/main-page.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>main-page works!</p>
diff --git a/src/app/main-page/main-page.ts b/src/app/main-page/main-page.ts
deleted file mode 100644
index 06f806e..0000000
--- a/src/app/main-page/main-page.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-main-page',
-  standalone: false,
-  templateUrl: './main-page.html',
-  styleUrl: './main-page.css'
-})
-export class MainPage {
-
-}
diff --git a/src/app/main-page/main-page.css b/src/app/main/main.component.css
similarity index 100%
rename from src/app/main-page/main-page.css
rename to src/app/main/main.component.css
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
new file mode 100644
index 0000000..17c1228
--- /dev/null
+++ b/src/app/main/main.component.html
@@ -0,0 +1 @@
+<p>main works!</p>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
new file mode 100644
index 0000000..f8c59d0
--- /dev/null
+++ b/src/app/main/main.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main',
+  standalone: false,
+  templateUrl: './main.component.html',
+  styleUrl: './main.component.css'
+})
+export class MainComponent {
+
+}
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
new file mode 100644
index 0000000..5eb3454
--- /dev/null
+++ b/src/app/navbar/navbar.component.css
@@ -0,0 +1,11 @@
+nav {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.navbar {
+  width: 200px;
+  background-color: #ff0080;
+}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
new file mode 100644
index 0000000..137ca2d
--- /dev/null
+++ b/src/app/navbar/navbar.component.html
@@ -0,0 +1,2 @@
+<nav class="navbar">
+</nav>
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
new file mode 100644
index 0000000..2541140
--- /dev/null
+++ b/src/app/navbar/navbar.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: false,
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.css'
+})
+export class NavbarComponent {
+
+}
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css
new file mode 100644
index 0000000..eb1eb2e
--- /dev/null
+++ b/src/app/schedule/schedule.component.css
@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  border-radius: 8px;
+}
diff --git a/src/app/schedule/schedule.component.html b/src/app/schedule/schedule.component.html
new file mode 100644
index 0000000..0b4b913
--- /dev/null
+++ b/src/app/schedule/schedule.component.html
@@ -0,0 +1 @@
+<p>schedule works!</p>
diff --git a/src/app/schedule/schedule.component.ts b/src/app/schedule/schedule.component.ts
new file mode 100644
index 0000000..631b3ca
--- /dev/null
+++ b/src/app/schedule/schedule.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-schedule',
+  standalone: false,
+  templateUrl: './schedule.component.html',
+  styleUrl: './schedule.component.css'
+})
+export class ScheduleComponent {
+
+}