diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index c11da25..3df7d00 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -19,6 +19,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions } from "@angular/material/dialog";
+import { MatStepperModule } from '@angular/material/stepper';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -101,7 +102,8 @@ import { LoginDialog } from './login/login.dialog';
     MatDialogClose,
     MatDialogTitle,
     MatDialogContent,
-    MatDialogActions
+    MatDialogActions,
+    MatStepperModule
 ],
   providers: [
     provideBrowserGlobalErrorListeners(),
diff --git a/src/app/main/main.component.css b/src/app/main/main.component.css
index e69de29..1a13e36 100644
--- a/src/app/main/main.component.css
+++ b/src/app/main/main.component.css
@@ -0,0 +1,15 @@
+::ng-deep .mat-step-header .mat-step-icon {
+  background-color: #ccc;
+  color: white;
+}
+
+::ng-deep .mat-step-icon-state-edit {
+  background-color: #fac000 !important;
+  color: white;
+}
+
+
+::ng-deep .mat-step-icon-state-done {
+  background-color: #30d64c !important;
+  color: white;
+}
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 17c1228..273bff0 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1 +1,108 @@
-<p>main works!</p>
+<div class="flex flex-row items-center justify-center gap-8 h-1/1">
+  <div class="max-w-xl m-auto">
+    <section class="felx flex-row">
+      <div class="flex items-center">
+        <h1 class="text-3xl font-bold">
+          Willkommen bei
+        </h1>
+        <div class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent text-3xl font-bold">
+          &nbsp;InfiniMotion
+        </div>
+        <h1 class="text-3xl font-bold">! 🎬</h1>
+      </div>
+
+      <p class="mt-4">
+        Diese Website ist eine Praxisarbeit zur Evaluation von Model-Driven Engineering-Tools
+        im Modul Informationsinfrastrukturen Unit 2 der Fachhochschule für die Wirtschaft Hannover.
+      </p>
+
+      <p class="mt-4">
+        <strong>Entwicklungszeitraum: </strong> 28.10.2025 – 24.11.2025
+      </p>
+
+      <p class="mt-2">
+        <strong>Entwicklet von: </strong>
+        Marcel Anker, Lennart Heinrich, Piet Ostendorp, Kevin Szarafin
+      </p>
+
+      <p class="mt-4">
+        Als Betreiber eines kleinen, virtuellen Kinos könnt ihr Kinosäle mit unterschiedlichen Sitzkategorien einrichten und diese für den Verkauf von Eintrittskarten freigeben.
+        Kunden können Filmaufführungen auswählen, Plätze reservieren oder direkt buchen.
+        Das System ermöglicht außerdem, Einnahmen einzelner Aufführungen oder Filme auf Basis der aktuellen Buchungen zu überwachen.
+      </p>
+
+      <p class="mt-4">
+        Viel Spaß beim Erkunden. Hier gehts zur aktuellen <a routerLink="/schedule" class="text-indigo-500">Programm</a>.
+      </p>
+
+      <aside class="disclaimer mt-10 text-xs text-gray-500">
+        <p>
+          <em>
+            Wir haben uns bei Gestaltung und Stil bewusst an bestehenden Kinowebsites orientiert.
+            Dabei handelt es sich um eine rein stilistische Anlehnung; diese Seite verfolgt keinerlei kommerzielle Zwecke und dient ausschließlich universitären Zwecken.
+            Marken, Designs oder Funktionalitäten, die bekannten Anbietern ähneln, sind nicht als Kopie zum Wettbewerb gedacht, sondern als pragmatische Inspirationsquelle im Rahmen der Praxisarbeit.
+            <a href="https://infinimotion.de" target="_blank" class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+              https://infinimotion.de
+            </a>
+            wird zum Projektende offline genommen.
+          </em>
+        </p>
+      </aside>
+
+    </section>
+  </div>
+
+  <div class="max-w-md mr-60 mt-10">
+  <mat-vertical-stepper [linear]="false" [selectedIndex]="5" class="always-open-stepper">
+
+    <mat-step
+      [completed]="isCompleted(0)"
+      [editable]="isEditable(0)">
+      <ng-template matStepLabel>
+        <span>Sprint #0:&nbsp; &nbsp; Planung, Installation und Vorbereitung</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(1)"
+      [editable]="isEditable(1)">
+      <ng-template matStepLabel>
+        <span>Sprint #1:&nbsp; &nbsp; Programmübersicht</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(2)"
+      [editable]="isEditable(2)">
+      <ng-template matStepLabel>
+        <span>Sprint #2:&nbsp; &nbsp; Kinosäle anzeigen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(3)"
+      [editable]="isEditable(3)">
+      <ng-template matStepLabel>
+        <span>Sprint #3:&nbsp; &nbsp; Verstellungstickets reservieren und buchen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(4)"
+      [editable]="isEditable(4)">
+      <ng-template matStepLabel>
+        <span>Sprint #4:&nbsp; &nbsp; Statistiken auswerten und anzeigen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(5)"
+      [editable]="isEditable(5)">
+      <ng-template matStepLabel>
+        <span>Sprint #5:&nbsp; &nbsp; Aufbereitung und Optimierung</span>
+      </ng-template>
+    </mat-step>
+
+  </mat-vertical-stepper>
+
+</div>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index f8c59d0..706cf1a 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -7,5 +7,13 @@ import { Component } from '@angular/core';
   styleUrl: './main.component.css'
 })
 export class MainComponent {
+  currentSprint = 3;
 
+  isCompleted(index: number): boolean {
+    return index <= this.currentSprint;
+  }
+
+  isEditable(index: number): boolean {
+    return index === this.currentSprint;
+  }
 }