diff --git a/src/lib/components/BackofficeModal/ChangePasswordModal.svelte b/src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte
similarity index 100%
rename from src/lib/components/BackofficeModal/ChangePasswordModal.svelte
rename to src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte
diff --git a/src/lib/components/BackofficeModal/ConfirmationModal.svelte b/src/lib/components/Backoffice/Modal/ConfirmationModal.svelte
similarity index 100%
rename from src/lib/components/BackofficeModal/ConfirmationModal.svelte
rename to src/lib/components/Backoffice/Modal/ConfirmationModal.svelte
diff --git a/src/lib/components/BackofficeModal/CreateDocumentModal.svelte b/src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte
similarity index 100%
rename from src/lib/components/BackofficeModal/CreateDocumentModal.svelte
rename to src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte
diff --git a/src/lib/components/BackofficeModal/CreateStatisticModal.svelte b/src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte
similarity index 100%
rename from src/lib/components/BackofficeModal/CreateStatisticModal.svelte
rename to src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte
diff --git a/src/lib/components/BackofficeModal/EditUserModal.svelte b/src/lib/components/Backoffice/Modal/EditUserModal.svelte
similarity index 100%
rename from src/lib/components/BackofficeModal/EditUserModal.svelte
rename to src/lib/components/Backoffice/Modal/EditUserModal.svelte
diff --git a/src/lib/components/BackofficeModal/CreateAnnouncementModal.svelte b/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
similarity index 95%
rename from src/lib/components/BackofficeModal/CreateAnnouncementModal.svelte
rename to src/lib/components/Backoffice/Modal/FileRankingModal.svelte
index 595839d..c59425b 100644
--- a/src/lib/components/BackofficeModal/CreateAnnouncementModal.svelte
+++ b/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
@@ -11,6 +11,7 @@
     let contentFiles: File[] = [];
     let documentFiles: File[] = [];
     let mainCoverIndex = 0;
