diff --git a/package.json b/package.json
index fc082a1..4bfeb44 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "libraryroombookingsystem",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index f493b67..5478801 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "LibraryRoomBookingSystem"
-version = "1.0.0"
+version = "1.0.4"
 dependencies = [
  "chrono",
  "dotenvy",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 93db9be..71fed43 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "LibraryRoomBookingSystem"
-version = "1.0.0"
+version = "1.0.4"
 description = "A Library Room Booking System built with Tauri and Rust"
 authors = ["Lim Shi Song limshisong123@gmail.com"]
 edition = "2021"
diff --git a/src-tauri/migrations/20240607083248_payment.up.sql b/src-tauri/migrations/20240607083248_payment.up.sql
index 31d4f06..dab2540 100644
--- a/src-tauri/migrations/20240607083248_payment.up.sql
+++ b/src-tauri/migrations/20240607083248_payment.up.sql
@@ -10,7 +10,7 @@ CREATE TABLE
             'debit_card',
             'bank transfer'
         ) NOT NULL,
-        amount DECIMAL(10, 2) NOT NULL,
+        amount SMALLINT UNSIGNED NOT NULL,
         payment_status ENUM ('completed', 'failed', 'canceled') NOT NULL,
         FOREIGN KEY (booking_id) REFERENCES booking (booking_id) ON DELETE CASCADE ON UPDATE CASCADE
     );
\ No newline at end of file
diff --git a/src-tauri/migrations/20240607083253_bill.up.sql b/src-tauri/migrations/20240607083253_bill.up.sql
index 4d63b9d..7750862 100644
--- a/src-tauri/migrations/20240607083253_bill.up.sql
+++ b/src-tauri/migrations/20240607083253_bill.up.sql
@@ -4,7 +4,7 @@ CREATE TABLE
         bill_id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT NOT NULL,
         payment_id INT UNSIGNED NOT NULL,
         datetime DATETIME NOT NULL,
-        amount DECIMAL(10, 2) NOT NULL,
+        amount SMALLINT UNSIGNED NOT NULL,
         status ENUM ('completed', 'failed', 'canceled') NOT NULL,
         FOREIGN KEY (payment_id) REFERENCES payment (payment_id) ON DELETE CASCADE ON UPDATE CASCADE
     );
