diff --git a/hotel_booking/booking.php b/hotel_booking/booking.php
new file mode 100644
index 0000000..cec67df
--- /dev/null
+++ b/hotel_booking/booking.php
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Booking | Midtown Hotel</title>
+    <?php require('./components/link.php') ?>
+    <style>
+        .booking-hero{
+            position: relative;
+            width: 100%;
+            background-color: #194141;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0px 3px 3px #BFCBCB;
+        }
+        .booking-title{
+            margin: 50px;
+            text-align: center;
+            text-transform: uppercase;
+            font-size: 22px;
+            color: #B0A695;
+            text-shadow: 1px 1px 2px #EAD8C0;
+        }
+        
+
+
+        @media (max-width:765px){
+            .booking-hero{
+                height: 100px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="booking-hero">
+        <?php require('./components/header.php') ?>
+    </div>
+    <p class="booking-title">Rooms available</p>
+    <div class="container">
+        <div class="row">
+
+            <div class="col-lg-3">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light shadow rounded">
+                    <div class="container-fluid flex-lg-column align-items-stretch">
+                        <p class="mt-2" style="text-transform: capitalize; font-weight: 600; font-size: 18px;">Filter bookings</p>
+                        <button class="navbar-toggler shadow-none border-none mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                            <i class="bi bi-sort-down"></i>
+                        </button>
+                        <div class="collapse navbar-collapse flex-column align-items-stretch" id="filterDropdown">
+                            <div class="border bg-white p-3 rounded mb-3">
+                                <p class="mb-2" style="font-weight: 500;">Availability</p>
+                                <label class="form-label">Check-in</label>
+                                <input type="date" class="form-control shadow-none mb-4" style="font-size: 14px;"/>
+                                <label class="form-label">Check-out</label>
+                                <input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
+                            </div>
+                            <div class="border bg-white p-3 rounded mb-3">
+                                <p class="mb-2" style="font-weight: 500;">Room Types</p>
+                                <div class="mb-1">
+                                    <input type="checkbox" id="f1" class="form-check-input shadow-none"/>
+                                    <label class="form-check-label" for="f1" style="font-size: 14px;">Standard room</label>
+                                </div>
+                                <div class="mb-1">
+                                    <input type="checkbox" id="f1" class="form-check-input shadow-none"/>
+                                    <label class="form-check-label" for="f1" style="font-size: 14px;">Deluxe room</label>
+                                </div>
+                                <div class="mb-1">
+                                    <input type="checkbox" id="f1" class="form-check-input shadow-none"/>
+                                    <label class="form-check-label" for="f1" style="font-size: 14px;">Double room</label>
+                                </div>
+                                <div class="mb-1">
+                                    <input type="checkbox" id="f1" class="form-check-input shadow-none"/>
+                                    <label class="form-check-label" for="f1" style="font-size: 14px;">Suit room</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+
+        </div>
+    </div>
+
+    
+
+
+
+
+
+
+
+
+
+
+
+
+    <!--footer-->
+    <?php require('./components/footer.php'); ?>
+
+    <?php require('./components/script.php') ?>
+</body>
+</html>
\ No newline at end of file
