diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index 3a16bec..0bc5a11 100644
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -17,6 +17,7 @@
 <livewire:schedule-calendar :labs="$labs" />
 
 @push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script>
 
 Livewire.on('close-modal', function () {
@@ -32,12 +33,22 @@
 });
 
 Livewire.on('success-booking', function () {
-  const toasty = document.getElementById('static-example');    
-    toasty.classList.replace('data-[te-toast-show]:hidden', 'data-[te-toast-show]:block')
+  // const toasty = document.getElementById('static-example');    
+  //   toasty.classList.replace('data-[te-toast-show]:hidden', 'data-[te-toast-show]:block')
     
-    setTimeout(() => {
-      toasty.classList.replace('data-[te-toast-show]:block', 'data-[te-toast-show]:hidden')
-    }, 5000);
+  //   setTimeout(() => {
+  //     toasty.classList.replace('data-[te-toast-show]:block', 'data-[te-toast-show]:hidden')
+  //   }, 5000);
+
+  Swal.fire({
+    position: "top-end",
+    title: 'Success!',
+    text: 'Booking anda berhasil didaftarkan!.',
+    showConfirmButton: false,
+    timerProgressBar: true,
+    timer: 1500,
+    icon:'success',
+  })
 });
 
 </script>
diff --git a/resources/views/livewire/booking-history.blade.php b/resources/views/livewire/booking-history.blade.php
index 45c80ec..d068684 100644
--- a/resources/views/livewire/booking-history.blade.php
+++ b/resources/views/livewire/booking-history.blade.php
@@ -83,7 +83,8 @@ class="text-left w-full bg-transparent px-4 py-2 text-sm font-normal text-neutra
     <h1 class=" text-lg font-semibold mt-5 text-neutral-600 dark:text-neutral-200 ">Mendatang</h1>
 
     @foreach ($upcomingHistories as $history)
-    <div class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 mt-3 w-full">
+    <div class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 mt-3 w-full"
+    wire:key="{{ $history->id }}">
         <div class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50 text-xl font-semibold ">
         {{ $history->reason_to_booking }} | <span class="font-medium text-lg">R. {{ str_replace('Ruang ', '', $history->lab->name) }}</span> 
             </div>
@@ -96,11 +97,10 @@ class="text-left w-full bg-transparent px-4 py-2 text-sm font-normal text-neutra
                     {{ $history->start_time }} - {{ $history->end_time }}
                 </p>
                 
-                <form action="{{ route('labs-booking.destroy', $history->id) }}" method="POST">
+                <form action="{{ route('labs-booking.destroy', $history->id) }}" method="POST" id="deleteForm">
                     @csrf
                     @method('delete')
-                    <button type="submit" class="px-4 py-2 bg-red-500 font-semibold text-white text-sm rounded-md" 
-                    onclick="return confirm('Apakah anda yakin ingin membatalkan booking ini?')"
+                    <button type="submit" class="px-4 py-2 bg-red-500 font-semibold text-white text-sm rounded-md" id="cancelBtn"
                     >Batalkan Peminjam</button></form>
                 </form>
             </div>
@@ -131,6 +131,37 @@ class="text-left w-full bg-transparent px-4 py-2 text-sm font-normal text-neutra
     {{ $loadAmount }}
     <button wire:click="loadMore">Load More</button>
 
+    @push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+
+    document.getElementById('cancelBtn').addEventListener('click', function(e){
+        e.preventDefault()
+        Swal.fire({
+            title: 'Apakah anda yakin?',
+            text: "untuk membatalkan peminjaman ruangan ini.",
+            icon: 'warning',
+            iconColor: '#172554',
+            showCancelButton: true,
+            confirmButtonColor: '#EF4444',
+            cancelButtonColor: '#172554',
+            confirmButtonText: 'Ya, Batalkan!'
+        }).then((result) => {
+            if (result.isConfirmed) {
+              document.getElementById('deleteForm').submit();
+                Swal.fire({
+                position: "top-end",
+                title: 'Cancelled!',
+                text: 'Booking anda berhasil dibatalkan.',
+                showConfirmButton: false,
+                timerProgressBar: true,
+                timer: 2000,
+                icon:'success',
+            })
+            }
+        })})
+    </script>
+    @endpush
 </div>
 
 
diff --git a/resources/views/livewire/schedule-calendar.blade.php b/resources/views/livewire/schedule-calendar.blade.php
index 2e3c6b9..7cac075 100644
--- a/resources/views/livewire/schedule-calendar.blade.php
+++ b/resources/views/livewire/schedule-calendar.blade.php
@@ -1,7 +1,7 @@
 
-<div class="lg:overflow-visible overflow-x-scroll" id="contentScroll">
+<div class="overflow-x-scroll max-w-full" id="contentScroll">
     <table class="mt-[73px] mx-auto w-full">
-        <thead class="transition-shadow ease-in-out duration-300 bg-white" id="thead">
+        <thead class="transition-shadow ease-in-out duration-300 bg-white">
             <tr class="sticky top-[73px] shadow-lg z-40">
                 <th class="py-2 border-r h-10 bg-blue-950 text-white">
                    Ruang