\ No newline at end of file
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 0929f11..75bd526 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "library-room-booking-system",
-    "version": "1.0.3"
+    "version": "1.0.4"
   },
   "tauri": {
     "allowlist": {
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..533b124
--- /dev/null
+++ b/src/lib/components/Modal.svelte
@@ -0,0 +1,39 @@
+<script>
+    import {
+        Button,
+        Card,
+        CardBody,
+        CardFooter,
+        CardHeader,
+        CardTitle,
+        Modal,
+    } from "@sveltestrap/sveltestrap";
+
+    let instance;
+
+    export let show = false;
+    export let title = "Title";
+    export let msg = "Enter your message here";
+    export let close = () => {
+        instance.$destroy();
+    };
+</script>
+
+<Modal bind:isOpen={show} bind:this={instance} on:close={close} centered>
+    <Card>
+        <CardHeader>
+            <CardTitle>{title}</CardTitle>
+        </CardHeader>
+        <CardBody>
+            <p>{msg}</p>
+        </CardBody>
+        <CardFooter class="d-flex">
+            <Button
+                class="ms-auto"
+                on:click={() => {
+                    show = false;
+                }}>Close</Button
+            >
+        </CardFooter>
+    </Card>
+</Modal>
diff --git a/src/lib/components/pages/Admin.svelte b/src/lib/components/pages/Admin.svelte
index 2a940de..22811f9 100644
--- a/src/lib/components/pages/Admin.svelte
+++ b/src/lib/components/pages/Admin.svelte
@@ -19,11 +19,10 @@
     } from "$lib/helper";
     import { getBillByPaymentId } from "$lib/models/bill";
     import { getPaymentByBookingId } from "$lib/models/payment";
+    import showModal from "$lib/showModal";
 
     let list = [];
     let show = false;
-    let approveSuccess = false;
-    let rejectSuccess = false;
 
     let booking;
     let payment;
@@ -46,14 +45,14 @@
     };
 
     let approve = (event) => {
-        approveSuccess = true;
+        showModal("Success", "Booking approved successfully");
         let booking = list.find((b) => b.no === event.detail.no);
         booking.status = "approved";
         list = list;
     };
 
     let reject = (event) => {
-        rejectSuccess = true;
+        showModal("Success", "Booking rejected successfully");
         let booking = list.find((b) => b.no === event.detail.no);
         booking.status = "rejected";
         list = list;
@@ -153,35 +152,6 @@
             </CardFooter>
         </Card>
     </Modal>
-    <Modal bind:isOpen={approveSuccess} centered>
-        <Card>
-            <CardHeader>
-                <CardTitle>Success</CardTitle>
-            </CardHeader>
-            <CardBody>
-                <p>Booking approved successfully</p>
-            </CardBody>
-            <CardFooter class="d-flex">
-                <Button
-                    class="ms-auto"
-                    on:click={() => (approveSuccess = false)}>Close</Button
-                >
-            </CardFooter>
-        </Card>
-    </Modal>
-    <Modal bind:isOpen={rejectSuccess} centered>
-        <Card>
-            <CardHeader>
-                <CardTitle>Success</CardTitle>
-            </CardHeader>
-            <CardBody>
-                <p>Booking rejected successfully</p>
-            </CardBody>
-            <CardFooter class="ms-auto">
-                <Button on:click={() => (rejectSuccess = false)}>Close</Button>
-            </CardFooter>
-        </Card>
-    </Modal>
     <TableCard
         title="Booking List"
         bind:datas={list}
diff --git a/src/lib/components/pages/User.svelte b/src/lib/components/pages/User.svelte
index b703ca1..f5bb570 100644
--- a/src/lib/components/pages/User.svelte
+++ b/src/lib/components/pages/User.svelte
@@ -23,6 +23,7 @@
 </script>
 
 <main class="container-fluid gap-3">
+    <div id="modal"></div>
     <div class="container">
         <SearchBar bind:room bind:date bind:time {search} />
     </div>
diff --git a/src/lib/models/booking.js b/src/lib/models/booking.js
index 96e1ac7..63bf12b 100644
--- a/src/lib/models/booking.js
+++ b/src/lib/models/booking.js
@@ -79,6 +79,18 @@ export async function getBookingById(booking_id) {
     return new Booking(result.pop());
 }
 
+/**
+ * @param {String} startDateTime
+ * @param {String} endDateTime 
+ * @returns boolean
+ */
+export async function checkAvailability(room_id, startDateTime, endDateTime) {
+    let db = await getDB();
+    let query = `SELECT * FROM booking WHERE room_id = ? AND (start_datetime BETWEEN ? AND ? OR end_datetime BETWEEN ? AND ?)`;
+    let result = await db.select(query, [room_id, startDateTime, endDateTime, startDateTime, endDateTime]);
+    return result.length === 0;
+}
+
 export function approveBooking(booking_id) {
     return async () => {
         let db = await getDB();
diff --git a/src/lib/showModal.js b/src/lib/showModal.js
new file mode 100644
index 0000000..2406f3f
--- /dev/null
+++ b/src/lib/showModal.js
@@ -0,0 +1,12 @@
+import Modal from "$lib/components/Modal.svelte";
+export default function showModal(title, msg) {
+    const modal = new Modal({
+        target: document.body,
+        props: {
+            show: true,
+            title,
+            msg,
+            close: () => { modal.$destroy() },
+        },
+    });
+}
\ No newline at end of file
diff --git a/src/routes/(authed)/booking/+page.svelte b/src/routes/(authed)/booking/+page.svelte
index bc5086a..43840f2 100644
--- a/src/routes/(authed)/booking/+page.svelte
+++ b/src/routes/(authed)/booking/+page.svelte
@@ -1,7 +1,8 @@
 <script>
     import BookingForm from "$lib/components/forms/BookingForm.svelte";
     import { toDateTime } from "$lib/helper";
-    import { Booking } from "$lib/models/booking";
+    import { Booking, checkAvailability } from "$lib/models/booking";
+    import showModal from "$lib/showModal";
     import { user } from "$lib/store";
 
     let roomId;
@@ -14,16 +15,31 @@
 
     let submit = async () => {
         success = false;
-        let booking = new Booking({
-            room_id: roomId,
-            user_id: $user.id,
-            start_datetime: toDateTime(checkInDate, checkInTime),
-            end_datetime: toDateTime(checkOutDate, checkOutTime),
-            reason,
+        try {
+            if (
+                !(await checkAvailability(
+                    roomId,
+                    toDateTime(checkInDate, checkInTime),
+                    toDateTime(checkOutDate, checkOutTime),
+                ))
+            )
+                throw new Error(
+                    "Room is not available for the selected time period",
+                );
+            let booking = new Booking({
+                room_id: roomId,
+                user_id: $user.id,
+                start_datetime: toDateTime(checkInDate, checkInTime),
+                end_datetime: toDateTime(checkOutDate, checkOutTime),
+                reason,
+            });
+            if (await booking.save()) success = true;
+            throw new Error("Booking failed");
+        } catch (e) {
+            console.error(e);
+            if (e.message) showModal("Failed", e.message);
+            else showModal("Failed", "Booking failed");
         }
-        );
-        if (await booking.save()) success = true;
-        else console.log("Booking failed");
     };
 </script>
 
diff --git a/src/routes/(authed)/feedback/form/+page.svelte b/src/routes/(authed)/feedback/form/+page.svelte
index 7c11f68..b5c9aef 100644
--- a/src/routes/(authed)/feedback/form/+page.svelte
+++ b/src/routes/(authed)/feedback/form/+page.svelte
@@ -38,6 +38,7 @@
                 bind:success
                 bind:failure
                 {view}
+                button="Close"
             />
         {:else}
             <FeedBackForm />
diff --git a/vite.config.js b/vite.config.js
index f33a533..c92936a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 
 // https://vitejs.dev/config/
-export default defineConfig(async () => ({
+export default defineConfig(() => ({
   plugins: [sveltekit()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`