diff --git a/frontend/src/components/admin/category/ModalComponent.vue b/frontend/src/components/admin/category/ModalComponent.vue
index 90882cf..889dfd3 100644
--- a/frontend/src/components/admin/category/ModalComponent.vue
+++ b/frontend/src/components/admin/category/ModalComponent.vue
@@ -1,28 +1,20 @@
 <template>
-    <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true"
-        ref="testModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="testModalLabel">Delete Category</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body text-start">
-                    <div class="mb-3">
-                        <label for="exampleInputText1" class="form-label">Are you sure?</label>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-danger" @click="submit">Yes, delete</button>
-                </div>
+    <div>
+        <b-button id="show-btn" @click="showTestModal">Open Modal</b-button>
+
+        <b-modal ref="testModal" hide-footer title="Using Component Methods">
+            <div class="d-block text-center">
+                <h3>Hello From My Modal!</h3>
             </div>
-        </div>
+            <b-button class="mt-3" variant="outline-danger" block>Close Me</b-button>
+            <b-button class="mt-2" variant="outline-warning" block>Toggle Me</b-button>
+        </b-modal>
     </div>
 </template>
 
 <script>
-import bootstrap from 'bootstrap';
+// import bootstrap from 'bootstrap';
+import { Modal } from 'bootstrap';
 
 export default {
     name: 'ModalComponent',
@@ -30,16 +22,34 @@ export default {
         showTestModal() {
             console.log('Hello...');
             // let testModal = new bootstrap.Modal(this.$refs.testModal);
-            let testModal = new bootstrap.Modal(document.getElementById('testModal'));
+            // let testModal = new bootstrap.Modal(document.getElementById('testModal'));
             // let testModal = new bootstrap.Modal.getInstance(this.$refs.testModal);
-            testModal.show();
-        },
-        submit() {
-            const modal = bootstrap.Modal.getInstance(this.$refs.exampleModal);
-            setTimeout(() => {
-                modal.hide();
-            }, 3000);
+            // testModal.show();
+            // this.$refs['testModal'].show();
+            const modalElement = this.$refs.testModal;
+            // console.log(modalElement);
+
+            if (modalElement) {
+                console.log('Found');
+                // const modal = new bootstrap.Modal(modalElement);
+                const modal = new Modal(modalElement);
+                console.log(typeof modal);
+                // modal.show();
+                // modal._showElement;
+                // modal.show
+                // const modal = new bootstrap.Modal(modalElement);
+                // modal.show();
+                // this.$refs['testModal'].show();
+            } else {
+                console.log('404');
+            }
         },
+        // submit() {
+        //     const modal = bootstrap.Modal.getInstance(this.$refs.exampleModal);
+        //     setTimeout(() => {
+        //         modal.hide();
+        //     }, 3000);
+        // },
     },
 }
 </script>
\ No newline at end of file