diff --git a/package-lock.json b/package-lock.json
index fb78cd8..6eb2e17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@angular/material": "^20.2.9",
         "@angular/platform-browser": "^20.3.0",
         "@angular/router": "^20.3.0",
-        "@infinimotion/model-frontend": "^0.0.2",
+        "@infinimotion/model-frontend": "^0.0.84",
         "@tailwindcss/postcss": "^4.1.14",
         "postcss": "^8.5.6",
         "rxjs": "~7.8.0",
@@ -1290,9 +1290,9 @@
       }
     },
     "node_modules/@infinimotion/model-frontend": {
-      "version": "0.0.2",
-      "resolved": "https://git.infinimotion.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz",
-      "integrity": "sha512-EG+Z6wtLZ/+mU/j7KJpIkSCm1IBYVb30g1/k9vJhITNhGavjMLyzZXY/+Gd9zY3AZt664E9ziE3OGG5sY/Jshw==",
+      "version": "0.0.84",
+      "resolved": "https://git.infinimotion.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.84/model-frontend-0.0.84.tgz",
+      "integrity": "sha512-+SMFsobPpfh6H9cU54DfVl9sF9Mp1vj6HuB135Y+grWvk/nIN4wzzZLvYPIk3BDURTT1DHgg8O3m66FaBB22sQ==",
       "license": "ISC"
     },
     "node_modules/@inquirer/ansi": {
diff --git a/package.json b/package.json
index e76b557..e456362 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@angular/material": "^20.2.9",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@infinimotion/model-frontend": "^0.0.2",
+    "@infinimotion/model-frontend": "^0.0.84",
     "@tailwindcss/postcss": "^4.1.14",
     "postcss": "^8.5.6",
     "rxjs": "~7.8.0",
@@ -51,4 +51,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 803e39c..ec14d8c 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -31,6 +31,11 @@ import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedu
 import { MovieCategoryComponent } from './movie-category/movie-category.component';
 import { MovieScheduleEmptyComponent } from './movie-schedule-empty/movie-schedule-empty.component';
 import { Header2Component } from './header-2/header-2.component';
+import { TheaterOverlayComponent } from './theater-overlay/theater-overlay.component';
+import { SeatComponent } from './seat/seat.component';
+import { SeatRowComponent } from './seat-row/seat-row.component';
+import {MatIconButton} from '@angular/material/button';
+import { TheaterLayoutComponent } from './theater-layout/theater-layout.component';
 
 
 @NgModule({
@@ -51,7 +56,11 @@ import { Header2Component } from './header-2/header-2.component';
     MovieDurationComponent,
     MovieCategoryComponent,
     MovieScheduleEmptyComponent,
-    Header2Component
+    Header2Component,
+    TheaterOverlayComponent,
+    SeatComponent,
+    SeatRowComponent,
+    TheaterLayoutComponent
   ],
   imports: [
     AppRoutingModule,
@@ -62,8 +71,9 @@ import { Header2Component } from './header-2/header-2.component';
     MatTabsModule,
     MatToolbarModule,
     MatProgressBarModule,
-    MatSnackBarModule
-],
+    MatSnackBarModule,
+    MatIconButton
+  ],
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideHttpClient(
diff --git a/src/app/app-routing-module.ts b/src/app/app-routing-module.ts
index d8ea875..aa4cc67 100644
--- a/src/app/app-routing-module.ts
+++ b/src/app/app-routing-module.ts
@@ -5,6 +5,7 @@ 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';
+import { TheaterOverlayComponent} from './theater-overlay/theater-overlay.component';
 
 const routes: Routes = [
   // Seiten ohne Layout
@@ -18,6 +19,7 @@ const routes: Routes = [
     children: [
       { path: '', component: MainComponent },
       { path: 'schedule', component: ScheduleComponent },
+      { path: 'theater-overlay', component: TheaterOverlayComponent},
     ],
   },
 
diff --git a/src/app/http.service.ts b/src/app/http.service.ts
index 248d323..5efe788 100644
--- a/src/app/http.service.ts
+++ b/src/app/http.service.ts
@@ -1,4 +1,4 @@
-import { Kinosaal, Vorstellung } from '@infinimotion/model-frontend';
+import {Kinosaal, Sitzplatz, Vorstellung} from '@infinimotion/model-frontend';
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
 import { Observable } from "rxjs";
@@ -65,4 +65,13 @@ export class HttpService {
   deletePerformace(id: number): Observable<void> {
     return this.http.delete<void>(`${this.baseUrl}vorstellung/${id}`);
   }
+
+
+
+  /* Show-Seats APIs*/
+
+  /* GET /api/show-seats/{show} */
+  getSeatsByShowId(show: number): Observable<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}> {
+    return this.http.get<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}>(`${this.baseUrl}show-seats/${show}`);
+  }
 }
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index bceb508..ac2bf55 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -13,6 +13,6 @@ export class NavbarComponent {
 
   navItems:{label:string, path:string}[] = [
     {label: 'Schedule', path: '/schedule'},
-    {label: 'beispiel', path: ''},
+    {label: 'Kinosaal-test', path: '/theater-overlay'},
   ]
 }