diff --git a/src/app/model/theater-seat-state.model.ts b/src/app/model/theater-seat-state.model.ts
new file mode 100644
index 0000000..9d4a047
--- /dev/null
+++ b/src/app/model/theater-seat-state.model.ts
@@ -0,0 +1,5 @@
+export enum TheaterSeatState {
+  AVAILABLE,
+  RESERVED,
+  BOOKED,
+}
diff --git a/src/app/seat-row/seat-row.component.css b/src/app/seat-row/seat-row.component.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/app/seat-row/seat-row.component.css
@@ -0,0 +1 @@
+
diff --git a/src/app/seat-row/seat-row.component.html b/src/app/seat-row/seat-row.component.html
new file mode 100644
index 0000000..4588567
--- /dev/null
+++ b/src/app/seat-row/seat-row.component.html
@@ -0,0 +1,3 @@
+@for (entry of rowSeatList(); track $index) {
+  <app-seat class="my-1" [seatState]="entry.state" [seatCategory]="entry.seat.row.category"></app-seat>
+}
diff --git a/src/app/seat-row/seat-row.component.ts b/src/app/seat-row/seat-row.component.ts
new file mode 100644
index 0000000..9de5b71
--- /dev/null
+++ b/src/app/seat-row/seat-row.component.ts
@@ -0,0 +1,14 @@
+import {Component, input} from '@angular/core';
+import {Sitzplatz} from '@infinimotion/model-frontend';
+import {TheaterSeatState} from '../model/theater-seat-state.model';
+
+@Component({
+  selector: 'app-seat-row',
+  standalone: false,
+  templateUrl: './seat-row.component.html',
+  styleUrl: './seat-row.component.css'
+})
+export class SeatRowComponent {
+  rowSeatList = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[]>();
+
+}
diff --git a/src/app/seat/seat.component.css b/src/app/seat/seat.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/seat/seat.component.html b/src/app/seat/seat.component.html
new file mode 100644
index 0000000..a434fe5
--- /dev/null
+++ b/src/app/seat/seat.component.html
@@ -0,0 +1,15 @@
+<button class="mx-1 hover:opacity-50">
+  <mat-icon style="font-size: 30px; width: 30px; height: 30px">
+    @if(seatCategory().id ==1){
+      event_seat
+    }
+    @if(seatCategory().id == 2){
+      weekend
+    }
+    @if(seatCategory().id == 3){
+      chair
+    }
+
+  </mat-icon>
+</button>
+
diff --git a/src/app/seat/seat.component.ts b/src/app/seat/seat.component.ts
new file mode 100644
index 0000000..5f12bcf
--- /dev/null
+++ b/src/app/seat/seat.component.ts
@@ -0,0 +1,14 @@
+import {Component, input} from '@angular/core';
+import {TheaterSeatState} from '../model/theater-seat-state.model';
+import {Sitzkategorie} from '@infinimotion/model-frontend';
+
+@Component({
+  selector: 'app-seat',
+  standalone: false,
+  templateUrl: './seat.component.html',
+  styleUrl: './seat.component.css'
+})
+export class SeatComponent {
+  seatState = input.required<TheaterSeatState>();
+  seatCategory = input.required<Sitzkategorie>();
+}
diff --git a/src/app/theater-layout/theater-layout.component.css b/src/app/theater-layout/theater-layout.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/theater-layout/theater-layout.component.html b/src/app/theater-layout/theater-layout.component.html
new file mode 100644
index 0000000..a864e27
--- /dev/null
+++ b/src/app/theater-layout/theater-layout.component.html
@@ -0,0 +1,3 @@
+@for (row of seatsPerRow(); track $index) {
+  <app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row>
+}
diff --git a/src/app/theater-layout/theater-layout.component.ts b/src/app/theater-layout/theater-layout.component.ts
new file mode 100644
index 0000000..e2b3c82
--- /dev/null
+++ b/src/app/theater-layout/theater-layout.component.ts
@@ -0,0 +1,13 @@
+import {Component, input} from '@angular/core';
+import {Sitzplatz} from '@infinimotion/model-frontend';
+import {TheaterSeatState} from '../model/theater-seat-state.model';
+
+@Component({
+  selector: 'app-theater-layout',
+  standalone: false,
+  templateUrl: './theater-layout.component.html',
+  styleUrl: './theater-layout.component.css'
+})
+export class TheaterLayoutComponent {
+  seatsPerRow = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[][]>();
+}
diff --git a/src/app/theater-overlay/theater-overlay.component.css b/src/app/theater-overlay/theater-overlay.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
new file mode 100644
index 0000000..bb9e257
--- /dev/null
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -0,0 +1,9 @@
+<div class="m-auto w-200 h-10 bg-gray-300 mb-20" style="clip-path: polygon(0% 0%,100% 0%,90% 100%,10% 100%);">
+  <p class="flex justify-center text-2xl fond-bold p-1">
+    Leinwand
+  </p>
+  </div>
+  <div class="">
+    <app-theater-layout [seatsPerRow]="seatsPerRow"></app-theater-layout>
+  </div>
+
diff --git a/src/app/theater-overlay/theater-overlay.component.ts b/src/app/theater-overlay/theater-overlay.component.ts
new file mode 100644
index 0000000..12a6e3a
--- /dev/null
+++ b/src/app/theater-overlay/theater-overlay.component.ts
@@ -0,0 +1,60 @@
+import {Component, inject, input, OnInit} from '@angular/core';
+import {HttpService} from '../http.service';
+import {LoadingService} from '../loading.service';
+import {catchError, of, tap} from 'rxjs';
+import {Sitzplatz} from '@infinimotion/model-frontend';
+import {TheaterSeatState} from '../model/theater-seat-state.model';
+
+@Component({
+  selector: 'app-theater-overlay',
+  standalone: false,
+  templateUrl: './theater-overlay.component.html',
+  styleUrl: './theater-overlay.component.css'
+})
+export class TheaterOverlayComponent implements OnInit {
+  private http = inject(HttpService);
+  private loading = inject(LoadingService)
+  show = input.required<number>();
+
+  seatsPerRow: { seat: Sitzplatz, state: TheaterSeatState }[][] = []
+
+  ngOnInit() {
+    this.loadShowSeats();
+  }
+
+  loadShowSeats() {
+    this.loading.show();
+    this.http.getSeatsByShowId(2).pipe(
+      tap((data) => {
+        let rows = this.converter(data)
+        this.loading.hide();
+        this.seatsPerRow = rows
+        console.log(rows)
+      }),
+      catchError(err => {
+        this.loading.showError(err);
+        console.error('Fehler beim Laden der Vorstellung', err);
+        return of([]);
+      })
+    ).subscribe();
+  }
+
+  converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): {
+    seat: Sitzplatz,
+    state: TheaterSeatState
+  }[][] {
+    let rows: { seat: Sitzplatz, state: TheaterSeatState }[][] = [];
+    resp.seats.forEach(seat => {
+      if (!rows[seat.row.position]) {
+        rows[seat.row.position] = [];
+      }
+      let state = resp.booked.find(other => other.id == seat.id) ? TheaterSeatState.BOOKED : resp.booked.find(other => other.id == seat.id) ? TheaterSeatState.RESERVED : TheaterSeatState.AVAILABLE;
+      rows[seat.row.position].push({seat: seat, state: state});
+    });
+    rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position);
+    rows.forEach(row => row.sort((a, b) => a.seat.position - b.seat.position));
+    return rows;
+  }
+}
+
+