diff --git a/hotel_booking/ajax/cancel_booking.php b/hotel_booking/ajax/cancel_booking.php
new file mode 100644
index 0000000..0082110
--- /dev/null
+++ b/hotel_booking/ajax/cancel_booking.php
@@ -0,0 +1,22 @@
+<?php
+
+    require('../admin/components/db_config.php');
+    require('../admin/components/utils.php');
+
+    date_default_timezone_set("America/Chicago");
+
+    session_start();
+    if(!(isset($_SESSION['login']) && $_SESSION['login'] == true)){
+        redirect('index.php');
+    }
+
+    if(isset($_POST['cancel_booking'])){
+        $frm_data = filteration($_POST);
+        $query = "UPDATE `booking_order` SET `booking_status`=? WHERE `booking_id`=? AND `user_id`=?";
+        $values = ['cancel', $frm_data['id'], $_SESSION['uerID']];
+        $result = update($query, $values, 'sii'); 
+
+        echo $result;
+    }
+
+?>
\ No newline at end of file
diff --git a/hotel_booking/generate_invoice.php b/hotel_booking/generate_invoice.php
new file mode 100644
index 0000000..ec50fae
--- /dev/null
+++ b/hotel_booking/generate_invoice.php
@@ -0,0 +1,120 @@
+<?php
+    require('admin/components/utils.php');
+    require('admin/components/db_config.php');
+    require('admin/components/link.php'); 
+    
+    session_start();
+    if(!(isset($_SESSION['login']) && $_SESSION['login'] == true)){
+        redirect('index.php');
+    }
+
+    if(isset($_GET['gen_pdf']) && isset($_GET['id'])){
+        $frm_data = filteration($_GET);
+        $query = "SELECT bo.*, bd.* FROM `booking_order` bo INNER JOIN `booking_detail` bd ON bo.booking_id = bd.booking_id WHERE ((bo.booking_status='pending' AND bo.arrival = 1) OR (bo.booking_status='cancel' AND bo.arrival = 0)) 
+                    AND bo.booking_id = '$frm_data[id]' ";
+        $res = mysqli_query($con, $query);
+        
+        $total_rows = mysqli_num_rows($res);
+        if($total_rows == 0){
+            header('location: index.php');
+            exit;
+        }
+        $data = mysqli_fetch_assoc($res);
+        $date = date("M-d-Y", strtotime($data['datentime']));
+        $checkin = date("M-d-Y", strtotime($data['check_in']));
+        $checkout = date("M-d-Y", strtotime($data['check_out'])); 
+        $total_pay = $data['total_pay'];
+        $tax = $data['total_pay'] * 0.05;
+        $total_amount = $tax + $total_pay;
+
+        $table_data = "
+            <div class='container'>
+                <div class='card' style='max-width: 800px; margin: auto; margin-top: 50px; margin-bottom: 50px;'>
+                    <div class='card-header' style='background-color: #E1F0DA;'>
+                        <div class='card-header-top' style='margin-top: 25px;'>
+                            <div class='card-header-top-left'>
+                                <img src='../images/logo.png'/>
+                            </div>
+                            <div class='card-header-top-right text-end'>
+                                <p style='font-size: 16px; text-transform: uppercase; font-weight: 600;'>Midtown Hotel</p>
+                                <p>36381 Trantow Hill,</p>
+                                <p>New Port, FL 57941</p>
+                                <p>(123) 456-7891</p>
+                                <p>accombooking@midtownhotel.com</p>
+                            </div>
+                        </div>
+                        <div class='card-header-bottom' style='margin-top: 25px;'>
+                            <div class='card-header-bottom-left text-start'>
+                                <p style='font-weight: 600;'>Bill to:</p>
+                                <p style='text-transform: capitalize;'><b>Name:</b> $data[user_name] $data[user_lastname]</p>
+                                <p><b>Adress:</b> $data[address]</p>
+                                <p><b>Phone:</b> $data[phone]</p>
+                            </div>
+                            <div class='card-header-right text-start'>
+                                <p><b>Order ID:</b> $data[order_id]</p>
+                                <p><b>Invoice date:</b> $checkin</p>
+                            </div>
+                        </div>   
+                    </div>
+                    <div class='card-body' style='background-color: #F1F8E8; height: 500px;'>
+                        <table class='table table-striped'>
+                            <thead>
+                                <tr class='text-start text-title'>
+                                    <th scope='col' style='width: 50%;'>Details</th>
+                                    <th scope='col'>Check in</th>
+                                    <th scope='col'>Check out</th>
+                                    <th scope='col'>Price</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class='text-start text-subtitle'>
+                                    <td>$data[room_name]</td>
+                                    <td>$checkin</td>
+                                    <td>$checkout</td>
+                                    <td>$$data[price]/night</td>
+                                </tr>
+                            </tbody>   
+                        </table>
+                        <div class='card-summary text-end' style='margin: 20px;'>
+                            <p><b>Total:</b> $$total_pay</p>
+                            <p><b>Sale Tax(5%):</b> $$tax</p>
+                            <p><b>Total Amount:</b> $$total_amount</p>
+                        </div>
+                    </div>
+                    <div class='card-footer' style='background-color: #E1F0DA;'>
+                        <p class='text-center'>Thank you for staying with us! We hope you have a great time and wonderful memories during your stay. <br>
+                        We will be greatful if you please leave us a review in your client protal.</p> 
+                    </div>
+                </div>
+            </div>
+        ";
+        echo $table_data;
+
+    } else{
+        header('location: index.php');
+    }
+
+?>
+<style>
+    .card-header-top, .card-header-bottom{
+        display: flex;
+        justify-content: space-between;
+    }
+    .card-header-top-left img{
+        width: 100px;
+    }
+    .card-header-top-right p{
+        font-size: 14px;
+        line-height: 10px;
+    }
+    .card-footer p{
+        font-size: 14px;
+    }
+    .card-header-bottom-left p, .card-header-right p{
+        font-size: 16px;
+        line-height: 12px;
+    }
+    .text-title{
+        font-size: 16px;
+    }
+</style>
\ No newline at end of file
diff --git a/hotel_booking/user_booking.php b/hotel_booking/user_booking.php
index 99a7c16..47902fd 100644
--- a/hotel_booking/user_booking.php
+++ b/hotel_booking/user_booking.php
@@ -29,12 +29,6 @@
             color: #B0A695;
             text-shadow: 1px 1px 2px #EAD8C0;
         }
