diff --git a/src/app/apartment/apartment-create/apartment-create.component.html b/src/app/apartment/apartment-create/apartment-create.component.html
index 0f0dfe1..bcb0587 100644
--- a/src/app/apartment/apartment-create/apartment-create.component.html
+++ b/src/app/apartment/apartment-create/apartment-create.component.html
@@ -44,6 +44,7 @@ <h1 class="mb-4">Create Apartment</h1>
       <label for="description" class="form-label">Description</label>
       <textarea class="form-control" id="description" rows="3" required [(ngModel)]="apartment.description" name="description" style="resize: vertical; min-height: 100px; max-height: 300px;"></textarea>
     </div>
+    <app-room-list [apartment]="apartment" [maxRooms]="5"></app-room-list>
     <div class="mb-3">
       <a href="/room/create"><button type="button" class="btn btn-secondary">Add Room</button></a>
     </div>
diff --git a/src/app/apartment/apartment-create/apartment-create.component.ts b/src/app/apartment/apartment-create/apartment-create.component.ts
index b8be4e4..3e60772 100644
--- a/src/app/apartment/apartment-create/apartment-create.component.ts
+++ b/src/app/apartment/apartment-create/apartment-create.component.ts
@@ -8,11 +8,12 @@ import { ErrorMessageService } from '../../error-handler/error-message.service';
 import { CommonModule } from '@angular/common';
 import { ApartmentService } from '../apartment.service';
 import { ApartmentDetails } from '../apartment-details';
+import { RoomListComponent } from '../../room/room-list/room-list.component';
 
 @Component({
   selector: 'app-apartment-create',
   standalone: true,
-  imports: [FormsModule, CommonModule],
+  imports: [FormsModule, CommonModule, RoomListComponent],
   templateUrl: './apartment-create.component.html',
   styleUrls: ['./apartment-create.component.css']
 })
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f879ad5..7d70c31 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -8,16 +8,15 @@ import { UserDetailComponent } from './user/user-detail/user-detail.component';
 import { UserRegisterComponent } from './user/user-register/user-register.component';
 import { UserEditComponent } from './user/user-edit/user-edit.component';
 import { UserDeleteComponent } from './user/user-delete/user-delete.component';
-import {ApartmentListComponent} from './apartment/apartment-list/apartment-list.component';
-import {ApartmentCreateComponent} from './apartment/apartment-create/apartment-create.component';
 import { CreateAdvertisementComponent } from './advertisement/create-advertisement/create-advertisement.component';
 import { AdvertisementListComponent } from './advertisement/advertisment-list/advertisement-list.component';
-import {DeleteAdvertisementComponent} from './advertisement/advertisement-delete/advertisement-delete.component';
-import {ApartmentUpdateComponent} from './apartment/apartment-update/apartment-update.component';
-import {ApartmentDeleteComponent} from './apartment/apartment-delete/apartment-delete.component';
-import {VisitStatusComponent} from './visit/visit-status/visit-status.component';
-
-
+import { DeleteAdvertisementComponent } from './advertisement/advertisement-delete/advertisement-delete.component';
+import { ApartmentListComponent } from './apartment/apartment-list/apartment-list.component';
+import { ApartmentCreateComponent } from './apartment/apartment-create/apartment-create.component';
+import { ApartmentUpdateComponent } from './apartment/apartment-update/apartment-update.component';
+import { ApartmentDeleteComponent } from './apartment/apartment-delete/apartment-delete.component';
+import { VisitStatusComponent } from './visit/visit-status/visit-status.component';
+import { RoomListComponent } from './room/room-list/room-list.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -26,19 +25,17 @@ const routes: Routes = [
   { path: 'users/:id', component: UserDetailComponent, canActivate: [LoggedInGuard]},
   { path: 'users', component: UserListComponent, canActivate: [LoggedInGuard]},
   { path: 'about', component: AboutComponent},
-  {path: 'apartments', component: ApartmentListComponent},
-  {path: 'apartment/create', component: ApartmentCreateComponent},
-  {path: 'advertisement/create', component: CreateAdvertisementComponent},
+  { path: 'advertisement/create', component: CreateAdvertisementComponent},
+  { path: 'advertisements', component: AdvertisementListComponent},
+  { path: 'advertisement/:id/delete', component: DeleteAdvertisementComponent, canActivate: [LoggedInGuard] },
   { path: 'apartments', component: ApartmentListComponent},
   { path: 'apartment/create', component: ApartmentCreateComponent},
   { path: 'apartment/:id/update', component: ApartmentUpdateComponent},
   { path: 'apartment/:id/delete', component: ApartmentDeleteComponent},
   { path: 'visit/:id/status', component: VisitStatusComponent},
