diff --git a/public/assets/img/heisenberg.jpg b/public/assets/img/heisenberg.jpg
new file mode 100644
index 0000000..3a25299
Binary files /dev/null and b/public/assets/img/heisenberg.jpg differ
diff --git a/public/assets/img/huy.png b/public/assets/img/huy.png
new file mode 100644
index 0000000..6d0a7cd
Binary files /dev/null and b/public/assets/img/huy.png differ
diff --git a/public/assets/img/kjan.png b/public/assets/img/kjan.png
new file mode 100644
index 0000000..a944fa7
Binary files /dev/null and b/public/assets/img/kjan.png differ
diff --git a/public/assets/img/rat.png b/public/assets/img/rat.png
new file mode 100644
index 0000000..34391b0
Binary files /dev/null and b/public/assets/img/rat.png differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
deleted file mode 100644
index 5a4e9d4..0000000
--- a/src/app/app.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<app-parent></app-parent>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 88b6f13..34e04e2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,14 +2,15 @@ import { Component } from '@angular/core';
 import {Child1Component} from "./child-1/child-1.component";
 import {Child2Component} from "./child-2/child-2.component";
 import {ParentComponent} from "./parent/parent.component";
+import {HotelsComponent} from "./hotel/hotels.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-  imports: [Child1Component, Child2Component, ParentComponent],
+  imports: [Child1Component, Child2Component, ParentComponent, HotelsComponent],
+  template: `
+    <app-hotels></app-hotels>
+  `
 })
 export class AppComponent {
-  public title: string = 'hotel-manager';
 }
diff --git a/src/app/hotel/hotel.component.ts b/src/app/hotel/hotel.component.ts
new file mode 100644
index 0000000..cafc67c
--- /dev/null
+++ b/src/app/hotel/hotel.component.ts
@@ -0,0 +1,21 @@
+import {Component, Input} from "@angular/core";
+import {Hotel} from "./hotel"
+
+
+@Component({
+  standalone: true,
+  selector: 'app-hotel',
+  template: `
+    <div style="border: white 2px; border-radius: 2px">
+      <p class="name">Name: {{hotel.hotelName}}</p>
+      <p>Beschreibung: {{hotel.description}}</p>
+      <p>Preis: {{hotel.price}}/nacht</p>
+      <p>Sterne: {{hotel.rating}}/5</p>
+      <img width="64" height="64" src="{{hotel.imageUrl}}">
+    </div>
+  `
+})
+export class HotelComponent {
+  @Input()
+  public hotel!: Hotel;
+}
diff --git a/src/app/hotel/hotel.ts b/src/app/hotel/hotel.ts
new file mode 100644
index 0000000..a009af8
--- /dev/null
+++ b/src/app/hotel/hotel.ts
@@ -0,0 +1,8 @@
+export interface Hotel {
+  hotelId: number;
+  hotelName: string;
+  description: string;
+  price: number;
+  imageUrl: string;
+  rating: number;
+}
diff --git a/src/app/hotel/hotels.component.ts b/src/app/hotel/hotels.component.ts
new file mode 100644
index 0000000..d0ddfd4
--- /dev/null
+++ b/src/app/hotel/hotels.component.ts
@@ -0,0 +1,64 @@
+import {Component} from "@angular/core";
+import {NgFor, NgIf} from "@angular/common";
+import {HotelComponent} from "./hotel.component";
+import {Hotel} from "./hotel";
+import {FormsModule} from "@angular/forms";
+
+@Component({
+  standalone: true,
+  template: `
+    <form>
+      <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
+    </form>
+    <ng-container *ngFor="let hotel of hotels">
+      <div *ngIf="search === '' || hotel.hotelName.toLowerCase().includes(search)">
+        <app-hotel [hotel]="hotel"></app-hotel>
+        <hr>
+      </div>
+    </ng-container>
+  `,
+  imports: [NgFor, NgIf, FormsModule, HotelComponent],
+  selector: 'app-hotels'
+})
+export class HotelsComponent {
+  public search: string = ''
+
+  public searchEvent(input: string) {
+    this.search = input.toLowerCase();
+  }
+
+  hotels: Hotel[] = [
+    {
+      "hotelId": 1,
+      "hotelName": "Buea süßes Leben",
+      "description": "Schöne Aussicht am Meer",
+      "price": 230.5,
+      "imageUrl": "assets/img/heisenberg.jpg",
+      "rating": 3.5
+    },
+    {
+      "hotelId": 2,
+      "hotelName": "Marrakesch",
+      "description": "Genießen Sie den Blick auf die Berge",
+      "price": 145.5,
+      "imageUrl": "assets/img/kjan.png",
+      "rating": 5
+    },
+    {
+      "hotelId": 3,
+      "hotelName": "Abuja neuer Palast",
+      "description": "Kompletter Aufenthalt mit Autoservice",
+      "price": 120.12,
+      "imageUrl": "assets/img/huy.png",
+      "rating": 4
+    },
+    {
+      "hotelId": 4,
+      "hotelName": "OUR Hotel",
+      "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
+      "price": 135.12,
+      "imageUrl": "assets/img/rat.png",
+      "rating": 2.5
+    }
+  ]
+}