diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 6ccb7e2..b963cff 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -5,6 +5,10 @@ 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 { provideHttpClient, withFetch } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
 
 @NgModule({
   declarations: [
@@ -13,11 +17,16 @@ import { HomeComponent } from './home-component/home-component';
     HomeComponent
   ],
   imports: [
+    AppRoutingModule,
     BrowserModule,
-    AppRoutingModule
+    CommonModule,
+    FormsModule
   ],
   providers: [
-    provideBrowserGlobalErrorListeners()
+    provideBrowserGlobalErrorListeners(),
+    provideHttpClient(
+      withFetch(),
+    )
   ],
   bootstrap: [App]
 })
diff --git a/src/app/http.service.ts b/src/app/http.service.ts
new file mode 100644
index 0000000..ae330ea
--- /dev/null
+++ b/src/app/http.service.ts
@@ -0,0 +1,17 @@
+import { Kinosaal } from '@infinimotion/model-frontend';
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Injectable({providedIn: 'root'})
+export class HttpService {
+  private http = inject(HttpClient);
+
+  getAllKinosaal(): Observable<Kinosaal> {
+    return this.http.get<Kinosaal>(`https://infinimotion.de/api/kinosaal`);
+  }
+
+  addKinosaal(kinosaal: Omit<Kinosaal, 'id'>): Observable<Kinosaal> {
+    return this.http.post<Kinosaal>(`https://infinimotion.de/api/kinosaal`, kinosaal);
+  }
+}
diff --git a/src/app/poc-model-component/poc-model-component.html b/src/app/poc-model-component/poc-model-component.html
index 0e20649..51718de 100644
--- a/src/app/poc-model-component/poc-model-component.html
+++ b/src/app/poc-model-component/poc-model-component.html
@@ -1,3 +1,24 @@
-<p>Diese Komponente später löschen, nur ein Proof Of Concept für die Modellverwendung!</p>
-<p>{{ ticket.id }}</p>
-<p>{{ ticket.code }}</p>
+<div>
+  <h2>Kinosaal Übersicht</h2>
+
+  <ul>
+    @for (kinosaal of kinosaele; track kinosaal.id) {
+      <li>
+        {{ kinosaal.id }} - {{ kinosaal.name }}
+      </li>
+    } @empty {
+      <li>
+        Keine Kinosäle vorhanden.
+      </li>
+    }
+  </ul>
+
+  <div>
+    <input
+      type="text"
+      placeholder="Neuer Kinosaal Name"
+      [(ngModel)]="newKinosaalName"
+    />
+    <button (click)="addKinosaal()">Hinzufügen</button>
+  </div>
+</div>
diff --git a/src/app/poc-model-component/poc-model-component.ts b/src/app/poc-model-component/poc-model-component.ts
index 81c85f7..00fa29e 100644
--- a/src/app/poc-model-component/poc-model-component.ts
+++ b/src/app/poc-model-component/poc-model-component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { Eintrittskarte, Kinosaal, Vorstellung } from '@infinimotion/model-frontend';
+import { Component, inject, OnInit } from '@angular/core';
+import { Kinosaal } from '@infinimotion/model-frontend';
+import { HttpService } from '../http.service';
 
 @Component({
   selector: 'app-poc-model-component',
@@ -7,12 +8,34 @@ import { Eintrittskarte, Kinosaal, Vorstellung } from '@infinimotion/model-front
   templateUrl: './poc-model-component.html',
   styleUrl: './poc-model-component.css',
 })
-export class PocModelComponent {
-  ticket: Eintrittskarte = {
-    id: 12345,
-    code: 'ABCDEF',
-    show: undefined as any,
-    seat: undefined as any,
-    state: undefined as any,
-  };
+
+export class PocModelComponent implements OnInit  {
+  private http = inject(HttpService);
+
+  kinosaele: Kinosaal[] = [];
+  newKinosaalName = '';
+
+  ngOnInit(): void {
+    this.loadKinosaele();
+  }
+
+  loadKinosaele() {
+    this.http.getAllKinosaal().subscribe({
+      next: (data) => (this.kinosaele = Array.isArray(data) ? data : [data]),
+      error: (err) => console.error('Fehler beim Laden der Kinosaele', err),
+    });
+  }
+
+  addKinosaal() {
+    if (!this.newKinosaalName.trim()) return;
+
+    const kinosaalToAdd: Omit<Kinosaal, 'id'> = { name: this.newKinosaalName };
+    this.http.addKinosaal(kinosaalToAdd).subscribe({
+      next: (added) => {
+        this.kinosaele.push(added);
+        this.newKinosaalName = '';
+      },
+      error: (err) => console.error('Fehler beim Hinzufügen', err),
+    });
+  }
 }