diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 158cd05..bc24b0c 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -1,22 +1,32 @@
+import { CommonModule } from '@angular/common';
 import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing-module';
 import { App } from './app';
-import { PocModelComponent } from './poc-model-component/poc-model-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 { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+
 import { HeaderComponent } from './header/header.component';
-import { NavbarComponent } from './navbar/navbar.component';
-import { ScheduleComponent } from './schedule/schedule.component';
+import { HomeComponent } from './home/home.component';
 import { MainComponent } from './main/main.component';
-import { MovieScheduleInfoComponent } from './movie-schedule-info/movie-schedule-info.component';
-import { MoviePosterComponent } from './movie-poster/movie-poster.component';
-import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedule-times.component';
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { PocModelComponent } from './poc-model-component/poc-model-component';
+import { ScheduleComponent } from './schedule/schedule.component';
+
+import { MovieDurationComponent } from './movie-duration/movie-duration.component';
 import { MoviePerformanceComponent } from './movie-performance/movie-performance.component';
+import { MoviePosterComponent } from './movie-poster/movie-poster.component';
+import { MovieRatingComponent } from './movie-rating/movie-rating.component';
+import { MovieScheduleInfoComponent } from './movie-schedule-info/movie-schedule-info.component';
+import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedule-times.component';
+import { MovieCategoryComponent } from './movie-category/movie-category.component';
+import { MovieScheduleEmptyComponent } from './movie-schedule-empty/movie-schedule-empty.component';
+
 
 @NgModule({
   declarations: [
@@ -31,13 +41,19 @@ import { MoviePerformanceComponent } from './movie-performance/movie-performance
     MovieScheduleInfoComponent,
     MoviePosterComponent,
     MovieScheduleTimesComponent,
-    MoviePerformanceComponent
+    MoviePerformanceComponent,
+    MovieRatingComponent,
+    MovieDurationComponent,
+    MovieCategoryComponent,
+    MovieScheduleEmptyComponent
   ],
   imports: [
     AppRoutingModule,
     BrowserModule,
     CommonModule,
-    FormsModule
+    FormsModule,
+    MatIconModule,
+    MatTabsModule
   ],
   providers: [
     provideBrowserGlobalErrorListeners(),
diff --git a/src/app/movie-category/movie-category.component.css b/src/app/movie-category/movie-category.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/movie-category/movie-category.component.html b/src/app/movie-category/movie-category.component.html
new file mode 100644
index 0000000..98fd707
--- /dev/null
+++ b/src/app/movie-category/movie-category.component.html
@@ -0,0 +1 @@
+<span class="flex rounded-sm text-black text-sm px-2 py-1.5">Aktion</span>
diff --git a/src/app/movie-category/movie-category.component.ts b/src/app/movie-category/movie-category.component.ts
new file mode 100644
index 0000000..2aec72d
--- /dev/null
+++ b/src/app/movie-category/movie-category.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-category',
+  standalone: false,
+  templateUrl: './movie-category.component.html',
+  styleUrl: './movie-category.component.css'
+})
+export class MovieCategoryComponent {
+
+}
diff --git a/src/app/movie-duration/movie-duration.component.css b/src/app/movie-duration/movie-duration.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/movie-duration/movie-duration.component.html b/src/app/movie-duration/movie-duration.component.html
new file mode 100644
index 0000000..b1b61da
--- /dev/null
+++ b/src/app/movie-duration/movie-duration.component.html
@@ -0,0 +1,4 @@
+<span class="flex items-center text-black text-sm rounded-sm px-2 py-1.5">
+  <mat-icon class="mr-1" style="font-size: 20px; width: 20px; height: 20px;" fontIcon="schedule"></mat-icon>
+  181 Min.
+</span>
diff --git a/src/app/movie-duration/movie-duration.component.ts b/src/app/movie-duration/movie-duration.component.ts
new file mode 100644
index 0000000..9bad0cb
--- /dev/null
+++ b/src/app/movie-duration/movie-duration.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-duration',
+  standalone: false,
+  templateUrl: './movie-duration.component.html',
+  styleUrl: './movie-duration.component.css'
+})
+export class MovieDurationComponent {
+
+}
diff --git a/src/app/movie-performance/movie-performance.component.html b/src/app/movie-performance/movie-performance.component.html
index 4930bfd..82dcac3 100644
--- a/src/app/movie-performance/movie-performance.component.html
+++ b/src/app/movie-performance/movie-performance.component.html
@@ -1,4 +1,4 @@
-<a routerLink="/zielseite" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
+<a routerLink="/schedule" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
 
   <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5">
     <p>Kino 1</p>
diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html
index 33bd6da..0656628 100644
--- a/src/app/movie-poster/movie-poster.component.html
+++ b/src/app/movie-poster/movie-poster.component.html
@@ -1,3 +1,8 @@
-<div class="w-64 mx-auto my-3">
+<div class="w-64 mx-auto my-2">
   <img src="assets/test-movie-poster.jpg" alt="Movie Poster" class="w-full h-auto shadow-md">
 </div>
+<div class="flex gap-1 justify-between">
+  <app-movie-rating></app-movie-rating>
+  <app-movie-duration></app-movie-duration>
+  <app-movie-category></app-movie-category>
+</div>
diff --git a/src/app/movie-rating/movie-rating.component.css b/src/app/movie-rating/movie-rating.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/movie-rating/movie-rating.component.html b/src/app/movie-rating/movie-rating.component.html
new file mode 100644
index 0000000..1b155aa
--- /dev/null
+++ b/src/app/movie-rating/movie-rating.component.html
@@ -0,0 +1 @@
+<span class="flex bg-blue-800 rounded-sm shadow-md text-white text-sm px-2 py-1.5">FSK 12</span>
diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts
new file mode 100644
index 0000000..ce30aaa
--- /dev/null
+++ b/src/app/movie-rating/movie-rating.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-rating',
+  standalone: false,
+  templateUrl: './movie-rating.component.html',
+  styleUrl: './movie-rating.component.css'
+})
+export class MovieRatingComponent {
+
+}
diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.css b/src/app/movie-schedule-empty/movie-schedule-empty.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.html b/src/app/movie-schedule-empty/movie-schedule-empty.component.html
new file mode 100644
index 0000000..01656b3
--- /dev/null
+++ b/src/app/movie-schedule-empty/movie-schedule-empty.component.html
@@ -0,0 +1,5 @@
+<div class="flex flex-col items-center justify-center py-12 text-gray-500 h-100 m-auto">
+  <mat-icon class="text-6xl mb-4 opacity-50" style="font-size: 50px; width: 50px; height: 50px;">event_busy</mat-icon>
+  <p class="text-lg">Keine Vorstellungen verfügbar</p>
+  <p class="text-sm">An diesem Tag finden keine Filmvorführungen statt.</p>
+</div>
diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.ts b/src/app/movie-schedule-empty/movie-schedule-empty.component.ts
new file mode 100644
index 0000000..e5d4a12
--- /dev/null
+++ b/src/app/movie-schedule-empty/movie-schedule-empty.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-schedule-empty',
+  standalone: false,
+  templateUrl: './movie-schedule-empty.component.html',
+  styleUrl: './movie-schedule-empty.component.css'
+})
+export class MovieScheduleEmptyComponent {
+
+}
diff --git a/src/app/movie-schedule-info/movie-schedule-info.component.css b/src/app/movie-schedule-info/movie-schedule-info.component.css
index 06c5cb0..0426c40 100644
--- a/src/app/movie-schedule-info/movie-schedule-info.component.css
+++ b/src/app/movie-schedule-info/movie-schedule-info.component.css
@@ -1,4 +1,4 @@
 :host {
   display: block;
-  margin: 100px 0;
+  margin: 60px 0;
 }