-        .custom-alert-t{
-            position:fixed; 
-            top: 100px; 
-            right: 25px;
-            z-index: 10000;
-        }
         .room-book-img{
             width: 100%; 
             height: 550px; 
@@ -50,13 +44,18 @@
             color: white;
             padding: 6px 12px;
             text-align: center;
-            font-size: 14px;
             border-radius: 3px;
         }
+        .booking-order{
+            font-size: 14px;
+        }
         @media (max-width:765px){
             .booking-hero{
                 height: 100px;
             }
+            .booking-body, .booking-head{
+                font-size: 12px;
+            }
         }
         @media (max-width:580px){
             .room-book-img{ 
@@ -67,6 +66,9 @@
             .room-title{
                 font-size: 16px;
             }
+            .booking-body{
+                font-size: 10px;
+            }
         }
     </style>
 </head>
@@ -79,7 +81,7 @@
             } 
         ?>
     </div>
-    <div class="container">
+    <div class="container mb-5">
         <div class="row">
             <div class="col-12 mt-5 mb-4">
                 <h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;">Booking<h4>
@@ -95,10 +97,11 @@
                 <div class='table-responsive col-12'>
                     <table class="table">
                         <thead>
-                            <tr class='bg-light'>
-                                <th scope="col" style='width: 25%;'>Date</th>
-                                <th scope="col" style='width: 25%;'>Order ID</th>
-                                <th scope="col" style='width: 50%;'>Action</th>
+                            <tr class='bg-light booking-head'>
+                                <th scope="col" style='width: 20%;'>Date</th>
+                                <th scope="col" style='width: 30%;'>Order ID</th>
+                                <th scope="col" style='width: 10%;'>Status</th>
+                                <th scope="col" style='width: 40%;'>Action</th>
                             </tr>
                         </thead>
                     </table></div>
@@ -111,33 +114,36 @@
                     $status_bg = "";
                     $btn = "";
 
-                    if($data['booking_status'] == 'pending'){
-                        $status_bg = "bg-success";
-                        if($data['arrival'] ==1){
-                            $btn = "
-                                <a href='generate_invoice.php&gen_pdf&id=$data[booking_id]' class='btn-third' >Download</a>
-                                <button type='button' class='btn-second' style='font-size: 14px; padding: 5px; font-weight: 600;'>Review</button>
-                            ";
-                        } else{
-                            $btn = "
-                                <button type='button' class='btn-cancel' style='font-size: 14px; padding: 5px; font-weight: 600;'>Cancel</button>
-                            ";
-                        }
-
-                    } else{
+                    if($data['booking_status'] == 'pending' && $data['arrival'] == 0){
+                        $status_bg = "bg-warning";
+                        $status = 'Pending';
+                        $btn = "
+                            <button onclick='cancel_booking($data[booking_id])' type='button' class='badge btn-minor' style='font-weight: 600;'>Cancel</button>
+                        ";
+                    } else if($data['booking_status'] == 'cancel' && $data['arrival'] == 0){
                         $status_bg = "bg-danger";
+                        $status = 'Cancelled';
+                    } else if($data['booking_status'] == 'pending' && $data['arrival'] ==1){
+                        $status_bg = "bg-success";
+                        $status = 'Booked';
+                        $btn = "
+                            <a href='generate_invoice.php?gen_pdf&id=$data[booking_id]' class='badge btn-minor' ><i class='bx bx-download'></i></a>
+                            <button type='button' class='badge btn-main' style='font-weight: 600;'>Review</button>
+                        ";
                     }
                     echo <<< data
                     <div class='table-responsive col-12'>
-                    <table class="table">
-                        <tbody'>
-                            <tr>
-                                <td style='width: 25%;'>$date</td>
-                                <td style='width: 25%;'>$data[order_id]</td>
-                                <td style='width: 50%;'>Action</td>
-                            </tr>  
-                        </tbody>
-                    </table></div>
+                        <table class="table">
+                            <tbody'>
+                                <tr class='booking-body'>
+                                    <td style='width: 20%;'>$date</td>
+                                    <td style='width: 30%;'>$data[order_id]</td>
+                                    <td style='width: 10%;'><span class='badge $status_bg'>$status</span></td>
+                                    <td style='width: 40%;'>$btn</td>
+                                </tr>  
+                            </tbody>
+                        </table>
+                    </div>
                     data;
                 }    
             ?>
@@ -148,6 +154,23 @@
     <!--footer-->
     <?php require('./components/footer.php'); ?>
     <?php require('./components/script.php') ?>
-    
+    <script>
+        function cancel_booking(id){
+            if(confirm('Are you sure you want to cancel this booking?')){
+                let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/cancel_booking.php", true);
+            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+
+            xhr.onload = function(){
+                if(this.responseText == 1){
+                    window.location.href="user_booking.php?cancel_status=true"
+                } else{
+                    alert('error', 'Fail to cancel this booking, please try again later!')
+                }
+            }
+            xhr.send('cancel_booking&id='+id);
+            }
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file