+    let variant: 'announcement' | 'statistic' = 'announcement';
     let dragOver = {
         cover: false,
         content: false,
@@ -103,7 +104,7 @@
                     <form on:submit|preventDefault={handleSubmit} class="space-y-6">
                         <!-- Title -->
                         <div class="space-y-1">
-                            <span class="text-sm text-sucu-dark-gray font-semibold">ชื่อประกาศ</span>
+                            <span class="text-sm text-sucu-dark-gray font-semibold">{variant === 'announcement' ? 'ชื่อประกาศ' : 'ชื่อสถิติ'}</span>
                             <input
                                 type="text"
                                 bind:value={title}
@@ -125,7 +126,7 @@
                         <!-- Cover Images Section -->
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <span class="text-xl text-sucu-dark-gray font-semibold">เพิ่มรูปปกของหน้าประกาศ</span>
+                                <span class="text-xl text-sucu-dark-gray font-semibold">{variant === 'announcement' ? 'เพิ่มรูปภาพของหน้าประกาศ' : 'เพิ่มรูปปกหน้าสถิติและงบประมาณ'}</span>
                                 <input
                                     type="file"
                                     bind:this={coverFileInput}
@@ -192,7 +193,7 @@
                         <!-- Documents Section -->
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <span class="text-sm text-sucu-dark-gray font-semibold text-xl">เพิ่มเอกสารในหน้าประกาศ</span>
+                                <span class="text-sm text-sucu-dark-gray font-semibold text-xl">{variant === 'announcement' ? 'เพิ่มเอกสารในหน้าประกาศ' : 'เพิ่มเอกสารในหน้าสถิติและงบประมาณ'}</span>
                                 <input
                                     type="file"
                                     bind:this={documentFileInput}
diff --git a/src/lib/components/Backoffice/Sidebar/.gitkeep b/src/lib/components/Backoffice/Sidebar/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/BackofficePlayground.svelte b/src/lib/components/BackofficePlayground.svelte
index 8243045..007f655 100644
--- a/src/lib/components/BackofficePlayground.svelte
+++ b/src/lib/components/BackofficePlayground.svelte
@@ -1,27 +1,92 @@
 <script lang="ts">
-    import { getModalStore } from '@skeletonlabs/skeleton';
-    import { createConfirmationModal } from './ConfirmationModal/ConfirmationModal';
-    const modalStore = getModalStore();
-
-    function showCustomModal() {
-        const customModal = createConfirmationModal({
-            title: '<div class="text-2xl font-bold sucu-gray-dark">ยืนยันการลบเอกสาร  </div>',
-            body: '<div class="text-md sucu-gray">หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้</div>',
-            confirmText: 'ยืนยัน',
-            cancelText: 'ยกเลิก'
-        });
-        modalStore.trigger(customModal);
+    import CreateStatisticModal from './Backoffice/CreateStatisticModal.svelte';
+    import EditUserModal from './Backoffice/EditUserModal.svelte';
+    import ChangePasswordModal from './Backoffice/Modal/ChangePasswordModal.svelte';
+    let changePasswordModalOpen = false;
+    let StatisticModalOpen = false;
+    let confirmationModalOpen = false;
+    import ConfirmationModal from './Backoffice/ConfirmationModal.svelte';
+    let editUserModalOpen = false;
+    import CreateDocumentModal from './Backoffice/CreateDocumentModal.svelte';
+    let createDocumentModalOpen = false;
+    import CreateAnnouncementModal from './Backoffice/CreateAnnouncementModal.svelte';
+    let createAnnouncementModalOpen = false;
+    function showConfirmationModal() {
+        confirmationModalOpen = true;
+    }
+
+    function handleConfirm() {
+        console.log('Confirmed');
+        confirmationModalOpen = false;
+    }
+
+    function handleCancel() {
+        console.log('Cancelled');
+        confirmationModalOpen = false;
+    }
+
+    function showEditUserModal() {
+        editUserModalOpen = true;
     }
 </script>
 
 <main class="h-screen">
     <section class="section mb-5">
         <h2 class="font-bold text-2xl mb-4">Custom Modal</h2>
-        <button
-            on:click={showCustomModal}
-            class="px-4 py-2 bg-rose-400 text-white rounded-lg"
-        >
-            Open Custom Modal
+        <div class="space-x-4">
+            <ConfirmationModal 
+                bind:isOpen={confirmationModalOpen} 
+                title="ยืนยันการลบเอกสาร" 
+                body="หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้" 
+                confirmText="ยืนยัน" 
+                cancelText="ยกเลิก" 
+                onConfirm={handleConfirm} 
+                onCancel={handleCancel}
+            />
+            <button
+                class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600 transition-colors"
+                on:click={showConfirmationModal}
+            >
+                Open Confirmation Modal
+            </button>
+
+            <button
+                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                on:click={() => StatisticModalOpen = true}
+            >
+                เปิดฟอร์มสถิติ
+            </button>
+
+            <button
+                class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+                on:click={showEditUserModal}
+            >
+                แก้ไขผู้ใช้งาน
+            </button>
+        </div>
+
+        <CreateStatisticModal bind:open={StatisticModalOpen} />
+        <EditUserModal bind:open={editUserModalOpen} />
+
+        <button on:click={() => changePasswordModalOpen = true}>
+            เปลี่ยนรหัสผ่าน
         </button>
+        
+        <ChangePasswordModal bind:open={changePasswordModalOpen} />
+
+
+        <button on:click={() => createDocumentModalOpen = true}>
+            สร้างเอกสาร
+        </button>
+
+        <CreateDocumentModal bind:isOpen={createDocumentModalOpen} />
+
+
+
+        <button on:click={() => createAnnouncementModalOpen = true}>
+            สร้างประกาศ
+        </button>
+
+        <CreateAnnouncementModal bind:open={createAnnouncementModalOpen} />
     </section>
 </main>