diff --git a/src/app/movie-schedule-info/movie-schedule-info.component.html b/src/app/movie-schedule-info/movie-schedule-info.component.html
index 1f51b69..d8ac521 100644
--- a/src/app/movie-schedule-info/movie-schedule-info.component.html
+++ b/src/app/movie-schedule-info/movie-schedule-info.component.html
@@ -1,8 +1,8 @@
-<div class="w-3/4 mx-auto my-4 flex flex-col md:flex-row gap-4">
+<div class="w-3/5 mx-auto flex flex-col md:flex-row gap-4">
   <app-movie-poster></app-movie-poster>
   <div>
-    <div class="m-2 mb-5">
-      <h1 class="text-4xl font-bold mb-1">Movie Title</h1>
+    <div class="m-2 mb-4">
+      <h1 class="text-4xl font-bold mb-2">Avengers: Endgame</h1>
       <p class="text-xl">
         Long Movie description Long Movie description Long Movie description Long Movie description Long Movie description Long Movie descriptionLong Movie description Long Movie description Long Movie description
       </p>
diff --git a/src/app/movie-schedule-times/movie-schedule-times.component.html b/src/app/movie-schedule-times/movie-schedule-times.component.html
index c1617f6..b46a6bb 100644
--- a/src/app/movie-schedule-times/movie-schedule-times.component.html
+++ b/src/app/movie-schedule-times/movie-schedule-times.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-warp">
+<div class="flex flex-wrap">
   <app-movie-performance></app-movie-performance>
   <app-movie-performance></app-movie-performance>
   <app-movie-performance></app-movie-performance>
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css
index dd48b70..e80c311 100644
--- a/src/app/schedule/schedule.component.css
+++ b/src/app/schedule/schedule.component.css
@@ -1,3 +1,7 @@
 :host {
   min-height: 100%;
 }
+
+::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline {
+  border-color: #6366f1 !important; /* indigo-500 */
+}
diff --git a/src/app/schedule/schedule.component.html b/src/app/schedule/schedule.component.html
index d677346..0dfee55 100644
--- a/src/app/schedule/schedule.component.html
+++ b/src/app/schedule/schedule.component.html
@@ -1,4 +1,13 @@
-@for (i of [].constructor(10); track i) {
-  <app-movie-schedule-info></app-movie-schedule-info>
-}
-
+<mat-tab-group mat-stretch-tabs>
+   @for (dateInfo of dates; track dateInfo.date; let i = $index) {
+    <mat-tab [label]="dateInfo.label">
+      @if (getMovieCount(i)> 0) {
+        @for (movie of [].constructor(getMovieCount(i)); track movie) {
+          <app-movie-schedule-info></app-movie-schedule-info>
+        }
+      } @else {
+         <app-movie-schedule-empty></app-movie-schedule-empty>
+      }
+    </mat-tab>
+  }
+</mat-tab-group>
diff --git a/src/app/schedule/schedule.component.ts b/src/app/schedule/schedule.component.ts
index 631b3ca..a69c67a 100644
--- a/src/app/schedule/schedule.component.ts
+++ b/src/app/schedule/schedule.component.ts
@@ -7,5 +7,33 @@ import { Component } from '@angular/core';
   styleUrl: './schedule.component.css'
 })
 export class ScheduleComponent {
+dates: { label: string; date: Date }[] = [];
 
+  constructor() {
+    this.generateDates();
+  }
+
+  generateDates() {
+    const today = new Date();
+    for (let i = 0; i < 31; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+
+      let label = '';
+      if (i === 0) {
+        label = 'Heute';
+      } else if (i === 1) {
+        label = 'Morgen';
+      } else {
+        label = date.toLocaleDateString('de-DE', { weekday: 'short' }) + '. ' + date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit'});
+      }
+
+      this.dates.push({ label, date });
+    }
+  }
+
+  getMovieCount(index: number): number {
+    // Hier kannst du später die echten Filmzahlen zurückgeben
+    return index === 0 ? 10 : index === 1 ? 0 : 4;
+  }
 }