+  { path: 'rooms', component: RoomListComponent},
   { path: '404', component: NotFoundComponent},
-  { path: '', redirectTo: 'about', pathMatch: 'full'},
-  { path: 'advertisements', component: AdvertisementListComponent},
-  { path: 'advertisement/:id/delete', component: DeleteAdvertisementComponent, canActivate: [LoggedInGuard] },
-
+  { path: '', redirectTo: 'about', pathMatch: 'full'}
 ];
 
 @NgModule({
diff --git a/src/app/room/room-list/room-list.component.css b/src/app/room/room-list/room-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/room/room-list/room-list.component.html b/src/app/room/room-list/room-list.component.html
new file mode 100644
index 0000000..0893abb
--- /dev/null
+++ b/src/app/room/room-list/room-list.component.html
@@ -0,0 +1,16 @@
+<div class="container w-10 p-3">
+  <h4 class="mb-1">List of Rooms</h4>
+
+  <div *ngIf="rooms.length > 0" class="list-group">
+    <div *ngFor="let room of rooms; let i = index" class="list-group-item">
+      <h5 class="mb-1">Room {{ i + 1 }}</h5>
+      <p class="mb-1">Surface: {{ room.surface }} m²</p>
+      <small *ngIf="room.isOccupied">Occupied</small>
+      <small *ngIf="!room.isOccupied">Available</small>
+    </div>
+  </div>
+
+  <div *ngIf="rooms.length === 0" class="alert alert-info" role="alert">
+    No rooms available for this apartment.
+  </div>
+</div>
diff --git a/src/app/room/room-list/room-list.component.spec.ts b/src/app/room/room-list/room-list.component.spec.ts
new file mode 100644
index 0000000..d0cd221
--- /dev/null
+++ b/src/app/room/room-list/room-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomListComponent } from './room-list.component';
+
+describe('RoomListComponent', () => {
+  let component: RoomListComponent;
+  let fixture: ComponentFixture<RoomListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RoomListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RoomListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/room/room-list/room-list.component.ts b/src/app/room/room-list/room-list.component.ts
new file mode 100644
index 0000000..02e4370
--- /dev/null
+++ b/src/app/room/room-list/room-list.component.ts
@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { RoomService } from '../room.service';
+import { Room } from '../room';
+import { Apartment } from '../../apartment/apartment';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-room-list',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './room-list.component.html',
+  styleUrls: ['./room-list.component.css']
+})
+export class RoomListComponent implements OnInit {
+  @Input() apartment!: Apartment;
+  // Max number of rooms to show, set to -1 to show all
+  @Input() maxRooms: number = 10;
+  rooms: Room[] = [];
+
+  constructor(private roomService: RoomService) {}
+
+  ngOnInit(): void {
+    if (this.apartment) {
+      this.roomService.findByApartment(this.apartment).subscribe({
+        next: (collection) => {
+          if (this.maxRooms === -1) {
+            this.rooms = collection.resources;
+          } else {
+            this.rooms = collection.resources.slice(0, this.maxRooms);
+          }
+        },
+        error: (err) => console.error('Error fetching rooms:', err),
+      });
+    }
+  }
+}
diff --git a/src/app/room/room.service.ts b/src/app/room/room.service.ts
new file mode 100644
index 0000000..5ada992
--- /dev/null
+++ b/src/app/room/room.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { HateoasResourceOperation, ResourceCollection } from "@lagoshny/ngx-hateoas-client";
+import { Room } from "./room";
+import { Apartment } from "./../apartment/apartment";
+import { User } from "../login-basic/user";
+
+@Injectable({ providedIn: "root" })
+export class RoomService extends HateoasResourceOperation<Room> {
+
+  constructor() {
+    super(Room);
+  }
+
+  public findById(roomId: string): Observable<Room> {
+    return this.getResource(roomId);
+  }
+
+  public findByApartment(apartment: Apartment): Observable<ResourceCollection<Room>> {
+    return this.searchCollection("findByApart", { params: { apartment: apartment } });
+  }
+
+  public findByOwner(owner: User): Observable<ResourceCollection<Room>> {
+    return this.searchCollection("findByOwner", { params: { owner: owner } });
+  }
+}