diff --git a/hotel_booking/about.php b/hotel_booking/about.php
index c297780..5af68be 100644
--- a/hotel_booking/about.php
+++ b/hotel_booking/about.php
@@ -45,12 +45,6 @@
             font-size: 26px;
             text-transform: uppercase;
         }
-        
-
-
-
-       
-        
         .about-container-title{
             font-size: 16px; 
             text-transform: uppercase; 
@@ -236,7 +230,6 @@
                 right:inherit;
             }
         }
-        
         @media (max-width:450px) {
             .about-img{
                 height: 450px; 
diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php
index ade55bd..579740c 100644
--- a/hotel_booking/components/header.php
+++ b/hotel_booking/components/header.php
@@ -4,7 +4,7 @@
         <div class="col-5 text-center rounded-pill" >
             <ul class="d-flex list-unstyled justify-content-center m-0">
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Rooms</a>
+                    <a class="nav-link" href="../rooms.php">Rooms</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="../services.php">Services</a>
@@ -28,7 +28,7 @@
                     <a class="nav-link" href="../contact.php">Contact</a>
                 </li>
                 <div class="dropdown">
-                    <a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join us</a>
+                    <a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
                         <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
                         <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
@@ -56,7 +56,7 @@
                     <a href="../index.php" class="nav-link">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link">Rooms</a>
+                    <a href="../rooms.php" class="nav-link">Rooms</a>
                 </li>
                 <li class="nav-item">
                     <a href="../services.php" class="nav-link">Services</a>
diff --git a/hotel_booking/index.php b/hotel_booking/index.php
index 9c1cc99..67f0bb8 100644
--- a/hotel_booking/index.php
+++ b/hotel_booking/index.php
@@ -69,7 +69,6 @@
     <div class="panel" data-color="white">
         <img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
         <h1 class="pre-header">Midtown Hotel epitomizes comfort and service with spacious accommodation for you to enjoy every moment</h1>
-        <a class="btn-th" href="#" style="margin-bottom: 10px;">Hotel</a>
     </div>
     <!--pre section2-->
     <div class="panel" data-color="khaki">
@@ -110,14 +109,8 @@
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                             <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
-                            <div class="accommodation mt-4 mb-3">
+                            <div class="accommodation">
                                 <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
-                            </div>
-                            <div class="equipment">
-                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
@@ -125,6 +118,12 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                             </div>
+                            <div class="extra-accommodation mt-4 mb-3">
+                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra Accommodation</p>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
+                            </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                 <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                 <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
@@ -139,14 +138,8 @@
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                             <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
-                            <div class="accommodation mt-4 mb-3">
+                            <div class="accommodation">
                                 <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
-                            </div>
-                            <div class="equipment">
-                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
@@ -154,6 +147,12 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                             </div>
+                            <div class="extra-accommodation mt-4 mb-3">
+                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra Accommodation</p>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
+                            </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                 <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                 <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
@@ -168,14 +167,8 @@
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                             <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
-                            <div class="accommodation mt-4 mb-3">
+                            <div class="accommodation">
                                 <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
-                            </div>
-                            <div class="equipment">
-                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
@@ -183,6 +176,12 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                             </div>
+                            <div class="extra-accommodation mt-4 mb-3">
+                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra Accommodation</p>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
+                            </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                 <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                 <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
@@ -197,14 +196,8 @@
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                             <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
-                            <div class="accommodation mt-4 mb-3">
+                            <div class="accommodation">
                                 <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
-                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
-                            </div>
-                            <div class="equipment">
-                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
@@ -212,6 +205,12 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                             </div>
+                            <div class="extra-accommodation mt-4 mb-3">
+                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra Accommodation</p>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
+                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
+                            </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                 <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                 <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
diff --git a/hotel_booking/rooms.php b/hotel_booking/rooms.php
new file mode 100644
index 0000000..1d0c4e1
--- /dev/null
+++ b/hotel_booking/rooms.php
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rooms & Accommodation | Midtown Hotel</title>
+    <?php require('./components/link.php') ?>
+    <style>
+        .room-hero{
+            position: relative;
+            height: 100vh;
+            background-size: cover;
+            background-position: center;
+            background-image: url(images/home4.jpg);
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .frame{
+            display: flex;
+            align-items: center;
+            gap: 20px; 
+            margin-bottom: 50px;
+            margin-top: 100px;
+        }
+        .frame1{
+            width: 60px; 
+            height: 80px; 
+            border: 1px solid black;
+        }
+        .frame2{
+            width: 40px; 
+            height: 60px; 
+            border: 1px solid black; 
+            margin-top: 10px; 
+            margin-left: 10px; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center;
+            font-size: 30px;
+        }
+        .frame-title{
+            text-transform: uppercase; 
+            letter-spacing: 5px;
+            font-size: 12px;
+        }
+        .about-img{
+            width: 100%;
+            height: 600px; 
+            object-fit: cover;
+            border-radius: 5px;
+        }
+        .room-title{
+            font-size: 16px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+        .room-detail{
+            border: 1px solid #E7E1D8; 
+            border-radius: 5px; 
+            background-color: #F6F4F2; 
+        }
+
+        @media (max-width:990px){
+            .frame1{
+                width: 40px; 
+                height: 60px; 
+            }
+            .frame2{
+                width: 20px; 
+                height: 40px;
+                font-size: 16px;
+            }
+            .about-img{ 
+                width:100%;
+                height: 500px;
+            }
+        }
+        @media (max-width:768px){
+            .room-detail{
+                margin-top: 5px;
+            }
+        }
+        @media (max-width:450px) {
+            .about-img{
+                height: 450px; 
+            }
+        }
+    </style>
+</head>
+<body>
+    <!--Hero & Navbar section-->
+    <div class="room-hero">
+        <div class="load"></div>
+        <?php require('./components/header.php') ?>
+        <div class="hero-content">
+            <div class="hero-head">
+                <h1 class="hero-title">Rooms</h1>
+                <p class="hero-subtitle">Comfortable accommodation directly in the hotel with extensive services</p>
+            </div>
+        </div>
+    </div>
+    <!--Rooms section-->
+    <div class="panel" data-color="white">
+        <div class="frame">
+            <div class="frame1">
+                <div class="frame2">I</div>
+            </div>
+            <p class="frame-title">Standard room</p>
+        </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 d-flex justify-content-center">
+                    <img src="./images/home3.jpg" class="about-img"/>
+                </div>
+                <div class="col-md-6">
+                    <div class="room-detail">
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> A king bed size (76" x 80").</p>
+                                <p><i class='bx bx-checkbox-checked'></i> A bathroom with a shower or bathtub, toilet, and sink including toiletries.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Furniture: A closet, bedside tables, a desk, and chairs.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Electronic Devices: A television, telephone, mini-fridge, coffee maker, hairdryer.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Heating and air conditioning</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Wi-Fi and wired internet access</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Housekeeping</p>
+                            </div>
+                        </div>
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Extra Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> Breakfast</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Swimming Pools</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Sauna (Steam sauna)</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Massage (Aromatherapy massage)</p>
+                            </div>
+                        </div>
+                        <div class="d-flex gap-2 items-center justify-content-center m-4">
+                            <a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
+                        </div>
+                        </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+
+
+    <!--footer-->
+    <?php require('./components/footer.php'); ?>
+
+    <?php require('./components/script.php') ?>
+</body>
+</html>
\ No newline at end of file