diff --git a/reservation.html b/reservation.html
index 7f68902..77dae72 100644
--- a/reservation.html
+++ b/reservation.html
@@ -7,6 +7,8 @@
     <title>Reservation</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker-bulma.min.css">
     <link href="css/style.css" rel="stylesheet">
     <style>
         .room-image {
@@ -58,45 +60,38 @@
             <div class="col-md-3">
             </div>
             <div class="col-md-6">
-                <h1 class="text-center mt-3">Search for Availability</h1>
+                <h1 class="text-center mt-5">Search for Availability</h1>
 
                 <form action="reservation.html" method="get" novalidate class="needs-validation">
-                    <div class="row">
+                    <div id="reservation-dates" class="row">
                         <div class="col mb-3">
-                            <label for="start_date" class="form-label">Starting Date</label>
-                            <input required type="date" class="form-control" id="start_date" name="start_date"
-                                aria-describedby="startDateHelp">
-                            <small id="startDateHelp" class="form-text text-muted">Enter your starting date in the form
-                                of
-                                YYYY-MM-DD</small>
+                            <input required type="text" class="form-control" name="start" placeholder="Arrival">
                         </div>
                         <div class="col mb-3">
-                            <label for="end_date" class="form-label">Eding Date</label>
-                            <input required type="date" class="form-control" id="end_date" name="end_date"
-                                aria-describedby="endDateHelp">
-                            <small id="endDateHelp" class="form-text text-muted">Enter your ending date in the form of
-                                YYYY-MM-DD</small>
+                            <input required type="text" class="form-control" name="end" placeholder="Departure">
                         </div>
                     </div>
                     <div class="mb-3">
                         <button type="submit" class="btn btn-primary mb-3">Search Availability</button>
                     </div>
                 </form>
+
             </div>
         </div>
+    </div>
 
-        <div class="row">
-            <footer class="py-3 my-4">
-                <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
-                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
-                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
-                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
-                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
-                </ul>
-                <p class="text-center text-body-secondary">© 2024 Company, Inc</p>
-            </footer>
-        </div>
+    <div class="row">
+        <footer class="py-3 my-4">
+            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
+            </ul>
+            <p class="text-center text-body-secondary">© 2024 Company, Inc</p>
+        </footer>
+    </div>
 
     </div>
 
@@ -104,6 +99,8 @@
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
+
     <script>
         (() => {
             'use strict'
@@ -123,6 +120,12 @@
                 }, false)
             })
         })()
+
+        const elem = document.getElementById('reservation-dates');
+        const rangepicker = new DateRangePicker(elem, {
+            "format": "yyyy-mm-dd",
+        });
+
     </script>
 </body>