diff --git a/hotel_booking/.gitignore b/hotel_booking/.gitignore
index a183f70..973a9f6 100644
--- a/hotel_booking/.gitignore
+++ b/hotel_booking/.gitignore
@@ -1,5 +1,4 @@
 images/*
 admin/components/db_config.php
 admin/components/api.php
-ajax/login_register.php
 components/sendgrid/*
\ No newline at end of file
diff --git a/hotel_booking/ajax/confirmBooking.php b/hotel_booking/ajax/confirmBooking.php
new file mode 100644
index 0000000..39560f6
--- /dev/null
+++ b/hotel_booking/ajax/confirmBooking.php
@@ -0,0 +1,45 @@
+<?php
+
+    require('../admin/components/db_config.php');
+    require('../admin/components/utils.php');
+
+    date_default_timezone_set('UTC');
+
+    if(isset($_POST['check_availability'])){
+        $frm_data = filteration($_POST);
+        $status = "";
+        $result = "";
+
+        //booking time validation
+        $today_date = new DateTime(date("M-d-Y"));
+        $checkin_date = new DateTime($frm_data['check_in']);
+        $checkout_date = new DateTime($frm_data['check_out']);
+        
+        if($checkin_date == $checkout_date){
+            $status = 'check_in_out_equal';
+            $result = json_encode(["status" => $status]);
+        } else if($checkout_date < $checkin_date){
+            $status = 'check_out_earlier';
+            $result = json_encode(["status" => $status]);
+        } else if($checkin_date < $today_date){
+            $status = 'check_in_earlier';
+            $result = json_encode(["status" => $status]);
+        }
+        //booking availability
+        if($status!=''){
+            echo $result;
+        } else{
+            session_start();
+            $_SESSION['room'];
+
+            //check room availability
+            $count_days = date_diff($checkin_date, $checkout_date)->days;
+            $payment = $_SESSION['room']['price'] * $count_days;
+            $_SESSION['room']['payment'] = $payment;
+            $_SESSION['room']['available'] = true;
+            
+            $result = json_encode(["status" => 'available', "days" => $count_days, "payment" => $payment]);
+            echo $result;
+        }
+    }
+?>
\ No newline at end of file
diff --git a/hotel_booking/ajax/login_register.php b/hotel_booking/ajax/login_register.php
new file mode 100644
index 0000000..3587742
--- /dev/null
+++ b/hotel_booking/ajax/login_register.php
@@ -0,0 +1,100 @@
+<?php
+
+    require('../admin/components/db_config.php');
+    require('../admin/components/utils.php');
+    require('../admin/components/api.php');
+    require("../components/sendgrid/sendgrid-php.php");
+
+    date_default_timezone_set("America/Chicago");
+
+    //sendgrid
+    function send_mail($mail, $name, $token){
+        $email = new \SendGrid\Mail\Mail(); 
+        $email->setFrom(SENDGRID_EMAIL, SENDGRID_SENDER);
+        $email->setSubject("Account Verification Link");
+
+        $email->addTo($mail, $name);
+        $email->addContent(
+            "text/html", 
+            "Please verify your email by clicking the link below: <br>
+            <a href='".SITE_URL."email_confirm.php?email_confirmation&email=$mail&token=$token"."'>Click here</a>
+            "
+        );
+    
+        $sendgrid = new \SendGrid(SENDGRID_API_KEY);
+
+        if($sendgrid->send($email)){
+            return 1;
+        } else{
+            return 0;
+        }
+        
+    }
+    //register
+    if(isset($_POST['register'])){
+        $data = filteration($_POST);
+
+        //password confirmation
+        if($data['password'] != $data['cpassword']){
+            echo 'pass_mismatch';
+            exit;
+        } 
+        //check user existing
+        $user_exist = select("SELECT * FROM `user_creds` WHERE `email`=? AND `phone`=? LIMIT 1", [$data['email'], $data['phone']], "ss");
+
+        if(mysqli_num_rows($user_exist) != 0){
+            $user_exist_fetch = mysqli_fetch_assoc($user_exist);
+            echo ($user_exist_fetch['email'] == $data['email']) ? 'email_already' : 'phone_already';
+            exit;
+        }
+        //send confirmation to user email (sendGrid provider)
+
+        $token = bin2hex(random_bytes(16));
+
+        if(!send_mail($data['email'], $data['firstname'], $token)){
+            echo 'mail_failed';
+            exit;
+        }
+
+        $enc_pass = password_hash($data['password'], PASSWORD_BCRYPT);
+        $query = "INSERT INTO `user_creds`(`firstname`, `email`, `lastname`, `phone`, `birth`, `address`, `password`, `token`) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
+        $values = [$data['firstname'], $data['email'], $data['lastname'], $data['phone'], $data['birth'], $data['address'], $enc_pass, $token];
+
+        if(insert($query, $values, 'ssssssss')){
+            echo 1;
+        } else{
+            echo 'ins_failed';
+        }
+
+    }
+    //login
+    if(isset($_POST['login'])){
+        $data = filteration($_POST);
+        $user_exist = select("SELECT * FROM `user_creds` WHERE `email`=? OR `phone`=? LIMIT 1", [$data['email'], $data['email']], "ss");
+
+        if(mysqli_num_rows($user_exist) == 0){
+            echo 'inv_email';
+        } else{
+           $user_fetch = mysqli_fetch_assoc($user_exist); 
+           if($user_fetch['is_verified'] == 0){
+            echo 'not_verified';
+           } else if($user_fetch['status'] == 0){
+            echo 'inactive';
+           } else{
+            if(!password_verify($data['password'], $user_fetch['password'])){
+                echo 'invalid_pass';
+            } else{
+                session_start();
+                $_SESSION['login'] = true;
+                $_SESSION['uerID'] = $user_fetch['id'];
+                $_SESSION['userName'] = $user_fetch['firstname'];
+                $_SESSION['userPhone'] = $user_fetch['phone'];
+                echo 1;
+            }
+           }
+        };
+        
+            
+
+    }
+?>
\ No newline at end of file
diff --git a/hotel_booking/confirm_booking.php b/hotel_booking/confirm_booking.php
index a843f5a..337802e 100644
--- a/hotel_booking/confirm_booking.php
+++ b/hotel_booking/confirm_booking.php
@@ -6,6 +6,13 @@
     <title>Booking confirmation | Midtown Hotel</title>
     <?php require('./components/link.php') ?>
     <style>
+        input[type=number]{
+            -moz-appearance: textfield;
+        }
+        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
+            -webkit-appearance: none;
+            margin: 0;
+        }
         .booking-hero{
             position: relative;
             width: 100%;
@@ -28,11 +35,39 @@
             right: 25px;
             z-index: 10000;
         }
+        .room-book-img{
+            width: 100%; 
+            height: 550px; 
+            object-fit: cover;
+        }
+        .room-title{
+            font-size: 20px; 
+            text-transform: uppercase; 
+        }
+        .btn-third{
+            background-color: #194141;
+            border: none;
+            color: white;
+            padding: 6px 12px;
+            text-align: center;
+            font-size: 14px;
+            border-radius: 3px;
+        }
         @media (max-width:765px){
             .booking-hero{
                 height: 100px;
             }
         }
+        @media (max-width:580px){
+            .room-book-img{ 
+                height: 350px;
+            }
+        }
+        @media (max-width:450px){
+            .room-title{
+                font-size: 16px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -55,28 +90,85 @@
 
         $room_data = mysqli_fetch_assoc($room_res);
 
+        $_SESSION['room'] = [
+            "id" => $room_data['id'],
+            "name" => $room_data['name'],
+            "price" => $room_data['price'],
+            "payment" => null,
+            "available" => false,
+        ];  
+
+        $user_res = select("SELECT * FROM `user_creds` WHERE `id`=? LIMIT 1", [$_SESSION['uerID']], "i");
+        $user_data = mysqli_fetch_assoc($user_res);
         
+
         //get accommodation & additional accommodation
         $accom_q = mysqli_query($con, "SELECT a.name FROM `accommodation` a INNER JOIN `room_accommodation` raccom ON a.id = raccom.accommodation_id WHERE raccom.room_id = '$room_data[id]'");
-            $accommodation_data = "";   
+        $accommodation_data = "";   
 
-            while($accom_row = mysqli_fetch_assoc($accom_q)){
-                $accommodation_data .="<p style='font-size: 14px;'>&#9642; $accom_row[name]</p>";                            
-            }
-            //get additional accommodation data from database
-            $addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
-            $additionalAccom_data = "";
+        while($accom_row = mysqli_fetch_assoc($accom_q)){
+            $accommodation_data .="<p style='font-size: 14px;'>&#9642; $accom_row[name]</p>";                            
+        }
+        //get additional accommodation data from database
+        $addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
+        $additionalAccom_data = "";
                         
-            while($addi_row = mysqli_fetch_assoc($addi_q)){
-                $additionalAccom_data .="<p style='font-size: 14px;'>&#9642; $addi_row[name]</p>";                            
-            }
+        while($addi_row = mysqli_fetch_assoc($addi_q)){
+            $additionalAccom_data .="<p style='font-size: 14px;'>&#9642; $addi_row[name]</p>";                            
+        }
     ?>
     <div class="container">
         <div class="row">
             <div class="col-12 mt-5 mb-4">
-                <h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;"><?php echo $room_data['name']?><h4>
+                <h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;">Booking confirmation<h4>
             </div>
             <div class="col-lg-7 col-md-12">
+                <div class="card mb-4 border-0 shadow-sm">
+                    <div class="card-body">
+                        <form id="booking_form">
+                            <h5>Booking Detail</h5>
+                            <div class="row">
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Name</label>
+                                    <input name="firstname" type="text" value="<?php echo $user_data['firstname']?>" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Name</label>
+                                    <input name="lastname" type="text" value="<?php echo $user_data['lastname']?>" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Phone Number</label>
+                                    <input name="phone" type="number" value="<?php echo $user_data['phone']?>" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Email</label>
+                                    <input name="email" type="email" value="<?php echo $user_data['email']?>" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-12 mb-3">
+                                    <label class="form-label">Address</label>
+                                    <textarea name="address" type="text" rows="2" class="form-control shadow-none" style="resize: none;" required><?php echo $user_data['address']?></textarea>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Check-in</label>
+                                    <input name="checkin" onchange="check_availability()" type="date" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label class="form-label">Check-out</label>
+                                    <input name="checkout" onchange="check_availability()" type="date" class="form-control shadow-none" required>
+                                </div>
+                                <div class="col-md-12 mt-4 mb-3" >
+                                    <div id="info_loader" class="spinner-border text-secondary mb-3 d-none"  role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                    <p class="mb-3 text-danger" id="pay_info">Please provide check-in and check-out date</p>
+                                    <button name="pay_now" class="btn-third" style="width: 100%; text-transform: uppercase;" disabled>pay now</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-5 col-md-12">
                 <div id="roomCarousel" class="carousel slide" data-bs-ride="carousel">
                     <div class="carousel-inner">
                         <?php
@@ -89,7 +181,7 @@
                                 while($cover_res = mysqli_fetch_assoc($cover_q)){
                                     echo "
                                         <div class='carousel-item $active_class'>
-                                            <img src='".ROOM_IMG_PATH.$cover_res['image']."' class='d-block w-100' alt='room' style='width: 100%; height: 550px; object-fit: cover;'>
+                                            <img src='".ROOM_IMG_PATH.$cover_res['image']."' class='d-block w-100 room-book-img' alt='room'>
                                         </div>
                                     ";
                                     $active_class = '';
@@ -114,30 +206,28 @@
                     </button>
                 </div>
             </div>
-            <div class="col-lg-5 col-nd-12">
-                <div class="card mb-4 border-0 shadow-sm">
-                    <div class="card-body" style="background-color: #EBF4F6;">
+            <div class="col-lg-7 col-md-12"></div>
+            <div class="col-lg-5 col-md-12">
+                <div class="card mb-4 border">
+                    <div class="card-body">
                         <?php
                             echo <<< data
                                 <div style="display: flex; justify-content: space-between; align-items: center; font-weight: 600;">
-                                    <p style="font-size: 20px; text-transform: uppercase; ">$room_data[name] <span style="font-size: 16px; text-transform: none;" >($room_data[area] sq.ft.)</span></p>
+                                    <p class="room-title">$room_data[name] <span style="font-size: 16px; text-transform: none;" >($room_data[area] sq.ft.)</span></p>
                                     <p style="font-size: 16px;">$$room_data[price]/night</p>
                                 </div>
                                 <div class="my-4 mx-2">
-                                    <p class="room-title" style="font-weight: 600;">Room Detail</p>
+                                    <p style="font-weight: 600;">Room Detail</p>
                                     <div style="font-size: 14px;">$room_data[detail]</div>
                                 </div>
                                 <div class="my-4 mx-2">
-                                    <p class="room-title" style="font-weight: 600;">Accommodation</p>
+                                    <p style="font-weight: 600;">Accommodation</p>
                                     <div>$accommodation_data</div>
                                 </div>
                                 <div class="my-4 mx-2">
-                                    <p class="room-title" style="font-weight: 600;">Additional Accommodation</p>
+                                    <p style="font-weight: 600;">Additional Accommodation</p>
                                     <div>$additionalAccom_data</div>
                                 </div>
-                                <div class="d-flex gap-2 items-center justify-content-center m-4">
-                                    <a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
-                                </div>
                             data;
                         ?>
                     </div>
@@ -147,14 +237,64 @@
     </div>
 
 
-
-
-
-
-
 <!--footer-->
 <?php require('./components/footer.php'); ?>
 
 <?php require('./components/script.php') ?>
+
+<script>
+
+    let booking_form = document.getElementById('booking_form');
+    let info_loader = document.getElementById('info_loader');
+    let pay_info = document.getElementById('pay_info');
+
+    function check_availability(){
+        let checkin_val = booking_form.elements['checkin'].value;
+        let checkout_val = booking_form.elements['checkout'].value;
+        
+
+        booking_form.elements['pay_now'].setAttribute('disabled', true);
+        if(checkin_val !='' && checkout_val !=''){
+            pay_info.classList.add('d-none');
+            pay_info.classList.replace('text-dark', 'text-danger');
+            info_loader.classList.remove('d-none');
+
+
+            let data = new FormData();
+            data.append('check_availability', '');
+            data.append('check_in', checkin_val);
+            data.append('check_out', checkout_val);
+
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/confirmBooking.php", true);
+
+            xhr.onload = function(){
+                let data = JSON.parse(this.responseText);
+                if(data.status == 'check_in_out_equal'){
+                    pay_info.innerText = "No options matching your search, please make sure your check-in and check-out date is not the same!";
+                } else if(data.status == 'check_out_earlier'){
+                    pay_info.innerText = "No options matching your search, please check your check-out date";
+                } else if(data.status == 'check_in_earlier'){
+                    pay_info.innerText = "No options matching your search, please check your check-in date";
+                } else if(data.status == 'unavailable'){
+                    pay_info.innerText = "We are sorry, this room is not available at this time.";
+                } else{
+                    //pay_info.innerHTML = "Number of days: " +data.days+ "<br> Total Price: $"+data.payment;
+                    pay_info.innerHTML = `
+                        <div style='width: 200px; display: flex; flex-direction: row; justify-content: space-between; font-size: 14px;'><p style="font-weight: 600;">Number of days</p> <p> ${+data.days}</p></div>
+                        <div style='width: 200px; display: flex; flex-direction: row; justify-content: space-between; font-size: 14px;'><p style="font-weight: 600;">Total amount</p> <p>$${+data.payment}</p></div>
+                    `;
+                    pay_info.classList.replace('text-danger', 'text-dark');
+                    booking_form.elements['pay_now'].removeAttribute('disabled');
+                }
+                pay_info.classList.remove('d-none');
+                info_loader.classList.add('d-none');
+            }
+            xhr.send(data)
+        }
+    }
+
+
+</script>
 </body>
 </html>
\ No newline at end of file