diff --git a/.github/workflows/releases.yml b/.github/workflows/releases.yml
index 3f74640..b70445f 100644
--- a/.github/workflows/releases.yml
+++ b/.github/workflows/releases.yml
@@ -34,11 +34,17 @@ jobs:
         # webkitgtk 4.0 is for Tauri v1 - webkitgtk 4.1 is for Tauri v2.
         # You can remove the one that doesn't apply to your app to speed up the workflow a bit.
 
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+            version: 9.0.6
+
       - name: setup node
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: 'yarn' # Set this to npm, yarn or pnpm.
+          cache: 'pnpm' # Set this to npm, yarn or pnpm.
+      - run: pnpm install 
 
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
diff --git a/src/lib/components/forms/FeedBackForm.svelte b/src/lib/components/forms/FeedBackForm.svelte
index c15d51a..1f19c5e 100644
--- a/src/lib/components/forms/FeedBackForm.svelte
+++ b/src/lib/components/forms/FeedBackForm.svelte
@@ -1,7 +1,7 @@
 <script>
     import Form from "$lib/components/Form.svelte";
     import { formatDate } from "$lib/helper";
-    import { FeedBack } from "$lib/models/feedback";
+    import { FeedBack, closeFeedback } from "$lib/models/feedback";
     import { currentDateTime, user } from "$lib/store";
     import {
         Alert,
@@ -19,11 +19,14 @@
 
     export let success = false;
     export let failure = false;
+    export let msg = "Failed to Submit Feedback";
 
     export let view = false;
 
     export let disabled = true;
 
+    export let close = false;
+
     export let submit = async () => {
         success = failure = false;
         try {
@@ -36,6 +39,19 @@
             else throw new Error("Failed to Submit Feedback");
         } catch (e) {
             failure = true;
+            msg = "Failed to Submit Feedback";
+        }
+    };
+
+    let closeFeedBack = async () => {
+        try {
+            failure = false;
+            await closeFeedback(data.feedback.id);
+            close = false;
+            window.location.href = "/manage/feedback";
+        } catch (e) {
+            failure = true;
+            msg = "Failed to Close Feedback";
         }
     };
 </script>
@@ -43,7 +59,7 @@
 <Form title="Feedback Form" {submit} gap={0}>
     {#if failure}
         <Alert color="danger" isOpen={failure} fade={false} dismissible>
-            Failed to Submit Feedback
+            {msg}
         </Alert>
     {:else if success}
         <Alert color="success" isOpen={success} fade={false} dismissible>
@@ -80,5 +96,9 @@
             <Input type="text" bind:value={data.comment} {disabled} />
         </FormGroup>
     {/if}
-    <Button type="submit" disabled={view || !content}>{button}</Button>
+    {#if close}
+        <Button type="button" on:click={closeFeedBack}>Close</Button>
+    {:else}
+        <Button type="submit" disabled={view || !content}>{button}</Button>
+    {/if}
 </Form>
diff --git a/src/lib/components/pages/Admin.svelte b/src/lib/components/pages/Admin.svelte
index 38aee51..2a940de 100644
--- a/src/lib/components/pages/Admin.svelte
+++ b/src/lib/components/pages/Admin.svelte
@@ -17,6 +17,8 @@
         formatDate,
         formatTime,
     } from "$lib/helper";
+    import { getBillByPaymentId } from "$lib/models/bill";
+    import { getPaymentByBookingId } from "$lib/models/payment";
 
     let list = [];
     let show = false;
@@ -24,6 +26,8 @@
     let rejectSuccess = false;
 
     let booking;
+    let payment;
+    let bill;
     let roomName;
 
     onMount(async () => {
@@ -34,6 +38,10 @@
         booking = await getBookingById(event.detail.no);
         roomName = event.detail.room;
         booking = booking;
+        if (booking.status === "completed") {
+            payment = await getPaymentByBookingId(booking.booking_id);
+            bill = await getBillByPaymentId(payment.id);
+        }
         show = true;
     };
 
@@ -102,9 +110,39 @@
                         <tr
                             ><td> Status: </td>
                             <td>
-                                {booking.status}
+                                {SnakeCaseToCapitalized(booking.status)}
                             </td>
                         </tr>
+                        <tr>
+                            <td>User Id:</td>
+                            <td>{booking.user_id}</td>
+                        </tr>
+                        {#if booking.status === "completed"}
+                            <tr>
+                                <td>Payment ID: </td>
+                                <td>{payment.id}</td>
+                            </tr>
+                            <tr>
+                                <td>Bill ID: </td>
+                                <td>{bill.id}</td>
+                            </tr>
+                            <tr>
+                                <td>Amount: </td>
+                                <td>{payment.amount}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Method: </td>
+                                <td>{payment.method}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Date: </td>
+                                <td>{formatDate(new Date(payment.date))}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Time: </td>
+                                <td>{formatTime(new Date(payment.date))}</td>
+                            </tr>
+                        {/if}
                     </tbody>
                 </table>
             </CardBody>
diff --git a/src/lib/components/pages/User.svelte b/src/lib/components/pages/User.svelte
index 307aed8..b703ca1 100644
--- a/src/lib/components/pages/User.svelte
+++ b/src/lib/components/pages/User.svelte
@@ -23,9 +23,9 @@
 </script>
 
 <main class="container-fluid gap-3">
-    <Card>
+    <div class="container">
         <SearchBar bind:room bind:date bind:time {search} />
-    </Card>
+    </div>
     {#if searched && searchRooms.length == 0}
         <Card class="w-100">
             <CardHeader>
diff --git a/src/lib/helper.js b/src/lib/helper.js
index e33e1d3..f1e5326 100644
--- a/src/lib/helper.js
+++ b/src/lib/helper.js
@@ -74,7 +74,7 @@ export function toDateTime(date, time) {
  */
 export function isDateTimeValid(dateString) {
     if (typeof dateString !== "string") return false;
-    if (dateString.match(/\d{4}-\d{2}-\d{2} \d:\d/g) === null) return false;
+    if (dateString.match(/\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}/g) === null) return false;
     return !isNaN(Date.parse(dateString));
 }
 
diff --git a/src/lib/models/bill.js b/src/lib/models/bill.js
index cb2ad0e..4724dd5 100644
--- a/src/lib/models/bill.js
+++ b/src/lib/models/bill.js
@@ -32,4 +32,16 @@ export class Bill {
         let success = await bill.save();
         return success ? bill : null;
     }
+}
+
+/**
+ * Get bill by payment_id
+ * @param {number} payment_id - Payment ID
+ * @returns {Promise<Bill|null>} - Bill object or null if not found
+ */
+export async function getBillByPaymentId(payment_id) {
+    let db = await getDB();
+    let query = "SELECT * FROM bill WHERE payment_id = ?";
+    let result = await db.select(query, [payment_id]);
+    return result.length === 1 ? new Bill(result[0]) : null;
 }
\ No newline at end of file
diff --git a/src/lib/models/feedback.js b/src/lib/models/feedback.js
index 7838715..c314fc0 100644
--- a/src/lib/models/feedback.js
+++ b/src/lib/models/feedback.js
@@ -1,13 +1,14 @@
 import { getDB } from "$lib/db";
 
 export class FeedBack {
-    constructor({ user_id, date, content, feedback_id = null, admin_id = null, comment = null }) {
+    constructor({ user_id, date, content,  status = "open", feedback_id = null, admin_id = null, comment = null}) {
         this.id = feedback_id;
         this.user_id = user_id;
         this.admin_id = admin_id;
         this.date = date;
         this.content = content;
         this.comment = comment;
+        this.status = status;
     }
 
     async save() {
diff --git a/src/lib/models/payment.js b/src/lib/models/payment.js
index 8029cc9..ad24956 100644
--- a/src/lib/models/payment.js
+++ b/src/lib/models/payment.js
@@ -34,4 +34,15 @@ export async function getPaymentMethods() {
     let db = await getDB();
     let result = await db.select(`SHOW COLUMNS FROM payment WHERE Field = 'method'`);
     return result[0].Type.match(/'([^']+)'/g).map((v) => v.slice(1, -1));
+}
+
+/**
+ * Get payment by booking_id
+ * @param {number} booking_id - Payment ID
+ * @returns {Promise<Payment|null>} - Payment object or null if not found
+ */
+export async function getPaymentByBookingId(booking_id) {
+    let db = await getDB();
+    let result = await db.select(`SELECT * FROM payment WHERE booking_id = ?`, [booking_id]);
+    return result.length === 1 ? new Payment(result[0]) : null;
 }
\ No newline at end of file
diff --git a/src/lib/repos/feedbackRepo.js b/src/lib/repos/feedbackRepo.js
index 90eee2a..fb1189d 100644
--- a/src/lib/repos/feedbackRepo.js
+++ b/src/lib/repos/feedbackRepo.js
@@ -13,22 +13,32 @@ export class FeedBackRepo {
      */
     constructor(feedbacks = [], usertype) {
         this.datas = feedbacks.map((feedback) => {
+            let data = {};
             let action = {};
             if (usertype == "user") {
                 action = {
                     view: "/feedback/form?id=" + feedback.id,
                 }
+                data = {
+                    content: feedback.content,
+                    date: feedback.date,
+                    status: feedback.status,
+                    action
+                }
             } else {
                 action = {
                     view: "/manage/feedback/form?id=" + feedback.id + "&view=true",
                     reply: "/manage/feedback/form?id=" + feedback.id + "&edit=true",
                 }
+                data = {
+                    content: feedback.content,
+                    date: feedback.date,
+                    status: feedback.status,
+                    user_id: feedback.user_id,
+                    action
+                }
             }
-            return {
-                content: feedback.content,
-                date: feedback.date,
-                action
-            }
+            return data;
         });
     }
     static async getUserFeedback(userId) {
diff --git a/src/routes/(admin)/manage/feedback/form/+page.svelte b/src/routes/(admin)/manage/feedback/form/+page.svelte
index 44496fc..0f5c88b 100644
--- a/src/routes/(admin)/manage/feedback/form/+page.svelte
+++ b/src/routes/(admin)/manage/feedback/form/+page.svelte
@@ -13,10 +13,11 @@
     let failure = false;
     let view = false;
     let reply;
+    let close;
 
     onMount(() => {
         if (data.feedback) content = data.feedback.content;
-        if (data.disabled) view = true;
+        if (data.disabled) view = close = true;
         if (data.reply) reply = data.reply;
         else
             reply = {
@@ -49,6 +50,7 @@
             bind:data={reply}
             button="Reply"
             disabled={data.disabled}
+            {close}
             {submit}
             {view}
         />
diff --git a/src/routes/(authed)/history/+page.svelte b/src/routes/(authed)/history/+page.svelte
index 10ef4a5..d32d174 100644
--- a/src/routes/(authed)/history/+page.svelte
+++ b/src/routes/(authed)/history/+page.svelte
@@ -5,7 +5,9 @@
         formatDate,
         formatTime,
     } from "$lib/helper";
+    import { getBillByPaymentId } from "$lib/models/bill";
     import { getBookingById } from "$lib/models/booking";
+    import { getPaymentByBookingId } from "$lib/models/payment";
     import { HistoryRepo } from "$lib/repos/historyRepo";
     import { user } from "$lib/store";
     import {
@@ -21,6 +23,8 @@
 
     let history = [];
     let booking = {};
+    let payment;
+    let bill;
     let roomName;
     let show = false;
 
@@ -28,6 +32,10 @@
         booking = await getBookingById(event.detail.booking_id);
         roomName = event.detail.room;
         booking = booking;
+        if (booking.status === "completed") {
+            payment = await getPaymentByBookingId(booking.booking_id);
+            bill = await getBillByPaymentId(payment.id);
+        }
         show = true;
     };
 
@@ -95,6 +103,32 @@
                                 {SnakeCaseToCapitalized(booking.status)}
                             </td>
                         </tr>
+                        {#if booking.status === "completed"}
+                            <tr>
+                                <td>Payment ID: </td>
+                                <td>{payment.id}</td>
+                            </tr>
+                            <tr>
+                                <td>Bill ID: </td>
+                                <td>{bill.id}</td>
+                            </tr>
+                            <tr>
+                                <td>Amount: </td>
+                                <td>{payment.amount}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Method: </td>
+                                <td>{payment.method}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Date: </td>
+                                <td>{formatDate(new Date(payment.date))}</td>
+                            </tr>
+                            <tr>
+                                <td>Payment Time: </td>
+                                <td>{formatTime(new Date(payment.date))}</td>
+                            </tr>
+                        {/if}
                     </tbody>
                 </table>
             </CardBody>