diff --git a/package-lock.json b/package-lock.json
index 6bca5550..ccb986ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "platform",
       "dependencies": {
         "@inertiajs/vite": "^3.0.0",
         "@inertiajs/vue3": "^3.0.0",
@@ -15,7 +14,6 @@
         "laravel-echo": "^2.4.0",
         "laravel-vite-plugin": "^3.1",
         "lucide-vue-next": "^1.0.0",
-        "plyr": "^3.8.4",
         "pusher-js": "^8.6.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
@@ -4659,20 +4657,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/core-js": {
-      "version": "3.50.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
-      "integrity": "sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/core-js-compat": {
       "version": "3.49.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
@@ -4731,12 +4715,6 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
-    "node_modules/custom-event-polyfill": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
-      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
-      "license": "MIT"
-    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -7340,12 +7318,6 @@
         "yaml": "^2.9.0"
       }
     },
-    "node_modules/loadjs": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz",
-      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==",
-      "license": "MIT"
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7882,19 +7854,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/plyr": {
-      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.8.4.tgz",
-      "integrity": "sha512-DrzLbK9Wol3zeiuZCleD9aUOl0KAaBHR9H6WVVVYPZ4Ya+LYxUFTgSF1jooHcMQCv96Ws96wCaZzIoP3bES8pQ==",
-      "license": "MIT",
-      "dependencies": {
-        "core-js": "^3.45.1",
-        "custom-event-polyfill": "^1.0.7",
-        "loadjs": "^4.3.0",
-        "rangetouch": "^2.0.1",
-        "url-polyfill": "^1.1.13"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -8113,12 +8072,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/rangetouch": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
-      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==",
-      "license": "MIT"
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -9445,12 +9398,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-polyfill": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.14.tgz",
-      "integrity": "sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==",
-      "license": "MIT"
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index d6677026..ff34ef0b 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,6 @@
     "laravel-echo": "^2.4.0",
     "laravel-vite-plugin": "^3.1",
     "lucide-vue-next": "^1.0.0",
-    "plyr": "^3.8.4",
     "pusher-js": "^8.6.0",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.1",
diff --git a/resources/js/components/AuthModal.vue b/resources/js/components/AuthModal.vue
index f5911f65..09b3f913 100644
--- a/resources/js/components/AuthModal.vue
+++ b/resources/js/components/AuthModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { X, LogIn } from 'lucide-vue-next';
+import { LogIn } from 'lucide-vue-next';
+import BaseModal from '@/components/BaseModal.vue';
 
 const modelValue = defineModel<boolean>({ default: false });
 
@@ -19,56 +20,32 @@ const page = usePage();
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="modelValue"
-                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
-            >
-                <div
-                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+    <BaseModal
+        :is-open="modelValue"
+        :title="title"
+        :description="message"
+        max-width="sm"
+        position="center"
+        @close="modelValue = false"
+    >
+        <div class="p-5 pt-2">
+            <div class="mt-4 flex items-center gap-2">
+                <Link
+                    :href="`/login?redirect=${encodeURIComponent(page.url)}`"
+                    @click="modelValue = false"
+                    class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
                 >
-                    <button
-                        @click="modelValue = false"
-                        class="absolute top-3.5 right-3.5 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-
-                    <h3
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        {{ title }}
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        {{ message }}
-                    </p>
-
-                    <div class="mt-4 flex items-center gap-2">
-                        <Link
-                            :href="`/login?redirect=${encodeURIComponent(page.url)}`"
-                            @click="modelValue = false"
-                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <LogIn class="h-3.5 w-3.5" />
-                            <span>Sign in</span>
-                        </Link>
-                        <button
-                            @click="modelValue = false"
-                            class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
+                    <LogIn class="h-3.5 w-3.5" />
+                    <span>Sign in</span>
+                </Link>
+                <button
+                    type="button"
+                    @click="modelValue = false"
+                    class="cursor-pointer rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+                >
+                    Cancel
+                </button>
             </div>
-        </Transition>
-    </Teleport>
+        </div>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/BaseModal.vue b/resources/js/components/BaseModal.vue
new file mode 100644
index 00000000..e908e23a
--- /dev/null
+++ b/resources/js/components/BaseModal.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { X } from 'lucide-vue-next';
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+const props = withDefaults(
+    defineProps<{
+        isOpen?: boolean;
+        title?: string | null;
+        description?: string | null;
+        maxWidth?:
+            | 'sm'
+            | 'md'
+            | 'lg'
+            | 'xl'
+            | '2xl'
+            | '3xl'
+            | '4xl'
+            | '5xl'
+            | 'full';
+        position?: 'responsive' | 'center';
+        closeOnBackdrop?: boolean;
+        closeOnEsc?: boolean;
+        showCloseButton?: boolean;
+        preventScroll?: boolean;
+    }>(),
+    {
+        isOpen: false,
+        title: null,
+        description: null,
+        maxWidth: 'lg',
+        position: 'responsive',
+        closeOnBackdrop: true,
+        closeOnEsc: true,
+        showCloseButton: true,
+        preventScroll: true,
+    },
+);
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+    (e: 'update:isOpen', value: boolean): void;
+}>();
+
+const maxWidthClass = computed(() => {
+    switch (props.maxWidth) {
+        case 'sm':
+            return 'max-w-sm';
+        case 'md':
+            return 'max-w-md';
+        case 'lg':
+            return 'max-w-lg';
+        case 'xl':
+            return 'max-w-xl';
+        case '2xl':
+            return 'max-w-2xl';
+        case '3xl':
+            return 'max-w-3xl';
+        case '4xl':
+            return 'max-w-4xl';
+        case '5xl':
+            return 'max-w-5xl';
+        case 'full':
+            return 'max-w-full';
+        default:
+            return 'max-w-lg';
+    }
+});
+
+const handleClose = () => {
+    emit('close');
+    emit('update:isOpen', false);
+};
+
+const handleBackdropClick = () => {
+    if (props.closeOnBackdrop) {
+        handleClose();
+    }
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.isOpen && props.closeOnEsc) {
+        handleClose();
+    }
+};
+
+watch(
+    () => props.isOpen,
+    (open) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        if (open) {
+            if (props.preventScroll) {
+                document.body.style.overflow = 'hidden';
+            }
+
+            window.addEventListener('keydown', handleKeyDown);
+        } else {
+            if (props.preventScroll) {
+                document.body.style.overflow = '';
+            }
+
+            window.removeEventListener('keydown', handleKeyDown);
+        }
+    },
+    { immediate: true },
+);
+
+onBeforeUnmount(() => {
+    if (typeof document !== 'undefined') {
+        document.body.style.overflow = '';
+        window.removeEventListener('keydown', handleKeyDown);
+    }
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-if="isOpen"
+                role="dialog"
+                aria-modal="true"
+                class="fixed inset-0 z-50 flex justify-center"
+                :class="[
+                    position === 'responsive'
+                        ? 'items-end p-0 sm:items-center sm:p-4'
+                        : 'items-center p-4',
+                ]"
+            >
+                <!-- Backdrop -->
+                <div
+                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs transition-opacity dark:bg-black/60"
+                    @click="handleBackdropClick"
+                />
+
+                <!-- Dialog Surface -->
+                <div
+                    class="relative flex max-h-[92vh] w-full flex-col border border-slate-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-900"
+                    :class="[
+                        maxWidthClass,
+                        position === 'responsive'
+                            ? 'rounded-t-2xl sm:rounded-2xl'
+                            : 'rounded-2xl',
+                    ]"
+                >
+                    <!-- Header -->
+                    <div
+                        v-if="$slots.header || title"
+                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+                    >
+                        <slot name="header">
+                            <div
+                                class="flex min-w-0 flex-1 items-center gap-3 pr-3"
+                            >
+                                <slot name="icon" />
+                                <div class="min-w-0 flex-1">
+                                    <h3
+                                        class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
+                                    >
+                                        {{ title }}
+                                    </h3>
+                                    <p
+                                        v-if="description"
+                                        class="truncate text-xs text-slate-500 dark:text-gray-400"
+                                    >
+                                        {{ description }}
+                                    </p>
+                                </div>
+                            </div>
+                        </slot>
+
+                        <button
+                            v-if="showCloseButton"
+                            type="button"
+                            @click="handleClose"
+                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                            aria-label="Close modal"
+                        >
+                            <X class="h-4 w-4" />
+                        </button>
+                    </div>
+
+                    <!-- Body -->
+                    <div class="flex-1 overflow-y-auto">
+                        <slot />
+                    </div>
+
+                    <!-- Footer -->
+                    <div
+                        v-if="$slots.footer"
+                        class="border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                    >
+                        <slot name="footer" />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
diff --git a/resources/js/components/BlogRow.vue b/resources/js/components/BlogRow.vue
index 775124c0..97d3e992 100644
--- a/resources/js/components/BlogRow.vue
+++ b/resources/js/components/BlogRow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
 import { Pencil, Trash2, Eye, BookOpen } from 'lucide-vue-next';
+import StatusBadge from '@/components/StatusBadge.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
@@ -52,23 +53,16 @@ const deleteBlog = () => {
                         {{ blog.title }}
                     </h4>
 
-                    <span
-                        :class="[
-                            blog.is_published
-                                ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/30'
-                                : 'bg-slate-100 text-slate-600 ring-slate-500/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-500/20',
-                            'inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold uppercase ring-1 ring-inset',
-                        ]"
-                    >
-                        {{ blog.is_published ? 'Published' : 'Draft' }}
-                    </span>
+                    <StatusBadge
+                        :status="blog.is_published ? 'published' : 'draft'"
+                        size="xs"
+                    />
 
-                    <span
+                    <StatusBadge
                         v-if="blog.is_featured"
-                        class="inline-flex items-center rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-700 uppercase ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30"
-                    >
-                        Featured
-                    </span>
+                        status="featured"
+                        size="xs"
+                    />
                 </div>
 
                 <div
diff --git a/resources/js/components/ChatBanModal.vue b/resources/js/components/ChatBanModal.vue
index 9d761120..b8a28ef7 100644
--- a/resources/js/components/ChatBanModal.vue
+++ b/resources/js/components/ChatBanModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { router } from '@inertiajs/vue3';
-import { Ban, Clock, Loader2, X } from 'lucide-vue-next';
+import { Ban, Clock, Loader2 } from 'lucide-vue-next';
 import { ref, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
+import { formatDateTime } from '@/lib/useDate';
 
 export interface ChatBanUser {
     id: number;
@@ -52,25 +54,7 @@ const formatForDatetimeLocal = (dateString?: string | null) => {
     return localISOTime;
 };
 
-const formatDate = (isoString?: string | null) => {
-    if (!isoString) {
-        return '';
-    }
-
-    try {
-        const d = new Date(isoString);
-
-        return d.toLocaleString([], {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    } catch {
-        return '';
-    }
-};
+const formatDate = formatDateTime;
 
 const applyBanPreset = (minutes: number) => {
     const futureDate = new Date(Date.now() + minutes * 60 * 1000);
@@ -125,167 +109,137 @@ const submitBan = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="isOpen && user"
-                class="fixed inset-0 z-50 flex items-center justify-center p-4"
-            >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
-                />
-
+    <BaseModal
+        v-if="user"
+        :is-open="isOpen"
+        max-width="md"
+        position="center"
+        @close="handleClose"
+    >
+        <template #header>
+            <div class="flex items-center gap-3">
                 <div
-                    class="relative w-full max-w-md overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
                 >
-                    <!-- Close button -->
-                    <button
-                        type="button"
-                        @click="handleClose"
-                        class="absolute top-4 right-4 cursor-pointer rounded-xl p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                    <Ban class="h-5 w-5" />
+                </div>
+                <div>
+                    <h3
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
                     >
-                        <X class="h-4 w-4" />
-                    </button>
-
-                    <div class="flex items-center gap-3">
-                        <div
-                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                        Community Moderation
+                    </h3>
+                    <p class="text-xs text-slate-500 dark:text-gray-400">
+                        Manage suspension timer for
+                        <strong class="text-slate-700 dark:text-gray-300">{{
+                            user.name
+                        }}</strong>
+                        <span v-if="user.username">
+                            (@{{ user.username }})</span
                         >
-                            <Ban class="h-5 w-5" />
-                        </div>
-                        <div>
-                            <h3
-                                class="text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Community Moderation
-                            </h3>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Manage suspension timer for
-                                <strong
-                                    class="text-slate-700 dark:text-gray-300"
-                                    >{{ user.name }}</strong
-                                >
-                                <span v-if="user.username">
-                                    (@{{ user.username }})</span
-                                >
-                            </p>
-                        </div>
+                    </p>
+                </div>
+            </div>
+        </template>
+
+        <div class="p-6 pt-4">
+            <!-- Current status banner (when ban status is available) -->
+            <div
+                v-if="user.banned_until || user.is_banned"
+                class="rounded-xl border border-rose-200 bg-rose-50/70 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+            >
+                <div class="flex items-center gap-2">
+                    <Clock class="h-3.5 w-3.5 shrink-0" />
+                    <div>
+                        <span class="font-bold">Current status: </span>
+                        <span>
+                            Banned until
+                            {{ formatDate(user.banned_until) }}
+                        </span>
                     </div>
+                </div>
+            </div>
 
-                    <!-- Current status banner (when ban status is available) -->
-                    <div
-                        v-if="user.banned_until || user.is_banned"
-                        class="mt-4 rounded-xl border border-rose-200 bg-rose-50/70 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+            <form @submit.prevent="submitBan" class="mt-4 space-y-4">
+                <!-- Quick Presets -->
+                <div>
+                    <label
+                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
                     >
-                        <div class="flex items-center gap-2">
-                            <Clock class="h-3.5 w-3.5 shrink-0" />
-                            <div>
-                                <span class="font-bold">Current status: </span>
-                                <span>
-                                    Banned until
-                                    {{ formatDate(user.banned_until) }}
-                                </span>
-                            </div>
-                        </div>
+                        Quick Presets
+                    </label>
+                    <div class="mt-2 flex flex-wrap gap-1.5">
+                        <button
+                            v-for="preset in banPresets"
+                            :key="preset.label"
+                            type="button"
+                            @click="applyBanPreset(preset.minutes)"
+                            class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-700 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                        >
+                            +{{ preset.label }}
+                        </button>
+                        <button
+                            type="button"
+                            @click="clearBanInput"
+                            class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                        >
+                            Clear / Unban
+                        </button>
                     </div>
+                </div>
 
-                    <form @submit.prevent="submitBan" class="mt-4 space-y-4">
-                        <!-- Quick Presets -->
-                        <div>
-                            <label
-                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                            >
-                                Quick Presets
-                            </label>
-                            <div class="mt-2 flex flex-wrap gap-1.5">
-                                <button
-                                    v-for="preset in banPresets"
-                                    :key="preset.label"
-                                    type="button"
-                                    @click="applyBanPreset(preset.minutes)"
-                                    class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-700 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                >
-                                    +{{ preset.label }}
-                                </button>
-                                <button
-                                    type="button"
-                                    @click="clearBanInput"
-                                    class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-                                >
-                                    Clear / Unban
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Custom Date & Time Picker -->
-                        <div class="space-y-1.5">
-                            <label
-                                for="reusable_modal_banned_until"
-                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                            >
-                                Ban Until (Date & Time)
-                            </label>
-                            <input
-                                id="reusable_modal_banned_until"
-                                type="datetime-local"
-                                v-model="banUntilInput"
-                                class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-800 shadow-2xs focus:border-rose-500 focus:ring-1 focus:ring-rose-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
-                            />
-                            <p
-                                class="text-[11px] text-slate-400 dark:text-gray-500"
-                            >
-                                Leave blank to unban or lift restrictions.
-                            </p>
-                        </div>
+                <!-- Custom Date & Time Picker -->
+                <div class="space-y-1.5">
+                    <label
+                        for="reusable_modal_banned_until"
+                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Ban Until (Date & Time)
+                    </label>
+                    <input
+                        id="reusable_modal_banned_until"
+                        type="datetime-local"
+                        v-model="banUntilInput"
+                        class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-800 shadow-2xs focus:border-rose-500 focus:ring-1 focus:ring-rose-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+                    />
+                    <p class="text-[11px] text-slate-400 dark:text-gray-500">
+                        Leave blank to unban or lift restrictions.
+                    </p>
+                </div>
 
-                        <div class="flex items-center justify-end gap-2 pt-2">
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                type="submit"
-                                :disabled="isSubmittingBan"
-                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-bold text-white transition disabled:opacity-50"
-                                :class="
-                                    !banUntilInput
-                                        ? 'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600'
-                                        : 'bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600'
-                                "
-                            >
-                                <Loader2
-                                    v-if="isSubmittingBan"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <Ban
-                                    v-else-if="banUntilInput"
-                                    class="h-3.5 w-3.5"
-                                />
-                                <span>
-                                    {{
-                                        !banUntilInput
-                                            ? 'Unban User'
-                                            : 'Apply Ban Timer'
-                                    }}
-                                </span>
-                            </button>
-                        </div>
-                    </form>
+                <div class="flex items-center justify-end gap-2 pt-2">
+                    <button
+                        type="button"
+                        @click="handleClose"
+                        class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="isSubmittingBan"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-bold text-white transition disabled:opacity-50"
+                        :class="
+                            !banUntilInput
+                                ? 'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600'
+                                : 'bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600'
+                        "
+                    >
+                        <Loader2
+                            v-if="isSubmittingBan"
+                            class="h-3.5 w-3.5 animate-spin"
+                        />
+                        <Ban v-else-if="banUntilInput" class="h-3.5 w-3.5" />
+                        <span>
+                            {{
+                                !banUntilInput
+                                    ? 'Unban User'
+                                    : 'Apply Ban Timer'
+                            }}
+                        </span>
+                    </button>
                 </div>
-            </div>
-        </Transition>
-    </Teleport>
+            </form>
+        </div>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/EmptyState.vue b/resources/js/components/EmptyState.vue
index f939cdf3..9c1e7ef1 100644
--- a/resources/js/components/EmptyState.vue
+++ b/resources/js/components/EmptyState.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { FolderSearch, ArrowRight } from 'lucide-vue-next';
+import { ArrowRight, FolderSearch } from 'lucide-vue-next';
 import { computed } from 'vue';
+import type { Component } from 'vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 interface Props {
+    icon?: Component | null;
     title?: string;
-    description?: string;
+    description?: string | null;
+    variant?: 'simple' | 'card' | 'dashed';
     showCta?: boolean;
     ctaPrompt?: string;
     ctaText?: string;
     ctaLink?: string;
 }
 
-withDefaults(defineProps<Props>(), {
-    title: 'কোনো রিসোর্স পাওয়া যায়নি',
-    description: 'শীঘ্রই এখানে নতুন স্টাডি ম্যাটেরিয়াল ও নোট আপলোড করা হবে।',
-    showCta: true,
+const props = withDefaults(defineProps<Props>(), {
+    icon: () => FolderSearch,
+    title: 'কোনো তথ্য পাওয়া যায়নি',
+    description: null,
+    variant: 'simple',
+    showCta: false,
     ctaPrompt: 'তোমার নিজের নোট বা লেকচার শেয়ার করতে চাও?',
     ctaText: 'কন্ট্রিবিউটর হও',
     ctaLink: '/join',
@@ -32,28 +37,66 @@ const isAlreadyContributor = computed(() => {
         can('create nodes'),
     );
 });
+
+const variantClasses = computed(() => {
+    switch (props.variant) {
+        case 'dashed':
+            return 'rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 p-8 sm:p-12 dark:border-gray-800 dark:bg-gray-900/40';
+        case 'card':
+            return 'rounded-2xl border border-slate-200/80 bg-white p-8 sm:p-12 shadow-2xs dark:border-gray-800 dark:bg-gray-900';
+        case 'simple':
+        default:
+            return 'px-4 py-12 sm:py-16';
+    }
+});
 </script>
 
 <template>
     <div
-        class="flex flex-col items-center justify-center px-4 py-12 text-center sm:py-16"
+        class="flex flex-col items-center justify-center text-center"
+        :class="variantClasses"
     >
         <!-- Icon Badge -->
-        <div
-            class="mb-4 flex h-13 w-13 items-center justify-center rounded-2xl border border-slate-200/80 bg-slate-50 text-indigo-600 shadow-2xs dark:border-gray-800 dark:bg-gray-900/90 dark:text-indigo-400"
-        >
-            <FolderSearch class="h-6 w-6 stroke-[1.8]" />
+        <div v-if="$slots.icon || icon" class="mb-4">
+            <slot name="icon">
+                <div
+                    class="flex h-12 w-12 items-center justify-center rounded-2xl border border-slate-200/80 bg-slate-50 text-indigo-600 shadow-2xs dark:border-gray-800 dark:bg-gray-900/90 dark:text-indigo-400"
+                >
+                    <component
+                        :is="icon"
+                        v-if="icon"
+                        class="h-6 w-6 stroke-[1.8]"
+                    />
+                </div>
+            </slot>
         </div>
 
-        <!-- Title & Subtitle -->
-        <h3 class="text-base font-bold text-slate-900 dark:text-gray-100">
-            {{ title }}
-        </h3>
-        <p
-            class="mt-1.5 max-w-sm text-xs leading-relaxed font-medium text-slate-500 dark:text-gray-400"
-        >
-            {{ description }}
-        </p>
+        <!-- Title -->
+        <slot name="title">
+            <h3
+                v-if="title"
+                class="text-base font-bold text-slate-900 dark:text-gray-100"
+            >
+                {{ title }}
+            </h3>
+        </slot>
+
+        <!-- Description -->
+        <slot name="description">
+            <p
+                v-if="description"
+                class="mt-1.5 max-w-sm text-xs leading-relaxed font-medium text-slate-500 dark:text-gray-400"
+            >
+                {{ description }}
+            </p>
+        </slot>
+
+        <!-- Action Buttons Slot -->
+        <div v-if="$slots.actions || $slots.default" class="mt-5">
+            <slot name="actions">
+                <slot />
+            </slot>
+        </div>
 
         <!-- Contributor CTA Card (Hidden for existing contributors/admins) -->
         <div
diff --git a/resources/js/components/FloatingShareBar.vue b/resources/js/components/FloatingShareBar.vue
index 6cdd09c1..5061f374 100644
--- a/resources/js/components/FloatingShareBar.vue
+++ b/resources/js/components/FloatingShareBar.vue
@@ -2,10 +2,12 @@
 import { usePage } from '@inertiajs/vue3';
 import { Share2, Check, Loader2, Link as LinkIcon } from 'lucide-vue-next';
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { useAuth } from '@/lib/useAuth';
+import { getCsrfToken } from '@/lib/useCsrf';
 import AuthModal from './AuthModal.vue';
 
 const page = usePage();
-const user = computed(() => page.props.auth?.user);
+const { requireAuth, showAuthModal, authModalMessage } = useAuth();
 
 const shareablePages = [
     'Node',
@@ -20,43 +22,15 @@ const shouldShow = computed(() => shareablePages.includes(page.component));
 const isMenuOpen = ref(false);
 const isLoading = ref(false);
 const isCopied = ref(false);
-const showAuthModal = ref(false);
 
 const toolbarRef = ref<HTMLElement | null>(null);
 
-const getCsrfToken = (): string => {
-    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
-
-    return match ? decodeURIComponent(match[1]) : '';
-};
-
 const copyToClipboard = async (text: string): Promise<boolean> => {
-    if (navigator.clipboard && window.isSecureContext) {
-        try {
-            await navigator.clipboard.writeText(text);
-
-            return true;
-        } catch {
-            // Fall back to execCommand
-        }
-    }
-
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-999999px';
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
     try {
-        const ok = document.execCommand('copy');
-        document.body.removeChild(textArea);
+        await navigator.clipboard.writeText(text);
 
-        return ok;
+        return true;
     } catch {
-        document.body.removeChild(textArea);
-
         return false;
     }
 };
@@ -85,9 +59,10 @@ const handleCopyLink = async () => {
         return;
     }
 
-    if (!user.value) {
+    if (
+        !requireAuth('Please sign in to generate and copy short share links.')
+    ) {
         closeMenu();
-        showAuthModal.value = true;
 
         return;
     }
@@ -233,9 +208,5 @@ onBeforeUnmount(() => {
     </div>
 
     <!-- Auth Modal using reusable component -->
-    <AuthModal
-        v-model="showAuthModal"
-        title="Sign in required"
-        message="Please sign in to generate and copy short share links."
-    />
+    <AuthModal v-model="showAuthModal" :message="authModalMessage" />
 </template>
diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 5a271df9..7b1f16f3 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -73,14 +73,6 @@ const isHomeActive = computed(
         currentUrl.value.startsWith('/ssc?'),
 );
 
-const isHomeOrSsc = computed(
-    () =>
-        currentUrl.value === '/' ||
-        currentUrl.value.startsWith('/?') ||
-        currentUrl.value === '/ssc' ||
-        currentUrl.value.startsWith('/ssc?'),
-);
-
 const loginUrl = computed(() => {
     const path = currentUrl.value;
 
@@ -368,7 +360,7 @@ onBeforeUnmount(() => {
                 <div class="hidden items-center gap-3 md:flex">
                     <!-- Search Trigger Button on Desktop (Only on Home & SSC) -->
                     <button
-                        v-if="isHomeOrSsc"
+                        v-if="isHomeActive"
                         @click.stop="triggerSearch"
                         class="flex h-9 items-center gap-2 rounded-xl border border-slate-200/80 bg-slate-50 px-3 text-xs font-semibold text-slate-600 shadow-2xs transition-all hover:border-slate-300 hover:bg-slate-100 active:scale-95 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
                         title="Search subjects"
@@ -535,7 +527,7 @@ onBeforeUnmount(() => {
                 <div class="flex items-center gap-1.5 md:hidden">
                     <!-- Mobile Search Trigger Button (Only on Home & SSC - Circular Ghost) -->
                     <button
-                        v-if="isHomeOrSsc"
+                        v-if="isHomeActive"
                         @click.stop="triggerSearch"
                         class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 active:scale-95 dark:text-gray-300 dark:hover:bg-gray-800"
                         aria-label="Search subjects"
diff --git a/resources/js/components/NotificationDropdown.vue b/resources/js/components/NotificationDropdown.vue
index 2feebcc4..9372406c 100644
--- a/resources/js/components/NotificationDropdown.vue
+++ b/resources/js/components/NotificationDropdown.vue
@@ -17,6 +17,7 @@ import {
     LifeBuoy,
 } from 'lucide-vue-next';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { getCsrfToken } from '@/lib/useCsrf';
 
 interface NotificationItem {
     id: string;
@@ -62,13 +63,6 @@ watch(
     },
 );
 
-const getCsrfToken = (): string => {
-    return (
-        (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)
-            ?.content || ''
-    );
-};
-
 const fetchNotifications = async () => {
     isLoading.value = true;
     currentPage.value = 1;
diff --git a/resources/js/components/Pagination.vue b/resources/js/components/Pagination.vue
new file mode 100644
index 00000000..8c2ffc79
--- /dev/null
+++ b/resources/js/components/Pagination.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+const props = withDefaults(
+    defineProps<{
+        links: PaginationLink[];
+        from?: number | null;
+        to?: number | null;
+        total?: number | null;
+        currentPage?: number | null;
+        lastPage?: number | null;
+        preserveScroll?: boolean;
+        preserveState?: boolean;
+        showSummary?: boolean;
+    }>(),
+    {
+        from: null,
+        to: null,
+        total: null,
+        currentPage: null,
+        lastPage: null,
+        preserveScroll: true,
+        preserveState: true,
+        showSummary: false,
+    },
+);
+
+const hasEnoughLinks = computed(() => {
+    return props.links && props.links.length > 3;
+});
+
+const prevLink = computed(() => {
+    if (!props.links || props.links.length === 0) {
+        return null;
+    }
+
+    return props.links[0];
+});
+
+const nextLink = computed(() => {
+    if (!props.links || props.links.length === 0) {
+        return null;
+    }
+
+    return props.links[props.links.length - 1];
+});
+</script>
+
+<template>
+    <nav
+        v-if="hasEnoughLinks"
+        aria-label="Pagination Navigation"
+        class="flex flex-col gap-3 py-4"
+    >
+        <!-- Desktop / Tablet Pagination Bar (sm and up) -->
+        <div
+            class="hidden items-center justify-between gap-4 sm:flex"
+            :class="{ '!justify-center': !showSummary && total === null }"
+        >
+            <!-- Summary Info (If total or explicit showSummary is provided) -->
+            <p
+                v-if="showSummary || (from !== null && total !== null)"
+                class="text-xs text-slate-500 dark:text-gray-400"
+            >
+                Showing
+                <span class="font-semibold text-slate-700 dark:text-gray-200">
+                    {{ from ?? 0 }}
+                </span>
+                to
+                <span class="font-semibold text-slate-700 dark:text-gray-200">
+                    {{ to ?? 0 }}
+                </span>
+                of
+                <span class="font-semibold text-slate-700 dark:text-gray-200">
+                    {{ total ?? 0 }}
+                </span>
+                results
+            </p>
+
+            <!-- Numbered and Prev/Next Links -->
+            <div class="flex flex-wrap items-center justify-center gap-1">
+                <component
+                    :is="link.url ? Link : 'span'"
+                    v-for="(link, index) in links"
+                    :key="`pagination-${index}`"
+                    :href="link.url || undefined"
+                    :preserve-scroll="preserveScroll"
+                    :preserve-state="preserveState"
+                    class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-lg px-2.5 py-1 text-xs font-semibold transition-all"
+                    :class="[
+                        link.active
+                            ? 'bg-indigo-600 text-white shadow-2xs'
+                            : link.url
+                              ? 'border border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'
+                              : 'cursor-not-allowed border border-slate-100 bg-slate-50/50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600',
+                    ]"
+                >
+                    <span v-html="link.label"></span>
+                </component>
+            </div>
+        </div>
+
+        <!-- Mobile Pagination Bar (Below sm) -->
+        <div class="flex flex-col gap-2.5 sm:hidden">
+            <div class="flex items-center justify-between gap-2">
+                <!-- Mobile Prev -->
+                <component
+                    :is="prevLink?.url ? Link : 'span'"
+                    :href="prevLink?.url || undefined"
+                    :preserve-scroll="preserveScroll"
+                    :preserve-state="preserveState"
+                    class="flex flex-1 items-center justify-center rounded-xl border px-3 py-2 text-center text-xs font-semibold shadow-2xs transition active:scale-95"
+                    :class="
+                        prevLink?.url
+                            ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
+                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600'
+                    "
+                >
+                    &larr; Prev
+                </component>
+
+                <!-- Page indicator -->
+                <div
+                    v-if="currentPage !== null"
+                    class="shrink-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2 text-xs font-bold text-slate-700 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                >
+                    Page {{ currentPage }}
+                    <span v-if="lastPage"> of {{ lastPage }}</span>
+                </div>
+
+                <!-- Mobile Next -->
+                <component
+                    :is="nextLink?.url ? Link : 'span'"
+                    :href="nextLink?.url || undefined"
+                    :preserve-scroll="preserveScroll"
+                    :preserve-state="preserveState"
+                    class="flex flex-1 items-center justify-center rounded-xl border px-3 py-2 text-center text-xs font-semibold shadow-2xs transition active:scale-95"
+                    :class="
+                        nextLink?.url
+                            ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
+                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600'
+                    "
+                >
+                    Next &rarr;
+                </component>
+            </div>
+
+            <!-- Mobile Summary Info -->
+            <p
+                v-if="showSummary || (from !== null && total !== null)"
+                class="text-center text-[11px] text-slate-400 dark:text-gray-500"
+            >
+                Showing {{ from ?? 0 }} to {{ to ?? 0 }} of
+                {{ total ?? 0 }} results
+            </p>
+        </div>
+    </nav>
+</template>
diff --git a/resources/js/components/StatusBadge.vue b/resources/js/components/StatusBadge.vue
new file mode 100644
index 00000000..e73ea131
--- /dev/null
+++ b/resources/js/components/StatusBadge.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { CheckCircle2, Clock, HelpCircle, XCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+import type { Component } from 'vue';
+
+type BadgeVariant =
+    | 'amber'
+    | 'blue'
+    | 'emerald'
+    | 'rose'
+    | 'purple'
+    | 'indigo'
+    | 'slate';
+
+type BadgeSize = 'xs' | 'sm' | 'md';
+
+interface PresetConfig {
+    variant: BadgeVariant;
+    label: string;
+    icon?: Component;
+}
+
+const PRESETS: Record<string, PresetConfig> = {
+    // Tickets
+    open: { variant: 'amber', label: 'Open', icon: Clock },
+    in_progress: { variant: 'blue', label: 'In Progress', icon: HelpCircle },
+    resolved: { variant: 'emerald', label: 'Resolved', icon: CheckCircle2 },
+    closed: { variant: 'slate', label: 'Closed', icon: XCircle },
+
+    // Roles
+    admin: { variant: 'rose', label: 'Admin' },
+    editor: { variant: 'purple', label: 'Editor' },
+    manager: { variant: 'amber', label: 'Staff' },
+    staff: { variant: 'amber', label: 'Staff' },
+
+    // Blogs
+    published: { variant: 'emerald', label: 'Published' },
+    draft: { variant: 'slate', label: 'Draft' },
+    featured: { variant: 'amber', label: 'Featured' },
+
+    // Curriculum
+    hsc: { variant: 'indigo', label: 'HSC' },
+    ssc: { variant: 'amber', label: 'SSC' },
+};
+
+const VARIANT_CLASSES: Record<BadgeVariant, string> = {
+    amber: 'border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    blue: 'border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400',
+    emerald:
+        'border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    rose: 'border-rose-500/20 bg-rose-500/10 text-rose-600 dark:text-rose-400',
+    purple: 'border-purple-500/20 bg-purple-500/10 text-purple-600 dark:text-purple-400',
+    indigo: 'border-indigo-500/20 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400',
+    slate: 'border-slate-500/20 bg-slate-500/10 text-slate-600 dark:text-gray-400',
+};
+
+const SIZE_CLASSES: Record<BadgeSize, { badge: string; icon: string }> = {
+    xs: {
+        badge: 'px-1.5 py-0.5 text-[10px] font-bold',
+        icon: 'h-3 w-3',
+    },
+    sm: {
+        badge: 'px-2 py-0.5 text-[11px] font-bold',
+        icon: 'h-3 w-3',
+    },
+    md: {
+        badge: 'px-2.5 py-1 text-xs font-semibold',
+        icon: 'h-3.5 w-3.5',
+    },
+};
+
+const props = withDefaults(
+    defineProps<{
+        status?: string | null;
+        variant?: BadgeVariant;
+        label?: string | null;
+        icon?: Component | null;
+        size?: BadgeSize;
+        showIcon?: boolean;
+    }>(),
+    {
+        status: null,
+        variant: undefined,
+        label: null,
+        icon: undefined,
+        size: 'sm',
+        showIcon: true,
+    },
+);
+
+const normalizedKey = computed(() => props.status?.toLowerCase().trim() || '');
+const preset = computed(() => PRESETS[normalizedKey.value]);
+
+const resolvedVariant = computed<BadgeVariant>(() => {
+    if (props.variant) {
+        return props.variant;
+    }
+
+    return preset.value?.variant || 'slate';
+});
+
+const resolvedLabel = computed(() => {
+    if (props.label) {
+        return props.label;
+    }
+
+    if (preset.value?.label) {
+        return preset.value.label;
+    }
+
+    return props.status || '';
+});
+
+const resolvedIcon = computed(() => {
+    if (!props.showIcon) {
+        return null;
+    }
+
+    if (props.icon !== undefined) {
+        return props.icon;
+    }
+
+    return preset.value?.icon || null;
+});
+
+const badgeClasses = computed(() => [
+    'inline-flex items-center gap-1 rounded-md border font-semibold uppercase tracking-wider',
+    VARIANT_CLASSES[resolvedVariant.value],
+    SIZE_CLASSES[props.size].badge,
+]);
+
+const iconClass = computed(() => SIZE_CLASSES[props.size].icon);
+</script>
+
+<template>
+    <span :class="badgeClasses">
+        <component :is="resolvedIcon" v-if="resolvedIcon" :class="iconClass" />
+        <slot>{{ resolvedLabel }}</slot>
+    </span>
+</template>
diff --git a/resources/js/components/SubjectCard.vue b/resources/js/components/SubjectCard.vue
index b862d10e..6b4fa946 100644
--- a/resources/js/components/SubjectCard.vue
+++ b/resources/js/components/SubjectCard.vue
@@ -1,32 +1,10 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import {
-    Search,
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-} from 'lucide-vue-next';
+import SubjectIcon from '@/components/SubjectIcon.vue';
 
 const { subject } = defineProps({
     subject: Object,
 });
-
-const icons = {
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-    Search,
-};
 </script>
 
 <template>
@@ -42,10 +20,7 @@ const icons = {
                     'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors duration-200',
                 ]"
             >
-                <component
-                    :is="icons[subject.icon]"
-                    class="h-5 w-5 stroke-[2.2]"
-                />
+                <SubjectIcon :name="subject.icon" />
             </div>
 
             <!-- Content Area -->
diff --git a/resources/js/components/SubjectIcon.vue b/resources/js/components/SubjectIcon.vue
new file mode 100644
index 00000000..942b9136
--- /dev/null
+++ b/resources/js/components/SubjectIcon.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getSubjectIcon } from '@/lib/subjectIcons';
+
+const props = withDefaults(
+    defineProps<{
+        name?: string | null;
+        className?: string;
+    }>(),
+    {
+        name: null,
+        className: 'h-5 w-5 stroke-[2.2]',
+    },
+);
+
+const iconComponent = computed(() => getSubjectIcon(props.name));
+</script>
+
+<template>
+    <component :is="iconComponent" :class="className" />
+</template>
diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index f0c0b9c7..7be834a9 100644
--- a/resources/js/components/UserCard.vue
+++ b/resources/js/components/UserCard.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { GraduationCap, ArrowRight } from 'lucide-vue-next';
+import { ArrowRight, GraduationCap } from 'lucide-vue-next';
 import { computed } from 'vue';
+import StatusBadge from '@/components/StatusBadge.vue';
 
 const props = defineProps<{
     member: {
@@ -19,36 +20,6 @@ const props = defineProps<{
 const profileUrl = computed(() => {
     return props.member.username ? `/u/${props.member.username}` : '#';
 });
-
-const roleInfo = computed(() => {
-    const roleName = props.member.roles?.[0]?.name?.toLowerCase() || 'staff';
-
-    if (roleName === 'admin') {
-        return {
-            label: 'Admin',
-            class: 'border-rose-200/80 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-950/40 dark:text-rose-300',
-        };
-    }
-
-    if (roleName === 'editor') {
-        return {
-            label: 'Editor',
-            class: 'border-purple-200/80 bg-purple-50 text-purple-700 dark:border-purple-800/60 dark:bg-purple-950/40 dark:text-purple-300',
-        };
-    }
-
-    if (roleName === 'manager') {
-        return {
-            label: 'Staff',
-            class: 'border-amber-200/80 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-300',
-        };
-    }
-
-    return {
-        label: roleName,
-        class: 'border-blue-200/80 bg-blue-50 text-blue-700 dark:border-blue-800/60 dark:bg-blue-950/40 dark:text-blue-300',
-    };
-});
 </script>
 
 <template>
@@ -92,12 +63,10 @@ const roleInfo = computed(() => {
 
                 <!-- Role Pill -->
                 <div class="flex items-center justify-center pt-0.5">
-                    <span
-                        class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-bold"
-                        :class="roleInfo.class"
-                    >
-                        {{ roleInfo.label }}
-                    </span>
+                    <StatusBadge
+                        :status="member.roles?.[0]?.name || 'staff'"
+                        size="xs"
+                    />
                 </div>
 
                 <!-- Title / Tagline -->
diff --git a/resources/js/components/admin/BulkImageModal.vue b/resources/js/components/admin/BulkImageModal.vue
index e84cb666..2e62efa0 100644
--- a/resources/js/components/admin/BulkImageModal.vue
+++ b/resources/js/components/admin/BulkImageModal.vue
@@ -2,7 +2,6 @@
 import { router } from '@inertiajs/vue3';
 import {
     Upload,
-    X,
     Trash2,
     FileSpreadsheet,
     Hash,
@@ -10,6 +9,7 @@ import {
     AlertCircle,
 } from 'lucide-vue-next';
 import { ref, computed, watch, onUnmounted } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -190,378 +190,313 @@ const submitForm = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        title="Upload Multiple Images"
+        :description="`In: ${node.name}`"
+        max-width="2xl"
+        @close="handleClose"
+    >
+        <!-- Form Body -->
+        <form
+            @submit.prevent="submitForm"
+            class="flex flex-1 flex-col overflow-hidden"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
+
+            <div
+                class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+            >
+                <!-- Dropzone Section -->
+                <div class="space-y-1.5">
+                    <div class="flex items-center justify-between text-xs">
+                        <label
+                            class="font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            Select Images
+                        </label>
+                        <span
+                            class="text-[11px] font-medium text-slate-400 dark:text-gray-500"
+                        >
+                            Max 20 images per batch
+                        </span>
+                    </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-2xl flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
                     <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+                        @dragover.prevent="isDragging = true"
+                        @dragleave.prevent="isDragging = false"
+                        @drop.prevent="handleDrop"
+                        class="relative rounded-xl border-2 border-dashed p-6 text-center transition-all"
+                        :class="
+                            isDragging
+                                ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-950/20'
+                                : 'border-slate-200 bg-slate-50/50 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800/40 dark:hover:bg-gray-800/70'
+                        "
                     >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
+                        <input
+                            type="file"
+                            id="modal-bulk-image-upload"
+                            multiple
+                            accept="image/jpeg,image/png,image/jpg,image/webp,image/gif"
+                            class="hidden"
+                            @change="handleFileSelect"
+                        />
+                        <label
+                            for="modal-bulk-image-upload"
+                            class="flex cursor-pointer flex-col items-center justify-center"
+                        >
+                            <div
+                                class="mb-2 rounded-full border border-slate-200 bg-white p-2.5 text-indigo-600 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-indigo-400"
+                            >
+                                <Upload class="h-5 w-5" />
+                            </div>
+                            <span
+                                class="text-xs font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                Upload Multiple Images
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
+                                Click to select or drag & drop images
+                            </span>
+                            <span
+                                class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
                             >
-                                In:
-                                <span
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ node.name }}
-                                </span>
-                            </p>
-                        </div>
+                                JPG, PNG, WEBP, GIF (Max 10MB per file)
+                            </span>
+                        </label>
+                    </div>
 
-                        <button
-                            type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
+                    <div
+                        v-if="fileLimitError"
+                        class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50/80 p-2.5 text-xs text-amber-800 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300"
+                    >
+                        <AlertCircle class="h-3.5 w-3.5 shrink-0" />
+                        <span>{{ fileLimitError }}</span>
                     </div>
+                </div>
 
-                    <!-- Form Body -->
-                    <form
-                        @submit.prevent="submitForm"
-                        class="flex flex-1 flex-col overflow-hidden"
+                <!-- Naming Settings -->
+                <div
+                    v-if="selectedFiles.length > 0"
+                    class="space-y-3 rounded-xl border border-slate-200 bg-slate-50/50 p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                >
+                    <h4
+                        class="text-xs font-bold text-slate-800 dark:text-gray-200"
                     >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+                        File Naming Settings
+                    </h4>
+
+                    <div class="grid grid-cols-2 gap-2">
+                        <label
+                            class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
+                            :class="
+                                namingStrategy === 'serial'
+                                    ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
+                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
+                            "
                         >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
+                            <input
+                                type="radio"
+                                value="serial"
+                                v-model="namingStrategy"
+                                class="text-indigo-600 focus:ring-indigo-500"
                             />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
-                        </div>
-
-                        <div
-                            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+                            <Hash class="h-3.5 w-3.5" />
+                            <span>Serial Numbers</span>
+                        </label>
+
+                        <label
+                            class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
+                            :class="
+                                namingStrategy === 'original'
+                                    ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
+                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
+                            "
                         >
-                            <!-- Dropzone Section -->
-                            <div class="space-y-1.5">
-                                <div
-                                    class="flex items-center justify-between text-xs"
-                                >
-                                    <label
-                                        class="font-bold text-slate-700 dark:text-gray-300"
-                                    >
-                                        Select Images
-                                    </label>
-                                    <span
-                                        class="text-[11px] font-medium text-slate-400 dark:text-gray-500"
-                                    >
-                                        Max 20 images per batch
-                                    </span>
-                                </div>
-
-                                <div
-                                    @dragover.prevent="isDragging = true"
-                                    @dragleave.prevent="isDragging = false"
-                                    @drop.prevent="handleDrop"
-                                    class="relative rounded-xl border-2 border-dashed p-6 text-center transition-all"
-                                    :class="
-                                        isDragging
-                                            ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-950/20'
-                                            : 'border-slate-200 bg-slate-50/50 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800/40 dark:hover:bg-gray-800/70'
-                                    "
-                                >
-                                    <input
-                                        type="file"
-                                        id="modal-bulk-image-upload"
-                                        multiple
-                                        accept="image/jpeg,image/png,image/jpg,image/webp,image/gif"
-                                        class="hidden"
-                                        @change="handleFileSelect"
-                                    />
-                                    <label
-                                        for="modal-bulk-image-upload"
-                                        class="flex cursor-pointer flex-col items-center justify-center"
-                                    >
-                                        <div
-                                            class="mb-2 rounded-full border border-slate-200 bg-white p-2.5 text-indigo-600 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-indigo-400"
-                                        >
-                                            <Upload class="h-5 w-5" />
-                                        </div>
-                                        <span
-                                            class="text-xs font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Click to select or drag & drop
-                                            images
-                                        </span>
-                                        <span
-                                            class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
-                                        >
-                                            JPG, PNG, WEBP, GIF (Max 10MB per
-                                            file)
-                                        </span>
-                                    </label>
-                                </div>
-
-                                <div
-                                    v-if="fileLimitError"
-                                    class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50/80 p-2.5 text-xs text-amber-800 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300"
-                                >
-                                    <AlertCircle class="h-3.5 w-3.5 shrink-0" />
-                                    <span>{{ fileLimitError }}</span>
-                                </div>
-                            </div>
+                            <input
+                                type="radio"
+                                value="original"
+                                v-model="namingStrategy"
+                                class="text-indigo-600 focus:ring-indigo-500"
+                            />
+                            <FileSpreadsheet class="h-3.5 w-3.5" />
+                            <span>Original Names</span>
+                        </label>
+                    </div>
 
-                            <!-- Naming Settings -->
-                            <div
-                                v-if="selectedFiles.length > 0"
-                                class="space-y-3 rounded-xl border border-slate-200 bg-slate-50/50 p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                    <div
+                        v-if="namingStrategy === 'serial'"
+                        class="grid grid-cols-1 gap-3 pt-1 sm:grid-cols-2"
+                    >
+                        <div class="space-y-1">
+                            <label
+                                for="bulk_img_naming_prefix"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <h4
-                                    class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >
-                                    File Naming Settings
-                                </h4>
-
-                                <div class="grid grid-cols-2 gap-2">
-                                    <label
-                                        class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
-                                        :class="
-                                            namingStrategy === 'serial'
-                                                ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
-                                                : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
-                                        "
-                                    >
-                                        <input
-                                            type="radio"
-                                            value="serial"
-                                            v-model="namingStrategy"
-                                            class="text-indigo-600 focus:ring-indigo-500"
-                                        />
-                                        <Hash class="h-3.5 w-3.5" />
-                                        <span>Serial Numbers</span>
-                                    </label>
-
-                                    <label
-                                        class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
-                                        :class="
-                                            namingStrategy === 'original'
-                                                ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
-                                                : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
-                                        "
-                                    >
-                                        <input
-                                            type="radio"
-                                            value="original"
-                                            v-model="namingStrategy"
-                                            class="text-indigo-600 focus:ring-indigo-500"
-                                        />
-                                        <FileSpreadsheet class="h-3.5 w-3.5" />
-                                        <span>Original Names</span>
-                                    </label>
-                                </div>
-
-                                <div
-                                    v-if="namingStrategy === 'serial'"
-                                    class="grid grid-cols-1 gap-3 pt-1 sm:grid-cols-2"
-                                >
-                                    <div class="space-y-1">
-                                        <label
-                                            for="bulk_img_naming_prefix"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Prefix
-                                        </label>
-                                        <input
-                                            id="bulk_img_naming_prefix"
-                                            v-model="namingPrefix"
-                                            type="text"
-                                            placeholder="e.g. image"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                                        />
-                                    </div>
-
-                                    <div class="space-y-1">
-                                        <label
-                                            for="bulk_img_start_number"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Starting Number
-                                        </label>
-                                        <input
-                                            id="bulk_img_start_number"
-                                            v-model.number="startNumber"
-                                            type="number"
-                                            min="1"
-                                            placeholder="1"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                                Prefix
+                            </label>
+                            <input
+                                id="bulk_img_naming_prefix"
+                                v-model="namingPrefix"
+                                type="text"
+                                placeholder="e.g. image"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                            />
+                        </div>
 
-                            <!-- Selected Images List Preview -->
-                            <div
-                                v-if="selectedFiles.length > 0"
-                                class="space-y-2"
+                        <div class="space-y-1">
+                            <label
+                                for="bulk_img_start_number"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <div
-                                    class="flex items-center justify-between text-xs"
-                                >
-                                    <label
-                                        class="font-bold text-slate-700 dark:text-gray-300"
-                                    >
-                                        Selected ({{ selectedFiles.length }})
-                                    </label>
-                                    <button
-                                        type="button"
-                                        @click="clearAll"
-                                        class="flex cursor-pointer items-center gap-1 font-medium text-rose-600 hover:text-rose-700"
-                                    >
-                                        <Trash2 class="h-3 w-3" />
-                                        <span>Clear all</span>
-                                    </button>
-                                </div>
-
-                                <div
-                                    class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4"
-                                >
-                                    <div
-                                        v-for="(item, index) in selectedFiles"
-                                        :key="item.id"
-                                        class="group relative flex flex-col overflow-hidden rounded-lg border border-slate-200 bg-white p-1.5 shadow-2xs dark:border-gray-700 dark:bg-gray-800"
-                                    >
-                                        <div
-                                            class="relative aspect-video w-full overflow-hidden rounded bg-slate-100 dark:bg-gray-900"
-                                        >
-                                            <img
-                                                :src="item.previewUrl"
-                                                :alt="item.file.name"
-                                                class="h-full w-full object-cover"
-                                            />
-                                            <button
-                                                type="button"
-                                                @click="removeFile(index)"
-                                                class="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-slate-900/70 text-white backdrop-blur-xs transition hover:bg-rose-600"
-                                            >
-                                                <X class="h-3 w-3" />
-                                            </button>
-                                        </div>
-                                        <div class="mt-1 px-0.5">
-                                            <p
-                                                class="truncate text-[11px] font-semibold text-slate-800 dark:text-gray-200"
-                                                :title="processedTitles[index]"
-                                            >
-                                                {{ processedTitles[index] }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                                Starting Number
+                            </label>
+                            <input
+                                id="bulk_img_start_number"
+                                v-model.number="startNumber"
+                                type="number"
+                                min="1"
+                                placeholder="1"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                            />
                         </div>
+                    </div>
+                </div>
 
-                        <!-- Upload Progress Bar -->
+                <!-- Selected Images List Preview -->
+                <div v-if="selectedFiles.length > 0" class="space-y-2">
+                    <div class="flex items-center justify-between text-xs">
+                        <label
+                            class="font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            Selected ({{ selectedFiles.length }})
+                        </label>
+                        <button
+                            type="button"
+                            @click="clearAll"
+                            class="flex cursor-pointer items-center gap-1 font-medium text-rose-600 hover:text-rose-700"
+                        >
+                            <Trash2 class="h-3 w-3" />
+                            <span>Clear all</span>
+                        </button>
+                    </div>
+
+                    <div
+                        class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4"
+                    >
                         <div
-                            v-if="isSaving && uploadProgress !== null"
-                            class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/80"
+                            v-for="(item, index) in selectedFiles"
+                            :key="item.id"
+                            class="group relative flex flex-col overflow-hidden rounded-lg border border-slate-200 bg-white p-1.5 shadow-2xs dark:border-gray-700 dark:bg-gray-800"
                         >
                             <div
-                                class="mb-1.5 flex items-center justify-between text-xs"
+                                class="relative aspect-video w-full overflow-hidden rounded bg-slate-100 dark:bg-gray-900"
                             >
-                                <span
-                                    class="flex items-center gap-1.5 font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    <Loader2
-                                        v-if="isProcessingServer"
-                                        class="h-3 w-3 animate-spin text-indigo-600 dark:text-indigo-400"
-                                    />
-                                    {{
-                                        isProcessingServer
-                                            ? 'Images transferred! Saving & processing on server...'
-                                            : 'Uploading images...'
-                                    }}
-                                </span>
-                                <span
-                                    class="font-semibold text-indigo-600 dark:text-indigo-400"
+                                <img
+                                    :src="item.previewUrl"
+                                    :alt="item.file.name"
+                                    class="h-full w-full object-cover"
+                                />
+                                <button
+                                    type="button"
+                                    @click="removeFile(index)"
+                                    class="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-slate-900/70 text-white backdrop-blur-xs transition hover:bg-rose-600"
                                 >
-                                    {{
-                                        isProcessingServer
-                                            ? 'Processing...'
-                                            : `${uploadProgress}%`
-                                    }}
-                                </span>
+                                    <X class="h-3 w-3" />
+                                </button>
                             </div>
-                            <div
-                                class="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-gray-700"
-                            >
-                                <div
-                                    class="h-full rounded-full bg-indigo-600 transition-all duration-150 ease-out dark:bg-indigo-500"
-                                    :class="{
-                                        'animate-pulse opacity-90':
-                                            isProcessingServer,
-                                    }"
-                                    :style="{ width: `${uploadProgress}%` }"
-                                ></div>
+                            <div class="mt-1 px-0.5">
+                                <p
+                                    class="truncate text-[11px] font-semibold text-slate-800 dark:text-gray-200"
+                                    :title="processedTitles[index]"
+                                >
+                                    {{ processedTitles[index] }}
+                                </p>
                             </div>
                         </div>
+                    </div>
+                </div>
+            </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
-                        >
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                :disabled="isSaving"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                            >
-                                Cancel
-                            </button>
-
-                            <button
-                                type="submit"
-                                :disabled="
-                                    isSaving || selectedFiles.length === 0
-                                "
-                                class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
-                            >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <span>{{
-                                    isSaving
-                                        ? isProcessingServer
-                                            ? 'Saving to server...'
-                                            : `Uploading (${uploadProgress}%)`
-                                        : `Upload ${selectedFiles.length || ''} Images`
-                                }}</span>
-                            </button>
-                        </div>
-                    </form>
+            <!-- Upload Progress Bar -->
+            <div
+                v-if="isSaving && uploadProgress !== null"
+                class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/80"
+            >
+                <div class="mb-1.5 flex items-center justify-between text-xs">
+                    <span
+                        class="flex items-center gap-1.5 font-medium text-slate-700 dark:text-gray-300"
+                    >
+                        <Loader2
+                            v-if="isProcessingServer"
+                            class="h-3 w-3 animate-spin text-indigo-600 dark:text-indigo-400"
+                        />
+                        {{
+                            isProcessingServer
+                                ? 'Images transferred! Saving & processing on server...'
+                                : 'Uploading images...'
+                        }}
+                    </span>
+                    <span
+                        class="font-semibold text-indigo-600 dark:text-indigo-400"
+                    >
+                        {{
+                            isProcessingServer
+                                ? 'Processing...'
+                                : `${uploadProgress}%`
+                        }}
+                    </span>
                 </div>
+                <div
+                    class="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-gray-700"
+                >
+                    <div
+                        class="h-full rounded-full bg-indigo-600 transition-all duration-150 ease-out dark:bg-indigo-500"
+                        :class="{
+                            'animate-pulse opacity-90': isProcessingServer,
+                        }"
+                        :style="{ width: `${uploadProgress}%` }"
+                    ></div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="handleClose"
+                    :disabled="isSaving"
+                    class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Cancel
+                </button>
+
+                <button
+                    type="submit"
+                    :disabled="isSaving || selectedFiles.length === 0"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{
+                        isSaving
+                            ? isProcessingServer
+                                ? 'Saving to server...'
+                                : `Uploading (${uploadProgress}%)`
+                            : `Upload ${selectedFiles.length || ''} Images`
+                    }}</span>
+                </button>
             </div>
-        </Transition>
-    </Teleport>
+        </form>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/BulkNodeModal.vue b/resources/js/components/admin/BulkNodeModal.vue
index 0f673c65..dc004e7c 100644
--- a/resources/js/components/admin/BulkNodeModal.vue
+++ b/resources/js/components/admin/BulkNodeModal.vue
@@ -2,7 +2,6 @@
 import { router } from '@inertiajs/vue3';
 import {
     Loader2,
-    X,
     FolderPlus,
     AlertCircle,
     ChevronRight,
@@ -11,6 +10,7 @@ import {
     Plus,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -179,326 +179,267 @@ const totalFoldersCount = computed(() => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        title="Bulk Add Folders"
+        :description="`In: ${parent ? parent.name : subject.name}`"
+        max-width="2xl"
+        @close="handleClose"
+    >
+        <!-- Body -->
+        <div
+            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-2xl flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
-                    <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+            <!-- Step 1: Input Form -->
+            <div v-if="!isPreviewMode" class="space-y-4">
+                <!-- Main Folders -->
+                <div class="space-y-1.5">
+                    <label
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
                     >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Bulk Add Folders
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                In:
-                                <span
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ parent ? parent.name : subject.name }}
-                                </span>
-                            </p>
-                        </div>
+                        Folder Names
+                        <span class="text-rose-500">*</span>
+                        <span
+                            class="font-normal text-slate-400 dark:text-gray-500"
+                        >
+                            (One per line)
+                        </span>
+                    </label>
+                    <textarea
+                        v-model="namesInput"
+                        rows="5"
+                        placeholder="Chapter 1: Cell & Its Structure&#10;Chapter 2: Cell Division&#10;Chapter 3: Cell Chemistry"
+                        class="w-full rounded-lg border border-slate-300 bg-white p-3 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                    />
+                </div>
 
-                        <button
-                            type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                <!-- Optional Slugs -->
+                <div class="space-y-1.5">
+                    <div class="flex items-center justify-between">
+                        <label
+                            class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            Folder Slugs
+                            <span
+                                class="font-normal text-slate-400 dark:text-gray-500"
+                            >
+                                (Optional, one per line)
+                            </span>
+                        </label>
+                        <span
+                            class="text-[10px] text-slate-400 dark:text-gray-500"
                         >
-                            <X class="h-4 w-4" />
-                        </button>
+                            Auto-generated if left empty
+                        </span>
                     </div>
+                    <textarea
+                        v-model="slugsInput"
+                        rows="3"
+                        placeholder="chapter-1-cell&#10;chapter-2-cell-division&#10;chapter-3-chemistry"
+                        class="w-full rounded-lg border border-slate-300 bg-white p-3 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                    />
+                </div>
 
-                    <!-- Body -->
-                    <div
-                        class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
-                    >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+                <!-- Sub-Folders -->
+                <div
+                    class="rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                >
+                    <div class="mb-2">
+                        <h4
+                            class="text-xs font-bold text-slate-800 dark:text-gray-200"
                         >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
-                            />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
-                        </div>
-
-                        <!-- Step 1: Input Form -->
-                        <div v-if="!isPreviewMode" class="space-y-4">
-                            <!-- Main Folders -->
-                            <div class="space-y-1.5">
-                                <label
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Folder Names
-                                    <span class="text-rose-500">*</span>
-                                    <span
-                                        class="font-normal text-slate-400 dark:text-gray-500"
-                                    >
-                                        (One per line)
-                                    </span>
-                                </label>
-                                <textarea
-                                    v-model="namesInput"
-                                    rows="5"
-                                    placeholder="Chapter 1: Cell & Its Structure&#10;Chapter 2: Cell Division&#10;Chapter 3: Cell Chemistry"
-                                    class="w-full rounded-lg border border-slate-300 bg-white p-3 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                />
-                            </div>
-
-                            <!-- Optional Slugs -->
-                            <div class="space-y-1.5">
-                                <div class="flex items-center justify-between">
-                                    <label
-                                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                    >
-                                        Folder Slugs
-                                        <span
-                                            class="font-normal text-slate-400 dark:text-gray-500"
-                                        >
-                                            (Optional, one per line)
-                                        </span>
-                                    </label>
-                                    <span
-                                        class="text-[10px] text-slate-400 dark:text-gray-500"
-                                    >
-                                        Auto-generated if left empty
-                                    </span>
-                                </div>
-                                <textarea
-                                    v-model="slugsInput"
-                                    rows="3"
-                                    placeholder="chapter-1-cell&#10;chapter-2-cell-division&#10;chapter-3-chemistry"
-                                    class="w-full rounded-lg border border-slate-300 bg-white p-3 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                />
-                            </div>
+                            Nested Sub-Folders
+                        </h4>
+                        <p
+                            class="text-[11px] text-slate-500 dark:text-gray-400"
+                        >
+                            Created inside each main folder above.
+                        </p>
+                    </div>
 
-                            <!-- Sub-Folders -->
-                            <div
-                                class="rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                        <div class="space-y-1">
+                            <label
+                                class="block text-[11px] font-semibold text-slate-600 dark:text-gray-400"
                             >
-                                <div class="mb-2">
-                                    <h4
-                                        class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                    >
-                                        Nested Sub-Folders
-                                    </h4>
-                                    <p
-                                        class="text-[11px] text-slate-500 dark:text-gray-400"
-                                    >
-                                        Created inside each main folder above.
-                                    </p>
-                                </div>
-
-                                <div
-                                    class="grid grid-cols-1 gap-3 sm:grid-cols-2"
-                                >
-                                    <div class="space-y-1">
-                                        <label
-                                            class="block text-[11px] font-semibold text-slate-600 dark:text-gray-400"
-                                        >
-                                            Names (One per line)
-                                        </label>
-                                        <textarea
-                                            v-model="subfoldersInput"
-                                            rows="3"
-                                            placeholder="Classes&#10;Handnotes&#10;Practicals"
-                                            class="w-full rounded-lg border border-slate-300 bg-white p-2.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        />
-                                    </div>
-
-                                    <div class="space-y-1">
-                                        <label
-                                            class="block text-[11px] font-semibold text-slate-600 dark:text-gray-400"
-                                        >
-                                            Slugs (Optional, one per line)
-                                        </label>
-                                        <textarea
-                                            v-model="subfolderSlugsInput"
-                                            rows="3"
-                                            placeholder="classes&#10;handnotes&#10;practicals"
-                                            class="w-full rounded-lg border border-slate-300 bg-white p-2.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                                Names (One per line)
+                            </label>
+                            <textarea
+                                v-model="subfoldersInput"
+                                rows="3"
+                                placeholder="Classes&#10;Handnotes&#10;Practicals"
+                                class="w-full rounded-lg border border-slate-300 bg-white p-2.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            />
                         </div>
 
-                        <!-- Step 2: Review Preview -->
-                        <div v-else class="space-y-3">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <h4
-                                        class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                    >
-                                        {{ parsedNodes.length }} Main Folders
-                                        <span class="font-normal text-slate-500"
-                                            >({{ totalFoldersCount }} total with
-                                            sub-folders)</span
-                                        >
-                                    </h4>
-                                </div>
-                                <button
-                                    type="button"
-                                    @click="addEmptyNode"
-                                    class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
-                                >
-                                    <Plus class="h-3.5 w-3.5" />
-                                    <span>Add</span>
-                                </button>
-                            </div>
-
-                            <div
-                                class="max-h-80 space-y-2.5 overflow-y-auto pr-0.5"
+                        <div class="space-y-1">
+                            <label
+                                class="block text-[11px] font-semibold text-slate-600 dark:text-gray-400"
                             >
-                                <div
-                                    v-for="(node, nIdx) in parsedNodes"
-                                    :key="nIdx"
-                                    class="rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-gray-700 dark:bg-gray-800/40"
-                                >
-                                    <div class="mb-2 flex items-start gap-2">
-                                        <div class="flex-1 space-y-1">
-                                            <input
-                                                v-model="node.name"
-                                                type="text"
-                                                placeholder="Folder name"
-                                                class="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-900 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                            />
-                                            <input
-                                                v-model="node.slug"
-                                                type="text"
-                                                placeholder="Slug (leave empty for auto)"
-                                                class="w-full rounded-md border border-slate-200 bg-white/80 px-2.5 py-1 font-mono text-[11px] text-slate-600 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-500"
-                                            />
-                                        </div>
-                                        <button
-                                            type="button"
-                                            @click="removeNode(nIdx)"
-                                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                            title="Delete"
-                                        >
-                                            <Trash2 class="h-4 w-4" />
-                                        </button>
-                                    </div>
-
-                                    <!-- Nested Tags -->
-                                    <div
-                                        v-if="node.children.length > 0"
-                                        class="flex flex-wrap items-center gap-1.5 pt-1"
-                                    >
-                                        <span
-                                            v-for="(
-                                                child, cIdx
-                                            ) in node.children"
-                                            :key="cIdx"
-                                            class="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
-                                        >
-                                            <span>{{ child.name }}</span>
-                                            <span
-                                                v-if="child.slug"
-                                                class="font-mono text-[10px] text-slate-400"
-                                                >({{ child.slug }})</span
-                                            >
-                                            <button
-                                                type="button"
-                                                @click="
-                                                    removeChildFromNode(
-                                                        nIdx,
-                                                        cIdx,
-                                                    )
-                                                "
-                                                class="cursor-pointer text-slate-400 hover:text-rose-500"
-                                            >
-                                                <X class="h-2.5 w-2.5" />
-                                            </button>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
+                                Slugs (Optional, one per line)
+                            </label>
+                            <textarea
+                                v-model="subfolderSlugsInput"
+                                rows="3"
+                                placeholder="classes&#10;handnotes&#10;practicals"
+                                class="w-full rounded-lg border border-slate-300 bg-white p-2.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            />
                         </div>
                     </div>
+                </div>
+            </div>
 
-                    <!-- Footer -->
-                    <div
-                        class="flex items-center justify-between border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
-                    >
-                        <button
-                            v-if="isPreviewMode"
-                            type="button"
-                            @click="isPreviewMode = false"
-                            class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+            <!-- Step 2: Review Preview -->
+            <div v-else class="space-y-3">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h4
+                            class="text-xs font-bold text-slate-800 dark:text-gray-200"
                         >
-                            <ArrowLeft class="h-3.5 w-3.5" />
-                            <span>Edit Input</span>
-                        </button>
-                        <div v-else></div>
-
-                        <div class="flex items-center gap-2">
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                            {{ parsedNodes.length }} Main Folders
+                            <span class="font-normal text-slate-500"
+                                >({{ totalFoldersCount }} total with
+                                sub-folders)</span
                             >
-                                Cancel
-                            </button>
+                        </h4>
+                    </div>
+                    <button
+                        type="button"
+                        @click="addEmptyNode"
+                        class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                    >
+                        <Plus class="h-3.5 w-3.5" />
+                        <span>Add</span>
+                    </button>
+                </div>
 
+                <div class="max-h-80 space-y-2.5 overflow-y-auto pr-0.5">
+                    <div
+                        v-for="(node, nIdx) in parsedNodes"
+                        :key="nIdx"
+                        class="rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-gray-700 dark:bg-gray-800/40"
+                    >
+                        <div class="mb-2 flex items-start gap-2">
+                            <div class="flex-1 space-y-1">
+                                <input
+                                    v-model="node.name"
+                                    type="text"
+                                    placeholder="Folder name"
+                                    class="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-900 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                                />
+                                <input
+                                    v-model="node.slug"
+                                    type="text"
+                                    placeholder="Slug (leave empty for auto)"
+                                    class="w-full rounded-md border border-slate-200 bg-white/80 px-2.5 py-1 font-mono text-[11px] text-slate-600 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-500"
+                                />
+                            </div>
                             <button
-                                v-if="!isPreviewMode"
                                 type="button"
-                                @click="handlePreview"
-                                :disabled="!namesInput.trim()"
-                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                @click="removeNode(nIdx)"
+                                class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                title="Delete"
                             >
-                                <span>Preview</span>
-                                <ChevronRight class="h-3.5 w-3.5" />
+                                <Trash2 class="h-4 w-4" />
                             </button>
+                        </div>
 
-                            <button
-                                v-else
-                                type="button"
-                                @click="saveBatchNodes"
-                                :disabled="isSaving || parsedNodes.length === 0"
-                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                        <!-- Nested Tags -->
+                        <div
+                            v-if="node.children.length > 0"
+                            class="flex flex-wrap items-center gap-1.5 pt-1"
+                        >
+                            <span
+                                v-for="(child, cIdx) in node.children"
+                                :key="cIdx"
+                                class="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
                             >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <FolderPlus v-else class="h-3.5 w-3.5" />
-                                <span>{{
-                                    isSaving ? 'Creating...' : 'Create Folders'
-                                }}</span>
-                            </button>
+                                <span>{{ child.name }}</span>
+                                <span
+                                    v-if="child.slug"
+                                    class="font-mono text-[10px] text-slate-400"
+                                    >({{ child.slug }})</span
+                                >
+                                <button
+                                    type="button"
+                                    @click="removeChildFromNode(nIdx, cIdx)"
+                                    class="cursor-pointer text-slate-400 hover:text-rose-500"
+                                >
+                                    <X class="h-2.5 w-2.5" />
+                                </button>
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
-        </Transition>
-    </Teleport>
+        </div>
+
+        <!-- Footer -->
+        <template #footer>
+            <div class="flex items-center justify-between">
+                <button
+                    v-if="isPreviewMode"
+                    type="button"
+                    @click="isPreviewMode = false"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    <ArrowLeft class="h-3.5 w-3.5" />
+                    <span>Edit Input</span>
+                </button>
+                <div v-else></div>
+
+                <div class="flex items-center gap-2">
+                    <button
+                        type="button"
+                        @click="handleClose"
+                        class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        v-if="!isPreviewMode"
+                        type="button"
+                        @click="handlePreview"
+                        :disabled="!namesInput.trim()"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        <span>Preview</span>
+                        <ChevronRight class="h-3.5 w-3.5" />
+                    </button>
+
+                    <button
+                        v-else
+                        type="button"
+                        @click="saveBatchNodes"
+                        :disabled="isSaving || parsedNodes.length === 0"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        <Loader2
+                            v-if="isSaving"
+                            class="h-3.5 w-3.5 animate-spin"
+                        />
+                        <FolderPlus v-else class="h-3.5 w-3.5" />
+                        <span>{{
+                            isSaving ? 'Creating...' : 'Create Folders'
+                        }}</span>
+                    </button>
+                </div>
+            </div>
+        </template>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/BulkVideoModal.vue b/resources/js/components/admin/BulkVideoModal.vue
index 8423b9c4..d906753e 100644
--- a/resources/js/components/admin/BulkVideoModal.vue
+++ b/resources/js/components/admin/BulkVideoModal.vue
@@ -5,11 +5,11 @@ import {
     FileSpreadsheet,
     Hash,
     Info,
-    X,
     Loader2,
     AlertCircle,
 } from 'lucide-vue-next';
 import { ref, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -92,243 +92,189 @@ const submitForm = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        title="Import YouTube Playlist"
+        :description="`In: ${node.name}`"
+        max-width="lg"
+        @close="handleClose"
+    >
+        <!-- Form Body -->
+        <form
+            @submit.prevent="submitForm"
+            class="flex flex-1 flex-col overflow-hidden"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-lg flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
-                    <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+            <div
+                class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+            >
+                <!-- Playlist URL Input -->
+                <div class="space-y-1.5">
+                    <label
+                        for="modal_playlist_url"
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
                     >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Import YouTube Playlist
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                In:
-                                <span
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ node.name }}
-                                </span>
-                            </p>
-                        </div>
-
-                        <button
-                            type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
+                        YouTube Playlist URL
+                        <span class="text-rose-500">*</span>
+                    </label>
+                    <div class="relative flex items-center">
+                        <Youtube
+                            class="pointer-events-none absolute left-3 h-4 w-4 text-rose-600"
+                        />
+                        <input
+                            id="modal_playlist_url"
+                            v-model="playlistUrl"
+                            type="url"
+                            placeholder="https://www.youtube.com/playlist?list=PL..."
+                            required
+                            autofocus
+                            class="w-full rounded-lg border border-slate-300 bg-white py-2 pr-3 pl-9 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        />
                     </div>
+                </div>
 
-                    <!-- Form Body -->
-                    <form
-                        @submit.prevent="submitForm"
-                        class="flex flex-1 flex-col overflow-hidden"
+                <!-- Naming Strategy Selection -->
+                <div
+                    class="space-y-3 rounded-xl border border-slate-200 bg-slate-50/50 p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                >
+                    <h4
+                        class="text-xs font-bold text-slate-800 dark:text-gray-200"
                     >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+                        Resource Naming Settings
+                    </h4>
+
+                    <div class="grid grid-cols-2 gap-2">
+                        <!-- Strategy 1: Serial -->
+                        <label
+                            class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
+                            :class="
+                                namingStrategy === 'serial'
+                                    ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
+                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
+                            "
                         >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
+                            <input
+                                type="radio"
+                                value="serial"
+                                v-model="namingStrategy"
+                                class="text-indigo-600 focus:ring-indigo-500"
                             />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
-                        </div>
+                            <Hash class="h-3.5 w-3.5" />
+                            <span>Serial Numbers</span>
+                        </label>
 
-                        <div
-                            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+                        <!-- Strategy 2: YouTube Title -->
+                        <label
+                            class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
+                            :class="
+                                namingStrategy === 'youtube'
+                                    ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
+                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
+                            "
                         >
-                            <!-- Playlist URL Input -->
-                            <div class="space-y-1.5">
-                                <label
-                                    for="modal_playlist_url"
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    YouTube Playlist URL
-                                    <span class="text-rose-500">*</span>
-                                </label>
-                                <div class="relative flex items-center">
-                                    <Youtube
-                                        class="pointer-events-none absolute left-3 h-4 w-4 text-rose-600"
-                                    />
-                                    <input
-                                        id="modal_playlist_url"
-                                        v-model="playlistUrl"
-                                        type="url"
-                                        placeholder="https://www.youtube.com/playlist?list=PL..."
-                                        required
-                                        autofocus
-                                        class="w-full rounded-lg border border-slate-300 bg-white py-2 pr-3 pl-9 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                    />
-                                </div>
-                            </div>
-
-                            <!-- Naming Strategy Selection -->
-                            <div
-                                class="space-y-3 rounded-xl border border-slate-200 bg-slate-50/50 p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
-                            >
-                                <h4
-                                    class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >
-                                    Resource Naming Settings
-                                </h4>
-
-                                <div class="grid grid-cols-2 gap-2">
-                                    <!-- Strategy 1: Serial -->
-                                    <label
-                                        class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
-                                        :class="
-                                            namingStrategy === 'serial'
-                                                ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
-                                                : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
-                                        "
-                                    >
-                                        <input
-                                            type="radio"
-                                            value="serial"
-                                            v-model="namingStrategy"
-                                            class="text-indigo-600 focus:ring-indigo-500"
-                                        />
-                                        <Hash class="h-3.5 w-3.5" />
-                                        <span>Serial Numbers</span>
-                                    </label>
-
-                                    <!-- Strategy 2: YouTube Title -->
-                                    <label
-                                        class="flex cursor-pointer items-center gap-2 rounded-lg border bg-white p-2.5 text-xs transition dark:bg-gray-900"
-                                        :class="
-                                            namingStrategy === 'youtube'
-                                                ? 'border-indigo-600 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:text-indigo-300'
-                                                : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400'
-                                        "
-                                    >
-                                        <input
-                                            type="radio"
-                                            value="youtube"
-                                            v-model="namingStrategy"
-                                            class="text-indigo-600 focus:ring-indigo-500"
-                                        />
-                                        <FileSpreadsheet class="h-3.5 w-3.5" />
-                                        <span>YouTube Titles</span>
-                                    </label>
-                                </div>
-
-                                <!-- Dynamic Options for Serial -->
-                                <div
-                                    v-if="namingStrategy === 'serial'"
-                                    class="grid grid-cols-1 gap-3 pt-1 sm:grid-cols-2"
-                                >
-                                    <div class="space-y-1">
-                                        <label
-                                            for="modal_video_naming_prefix"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Prefix
-                                        </label>
-                                        <input
-                                            id="modal_video_naming_prefix"
-                                            v-model="namingPrefix"
-                                            type="text"
-                                            placeholder="e.g. video"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                                        />
-                                    </div>
-
-                                    <div class="space-y-1">
-                                        <label
-                                            for="modal_video_start_number"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Starting Number
-                                        </label>
-                                        <input
-                                            id="modal_video_start_number"
-                                            v-model.number="startNumber"
-                                            type="number"
-                                            min="1"
-                                            placeholder="1"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                            <input
+                                type="radio"
+                                value="youtube"
+                                v-model="namingStrategy"
+                                class="text-indigo-600 focus:ring-indigo-500"
+                            />
+                            <FileSpreadsheet class="h-3.5 w-3.5" />
+                            <span>YouTube Titles</span>
+                        </label>
+                    </div>
 
-                            <!-- Info Box -->
-                            <div
-                                class="flex items-start gap-2.5 rounded-xl border border-indigo-100 bg-indigo-50/60 p-3 dark:border-indigo-500/30 dark:bg-indigo-500/10"
+                    <!-- Dynamic Options for Serial -->
+                    <div
+                        v-if="namingStrategy === 'serial'"
+                        class="grid grid-cols-1 gap-3 pt-1 sm:grid-cols-2"
+                    >
+                        <div class="space-y-1">
+                            <label
+                                for="modal_video_naming_prefix"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <Info
-                                    class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400"
-                                />
-                                <p
-                                    class="text-[11px] leading-relaxed text-indigo-900 dark:text-indigo-300"
-                                >
-                                    Playlists with multiple pages will be
-                                    automatically fetched and created as
-                                    sequential video resources.
-                                </p>
-                            </div>
+                                Prefix
+                            </label>
+                            <input
+                                id="modal_video_naming_prefix"
+                                v-model="namingPrefix"
+                                type="text"
+                                placeholder="e.g. video"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                            />
                         </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
-                        >
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                            >
-                                Cancel
-                            </button>
-
-                            <button
-                                type="submit"
-                                :disabled="isSaving || !playlistUrl.trim()"
-                                class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                        <div class="space-y-1">
+                            <label
+                                for="modal_video_start_number"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <span>{{
-                                    isSaving
-                                        ? 'Importing Playlist...'
-                                        : 'Import Playlist'
-                                }}</span>
-                            </button>
+                                Starting Number
+                            </label>
+                            <input
+                                id="modal_video_start_number"
+                                v-model.number="startNumber"
+                                type="number"
+                                min="1"
+                                placeholder="1"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                            />
                         </div>
-                    </form>
+                    </div>
+                </div>
+
+                <!-- Info Box -->
+                <div
+                    class="flex items-start gap-2.5 rounded-xl border border-indigo-100 bg-indigo-50/60 p-3 dark:border-indigo-500/30 dark:bg-indigo-500/10"
+                >
+                    <Info
+                        class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400"
+                    />
+                    <p
+                        class="text-[11px] leading-relaxed text-indigo-900 dark:text-indigo-300"
+                    >
+                        Playlists with multiple pages will be automatically
+                        fetched and created as sequential video resources.
+                    </p>
                 </div>
             </div>
-        </Transition>
-    </Teleport>
+
+            <!-- Footer -->
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Cancel
+                </button>
+
+                <button
+                    type="submit"
+                    :disabled="isSaving || !playlistUrl.trim()"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{
+                        isSaving ? 'Importing Playlist...' : 'Import Playlist'
+                    }}</span>
+                </button>
+            </div>
+        </form>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/CreateNodeModal.vue b/resources/js/components/admin/CreateNodeModal.vue
index 2b90dceb..60826e56 100644
--- a/resources/js/components/admin/CreateNodeModal.vue
+++ b/resources/js/components/admin/CreateNodeModal.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { router } from '@inertiajs/vue3';
 import {
-    X,
     Loader2,
     AlertCircle,
     ChevronDown,
     ChevronRight,
 } from 'lucide-vue-next';
 import { ref, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -125,196 +125,139 @@ const submitForm = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        :title="node ? 'Edit Folder' : 'Create Folder'"
+        :description="`In: ${parent ? parent.name : subject.name}`"
+        max-width="lg"
+        @close="handleClose"
+    >
+        <form
+            @submit.prevent="submitForm"
+            class="flex flex-1 flex-col overflow-hidden"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-lg flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
-                    <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+            <div
+                class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+            >
+                <!-- Folder Name -->
+                <div class="space-y-1.5">
+                    <label
+                        for="single_folder_name"
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
                     >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                {{ node ? 'Edit Folder' : 'Create Folder' }}
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                In:
-                                <span
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ parent ? parent.name : subject.name }}
-                                </span>
-                            </p>
-                        </div>
-
-                        <button
-                            type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
+                        Folder Name
+                        <span class="text-rose-500">*</span>
+                    </label>
+                    <input
+                        id="single_folder_name"
+                        v-model="name"
+                        type="text"
+                        placeholder="e.g., Chapter 1: Introduction"
+                        class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        autofocus
+                        required
+                    />
+                </div>
 
-                    <!-- Body / Form -->
-                    <form
-                        @submit.prevent="submitForm"
-                        class="flex flex-1 flex-col overflow-hidden"
+                <!-- Advanced Settings Toggle -->
+                <div class="pt-1">
+                    <button
+                        type="button"
+                        @click="showAdvanced = !showAdvanced"
+                        class="inline-flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                     >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
-                        >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
-                            />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
-                        </div>
-
-                        <div
-                            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
-                        >
-                            <!-- Folder Name -->
-                            <div class="space-y-1.5">
-                                <label
-                                    for="single_folder_name"
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Folder Name
-                                    <span class="text-rose-500">*</span>
-                                </label>
-                                <input
-                                    id="single_folder_name"
-                                    v-model="name"
-                                    type="text"
-                                    placeholder="e.g., Chapter 1: Introduction"
-                                    class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                    autofocus
-                                    required
-                                />
-                            </div>
+                        <component
+                            :is="showAdvanced ? ChevronDown : ChevronRight"
+                            class="h-3.5 w-3.5"
+                        />
+                        <span>Advanced settings (Slug, Order)</span>
+                    </button>
 
-                            <!-- Advanced Settings Toggle -->
-                            <div class="pt-1">
-                                <button
-                                    type="button"
-                                    @click="showAdvanced = !showAdvanced"
-                                    class="inline-flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-                                >
-                                    <component
-                                        :is="
-                                            showAdvanced
-                                                ? ChevronDown
-                                                : ChevronRight
-                                        "
-                                        class="h-3.5 w-3.5"
-                                    />
-                                    <span>Advanced settings (Slug, Order)</span>
-                                </button>
-
-                                <div
-                                    v-if="showAdvanced"
-                                    class="mt-2.5 space-y-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                    <div
+                        v-if="showAdvanced"
+                        class="mt-2.5 space-y-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                    >
+                        <!-- Custom Slug -->
+                        <div class="space-y-1">
+                            <label
+                                for="single_folder_slug"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                Custom Slug
+                                <span class="font-normal text-slate-400"
+                                    >(Optional)</span
                                 >
-                                    <!-- Custom Slug -->
-                                    <div class="space-y-1">
-                                        <label
-                                            for="single_folder_slug"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Custom Slug
-                                            <span
-                                                class="font-normal text-slate-400"
-                                                >(Optional)</span
-                                            >
-                                        </label>
-                                        <input
-                                            id="single_folder_slug"
-                                            v-model="slug"
-                                            type="text"
-                                            placeholder="Auto-generated if empty"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        />
-                                    </div>
-
-                                    <!-- Sort Order -->
-                                    <div class="space-y-1">
-                                        <label
-                                            for="single_folder_sort_order"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Sort Order Priority
-                                        </label>
-                                        <input
-                                            id="single_folder_sort_order"
-                                            v-model.number="sortOrder"
-                                            type="number"
-                                            placeholder="0"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                            </label>
+                            <input
+                                id="single_folder_slug"
+                                v-model="slug"
+                                type="text"
+                                placeholder="Auto-generated if empty"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            />
                         </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
-                        >
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                            >
-                                Cancel
-                            </button>
-
-                            <button
-                                type="submit"
-                                :disabled="isSaving || !name.trim()"
-                                class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                        <!-- Sort Order -->
+                        <div class="space-y-1">
+                            <label
+                                for="single_folder_sort_order"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <span>{{
-                                    isSaving
-                                        ? 'Saving...'
-                                        : node
-                                          ? 'Update Folder'
-                                          : 'Create Folder'
-                                }}</span>
-                            </button>
+                                Sort Order Priority
+                            </label>
+                            <input
+                                id="single_folder_sort_order"
+                                v-model.number="sortOrder"
+                                type="number"
+                                placeholder="0"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            />
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
-        </Transition>
-    </Teleport>
+
+            <!-- Footer -->
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Cancel
+                </button>
+
+                <button
+                    type="submit"
+                    :disabled="isSaving || !name.trim()"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{
+                        isSaving
+                            ? 'Saving...'
+                            : node
+                              ? 'Update Folder'
+                              : 'Create Folder'
+                    }}</span>
+                </button>
+            </div>
+        </form>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/CreateResourceModal.vue b/resources/js/components/admin/CreateResourceModal.vue
index 7a4011ab..70c7ec39 100644
--- a/resources/js/components/admin/CreateResourceModal.vue
+++ b/resources/js/components/admin/CreateResourceModal.vue
@@ -7,11 +7,11 @@ import {
     Video,
     Upload,
     Link as LinkIcon,
-    X,
     Loader2,
     AlertCircle,
 } from 'lucide-vue-next';
 import { ref, computed, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -192,273 +192,213 @@ const submitForm = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        :title="resource ? 'Edit Resource' : 'Add Resource'"
+        :description="`In: ${node.name}`"
+        max-width="xl"
+        @close="handleClose"
+    >
+        <!-- Body / Form -->
+        <form
+            @submit.prevent="submitForm"
+            class="flex flex-1 flex-col overflow-hidden"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-xl flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
-                    <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
+            <div
+                class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+            >
+                <!-- 1. Resource Type Selector -->
+                <div class="space-y-1.5">
+                    <label
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
                     >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                {{
-                                    resource ? 'Edit Resource' : 'Add Resource'
-                                }}
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                In:
-                                <span
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ node.name }}
-                                </span>
-                            </p>
-                        </div>
-
+                        Resource Type
+                    </label>
+                    <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                         <button
                             type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                            v-for="type in resourceTypes"
+                            :key="type.id"
+                            @click="resourceType = type.id as any"
+                            class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-xl border p-2.5 text-center transition focus:outline-none"
+                            :class="
+                                resourceType === type.id
+                                    ? 'border-indigo-600 bg-indigo-50/70 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/50 dark:text-indigo-300'
+                                    : 'dark:hover:bg-gray-750 border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300'
+                            "
                         >
-                            <X class="h-4 w-4" />
+                            <div class="rounded-lg p-1.5" :class="type.color">
+                                <component
+                                    :is="type.icon"
+                                    class="h-4 w-4 shrink-0"
+                                />
+                            </div>
+                            <span class="text-[11px]">{{ type.name }}</span>
                         </button>
                     </div>
+                </div>
 
-                    <!-- Body / Form -->
-                    <form
-                        @submit.prevent="submitForm"
-                        class="flex flex-1 flex-col overflow-hidden"
+                <!-- 2. Resource Title -->
+                <div class="space-y-1.5">
+                    <label
+                        for="resource_title"
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
                     >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
-                        >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
-                            />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
-                        </div>
-
-                        <div
-                            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
-                        >
-                            <!-- 1. Resource Type Selector -->
-                            <div class="space-y-1.5">
-                                <label
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Resource Type
-                                </label>
-                                <div
-                                    class="grid grid-cols-2 gap-2 sm:grid-cols-4"
-                                >
-                                    <button
-                                        type="button"
-                                        v-for="type in resourceTypes"
-                                        :key="type.id"
-                                        @click="resourceType = type.id as any"
-                                        class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-xl border p-2.5 text-center transition focus:outline-none"
-                                        :class="
-                                            resourceType === type.id
-                                                ? 'border-indigo-600 bg-indigo-50/70 font-semibold text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/50 dark:text-indigo-300'
-                                                : 'dark:hover:bg-gray-750 border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300'
-                                        "
-                                    >
-                                        <div
-                                            class="rounded-lg p-1.5"
-                                            :class="type.color"
-                                        >
-                                            <component
-                                                :is="type.icon"
-                                                class="h-4 w-4 shrink-0"
-                                            />
-                                        </div>
-                                        <span class="text-[11px]">{{
-                                            type.name
-                                        }}</span>
-                                    </button>
-                                </div>
-                            </div>
-
-                            <!-- 2. Resource Title -->
-                            <div class="space-y-1.5">
-                                <label
-                                    for="resource_title"
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Resource Title
-                                    <span class="text-rose-500">*</span>
-                                </label>
-                                <input
-                                    id="resource_title"
-                                    v-model="title"
-                                    type="text"
-                                    placeholder="e.g., Lecture 01 Slide Notes"
-                                    maxlength="100"
-                                    class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                    required
-                                    autofocus
-                                />
-                            </div>
-
-                            <!-- 3. File URL (Only for Video and PDF) -->
-                            <div v-if="requiresLink" class="space-y-1.5">
-                                <label
-                                    for="resource_external_url"
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    {{
-                                        resourceType === 'pdf'
-                                            ? 'PDF Resource URL'
-                                            : 'Video URL'
-                                    }}
-                                    <span class="text-rose-500">*</span>
-                                </label>
-                                <div class="relative flex items-center">
-                                    <LinkIcon
-                                        class="pointer-events-none absolute left-3 h-3.5 w-3.5 text-slate-400 dark:text-gray-500"
-                                    />
-                                    <input
-                                        id="resource_external_url"
-                                        v-model="externalUrl"
-                                        type="url"
-                                        :placeholder="
-                                            resourceType === 'pdf'
-                                                ? 'https://example.com/document.pdf'
-                                                : 'https://www.youtube.com/watch?v=...'
-                                        "
-                                        class="w-full rounded-lg border border-slate-300 bg-white py-2 pr-3 pl-9 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        required
-                                    />
-                                </div>
-                            </div>
-
-                            <!-- 4. File Upload (Only for Image) -->
-                            <div v-if="requiresFile" class="space-y-1.5">
-                                <label
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Upload Image
-                                    <span class="text-rose-500">*</span>
-                                </label>
-                                <div
-                                    class="rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-4 text-center transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800/60"
-                                >
-                                    <input
-                                        type="file"
-                                        id="resource_file_upload"
-                                        class="hidden"
-                                        @change="handleFileSelect"
-                                        accept="image/jpeg,image/png,image/jpg"
-                                    />
-                                    <label
-                                        for="resource_file_upload"
-                                        class="flex cursor-pointer flex-col items-center justify-center"
-                                    >
-                                        <div
-                                            class="mb-1.5 rounded-full border border-slate-200 bg-white p-2 text-slate-500 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
-                                        >
-                                            <Upload class="h-4 w-4" />
-                                        </div>
-                                        <span
-                                            class="text-xs font-medium text-indigo-600 dark:text-indigo-400"
-                                        >
-                                            {{
-                                                file
-                                                    ? file.name
-                                                    : 'Choose image file or drag here'
-                                            }}
-                                        </span>
-                                        <span
-                                            class="mt-0.5 text-[10px] text-slate-400 dark:text-gray-500"
-                                        >
-                                            Max size: 10MB (JPG, JPEG, PNG)
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
+                        Resource Title
+                        <span class="text-rose-500">*</span>
+                    </label>
+                    <input
+                        id="resource_title"
+                        v-model="title"
+                        type="text"
+                        placeholder="e.g., Lecture 01 Slide Notes"
+                        maxlength="100"
+                        class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        required
+                        autofocus
+                    />
+                </div>
 
-                            <!-- 5. Content Body (Optional notes/description) -->
-                            <div class="space-y-1.5">
-                                <label
-                                    for="resource_content"
-                                    class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                                >
-                                    Description / Body
-                                    <span
-                                        class="font-normal text-slate-400 dark:text-gray-500"
-                                        >(Optional)</span
-                                    >
-                                </label>
-                                <textarea
-                                    id="resource_content"
-                                    v-model="content"
-                                    rows="3"
-                                    placeholder="Type optional descriptions, lecture overview, or note contents..."
-                                    class="w-full rounded-lg border border-slate-300 bg-white p-2.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                />
-                            </div>
-                        </div>
+                <!-- 3. File URL (Only for Video and PDF) -->
+                <div v-if="requiresLink" class="space-y-1.5">
+                    <label
+                        for="resource_external_url"
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                    >
+                        {{
+                            resourceType === 'pdf'
+                                ? 'PDF Resource URL'
+                                : 'Video URL'
+                        }}
+                        <span class="text-rose-500">*</span>
+                    </label>
+                    <div class="relative flex items-center">
+                        <LinkIcon
+                            class="pointer-events-none absolute left-3 h-3.5 w-3.5 text-slate-400 dark:text-gray-500"
+                        />
+                        <input
+                            id="resource_external_url"
+                            v-model="externalUrl"
+                            type="url"
+                            :placeholder="
+                                resourceType === 'pdf'
+                                    ? 'https://example.com/document.pdf'
+                                    : 'https://www.youtube.com/watch?v=...'
+                            "
+                            class="w-full rounded-lg border border-slate-300 bg-white py-2 pr-3 pl-9 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            required
+                        />
+                    </div>
+                </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                <!-- 4. File Upload (Only for Image) -->
+                <div v-if="requiresFile" class="space-y-1.5">
+                    <label
+                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                    >
+                        Upload Image
+                        <span class="text-rose-500">*</span>
+                    </label>
+                    <div
+                        class="rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-4 text-center transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800/60"
+                    >
+                        <input
+                            type="file"
+                            id="resource_file_upload"
+                            class="hidden"
+                            @change="handleFileSelect"
+                            accept="image/jpeg,image/png,image/jpg"
+                        />
+                        <label
+                            for="resource_file_upload"
+                            class="flex cursor-pointer flex-col items-center justify-center"
                         >
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                            <div
+                                class="mb-1.5 rounded-full border border-slate-200 bg-white p-2 text-slate-500 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                             >
-                                Cancel
-                            </button>
-
-                            <button
-                                type="submit"
-                                :disabled="isSaving || !title.trim()"
-                                class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                <Upload class="h-4 w-4" />
+                            </div>
+                            <span
+                                class="text-xs font-medium text-indigo-600 dark:text-indigo-400"
                             >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <span>{{
-                                    isSaving
-                                        ? 'Saving...'
-                                        : resource
-                                          ? 'Update Resource'
-                                          : 'Create Resource'
-                                }}</span>
-                            </button>
-                        </div>
-                    </form>
+                                {{
+                                    file
+                                        ? file.name
+                                        : 'Choose image file or drag here'
+                                }}
+                            </span>
+                            <span
+                                class="mt-0.5 text-[10px] text-slate-400 dark:text-gray-500"
+                            >
+                                Max size: 10MB (JPG, JPEG, PNG)
+                            </span>
+                        </label>
+                    </div>
                 </div>
+
+                <!-- 5. Content Body (Optional notes/description) -->
+                <div class="space-y-1.5">
+                    <label
+                        for="resource_content"
+                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Description / Body
+                        <span
+                            class="font-normal text-slate-400 dark:text-gray-500"
+                            >(Optional)</span
+                        >
+                    </label>
+                    <textarea
+                        id="resource_content"
+                        v-model="content"
+                        rows="3"
+                        placeholder="Type optional descriptions, lecture overview, or note contents..."
+                        class="w-full rounded-lg border border-slate-300 bg-white p-2.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                    />
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Cancel
+                </button>
+
+                <button
+                    type="submit"
+                    :disabled="isSaving || !title.trim()"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{
+                        isSaving
+                            ? 'Saving...'
+                            : resource
+                              ? 'Update Resource'
+                              : 'Create Resource'
+                    }}</span>
+                </button>
             </div>
-        </Transition>
-    </Teleport>
+        </form>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/CreateSubjectModal.vue b/resources/js/components/admin/CreateSubjectModal.vue
index 32676df1..4f1ee522 100644
--- a/resources/js/components/admin/CreateSubjectModal.vue
+++ b/resources/js/components/admin/CreateSubjectModal.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import { router } from '@inertiajs/vue3';
 import {
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-    Search,
+    AlertCircle,
     Check,
     ChevronDown,
     ChevronRight,
-    X,
     Loader2,
-    AlertCircle,
 } from 'lucide-vue-next';
-import { ref, computed, watch } from 'vue';
+import { ref, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
+import SubjectIcon from '@/components/SubjectIcon.vue';
+import { SUBJECT_ICON_LIST } from '@/lib/subjectIcons';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -37,18 +30,6 @@ const emit = defineEmits<{
     (e: 'close'): void;
 }>();
 
-const icons: Record<string, any> = {
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-    Search,
-};
-
 const showAdvanced = ref(false);
 const isSaving = ref(false);
 const errorMessage = ref('');
@@ -109,8 +90,6 @@ watch(
     },
 );
 
-const activeIconComponent = computed(() => icons[icon.value] || BookOpen);
-
 const handleClose = () => {
     if (isSaving.value) {
         return;
@@ -172,344 +151,280 @@ const submitForm = () => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <BaseModal
+        :is-open="isOpen"
+        :title="subject ? 'Edit Subject' : 'Create Subject'"
+        :description="
+            subject
+                ? 'Update subject settings and appearance'
+                : 'Add a new subject to the platform'
+        "
+        max-width="xl"
+        @close="handleClose"
+    >
+        <!-- Body / Form -->
+        <form
+            @submit.prevent="submitForm"
+            class="flex flex-1 flex-col overflow-hidden"
         >
+            <!-- Error Banner -->
             <div
-                v-if="isOpen"
-                class="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
+                v-if="errorMessage"
+                class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
             >
-                <div
-                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
-                    @click="handleClose"
+                <AlertCircle
+                    class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                 />
+                <div class="leading-relaxed">
+                    <span class="font-bold">Error: </span>
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
 
-                <div
-                    class="relative flex max-h-[92vh] w-full max-w-xl flex-col rounded-t-2xl border border-slate-200 bg-white shadow-xl sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <!-- Header -->
-                    <div
-                        class="flex items-center justify-between border-b border-slate-100 px-4 py-3.5 sm:px-6 dark:border-gray-800"
-                    >
-                        <div class="min-w-0 flex-1 pr-3">
-                            <h3
-                                class="truncate text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                {{
-                                    subject ? 'Edit Subject' : 'Create Subject'
-                                }}
-                            </h3>
-                            <p
-                                class="truncate text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                {{
-                                    subject
-                                        ? 'Update subject settings and appearance'
-                                        : 'Add a new subject to the platform'
-                                }}
-                            </p>
-                        </div>
+            <div
+                class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+            >
+                <!-- Name & Course Grid -->
+                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <div class="space-y-1.5">
+                        <label
+                            for="subject_name"
+                            class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            Subject Name
+                            <span class="text-rose-500">*</span>
+                        </label>
+                        <input
+                            id="subject_name"
+                            v-model="name"
+                            type="text"
+                            placeholder="e.g. পদার্থবিজ্ঞান ১ম পত্র"
+                            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            required
+                            autofocus
+                        />
+                    </div>
+
+                    <div class="space-y-1.5">
+                        <label
+                            for="subject_course"
+                            class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            Course Level
+                            <span class="text-rose-500">*</span>
+                        </label>
+                        <select
+                            id="subject_course"
+                            v-model="course"
+                            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                        >
+                            <option value="hsc">HSC</option>
+                            <option value="ssc">SSC</option>
+                        </select>
+                    </div>
+                </div>
 
+                <!-- Color Palette -->
+                <div class="space-y-1.5">
+                    <label
+                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Badge Color
+                    </label>
+                    <div class="flex flex-wrap gap-2">
                         <button
                             type="button"
-                            @click="handleClose"
-                            class="cursor-pointer rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                            v-for="preset in tailwindPresets"
+                            :key="preset"
+                            @click="tailwindFormat = preset"
+                            class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border transition focus:outline-none"
+                            :class="[
+                                preset,
+                                tailwindFormat === preset
+                                    ? 'border-slate-900 shadow-xs ring-2 ring-slate-900/10 dark:border-white'
+                                    : 'border-transparent opacity-80 hover:opacity-100',
+                            ]"
                         >
-                            <X class="h-4 w-4" />
+                            <Check
+                                v-if="tailwindFormat === preset"
+                                class="h-3.5 w-3.5"
+                            />
                         </button>
                     </div>
+                </div>
 
-                    <!-- Body / Form -->
-                    <form
-                        @submit.prevent="submitForm"
-                        class="flex flex-1 flex-col overflow-hidden"
+                <!-- Icon Selection -->
+                <div class="space-y-1.5">
+                    <label
+                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
                     >
-                        <!-- Error Banner -->
-                        <div
-                            v-if="errorMessage"
-                            class="m-4 mb-0 flex items-start gap-2.5 rounded-lg border border-rose-200 bg-rose-50/80 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+                        Subject Icon
+                    </label>
+                    <div class="flex flex-wrap gap-2">
+                        <button
+                            type="button"
+                            v-for="item in SUBJECT_ICON_LIST"
+                            :key="item.key"
+                            @click="icon = item.key"
+                            :title="item.key"
+                            class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border transition"
+                            :class="
+                                icon === item.key
+                                    ? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'
+                            "
                         >
-                            <AlertCircle
-                                class="mt-0.5 h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
+                            <component
+                                :is="item.component"
+                                class="h-4.5 w-4.5 shrink-0"
                             />
-                            <div class="leading-relaxed">
-                                <span class="font-bold">Error: </span>
-                                <span>{{ errorMessage }}</span>
-                            </div>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Live Card Preview -->
+                <div
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3 dark:border-gray-700 dark:bg-gray-800/40"
+                >
+                    <div
+                        :class="tailwindFormat"
+                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-black/5 dark:border-white/10"
+                    >
+                        <SubjectIcon :name="icon" class-name="h-5 w-5" />
+                    </div>
+                    <div class="min-w-0 flex-1">
+                        <div class="flex items-center gap-2">
+                            <h4
+                                class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
+                            >
+                                {{ name || 'Subject Name' }}
+                            </h4>
+                            <span
+                                class="py-0.2 inline-flex rounded px-1 text-[9px] font-bold uppercase"
+                                :class="
+                                    course === 'ssc'
+                                        ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/60 dark:text-amber-300'
+                                        : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                "
+                            >
+                                {{ course }}
+                            </span>
                         </div>
+                        <p class="truncate text-[11px] text-slate-400">
+                            Live preview
+                        </p>
+                    </div>
+                </div>
 
-                        <div
-                            class="flex-1 space-y-4 overflow-y-auto p-4 text-slate-800 sm:p-6 dark:text-gray-200"
+                <!-- Advanced Settings Toggle -->
+                <div class="pt-1">
+                    <button
+                        type="button"
+                        @click="showAdvanced = !showAdvanced"
+                        class="inline-flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+                    >
+                        <component
+                            :is="showAdvanced ? ChevronDown : ChevronRight"
+                            class="h-3.5 w-3.5"
+                        />
+                        <span
+                            >Advanced settings (English Name, Slug, Order)</span
                         >
-                            <!-- Name & Course Grid -->
-                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                                <div class="space-y-1.5">
-                                    <label
-                                        for="subject_name"
-                                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                    >
-                                        Subject Name
-                                        <span class="text-rose-500">*</span>
-                                    </label>
-                                    <input
-                                        id="subject_name"
-                                        v-model="name"
-                                        type="text"
-                                        placeholder="e.g. পদার্থবিজ্ঞান ১ম পত্র"
-                                        class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        required
-                                        autofocus
-                                    />
-                                </div>
+                    </button>
 
-                                <div class="space-y-1.5">
-                                    <label
-                                        for="subject_course"
-                                        class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                    >
-                                        Course Level
-                                        <span class="text-rose-500">*</span>
-                                    </label>
-                                    <select
-                                        id="subject_course"
-                                        v-model="course"
-                                        class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                                    >
-                                        <option value="hsc">HSC</option>
-                                        <option value="ssc">SSC</option>
-                                    </select>
-                                </div>
-                            </div>
-
-                            <!-- Color Palette -->
-                            <div class="space-y-1.5">
+                    <div
+                        v-if="showAdvanced"
+                        class="mt-2.5 space-y-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                    >
+                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                            <!-- English Name -->
+                            <div class="space-y-1">
                                 <label
-                                    class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                    for="subject_english_name"
+                                    class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                                 >
-                                    Badge Color
-                                </label>
-                                <div class="flex flex-wrap gap-2">
-                                    <button
-                                        type="button"
-                                        v-for="preset in tailwindPresets"
-                                        :key="preset"
-                                        @click="tailwindFormat = preset"
-                                        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border transition focus:outline-none"
-                                        :class="[
-                                            preset,
-                                            tailwindFormat === preset
-                                                ? 'border-slate-900 shadow-xs ring-2 ring-slate-900/10 dark:border-white'
-                                                : 'border-transparent opacity-80 hover:opacity-100',
-                                        ]"
+                                    English Name
+                                    <span class="font-normal text-slate-400"
+                                        >(Search keyword)</span
                                     >
-                                        <Check
-                                            v-if="tailwindFormat === preset"
-                                            class="h-3.5 w-3.5"
-                                        />
-                                    </button>
-                                </div>
+                                </label>
+                                <input
+                                    id="subject_english_name"
+                                    v-model="englishName"
+                                    type="text"
+                                    placeholder="e.g. Physics 1st Paper"
+                                    class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                                />
                             </div>
 
-                            <!-- Icon Selection -->
-                            <div class="space-y-1.5">
+                            <!-- Sort Order -->
+                            <div class="space-y-1">
                                 <label
-                                    class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                    for="subject_sort_order"
+                                    class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                                 >
-                                    Subject Icon
+                                    Sort Order Priority
                                 </label>
-                                <div class="flex flex-wrap gap-2">
-                                    <button
-                                        type="button"
-                                        v-for="(
-                                            iconComponent, iconKey
-                                        ) in icons"
-                                        :key="iconKey"
-                                        @click="icon = iconKey"
-                                        :title="iconKey"
-                                        class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border transition"
-                                        :class="
-                                            icon === iconKey
-                                                ? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'
-                                        "
-                                    >
-                                        <component
-                                            :is="iconComponent"
-                                            class="h-4.5 w-4.5 shrink-0"
-                                        />
-                                    </button>
-                                </div>
+                                <input
+                                    id="subject_sort_order"
+                                    v-model.number="sortOrder"
+                                    type="number"
+                                    placeholder="0"
+                                    class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                                />
                             </div>
+                        </div>
 
-                            <!-- Live Card Preview -->
-                            <div
-                                class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3 dark:border-gray-700 dark:bg-gray-800/40"
+                        <!-- Custom Slug -->
+                        <div class="space-y-1">
+                            <label
+                                for="subject_slug"
+                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                <div
-                                    :class="tailwindFormat"
-                                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-black/5 dark:border-white/10"
-                                >
-                                    <component
-                                        :is="activeIconComponent"
-                                        class="h-5 w-5"
-                                    />
-                                </div>
-                                <div class="min-w-0 flex-1">
-                                    <div class="flex items-center gap-2">
-                                        <h4
-                                            class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
-                                        >
-                                            {{ name || 'Subject Name' }}
-                                        </h4>
-                                        <span
-                                            class="py-0.2 inline-flex rounded px-1 text-[9px] font-bold uppercase"
-                                            :class="
-                                                course === 'ssc'
-                                                    ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/60 dark:text-amber-300'
-                                                    : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                            "
-                                        >
-                                            {{ course }}
-                                        </span>
-                                    </div>
-                                    <p
-                                        class="truncate text-[11px] text-slate-400"
-                                    >
-                                        Live preview
-                                    </p>
-                                </div>
-                            </div>
-
-                            <!-- Advanced Settings Toggle -->
-                            <div class="pt-1">
-                                <button
-                                    type="button"
-                                    @click="showAdvanced = !showAdvanced"
-                                    class="inline-flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-                                >
-                                    <component
-                                        :is="
-                                            showAdvanced
-                                                ? ChevronDown
-                                                : ChevronRight
-                                        "
-                                        class="h-3.5 w-3.5"
-                                    />
-                                    <span
-                                        >Advanced settings (English Name, Slug,
-                                        Order)</span
-                                    >
-                                </button>
-
-                                <div
-                                    v-if="showAdvanced"
-                                    class="mt-2.5 space-y-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 sm:p-4 dark:border-gray-700/80 dark:bg-gray-800/40"
+                                Custom URL Slug
+                                <span class="font-normal text-slate-400"
+                                    >(Optional)</span
                                 >
-                                    <div
-                                        class="grid grid-cols-1 gap-3 sm:grid-cols-2"
-                                    >
-                                        <!-- English Name -->
-                                        <div class="space-y-1">
-                                            <label
-                                                for="subject_english_name"
-                                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                            >
-                                                English Name
-                                                <span
-                                                    class="font-normal text-slate-400"
-                                                    >(Search keyword)</span
-                                                >
-                                            </label>
-                                            <input
-                                                id="subject_english_name"
-                                                v-model="englishName"
-                                                type="text"
-                                                placeholder="e.g. Physics 1st Paper"
-                                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                            />
-                                        </div>
-
-                                        <!-- Sort Order -->
-                                        <div class="space-y-1">
-                                            <label
-                                                for="subject_sort_order"
-                                                class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                            >
-                                                Sort Order Priority
-                                            </label>
-                                            <input
-                                                id="subject_sort_order"
-                                                v-model.number="sortOrder"
-                                                type="number"
-                                                placeholder="0"
-                                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                            />
-                                        </div>
-                                    </div>
-
-                                    <!-- Custom Slug -->
-                                    <div class="space-y-1">
-                                        <label
-                                            for="subject_slug"
-                                            class="block text-[11px] font-semibold text-slate-700 dark:text-gray-300"
-                                        >
-                                            Custom URL Slug
-                                            <span
-                                                class="font-normal text-slate-400"
-                                                >(Optional)</span
-                                            >
-                                        </label>
-                                        <input
-                                            id="subject_slug"
-                                            v-model="slug"
-                                            type="text"
-                                            placeholder="Auto-generated if empty"
-                                            class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                            </label>
+                            <input
+                                id="subject_slug"
+                                v-model="slug"
+                                type="text"
+                                placeholder="Auto-generated if empty"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+                            />
                         </div>
+                    </div>
+                </div>
+            </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
-                        >
-                            <button
-                                type="button"
-                                @click="handleClose"
-                                class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                            >
-                                Cancel
-                            </button>
+            <!-- Footer -->
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="cursor-pointer rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Cancel
+                </button>
 
-                            <button
-                                type="submit"
-                                :disabled="isSaving || !name.trim()"
-                                class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
-                            >
-                                <Loader2
-                                    v-if="isSaving"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <span>{{
-                                    isSaving
-                                        ? 'Saving...'
-                                        : subject
-                                          ? 'Update Subject'
-                                          : 'Create Subject'
-                                }}</span>
-                            </button>
-                        </div>
-                    </form>
-                </div>
+                <button
+                    type="submit"
+                    :disabled="isSaving || !name.trim()"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{
+                        isSaving
+                            ? 'Saving...'
+                            : subject
+                              ? 'Update Subject'
+                              : 'Create Subject'
+                    }}</span>
+                </button>
             </div>
-        </Transition>
-    </Teleport>
+        </form>
+    </BaseModal>
 </template>
diff --git a/resources/js/components/admin/MobileSideBar.vue b/resources/js/components/admin/MobileSideBar.vue
index daeba51b..6098820b 100644
--- a/resources/js/components/admin/MobileSideBar.vue
+++ b/resources/js/components/admin/MobileSideBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import { X, Database } from 'lucide-vue-next';
 import { usePermissions } from '@/lib/usePermissions';
 
@@ -10,7 +10,14 @@ defineProps({
     isOpen: Boolean,
 });
 
-defineEmits(['close']);
+const emit = defineEmits(['close']);
+
+const handleClearCache = () => {
+    if (confirm('Are you sure you want to clear all cache?')) {
+        emit('close');
+        router.post('/admin/clear-cache');
+    }
+};
 </script>
 
 <template>
@@ -58,16 +65,15 @@ defineEmits(['close']);
             </div>
 
             <div class="space-y-3">
-                <Link
+                <button
                     v-if="can('clear cache')"
-                    method="post"
-                    href="/admin/clear-cache"
-                    as="button"
+                    type="button"
+                    @click="handleClearCache"
                     class="group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 hover:bg-rose-50/60 dark:text-rose-400 dark:hover:bg-rose-500/10"
                 >
                     <Database class="h-4 w-4" />
-                    Clear Cache
-                </Link>
+                    <span>Clear Cache</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/resources/js/components/admin/SubjectCard.vue b/resources/js/components/admin/SubjectCard.vue
index 5af5744e..4d04132f 100644
--- a/resources/js/components/admin/SubjectCard.vue
+++ b/resources/js/components/admin/SubjectCard.vue
@@ -1,19 +1,8 @@
 <script setup lang="ts">
 import { router } from '@inertiajs/vue3';
-
-import {
-    Search,
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-    Pencil,
-    Trash2,
-} from 'lucide-vue-next';
+import { Pencil, Trash2 } from 'lucide-vue-next';
+import StatusBadge from '@/components/StatusBadge.vue';
+import SubjectIcon from '@/components/SubjectIcon.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
@@ -26,18 +15,6 @@ const emit = defineEmits<{
     (e: 'edit', subject: any): void;
 }>();
 
-const icons = {
-    Atom,
-    FlaskConical,
-    Dna,
-    Sigma,
-    Laptop,
-    BookOpen,
-    PenTool,
-    BarChart3,
-    Search,
-};
-
 const handleDelete = () => {
     if (confirm('Are you sure you want to delete this Subject?')) {
         router.delete(`/admin/subjects/${subject.id}`);
@@ -59,9 +36,9 @@ const handleDelete = () => {
                     'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-black/5 sm:h-10 sm:w-10 dark:border-white/10',
                 ]"
             >
-                <component
-                    :is="icons[subject.icon] || BookOpen"
-                    class="h-4.5 w-4.5 stroke-[2]"
+                <SubjectIcon
+                    :name="subject.icon"
+                    class-name="h-4.5 w-4.5 stroke-[2]"
                 />
             </div>
 
@@ -73,19 +50,11 @@ const handleDelete = () => {
                 </h3>
 
                 <!-- Course Badge (HSC / SSC) -->
-                <span
+                <StatusBadge
                     v-if="subject.course"
-                    :class="[
-                        subject.course.toUpperCase() === 'SSC'
-                            ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30'
-                            : subject.course.toUpperCase() === 'HSC'
-                              ? 'bg-indigo-50 text-indigo-700 ring-indigo-700/10 dark:bg-indigo-500/10 dark:text-indigo-400 dark:ring-indigo-500/30'
-                              : 'bg-slate-100 text-slate-600 ring-slate-500/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-500/20',
-                        'inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold uppercase ring-1 ring-inset',
-                    ]"
-                >
-                    {{ subject.course }}
-                </span>
+                    :status="subject.course"
+                    size="xs"
+                />
             </div>
         </div>
 
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index b4482ea7..735cde9b 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -3,6 +3,7 @@ import { Link, router, usePage } from '@inertiajs/vue3';
 import { LogIn, Pencil, Trash2, Ban } from 'lucide-vue-next';
 import { ref } from 'vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
@@ -29,19 +30,6 @@ const openBanModal = () => {
     isBanModalOpen.value = true;
 };
 
-const getRoleBadgeStyles = (role: string) => {
-    switch (role) {
-        case 'admin':
-            return 'bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/30';
-        case 'manager':
-            return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30';
-        case 'editor':
-            return 'bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-500/10 dark:text-purple-400 dark:ring-purple-500/30';
-        default:
-            return 'bg-slate-100 text-slate-600 ring-slate-500/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-500/20';
-    }
-};
-
 const loginAsUser = (targetUser: any) => {
     if (
         confirm(
@@ -100,21 +88,19 @@ const deleteUser = (id: number) => {
                         You
                     </span>
 
-                    <span
-                        class="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold uppercase ring-1 ring-inset"
-                        :class="getRoleBadgeStyles(user.roles?.[0]?.name)"
-                    >
-                        {{ user.roles?.[0]?.name ?? 'student' }}
-                    </span>
+                    <StatusBadge
+                        :status="user.roles?.[0]?.name ?? 'student'"
+                        size="xs"
+                    />
 
-                    <span
+                    <StatusBadge
                         v-if="isBanned(user)"
-                        class="inline-flex items-center gap-1 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] font-bold text-rose-700 uppercase ring-1 ring-rose-600/20 ring-inset dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/30"
+                        variant="rose"
+                        label="Suspended"
+                        :icon="Ban"
+                        size="xs"
                         title="Suspended from community"
-                    >
-                        <Ban class="h-2.5 w-2.5" />
-                        Suspended
-                    </span>
+                    />
                 </div>
 
                 <p
diff --git a/resources/js/components/forum/ForumVoteButtons.vue b/resources/js/components/forum/ForumVoteButtons.vue
index 85415709..6840b8d4 100644
--- a/resources/js/components/forum/ForumVoteButtons.vue
+++ b/resources/js/components/forum/ForumVoteButtons.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { router, usePage } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 import { ArrowBigUp, ArrowBigDown } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import AuthModal from '@/components/AuthModal.vue';
+import { useAuth } from '@/lib/useAuth';
 
 const props = withDefaults(
     defineProps<{
@@ -34,10 +35,8 @@ const emit = defineEmits<{
     ): void;
 }>();
 
-const page = usePage();
-const user = computed(() => (page.props.auth as any)?.user);
+const { user, requireAuth, showAuthModal, authModalMessage } = useAuth();
 const isUserBanned = computed(() => Boolean(user.value?.is_banned));
-const showAuthModal = ref(false);
 
 const upvotes = ref(props.initialUpvotes || 0);
 const downvotes = ref(props.initialDownvotes || 0);
@@ -67,9 +66,7 @@ watch(
 const isVoting = ref(false);
 
 const vote = (value: 1 | -1) => {
-    if (!user.value) {
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to vote on forum posts and answers.')) {
         return;
     }
 
@@ -241,10 +238,6 @@ const vote = (value: 1 | -1) => {
             </span>
         </button>
 
-        <AuthModal
-            v-model="showAuthModal"
-            title="Sign in required"
-            message="Please sign in to vote on forum posts and answers."
-        />
+        <AuthModal v-model="showAuthModal" :message="authModalMessage" />
     </div>
 </template>
diff --git a/resources/js/lib/echo.ts b/resources/js/lib/echo.ts
index ac3d6343..6e135423 100644
--- a/resources/js/lib/echo.ts
+++ b/resources/js/lib/echo.ts
@@ -1,5 +1,6 @@
 import Echo from 'laravel-echo';
 import Pusher from 'pusher-js';
+import { getCsrfToken } from '@/lib/useCsrf';
 
 declare global {
     interface Window {
@@ -33,12 +34,7 @@ export function getEcho(key?: string, cluster?: string): Echo<'pusher'> | null {
         authEndpoint: '/broadcasting/auth',
         auth: {
             headers: {
-                'X-CSRF-TOKEN':
-                    (
-                        document.querySelector(
-                            'meta[name="csrf-token"]',
-                        ) as HTMLMetaElement
-                    )?.content || '',
+                'X-CSRF-TOKEN': getCsrfToken(),
                 'X-Requested-With': 'XMLHttpRequest',
             },
         },
diff --git a/resources/js/lib/subjectIcons.ts b/resources/js/lib/subjectIcons.ts
new file mode 100644
index 00000000..928efdd6
--- /dev/null
+++ b/resources/js/lib/subjectIcons.ts
@@ -0,0 +1,42 @@
+import {
+    Atom,
+    BarChart3,
+    BookOpen,
+    Dna,
+    FlaskConical,
+    Laptop,
+    PenTool,
+    Search,
+    Sigma,
+} from 'lucide-vue-next';
+import type { Component } from 'vue';
+
+export const SUBJECT_ICONS: Record<string, Component> = {
+    Atom,
+    FlaskConical,
+    Dna,
+    Sigma,
+    Laptop,
+    BookOpen,
+    PenTool,
+    BarChart3,
+    Search,
+};
+
+export const DEFAULT_SUBJECT_ICON = BookOpen;
+
+export function getSubjectIcon(name?: string | null): Component {
+    if (!name || !(name in SUBJECT_ICONS)) {
+        return DEFAULT_SUBJECT_ICON;
+    }
+
+    return SUBJECT_ICONS[name];
+}
+
+export const SUBJECT_ICON_LIST = Object.entries(SUBJECT_ICONS).map(
+    ([key, component]) => ({
+        key,
+        name: key,
+        component,
+    }),
+);
diff --git a/resources/js/lib/useAuth.ts b/resources/js/lib/useAuth.ts
new file mode 100644
index 00000000..946e8d17
--- /dev/null
+++ b/resources/js/lib/useAuth.ts
@@ -0,0 +1,58 @@
+import { usePage } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+const showAuthModal = ref(false);
+const authModalMessage = ref('Please sign in to continue.');
+
+export function useAuth() {
+    const page = usePage();
+
+    const user = computed(() => (page.props.auth as any)?.user || null);
+    const isAuthenticated = computed(() => !!user.value);
+    const userId = computed<number | null>(() => user.value?.id ?? null);
+    const permissions = computed<string[]>(
+        () => (page.props.auth as any)?.permissions || [],
+    );
+
+    const can = (permission: string) => {
+        return permissions.value.includes(permission);
+    };
+
+    /**
+     * Executes action if authenticated; otherwise opens AuthModal with the specified message.
+     * Returns true if user is authenticated, false otherwise.
+     */
+    const requireAuth = (
+        message = 'Please sign in to perform this action.',
+        action?: () => void,
+    ): boolean => {
+        if (!isAuthenticated.value) {
+            authModalMessage.value = message;
+            showAuthModal.value = true;
+
+            return false;
+        }
+
+        if (action) {
+            action();
+        }
+
+        return true;
+    };
+
+    const closeAuthModal = () => {
+        showAuthModal.value = false;
+    };
+
+    return {
+        user,
+        isAuthenticated,
+        userId,
+        permissions,
+        can,
+        showAuthModal,
+        authModalMessage,
+        requireAuth,
+        closeAuthModal,
+    };
+}
diff --git a/resources/js/lib/useCsrf.ts b/resources/js/lib/useCsrf.ts
new file mode 100644
index 00000000..efcf7ce8
--- /dev/null
+++ b/resources/js/lib/useCsrf.ts
@@ -0,0 +1,17 @@
+export function getCsrfToken(): string {
+    if (typeof document === 'undefined') {
+        return '';
+    }
+
+    const meta = document.querySelector(
+        'meta[name="csrf-token"]',
+    ) as HTMLMetaElement | null;
+
+    if (meta?.content) {
+        return meta.content;
+    }
+
+    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
+
+    return match ? decodeURIComponent(match[1]) : '';
+}
diff --git a/resources/js/lib/useDate.ts b/resources/js/lib/useDate.ts
new file mode 100644
index 00000000..c74aca0f
--- /dev/null
+++ b/resources/js/lib/useDate.ts
@@ -0,0 +1,146 @@
+export function formatTimeAgo(
+    dateInput?: string | number | Date | null,
+): string {
+    if (!dateInput) {
+        return '';
+    }
+
+    const date =
+        typeof dateInput === 'object' ? dateInput : new Date(dateInput);
+
+    if (isNaN(date.getTime())) {
+        return typeof dateInput === 'string' ? dateInput : '';
+    }
+
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (seconds < 60) {
+        return 'just now';
+    }
+
+    const minutes = Math.floor(seconds / 60);
+
+    if (minutes < 60) {
+        return `${minutes}m ago`;
+    }
+
+    const hours = Math.floor(minutes / 60);
+
+    if (hours < 24) {
+        return `${hours}h ago`;
+    }
+
+    const days = Math.floor(hours / 24);
+
+    if (days < 30) {
+        return `${days}d ago`;
+    }
+
+    const months = Math.floor(days / 30);
+
+    if (months < 12) {
+        return `${months}mo ago`;
+    }
+
+    const years = Math.floor(days / 365);
+
+    return `${years}y ago`;
+}
+
+export function formatDate(
+    dateInput?: string | number | Date | null,
+    options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
+): string {
+    if (!dateInput) {
+        return '';
+    }
+
+    const date =
+        typeof dateInput === 'object' ? dateInput : new Date(dateInput);
+
+    if (isNaN(date.getTime())) {
+        return '';
+    }
+
+    return date.toLocaleDateString('en-US', options);
+}
+
+export function formatDateTime(
+    dateInput?: string | number | Date | null,
+): string {
+    if (!dateInput) {
+        return '';
+    }
+
+    const date =
+        typeof dateInput === 'object' ? dateInput : new Date(dateInput);
+
+    if (isNaN(date.getTime())) {
+        return '';
+    }
+
+    return date.toLocaleString([], {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+
+export function formatTime(dateInput?: string | number | Date | null): string {
+    if (!dateInput) {
+        return '';
+    }
+
+    const date =
+        typeof dateInput === 'object' ? dateInput : new Date(dateInput);
+
+    if (isNaN(date.getTime())) {
+        return '';
+    }
+
+    return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+
+export function formatDateDivider(
+    dateInput?: string | number | Date | null,
+): string {
+    if (!dateInput) {
+        return '';
+    }
+
+    const date =
+        typeof dateInput === 'object' ? dateInput : new Date(dateInput);
+
+    if (isNaN(date.getTime())) {
+        return '';
+    }
+
+    const today = new Date();
+    const yesterday = new Date();
+    yesterday.setDate(today.getDate() - 1);
+
+    if (date.toDateString() === today.toDateString()) {
+        return 'Today';
+    }
+
+    if (date.toDateString() === yesterday.toDateString()) {
+        return 'Yesterday';
+    }
+
+    return date.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year:
+            date.getFullYear() !== today.getFullYear() ? 'numeric' : undefined,
+    });
+}
diff --git a/resources/js/pages/Blog/Index.vue b/resources/js/pages/Blog/Index.vue
index fd742e0b..551740b3 100644
--- a/resources/js/pages/Blog/Index.vue
+++ b/resources/js/pages/Blog/Index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { router, Link, Head } from '@inertiajs/vue3';
+import { router, Head } from '@inertiajs/vue3';
 import { Search, X, ArrowRight, AlertTriangle } from 'lucide-vue-next';
 import { ref } from 'vue';
 import BlogCard from '@/components/BlogCard.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
 
 defineProps({
     blogs: Object,
@@ -102,90 +104,31 @@ const clearSearch = () => {
             <BlogCard v-for="blog in blogs.data" :key="blog.id" :blog="blog" />
         </div>
 
-        <div
+        <EmptyState
             v-else
-            class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-16 text-center dark:border-gray-700 dark:bg-gray-950"
+            :icon="AlertTriangle"
+            variant="dashed"
+            title="আপনার অনুসন্ধানের সাথে মিল থাকা কোনো আর্টিকেল পাওয়া যায়নি।"
+            :description="`&quot;${searchQuery}&quot;-এর সাথে মিল থাকা কোনো আর্টিকেল পাওয়া যায়নি। বানান যাচাই করুন অথবা অনুসন্ধান মুছে আবার চেষ্টা করুন।`"
         >
-            <div
-                class="mb-4 rounded-xl bg-white p-3 text-slate-400 shadow-sm dark:bg-gray-900 dark:text-gray-500"
-            >
-                <AlertTriangle class="h-8 w-8" />
-            </div>
-            <h3 class="text-lg font-bold text-slate-900 dark:text-gray-100">
-                আপনার অনুসন্ধানের সাথে মিল থাকা কোনো আর্টিকেল পাওয়া যায়নি।
-            </h3>
-            <p class="mt-1 max-w-sm text-sm text-slate-500 dark:text-gray-400">
-                "{{ searchQuery }}"-এর সাথে মিল থাকা কোনো আর্টিকেল পাওয়া
-                যায়নি। বানান যাচাই করুন অথবা অনুসন্ধান মুছে আবার চেষ্টা করুন।
-            </p>
             <button
+                type="button"
                 @click="clearSearch"
-                class="mt-5 inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-[0.98]"
+                class="cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
             >
                 সব আর্টিকেল দেখুন
             </button>
-        </div>
+        </EmptyState>
 
         <div
             v-if="blogs.links && blogs.links.length > 3"
             class="mt-16 border-t border-slate-100 pt-6 dark:border-gray-800"
         >
-            <div class="hidden sm:flex sm:flex-wrap sm:justify-center sm:gap-2">
-                <div
-                    class="hidden sm:flex sm:flex-wrap sm:justify-center sm:gap-2"
-                >
-                    <component
-                        :is="link.url ? Link : 'span'"
-                        v-for="(link, index) in blogs.links"
-                        :key="index"
-                        :href="link.url"
-                        class="rounded-xl px-4 py-2 text-sm font-medium transition"
-                        :class="{
-                            'bg-indigo-600 text-white shadow-sm': link.active,
-                            'border border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:bg-gray-800':
-                                !link.active && link.url,
-                            'cursor-not-allowed border border-slate-100 bg-slate-50/50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600':
-                                !link.url,
-                        }"
-                    >
-                        <span v-html="link.label"></span>
-                    </component>
-                </div>
-            </div>
-
-            <div class="flex items-center justify-between px-2 sm:hidden">
-                <component
-                    :is="blogs.links[0].url ? Link : 'span'"
-                    :href="blogs.links[0].url"
-                    class="flex-1 rounded-xl border px-4 py-3 text-center text-sm font-semibold transition"
-                    :class="
-                        blogs.links[0].url
-                            ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
-                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-600'
-                    "
-                >
-                    &larr; Previous
-                </component>
-                <div
-                    class="px-4 text-xs font-semibold text-slate-500 dark:text-gray-400"
-                >
-                    Page {{ blogs.current_page }}
-                </div>
-                <component
-                    :is="
-                        blogs.links[blogs.links.length - 1].url ? Link : 'span'
-                    "
-                    :href="blogs.links[blogs.links.length - 1].url"
-                    class="flex-1 rounded-xl border px-4 py-3 text-center text-sm font-semibold transition"
-                    :class="
-                        blogs.links[blogs.links.length - 1].url
-                            ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
-                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-600'
-                    "
-                >
-                    Next &rarr;
-                </component>
-            </div>
+            <Pagination
+                :links="blogs.links"
+                :current-page="blogs.current_page"
+                :last-page="blogs.last_page"
+            />
         </div>
     </main>
 </template>
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index a96d4ccc..61cb3c41 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -15,8 +15,10 @@ import {
     Loader2,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
+import AuthModal from '@/components/AuthModal.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
+import { useAuth } from '@/lib/useAuth';
 
 const props = defineProps({
     blog: {
@@ -42,13 +44,16 @@ const props = defineProps({
 });
 
 const page = usePage();
-const currentUser = computed(() => page.props.auth?.user);
+const {
+    user: currentUser,
+    requireAuth,
+    showAuthModal,
+    authModalMessage,
+} = useAuth();
 const canAccessAdmin = computed(() => page.props.auth?.can_access_admin);
 
-// Auth & Reactors modal states
-const showAuthModal = ref(false);
+// Reactors modal state
 const showReactorsModal = ref(false);
-const authModalMessage = ref('Please sign in to react to this article.');
 
 // Optimistic Reaction state
 const localIsReacted = ref(props.isReacted);
@@ -70,10 +75,7 @@ watch(
 );
 
 const handleReactionClick = () => {
-    if (!currentUser.value) {
-        authModalMessage.value = 'Please sign in to react to this article.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to react to this article.')) {
         return;
     }
 
@@ -124,19 +126,15 @@ const hasUserCommented = computed(() => {
 });
 
 const handleCommentInputClick = () => {
-    if (!currentUser.value) {
-        authModalMessage.value =
-            'Please sign in to join the conversation and leave a comment.';
-        showAuthModal.value = true;
-    }
+    requireAuth('Please sign in to join the conversation and leave a comment.');
 };
 
 const submitComment = () => {
-    if (!currentUser.value) {
-        authModalMessage.value =
-            'Please sign in to join the conversation and leave a comment.';
-        showAuthModal.value = true;
-
+    if (
+        !requireAuth(
+            'Please sign in to join the conversation and leave a comment.',
+        )
+    ) {
         return;
     }
 
@@ -786,58 +784,7 @@ const formatTimeAgo = (dateStr: string) => {
     </Teleport>
 
     <!-- Sign In Required Modal -->
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="showAuthModal"
-                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
-            >
-                <div
-                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <button
-                        @click="showAuthModal = false"
-                        class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-
-                    <h3
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Sign in required
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        {{ authModalMessage }}
-                    </p>
-
-                    <div class="mt-4 flex items-center gap-2">
-                        <Link
-                            :href="`/login?redirect=${encodeURIComponent($page.url)}`"
-                            @click="showAuthModal = false"
-                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <LogIn class="h-3.5 w-3.5" />
-                            <span>Sign in</span>
-                        </Link>
-                        <button
-                            @click="showAuthModal = false"
-                            class="cursor-pointer rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+    <AuthModal v-model="showAuthModal" :message="authModalMessage" />
 </template>
 
 <style scoped>
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 55b607ad..85f882a0 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, usePage, router } from '@inertiajs/vue3';
+import { Head, Link, router } from '@inertiajs/vue3';
 import {
     Send,
     Trash2,
@@ -23,13 +23,16 @@ import {
     Users,
 } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import AuthModal from '@/components/AuthModal.vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
-import { usePermissions } from '@/lib/usePermissions';
+import { useAuth } from '@/lib/useAuth';
+import { getCsrfToken } from '@/lib/useCsrf';
+import { formatDateDivider, formatTime } from '@/lib/useDate';
 
 interface ChatUser {
     id: number;
@@ -96,9 +99,13 @@ const props = defineProps<{
     };
 }>();
 
-const page = usePage();
-const { can } = usePermissions();
-const currentUser = computed(() => page.props.auth?.user);
+const {
+    user: currentUser,
+    can,
+    requireAuth,
+    showAuthModal,
+    authModalMessage,
+} = useAuth();
 
 const chatChannelName = computed(
     () => props.chatState.channel_name || 'global-chat',
@@ -846,9 +853,7 @@ const sendMessage = async () => {
     isSending.value = true;
 
     try {
-        const token = (
-            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
-        )?.content;
+        const token = getCsrfToken();
         const replyToId = activeReplyTo.value ? activeReplyTo.value.id : null;
         const res = await fetch('/api/chat/messages', {
             method: 'POST',
@@ -906,9 +911,7 @@ const deleteMessage = async (messageId: number) => {
     }
 
     try {
-        const token = (
-            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
-        )?.content;
+        const token = getCsrfToken();
         const res = await fetch(`/api/chat/messages/${messageId}`, {
             method: 'DELETE',
             headers: {
@@ -953,9 +956,7 @@ const toggleReactionPicker = (messageId: number) => {
 };
 
 const reactToMessage = async (message: ChatMessageItem, emoji: string) => {
-    if (!currentUser.value) {
-        alert('Please sign in to react to messages.');
-
+    if (!requireAuth('Please sign in to react to messages.')) {
         return;
     }
 
@@ -1008,9 +1009,7 @@ const reactToMessage = async (message: ChatMessageItem, emoji: string) => {
     }
 
     try {
-        const token = (
-            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
-        )?.content;
+        const token = getCsrfToken();
         const res = await fetch(`/api/chat/messages/${message.id}/reactions`, {
             method: 'POST',
             headers: {
@@ -1125,9 +1124,7 @@ const reportReasons = [
 const openReportModal = (message: ChatMessageItem) => {
     closeMobileActions();
 
-    if (!currentUser.value) {
-        alert('Please sign in to report a message.');
-
+    if (!requireAuth('Please sign in to report a message.')) {
         return;
     }
 
@@ -1154,9 +1151,7 @@ const submitReport = async () => {
     reportErrorMessage.value = null;
 
     try {
-        const token = (
-            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
-        )?.content;
+        const token = getCsrfToken();
 
         const res = await fetch('/api/chat/reports', {
             method: 'POST',
@@ -1260,47 +1255,6 @@ const parseMessageSegments = (content: string): MessageSegment[] => {
     return segments;
 };
 
-const formatTime = (isoString: string) => {
-    try {
-        const date = new Date(isoString);
-
-        return date.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    } catch {
-        return '';
-    }
-};
-
-const formatDateDivider = (isoString: string) => {
-    try {
-        const date = new Date(isoString);
-        const today = new Date();
-        const yesterday = new Date();
-        yesterday.setDate(today.getDate() - 1);
-
-        if (date.toDateString() === today.toDateString()) {
-            return 'Today';
-        }
-
-        if (date.toDateString() === yesterday.toDateString()) {
-            return 'Yesterday';
-        }
-
-        return date.toLocaleDateString(undefined, {
-            month: 'short',
-            day: 'numeric',
-            year:
-                date.getFullYear() !== today.getFullYear()
-                    ? 'numeric'
-                    : undefined,
-        });
-    } catch {
-        return '';
-    }
-};
-
 const shouldShowDateDivider = (index: number) => {
     if (index === 0) {
         return true;
@@ -2810,5 +2764,7 @@ onUnmounted(() => {
                 </div>
             </div>
         </div>
+
+        <AuthModal v-model="showAuthModal" :message="authModalMessage" />
     </main>
 </template>
diff --git a/resources/js/pages/Forum/Index.vue b/resources/js/pages/Forum/Index.vue
index 41f417bd..93627115 100644
--- a/resources/js/pages/Forum/Index.vue
+++ b/resources/js/pages/Forum/Index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, router, usePage } from '@inertiajs/vue3';
+import { Head, Link, router } from '@inertiajs/vue3';
 import {
     Search,
     X,
@@ -14,8 +14,13 @@ import {
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import AuthModal from '@/components/AuthModal.vue';
+import BaseModal from '@/components/BaseModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
 import ForumVoteButtons from '@/components/forum/ForumVoteButtons.vue';
+import Pagination from '@/components/Pagination.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
+import { useAuth } from '@/lib/useAuth';
+import { formatTimeAgo } from '@/lib/useDate';
 
 interface User {
     id: number;
@@ -95,10 +100,8 @@ const props = defineProps<{
     disabledReason?: string;
 }>();
 
-const page = usePage();
-const user = computed(() => (page.props.auth as any)?.user);
+const { user, requireAuth, showAuthModal, authModalMessage } = useAuth();
 
-const showAuthModal = ref(false);
 const showFilterModal = ref(false);
 const searchQuery = ref(props.filters.search || '');
 
@@ -351,54 +354,12 @@ const handleAskQuestion = () => {
         return;
     }
 
-    if (!user.value) {
-        showAuthModal.value = true;
-    } else {
+    if (requireAuth('Please sign in to ask a question in the forum.')) {
         router.visit('/forum/ask');
     }
 };
 
-function timeAgo(dateString?: string): string {
-    if (!dateString) {
-        return '';
-    }
-
-    const date = new Date(dateString);
-    const now = new Date();
-    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-
-    if (seconds < 60) {
-        return 'just now';
-    }
-
-    const minutes = Math.floor(seconds / 60);
-
-    if (minutes < 60) {
-        return `${minutes}m ago`;
-    }
-
-    const hours = Math.floor(minutes / 60);
-
-    if (hours < 24) {
-        return `${hours}h ago`;
-    }
-
-    const days = Math.floor(hours / 24);
-
-    if (days < 30) {
-        return `${days}d ago`;
-    }
-
-    const months = Math.floor(days / 30);
-
-    if (months < 12) {
-        return `${months}mo ago`;
-    }
-
-    const years = Math.floor(days / 365);
-
-    return `${years}y ago`;
-}
+const timeAgo = formatTimeAgo;
 </script>
 
 <template>
@@ -844,30 +805,19 @@ function timeAgo(dateString?: string): string {
         </div>
 
         <!-- Empty State -->
-        <div
+        <EmptyState
             v-else
-            class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-white p-12 text-center shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+            :icon="Search"
+            variant="card"
+            title="No questions found"
+            description="We couldn't find any questions matching your current filters. Try changing your search keywords or resetting filters."
         >
-            <div
-                class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400 dark:bg-gray-800 dark:text-gray-500"
-            >
-                <Search class="h-6 w-6" />
-            </div>
-            <h3
-                class="mt-4 text-base font-bold text-slate-900 dark:text-gray-100"
-            >
-                No questions found
-            </h3>
-            <p class="mt-1 max-w-sm text-xs text-slate-500 dark:text-gray-400">
-                We couldn't find any questions matching your current filters.
-                Try changing your search keywords or resetting filters.
-            </p>
-            <div class="mt-6 flex items-center gap-3">
+            <div class="flex items-center gap-3">
                 <button
                     v-if="searchQuery || activeFilterCount > 0"
                     type="button"
                     @click="resetAllFilters"
-                    class="rounded-xl border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                    class="cursor-pointer rounded-xl border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
                 >
                     Reset Filters
                 </button>
@@ -875,7 +825,7 @@ function timeAgo(dateString?: string): string {
                     type="button"
                     @click="handleAskQuestion"
                     :disabled="props.postingEnabled === false || isUserBanned"
-                    class="inline-flex items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-semibold shadow-xs transition"
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-semibold shadow-xs transition"
                     :class="[
                         props.postingEnabled === false || isUserBanned
                             ? 'cursor-not-allowed bg-slate-200 text-slate-500 dark:bg-gray-800 dark:text-gray-500'
@@ -896,280 +846,225 @@ function timeAgo(dateString?: string): string {
                     }}</span>
                 </button>
             </div>
-        </div>
+        </EmptyState>
 
         <!-- Pagination -->
-        <div
-            v-if="posts.links && posts.links.length > 3"
-            class="mt-8 flex items-center justify-center gap-1"
-        >
-            <Component
-                :is="link.url ? Link : 'span'"
-                v-for="(link, i) in posts.links"
-                :key="i"
-                :href="link.url || '#'"
-                preserve-scroll
-                class="flex h-8 min-w-[32px] items-center justify-center rounded-lg px-2 text-xs font-semibold transition"
-                :class="[
-                    link.active
-                        ? 'bg-indigo-600 text-white'
-                        : link.url
-                          ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'
-                          : 'cursor-not-allowed text-slate-400 opacity-40 dark:text-gray-600',
-                ]"
-            >
-                <span v-html="link.label"></span>
-            </Component>
-        </div>
+        <Pagination
+            :links="posts.links"
+            :current-page="posts.current_page"
+            :last-page="posts.last_page"
+            class="mt-8"
+        />
 
         <!-- Filter & Sort Modal -->
-        <Teleport to="body">
-            <Transition
-                enter-active-class="transition duration-150 ease-out"
-                enter-from-class="opacity-0 scale-95"
-                enter-to-class="opacity-100 scale-100"
-                leave-active-class="transition duration-100 ease-in"
-                leave-from-class="opacity-100 scale-100"
-                leave-to-class="opacity-0 scale-95"
-            >
-                <div
-                    v-if="showFilterModal"
-                    class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/60"
-                    @click.self="showFilterModal = false"
-                >
+        <BaseModal
+            :is-open="showFilterModal"
+            max-width="md"
+            position="center"
+            @close="showFilterModal = false"
+        >
+            <template #header>
+                <div class="flex items-center gap-2">
                     <div
-                        class="relative w-full max-w-md rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+                        class="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
                     >
-                        <!-- Modal Header -->
-                        <div
-                            class="mb-5 flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-gray-800"
+                        <SlidersHorizontal class="h-4 w-4" />
+                    </div>
+                    <h3
+                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        Filter & Sort Questions
+                    </h3>
+                </div>
+            </template>
+
+            <!-- Modal Form Fields -->
+            <div class="space-y-4.5 p-5">
+                <!-- 1. Sort Order -->
+                <div>
+                    <label
+                        class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                    >
+                        Sort Order
+                    </label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button
+                            v-for="sort in sortOptions"
+                            :key="sort.key"
+                            type="button"
+                            @click="draftSort = sort.key"
+                            class="flex items-center justify-between rounded-xl border px-3 py-2 text-xs font-semibold transition"
+                            :class="[
+                                draftSort === sort.key
+                                    ? 'border-indigo-600 bg-indigo-50/70 text-indigo-700 ring-1 ring-indigo-600/30 dark:border-indigo-500 dark:bg-indigo-950/50 dark:text-indigo-300'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
                         >
-                            <div class="flex items-center gap-2">
-                                <div
-                                    class="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                                >
-                                    <SlidersHorizontal class="h-4 w-4" />
-                                </div>
-                                <h3
-                                    class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                                >
-                                    Filter & Sort Questions
-                                </h3>
-                            </div>
-
-                            <button
-                                type="button"
-                                @click="showFilterModal = false"
-                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                                aria-label="Close filter modal"
-                            >
-                                <X class="h-4 w-4" />
-                            </button>
-                        </div>
+                            <span>{{ sort.label }}</span>
+                            <Check
+                                v-if="draftSort === sort.key"
+                                class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400"
+                            />
+                        </button>
+                    </div>
+                </div>
 
-                        <!-- Modal Form Fields -->
-                        <div class="space-y-4.5">
-                            <!-- 1. Sort Order -->
-                            <div>
-                                <label
-                                    class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                                >
-                                    Sort Order
-                                </label>
-                                <div class="grid grid-cols-3 gap-2">
-                                    <button
-                                        v-for="sort in sortOptions"
-                                        :key="sort.key"
-                                        type="button"
-                                        @click="draftSort = sort.key"
-                                        class="flex items-center justify-between rounded-xl border px-3 py-2 text-xs font-semibold transition"
-                                        :class="[
-                                            draftSort === sort.key
-                                                ? 'border-indigo-600 bg-indigo-50/70 text-indigo-700 ring-1 ring-indigo-600/30 dark:border-indigo-500 dark:bg-indigo-950/50 dark:text-indigo-300'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
-                                        ]"
-                                    >
-                                        <span>{{ sort.label }}</span>
-                                        <Check
-                                            v-if="draftSort === sort.key"
-                                            class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400"
-                                        />
-                                    </button>
-                                </div>
-                            </div>
+                <!-- 2. Answer Status (Independent from Sort) -->
+                <div>
+                    <label
+                        class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                    >
+                        Answer Status
+                    </label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button
+                            v-for="status in statusOptions"
+                            :key="status.key"
+                            type="button"
+                            @click="draftStatus = status.key"
+                            class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
+                            :class="[
+                                draftStatus === status.key
+                                    ? 'border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
+                        >
+                            {{ status.label }}
+                        </button>
+                    </div>
+                </div>
 
-                            <!-- 2. Answer Status (Independent from Sort) -->
-                            <div>
-                                <label
-                                    class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                                >
-                                    Answer Status
-                                </label>
-                                <div class="grid grid-cols-3 gap-2">
-                                    <button
-                                        v-for="status in statusOptions"
-                                        :key="status.key"
-                                        type="button"
-                                        @click="draftStatus = status.key"
-                                        class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
-                                        :class="[
-                                            draftStatus === status.key
-                                                ? 'border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
-                                        ]"
-                                    >
-                                        {{ status.label }}
-                                    </button>
-                                </div>
-                            </div>
+                <!-- 3. Curriculum -->
+                <div>
+                    <label
+                        class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                    >
+                        Curriculum
+                    </label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button
+                            type="button"
+                            @click="draftCurriculum = ''"
+                            class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
+                            :class="[
+                                !draftCurriculum
+                                    ? 'border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
+                        >
+                            All
+                        </button>
+                        <button
+                            type="button"
+                            @click="draftCurriculum = 'hsc'"
+                            class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
+                            :class="[
+                                draftCurriculum === 'hsc'
+                                    ? 'border-indigo-600 bg-indigo-600 text-white'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
+                        >
+                            HSC
+                        </button>
+                        <button
+                            type="button"
+                            @click="draftCurriculum = 'ssc'"
+                            class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
+                            :class="[
+                                draftCurriculum === 'ssc'
+                                    ? 'border-emerald-600 bg-emerald-600 text-white'
+                                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
+                        >
+                            SSC
+                        </button>
+                    </div>
+                </div>
 
-                            <!-- 3. Curriculum -->
-                            <div>
-                                <label
-                                    class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                                >
-                                    Curriculum
-                                </label>
-                                <div class="grid grid-cols-3 gap-2">
-                                    <button
-                                        type="button"
-                                        @click="draftCurriculum = ''"
-                                        class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
-                                        :class="[
-                                            !draftCurriculum
-                                                ? 'border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
-                                        ]"
-                                    >
-                                        All
-                                    </button>
-                                    <button
-                                        type="button"
-                                        @click="draftCurriculum = 'hsc'"
-                                        class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
-                                        :class="[
-                                            draftCurriculum === 'hsc'
-                                                ? 'border-indigo-600 bg-indigo-600 text-white'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
-                                        ]"
-                                    >
-                                        HSC
-                                    </button>
-                                    <button
-                                        type="button"
-                                        @click="draftCurriculum = 'ssc'"
-                                        class="flex items-center justify-center rounded-xl border py-2 text-xs font-semibold transition"
-                                        :class="[
-                                            draftCurriculum === 'ssc'
-                                                ? 'border-emerald-600 bg-emerald-600 text-white'
-                                                : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800',
-                                        ]"
-                                    >
-                                        SSC
-                                    </button>
-                                </div>
-                            </div>
+                <!-- 4. Subject -->
+                <div>
+                    <label
+                        for="modal-subject-select"
+                        class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                    >
+                        Subject
+                    </label>
+                    <select
+                        id="modal-subject-select"
+                        v-model="draftSubjectId"
+                        class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-xs font-medium text-slate-900 shadow-2xs transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100"
+                    >
+                        <option value="">All Subjects</option>
+                        <option value="other">Other / General</option>
+                        <option
+                            v-for="subj in modalFilteredSubjects"
+                            :key="subj.id"
+                            :value="subj.id.toString()"
+                        >
+                            {{ subj.name }} ({{ subj.course.toUpperCase() }})
+                        </option>
+                    </select>
+                </div>
 
-                            <!-- 4. Subject -->
-                            <div>
-                                <label
-                                    for="modal-subject-select"
-                                    class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                                >
-                                    Subject
-                                </label>
-                                <select
-                                    id="modal-subject-select"
-                                    v-model="draftSubjectId"
-                                    class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-xs font-medium text-slate-900 shadow-2xs transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100"
-                                >
-                                    <option value="">All Subjects</option>
-                                    <option value="other">
-                                        Other / General
-                                    </option>
-                                    <option
-                                        v-for="subj in modalFilteredSubjects"
-                                        :key="subj.id"
-                                        :value="subj.id.toString()"
-                                    >
-                                        {{ subj.name }} ({{
-                                            subj.course.toUpperCase()
-                                        }})
-                                    </option>
-                                </select>
-                            </div>
+                <!-- 5. Chapter / Topic (If subject has nodes) -->
+                <div v-if="draftSubjectId && modalSubjectNodes.length > 0">
+                    <label
+                        for="modal-node-select"
+                        class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                    >
+                        Chapter / Topic
+                    </label>
+                    <select
+                        id="modal-node-select"
+                        v-model="draftNodeId"
+                        class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-xs font-medium text-slate-900 shadow-2xs transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100"
+                    >
+                        <option value="">All Chapters</option>
+                        <option
+                            v-for="node in modalSubjectNodes"
+                            :key="node.id"
+                            :value="node.id.toString()"
+                        >
+                            {{ node.name }}
+                        </option>
+                    </select>
+                </div>
+            </div>
 
-                            <!-- 5. Chapter / Topic (If subject has nodes) -->
-                            <div
-                                v-if="
-                                    draftSubjectId &&
-                                    modalSubjectNodes.length > 0
-                                "
-                            >
-                                <label
-                                    for="modal-node-select"
-                                    class="mb-2 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                                >
-                                    Chapter / Topic
-                                </label>
-                                <select
-                                    id="modal-node-select"
-                                    v-model="draftNodeId"
-                                    class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-xs font-medium text-slate-900 shadow-2xs transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100"
-                                >
-                                    <option value="">All Chapters</option>
-                                    <option
-                                        v-for="node in modalSubjectNodes"
-                                        :key="node.id"
-                                        :value="node.id.toString()"
-                                    >
-                                        {{ node.name }}
-                                    </option>
-                                </select>
-                            </div>
-                        </div>
+            <!-- Modal Actions Footer -->
+            <template #footer>
+                <div class="flex items-center justify-between">
+                    <button
+                        type="button"
+                        @click="handleResetModalFilters"
+                        class="inline-flex cursor-pointer items-center gap-1 text-xs font-semibold text-slate-500 hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    >
+                        <RotateCcw class="h-3.5 w-3.5" />
+                        <span>Reset</span>
+                    </button>
 
-                        <!-- Modal Actions Footer -->
-                        <div
-                            class="mt-6 flex items-center justify-between border-t border-slate-100 pt-4 dark:border-gray-800"
+                    <div class="flex items-center gap-2">
+                        <button
+                            type="button"
+                            @click="showFilterModal = false"
+                            class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
                         >
-                            <button
-                                type="button"
-                                @click="handleResetModalFilters"
-                                class="inline-flex cursor-pointer items-center gap-1 text-xs font-semibold text-slate-500 hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
-                            >
-                                <RotateCcw class="h-3.5 w-3.5" />
-                                <span>Reset</span>
-                            </button>
-
-                            <div class="flex items-center gap-2">
-                                <button
-                                    type="button"
-                                    @click="showFilterModal = false"
-                                    class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    type="button"
-                                    @click="handleApplyModalFilters"
-                                    class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-[0.98]"
-                                >
-                                    <span>Apply Filters</span>
-                                </button>
-                            </div>
-                        </div>
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            @click="handleApplyModalFilters"
+                            class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-[0.98]"
+                        >
+                            <span>Apply Filters</span>
+                        </button>
                     </div>
                 </div>
-            </Transition>
-        </Teleport>
+            </template>
+        </BaseModal>
 
         <!-- Auth Modal -->
-        <AuthModal
-            v-model="showAuthModal"
-            title="Sign in required"
-            message="Please sign in to ask a question in the forum."
-        />
+        <AuthModal v-model="showAuthModal" :message="authModalMessage" />
 
         <!-- PWA Install Prompt Modal -->
         <PwaInstallPrompt variant="modal" />
diff --git a/resources/js/pages/Forum/Show.vue b/resources/js/pages/Forum/Show.vue
index e0708ae0..4601e4a7 100644
--- a/resources/js/pages/Forum/Show.vue
+++ b/resources/js/pages/Forum/Show.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, router, useForm, usePage } from '@inertiajs/vue3';
+import { Head, Link, router, useForm } from '@inertiajs/vue3';
 import {
     ArrowLeft,
     ArrowBigUp,
@@ -28,8 +28,11 @@ import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
 import ForumVoteButtons from '@/components/forum/ForumVoteButtons.vue';
 import ImageViewerModal from '@/components/ImageViewerModal.vue';
+import Pagination from '@/components/Pagination.vue';
 import UserListItem from '@/components/UserListItem.vue';
-import { usePermissions } from '@/lib/usePermissions';
+import { useAuth } from '@/lib/useAuth';
+import { getCsrfToken } from '@/lib/useCsrf';
+import { formatTimeAgo } from '@/lib/useDate';
 
 interface User {
     id: number;
@@ -120,13 +123,9 @@ const props = defineProps<{
     disabledReason?: string;
 }>();
 
-const page = usePage();
-const user = computed(() => (page.props.auth as any)?.user);
+const { user, can, requireAuth, showAuthModal, authModalMessage } = useAuth();
 const isUserBanned = computed(() => Boolean(user.value?.is_banned));
 
-const showAuthModal = ref(false);
-const authModalMessage = ref('Please sign in to continue.');
-
 // Moderator Suspension Modal State
 const isBanModalOpen = ref(false);
 const selectedBanUser = ref<ChatBanUser | null>(null);
@@ -227,8 +226,6 @@ const deletePost = () => {
     }
 };
 
-const { can } = usePermissions();
-
 // Moderator Actions
 const toggleLock = () => {
     router.patch(
@@ -288,10 +285,7 @@ const openReportModal = (
     authorName: string | undefined,
     contentPreview: string,
 ) => {
-    if (!user.value) {
-        authModalMessage.value = 'Please sign in to report this content.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to report this content.')) {
         return;
     }
 
@@ -327,9 +321,7 @@ const submitReport = async () => {
     reportErrorMessage.value = null;
 
     try {
-        const token = (
-            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
-        )?.content;
+        const token = getCsrfToken();
 
         const endpoint =
             reportingTarget.value.type === 'post'
@@ -402,10 +394,7 @@ const removeAnswerImage = () => {
 };
 
 const submitAnswer = () => {
-    if (!user.value) {
-        authModalMessage.value = 'Please sign in to answer this question.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to answer this question.')) {
         return;
     }
 
@@ -439,10 +428,7 @@ const openReplyForm = (
         return;
     }
 
-    if (!user.value) {
-        authModalMessage.value = 'Please sign in to reply.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to reply.')) {
         return;
     }
 
@@ -502,10 +488,7 @@ const removeReplyImage = () => {
 };
 
 const submitReply = () => {
-    if (!user.value) {
-        authModalMessage.value = 'Please sign in to reply.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to reply.')) {
         return;
     }
 
@@ -518,47 +501,7 @@ const submitReply = () => {
     });
 };
 
-function timeAgo(dateString?: string): string {
-    if (!dateString) {
-        return '';
-    }
-
-    const date = new Date(dateString);
-    const now = new Date();
-    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-
-    if (seconds < 60) {
-        return 'just now';
-    }
-
-    const minutes = Math.floor(seconds / 60);
-
-    if (minutes < 60) {
-        return `${minutes}m ago`;
-    }
-
-    const hours = Math.floor(minutes / 60);
-
-    if (hours < 24) {
-        return `${hours}h ago`;
-    }
-
-    const days = Math.floor(hours / 24);
-
-    if (days < 30) {
-        return `${days}d ago`;
-    }
-
-    const months = Math.floor(days / 30);
-
-    if (months < 12) {
-        return `${months}mo ago`;
-    }
-
-    const years = Math.floor(days / 365);
-
-    return `${years}y ago`;
-}
+const timeAgo = formatTimeAgo;
 
 function parseMentions(
     content: string,
@@ -1503,24 +1446,11 @@ function parseMentions(
             v-if="answers.links && answers.links.length > 3"
             class="mb-10 border-t border-slate-100 pt-5 dark:border-gray-800"
         >
-            <div class="flex items-center justify-center gap-1.5">
-                <component
-                    :is="link.url ? Link : 'span'"
-                    v-for="(link, index) in answers.links"
-                    :key="index"
-                    :href="link.url"
-                    class="rounded-lg px-3 py-1.5 text-xs font-medium transition"
-                    :class="{
-                        'bg-indigo-600 text-white': link.active,
-                        'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300':
-                            !link.active && link.url,
-                        'cursor-not-allowed text-slate-300 dark:text-gray-700':
-                            !link.url,
-                    }"
-                >
-                    <span v-html="link.label"></span>
-                </component>
-            </div>
+            <Pagination
+                :links="answers.links"
+                :current-page="answers.current_page"
+                :last-page="answers.last_page"
+            />
         </div>
 
         <!-- Main Answer Submission Box -->
@@ -1678,7 +1608,9 @@ function parseMentions(
                 </p>
                 <button
                     type="button"
-                    @click="showAuthModal = true"
+                    @click="
+                        requireAuth('Please sign in to answer this question.')
+                    "
                     class="mt-4 inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700"
                 >
                     Sign In
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index b2648e19..b5db72b8 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
+import { Search } from 'lucide-vue-next';
 import { computed } from 'vue';
 import BlogCard from '@/components/BlogCard.vue';
 import CourseSwitcher from '@/components/CourseSwitcher.vue';
+import EmptyState from '@/components/EmptyState.vue';
 import HomeHeader from '@/components/HomeHeader.vue';
 import NoticeDialog from '@/components/NoticeDialog.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
@@ -78,20 +80,20 @@ const filteredSubjects = computed(() => {
             />
         </div>
 
-        <div
+        <EmptyState
             v-if="filteredSubjects.length === 0"
-            class="rounded-xl border border-dashed border-slate-200 bg-white/50 py-12 text-center dark:border-gray-700 dark:bg-gray-900/50"
+            :icon="Search"
+            variant="dashed"
+            :title="`No subjects found matching &quot;${globalSearchQuery}&quot;`"
         >
-            <p class="text-sm font-semibold text-slate-400 dark:text-gray-500">
-                No subjects found matching "{{ searchQuery }}"
-            </p>
             <button
-                @click="searchQuery = ''"
-                class="mt-2 text-xs font-bold text-indigo-600 hover:underline dark:text-indigo-400"
+                type="button"
+                @click="globalSearchQuery = ''"
+                class="cursor-pointer text-xs font-bold text-indigo-600 hover:underline dark:text-indigo-400"
             >
                 Show all subjects
             </button>
-        </div>
+        </EmptyState>
 
         <div
             v-if="featured_blogs?.length"
diff --git a/resources/js/pages/Node.vue b/resources/js/pages/Node.vue
index a0cacd18..5a89dfe7 100644
--- a/resources/js/pages/Node.vue
+++ b/resources/js/pages/Node.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { Head, Link, router, usePage } from '@inertiajs/vue3';
-import { ArrowBigDown, ArrowBigUp, LogIn, X } from 'lucide-vue-next';
+import { Head, router } from '@inertiajs/vue3';
+import { ArrowBigDown, ArrowBigUp, X } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 
+import AuthModal from '@/components/AuthModal.vue';
 import BreadcrumbNav from '@/components/BreadcrumbNav.vue';
 import EmptyState from '@/components/EmptyState.vue';
 import NodeRow from '@/components/NodeRow.vue';
 import ResourceRow from '@/components/ResourceRow.vue';
 import UserListItem from '@/components/UserListItem.vue';
+import { useAuth } from '@/lib/useAuth';
 
 const props = defineProps({
     subject: {
@@ -48,8 +50,12 @@ const props = defineProps({
     },
 });
 
-const page = usePage();
-const currentUser = computed(() => page.props.auth?.user);
+const {
+    user: currentUser,
+    requireAuth,
+    showAuthModal,
+    authModalMessage,
+} = useAuth();
 
 const crumbs = computed(() => props.breadcrumb ?? []);
 const currentTitle = computed(
@@ -63,9 +69,7 @@ const totalItemsCount = computed(
 );
 
 // Modals
-const showAuthModal = ref(false);
 const showUpvotersModal = ref(false);
-const authModalMessage = ref('Please sign in to vote on folders.');
 
 // Optimistic Vote State
 const localUserVote = ref(props.userVote);
@@ -103,10 +107,7 @@ watch(
 );
 
 const handleVote = (type: 'up' | 'down') => {
-    if (!currentUser.value) {
-        authModalMessage.value = 'Please sign in to vote on folders.';
-        showAuthModal.value = true;
-
+    if (!requireAuth('Please sign in to vote on folders.')) {
         return;
     }
 
@@ -404,64 +405,18 @@ const handleVote = (type: 'up' | 'down') => {
                         :resource="resource"
                     />
                 </template>
-                <EmptyState v-else />
+                <EmptyState
+                    v-else
+                    title="কোনো রিসোর্স পাওয়া যায়নি"
+                    description="শীঘ্রই এখানে নতুন স্টাডি ম্যাটেরিয়াল ও নোট আপলোড করা হবে।"
+                    :show-cta="true"
+                />
             </div>
         </div>
     </div>
 
     <!-- Sign-in Dialog Modal for Guest Users -->
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="showAuthModal"
-                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
-            >
-                <div
-                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <button
-                        @click="showAuthModal = false"
-                        class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-
-                    <h3
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Sign in required
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        {{ authModalMessage }}
-                    </p>
-
-                    <div class="mt-4 flex items-center gap-2">
-                        <Link
-                            :href="`/login?redirect=${encodeURIComponent($page.url)}`"
-                            @click="showAuthModal = false"
-                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <LogIn class="h-3.5 w-3.5" />
-                            <span>Sign in</span>
-                        </Link>
-                        <button
-                            @click="showAuthModal = false"
-                            class="cursor-pointer rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+    <AuthModal v-model="showAuthModal" :message="authModalMessage" />
 
     <!-- Upvoters Modal (Shows list of upvoters; downvotes list is intentionally hidden) -->
     <Teleport to="body">
diff --git a/resources/js/pages/Resource.vue b/resources/js/pages/Resource.vue
index f07d74bd..5b702dae 100644
--- a/resources/js/pages/Resource.vue
+++ b/resources/js/pages/Resource.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, router, usePage } from '@inertiajs/vue3';
+import { Head, Link, router } from '@inertiajs/vue3';
 import {
     Download,
     AlertCircle,
@@ -8,15 +8,15 @@ import {
     Maximize2,
     User,
     Image as ImageIcon,
-    LogIn,
-    X,
     ExternalLink,
     CheckCircle2,
 } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
+import AuthModal from '@/components/AuthModal.vue';
 import ImageViewerModal from '@/components/ImageViewerModal.vue';
 import UserListItem from '@/components/UserListItem.vue';
-import YouTubePlayer from '../components/YouTubePlayer.vue';
+import YouTubePlayer from '@/components/YouTubePlayer.vue';
+import { useAuth } from '@/lib/useAuth';
 
 const props = defineProps({
     resource: {
@@ -45,11 +45,8 @@ const props = defineProps({
     },
 });
 
-const page = usePage();
-const user = computed(() => page.props.auth?.user);
-const showAuthModal = ref(false);
+const { user, requireAuth, showAuthModal, authModalMessage } = useAuth();
 const showCompletersModal = ref(false);
-const authModalMessage = ref('Please sign in to continue.');
 
 // Optimistic Completion state
 const localIsCompleted = ref(props.isCompleted);
@@ -79,11 +76,11 @@ watch(
 );
 
 const handleToggleComplete = () => {
-    if (!user.value) {
-        authModalMessage.value =
-            'Please sign in to mark study materials as completed and track your syllabus progress.';
-        showAuthModal.value = true;
-
+    if (
+        !requireAuth(
+            'Please sign in to mark study materials as completed and track your syllabus progress.',
+        )
+    ) {
         return;
     }
 
@@ -145,11 +142,11 @@ watch(
 );
 
 const handleDownload = () => {
-    if (!user.value) {
-        authModalMessage.value =
-            'Please sign in to download full-resolution study materials.';
-        showAuthModal.value = true;
-
+    if (
+        !requireAuth(
+            'Please sign in to download full-resolution study materials.',
+        )
+    ) {
         return;
     }
 
@@ -555,58 +552,7 @@ const toggleFullscreen = () => {
     />
 
     <!-- Minimal Sign-in Dialog for Guests (Download & Completion Auth Guard) -->
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="showAuthModal"
-                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
-            >
-                <div
-                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <button
-                        @click="showAuthModal = false"
-                        class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-
-                    <h3
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Sign in required
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        {{ authModalMessage }}
-                    </p>
-
-                    <div class="mt-4 flex items-center gap-2">
-                        <Link
-                            :href="`/login?redirect=${encodeURIComponent($page.url)}`"
-                            @click="showAuthModal = false"
-                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <LogIn class="h-3.5 w-3.5" />
-                            <span>Sign in</span>
-                        </Link>
-                        <button
-                            @click="showAuthModal = false"
-                            class="cursor-pointer rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+    <AuthModal v-model="showAuthModal" :message="authModalMessage" />
 
     <!-- Students who Completed Modal -->
     <Teleport to="body">
diff --git a/resources/js/pages/SupportMyTickets.vue b/resources/js/pages/SupportMyTickets.vue
index a010393b..81f723eb 100644
--- a/resources/js/pages/SupportMyTickets.vue
+++ b/resources/js/pages/SupportMyTickets.vue
@@ -9,9 +9,11 @@ import {
     FileText,
     ChevronDown,
     ChevronUp,
-    HelpCircle,
 } from 'lucide-vue-next';
 import { ref } from 'vue';
+import EmptyState from '@/components/EmptyState.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
+import { formatDateTime } from '@/lib/useDate';
 
 interface UserInfo {
     id: number;
@@ -51,56 +53,7 @@ const getCategoryLabel = (key: string) => {
     return props.categories[key] || key;
 };
 
-const getStatusBadge = (status: string) => {
-    switch (status) {
-        case 'open':
-            return {
-                label: 'Open',
-                bg: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
-                icon: Clock,
-            };
-        case 'in_progress':
-            return {
-                label: 'In Progress',
-                bg: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20',
-                icon: HelpCircle,
-            };
-        case 'resolved':
-            return {
-                label: 'Resolved',
-                bg: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20',
-                icon: CheckCircle2,
-            };
-        case 'closed':
-            return {
-                label: 'Closed',
-                bg: 'bg-slate-500/10 text-slate-600 dark:text-gray-400 border-slate-500/20',
-                icon: XCircle,
-            };
-        default:
-            return {
-                label: status,
-                bg: 'bg-slate-500/10 text-slate-600 dark:text-gray-400 border-slate-500/20',
-                icon: Clock,
-            };
-    }
-};
-
-const formatDate = (dateString: string) => {
-    if (!dateString) {
-        return '';
-    }
-
-    const date = new Date(dateString);
-
-    return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-};
+const formatDate = formatDateTime;
 </script>
 
 <template>
@@ -162,31 +115,21 @@ const formatDate = (dateString: string) => {
 
             <!-- Tickets List -->
             <div class="space-y-4">
-                <div
+                <EmptyState
                     v-if="tickets.length === 0"
-                    class="rounded-2xl border border-slate-200 bg-white p-12 text-center dark:border-gray-800 dark:bg-gray-900"
+                    :icon="FileText"
+                    variant="card"
+                    title="কোনো টিকেট পাওয়া যায়নি"
+                    description="আপনার কোনো খোলা বা অতীত টিকেট নেই।"
                 >
-                    <div
-                        class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-slate-400 dark:bg-gray-800 dark:text-gray-500"
-                    >
-                        <FileText class="h-6 w-6" />
-                    </div>
-                    <h3
-                        class="text-base font-bold text-slate-800 dark:text-gray-200"
-                    >
-                        কোনো টিকেট পাওয়া যায়নি
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        আপনার কোনো খোলা বা অতীত টিকেট নেই।
-                    </p>
                     <Link
                         href="/support"
-                        class="mt-4 inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-bold text-white hover:bg-indigo-700"
+                        class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-bold text-white transition hover:bg-indigo-700"
                     >
                         <Send class="h-3.5 w-3.5" />
                         <span>প্রথম টিকেট তৈরি করুন</span>
                     </Link>
-                </div>
+                </EmptyState>
 
                 <div
                     v-for="ticket in tickets"
@@ -205,18 +148,7 @@ const formatDate = (dateString: string) => {
                                 >
                                     {{ ticket.ticket_number }}
                                 </span>
-                                <span
-                                    class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-bold"
-                                    :class="getStatusBadge(ticket.status).bg"
-                                >
-                                    <component
-                                        :is="getStatusBadge(ticket.status).icon"
-                                        class="h-3 w-3"
-                                    />
-                                    <span>{{
-                                        getStatusBadge(ticket.status).label
-                                    }}</span>
-                                </span>
+                                <StatusBadge :status="ticket.status" />
                                 <span
                                     class="rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-medium text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
                                 >
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 1ca0c3f4..b9d842ef 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -26,8 +26,10 @@ import {
     X,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
+import EmptyState from '@/components/EmptyState.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
+import { formatTimeAgo } from '@/lib/useDate';
 
 const props = defineProps<{
     profileUser: {
@@ -280,52 +282,7 @@ const handleAppreciate = () => {
     );
 };
 
-function timeAgo(dateString?: string): string {
-    if (!dateString) {
-        return '';
-    }
-
-    const date = new Date(dateString);
-
-    if (isNaN(date.getTime())) {
-        return dateString;
-    }
-
-    const now = new Date();
-    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-
-    if (seconds < 60) {
-        return 'just now';
-    }
-
-    const minutes = Math.floor(seconds / 60);
-
-    if (minutes < 60) {
-        return `${minutes}m ago`;
-    }
-
-    const hours = Math.floor(minutes / 60);
-
-    if (hours < 24) {
-        return `${hours}h ago`;
-    }
-
-    const days = Math.floor(hours / 24);
-
-    if (days < 30) {
-        return `${days}d ago`;
-    }
-
-    const months = Math.floor(days / 30);
-
-    if (months < 12) {
-        return `${months}mo ago`;
-    }
-
-    const years = Math.floor(days / 365);
-
-    return `${years}y ago`;
-}
+const timeAgo = formatTimeAgo;
 </script>
 
 <template>
@@ -813,27 +770,13 @@ function timeAgo(dateString?: string): string {
 
                     <!-- Questions Sub-panel -->
                     <div v-if="forumSubTab === 'questions'">
-                        <div
+                        <EmptyState
                             v-if="!forumPosts || forumPosts.length === 0"
-                            class="rounded-2xl border border-dashed border-slate-200 bg-white p-7 text-center sm:rounded-3xl sm:p-8 dark:border-gray-800 dark:bg-gray-900"
-                        >
-                            <div
-                                class="mx-auto flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 sm:h-10 sm:w-10 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <HelpCircle class="h-5 w-5 stroke-[1.8]" />
-                            </div>
-                            <h3
-                                class="mt-2 text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                No questions asked yet
-                            </h3>
-                            <p
-                                class="mx-auto mt-1 max-w-xs text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Questions posted to the academic forum will
-                                appear here.
-                            </p>
-                        </div>
+                            :icon="HelpCircle"
+                            variant="dashed"
+                            title="No questions asked yet"
+                            description="Questions posted to the academic forum will appear here."
+                        />
 
                         <div v-else class="space-y-2">
                             <Link
@@ -954,29 +897,13 @@ function timeAgo(dateString?: string): string {
 
                     <!-- Answers Sub-panel -->
                     <div v-else-if="forumSubTab === 'answers'">
-                        <div
+                        <EmptyState
                             v-if="!forumAnswers || forumAnswers.length === 0"
-                            class="rounded-2xl border border-dashed border-slate-200 bg-white p-7 text-center sm:rounded-3xl sm:p-8 dark:border-gray-800 dark:bg-gray-900"
-                        >
-                            <div
-                                class="mx-auto flex h-9 w-9 items-center justify-center rounded-xl bg-amber-50 text-amber-600 sm:h-10 sm:w-10 dark:bg-amber-950/60 dark:text-amber-400"
-                            >
-                                <MessageSquareCheck
-                                    class="h-5 w-5 stroke-[1.8]"
-                                />
-                            </div>
-                            <h3
-                                class="mt-2 text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                No answers contributed yet
-                            </h3>
-                            <p
-                                class="mx-auto mt-1 max-w-xs text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Solutions provided to questions will appear
-                                here.
-                            </p>
-                        </div>
+                            :icon="MessageSquareCheck"
+                            variant="dashed"
+                            title="No answers contributed yet"
+                            description="Solutions provided to questions will appear here."
+                        />
 
                         <div v-else class="space-y-2">
                             <Link
@@ -1068,27 +995,13 @@ function timeAgo(dateString?: string): string {
                             </Link>
                         </div>
 
-                        <div
+                        <EmptyState
                             v-if="blogs.length === 0"
-                            class="rounded-2xl border border-dashed border-slate-200 bg-white p-7 text-center sm:rounded-3xl sm:p-8 dark:border-gray-800 dark:bg-gray-900"
-                        >
-                            <div
-                                class="mx-auto flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 sm:h-10 sm:w-10 dark:bg-blue-950/60 dark:text-blue-400"
-                            >
-                                <FileText class="h-5 w-5 stroke-[1.8]" />
-                            </div>
-                            <h3
-                                class="mt-2 text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                No published articles yet
-                            </h3>
-                            <p
-                                class="mx-auto mt-1 max-w-xs text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Educational blogs written by this author will
-                                appear here.
-                            </p>
-                        </div>
+                            :icon="FileText"
+                            variant="dashed"
+                            title="No published articles yet"
+                            description="Educational blogs written by this author will appear here."
+                        />
 
                         <div v-else class="space-y-2">
                             <Link
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 238c5de7..81d07572 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -18,9 +18,6 @@ import {
     Gavel,
 } from 'lucide-vue-next';
 import { ref } from 'vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-
-defineOptions({ layout: AdminLayout });
 
 interface ChatSettingsProps {
     settings: {
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index b7864cb6..760c97cc 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -13,6 +13,7 @@ import {
     BarChart3,
 } from 'lucide-vue-next';
 import { ref } from 'vue';
+import EmptyState from '@/components/EmptyState.vue';
 
 const props = defineProps<{
     totalAccounts?: number;
@@ -184,35 +185,22 @@ const fetchAnalytics = async (refresh = false) => {
         </div>
 
         <!-- Initial Unloaded State Placeholder -->
-        <div
+        <EmptyState
             v-if="!hasFetched && !isLoading"
-            class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 py-12 text-center dark:border-gray-800 dark:bg-gray-900/40"
+            :icon="BarChart3"
+            variant="dashed"
+            title="Analytics ডাটা লোড করার জন্য প্রস্তুত"
+            description="পেজ লোড দ্রুত রাখতে অ্যানালিটিক্স ডাটা ডিমান্ড অনুযায়ী লোড হয়। লাইভ মেট্রিক্স দেখতে নিচে ক্লিক করুন।"
         >
-            <div
-                class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white shadow-xs dark:bg-gray-800"
-            >
-                <BarChart3
-                    class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
-                />
-            </div>
-            <h3
-                class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
-            >
-                Analytics ডাটা লোড করার জন্য প্রস্তুত
-            </h3>
-            <p class="mt-1 max-w-sm text-xs text-slate-500 dark:text-gray-400">
-                পেজ লোড দ্রুত রাখতে অ্যানালিটিক্স ডাটা ডিমান্ড অনুযায়ী লোড হয়।
-                লাইভ মেট্রিক্স দেখতে নিচে ক্লিক করুন।
-            </p>
             <button
                 type="button"
                 @click="fetchAnalytics(false)"
-                class="mt-4 inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 active:scale-95"
+                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 active:scale-95"
             >
                 <RefreshCw class="h-3.5 w-3.5" />
                 <span>Fetch Live Analytics</span>
             </button>
-        </div>
+        </EmptyState>
 
         <!-- Loading State Spinner -->
         <div
diff --git a/resources/js/pages/admin/Node.vue b/resources/js/pages/admin/Node.vue
index 87cfa8be..ff323aed 100644
--- a/resources/js/pages/admin/Node.vue
+++ b/resources/js/pages/admin/Node.vue
@@ -309,13 +309,11 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
                 </div>
             </template>
 
-            <div v-else class="flex flex-1 items-center justify-center py-12">
-                <EmptyState
-                    title="No items in this folder"
-                    description="Create a new folder or resource above to get started."
-                    :show-cta="false"
-                />
-            </div>
+            <EmptyState
+                v-else
+                title="No items in this folder"
+                description="Create a new folder or resource above to get started."
+            />
         </div>
     </div>
 </template>
diff --git a/resources/js/pages/admin/Tickets.vue b/resources/js/pages/admin/Tickets.vue
index 6952beb9..f0432522 100644
--- a/resources/js/pages/admin/Tickets.vue
+++ b/resources/js/pages/admin/Tickets.vue
@@ -12,12 +12,13 @@ import {
     Trash2,
     Image as ImageIcon,
     User as UserIcon,
-    X,
 } from 'lucide-vue-next';
 import { ref } from 'vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-
-defineOptions({ layout: AdminLayout });
+import BaseModal from '@/components/BaseModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
+import { formatDateTime } from '@/lib/useDate';
 
 interface UserInfo {
     id: number;
@@ -170,55 +171,7 @@ const getCategoryLabel = (key: string) => {
     return props.categories[key] || key;
 };
 
-const getStatusBadge = (status: string) => {
-    switch (status) {
-        case 'open':
-            return {
-                label: 'Open',
-                bg: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
-                icon: Clock,
-            };
-        case 'in_progress':
-            return {
-                label: 'In Progress',
-                bg: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20',
-                icon: HelpCircle,
-            };
-        case 'resolved':
-            return {
-                label: 'Resolved',
-                bg: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20',
-                icon: CheckCircle2,
-            };
-        case 'closed':
-            return {
-                label: 'Closed',
-                bg: 'bg-slate-500/10 text-slate-600 dark:text-gray-400 border-slate-500/20',
-                icon: XCircle,
-            };
-        default:
-            return {
-                label: status,
-                bg: 'bg-slate-500/10 text-slate-600 dark:text-gray-400 border-slate-500/20',
-                icon: Clock,
-            };
-    }
-};
-
-const formatDate = (dateString: string) => {
-    if (!dateString) {
-        return '';
-    }
-
-    const date = new Date(dateString);
-
-    return date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-};
+const formatDate = formatDateTime;
 </script>
 
 <template>
@@ -385,22 +338,12 @@ const formatDate = (dateString: string) => {
         <div
             class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
         >
-            <div
+            <EmptyState
                 v-if="tickets.data.length === 0"
-                class="p-12 text-center text-sm text-slate-500 dark:text-gray-400"
-            >
-                <div
-                    class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-slate-400 dark:bg-gray-800 dark:text-gray-500"
-                >
-                    <LifeBuoy class="h-6 w-6" />
-                </div>
-                <p class="font-bold text-slate-800 dark:text-gray-200">
-                    No tickets found
-                </p>
-                <p class="mt-1 text-xs text-slate-400">
-                    Try changing your search keywords or filter options.
-                </p>
-            </div>
+                :icon="LifeBuoy"
+                title="No tickets found"
+                description="Try changing your search keywords or filter options."
+            />
 
             <div v-else class="divide-y divide-slate-100 dark:divide-gray-800">
                 <div
@@ -417,18 +360,7 @@ const formatDate = (dateString: string) => {
                                 {{ ticket.ticket_number }}
                             </span>
 
-                            <span
-                                class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-bold"
-                                :class="getStatusBadge(ticket.status).bg"
-                            >
-                                <component
-                                    :is="getStatusBadge(ticket.status).icon"
-                                    class="h-3 w-3"
-                                />
-                                <span>{{
-                                    getStatusBadge(ticket.status).label
-                                }}</span>
-                            </span>
+                            <StatusBadge :status="ticket.status" />
 
                             <span
                                 class="rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
@@ -527,65 +459,42 @@ const formatDate = (dateString: string) => {
 
             <!-- Pagination Links -->
             <div
-                v-if="tickets.last_page > 1"
-                class="flex items-center justify-between border-t border-slate-100 bg-slate-50/50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/60"
+                v-if="tickets.links && tickets.links.length > 3"
+                class="border-t border-slate-100 bg-slate-50/50 px-4 py-1 dark:border-gray-800 dark:bg-gray-900/60"
             >
-                <div class="text-xs text-slate-500 dark:text-gray-400">
-                    Showing page {{ tickets.current_page }} of
-                    {{ tickets.last_page }}
-                </div>
-                <div class="flex items-center gap-1">
-                    <Link
-                        v-for="(link, i) in tickets.links"
-                        :key="i"
-                        :href="link.url || '#'"
-                        class="rounded-lg px-2.5 py-1 text-xs font-semibold transition-colors"
-                        :class="
-                            link.active
-                                ? 'bg-indigo-600 text-white'
-                                : 'text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800'
-                        "
-                    >
-                        <span v-html="link.label"></span>
-                    </Link>
-                </div>
+                <Pagination
+                    :links="tickets.links"
+                    :current-page="tickets.current_page"
+                    :last-page="tickets.last_page"
+                />
             </div>
         </div>
 
         <!-- Reply / Resolution Modal -->
-        <div
-            v-if="isModalOpen && activeTicket"
-            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-xs"
+        <BaseModal
+            :is-open="isModalOpen && !!activeTicket"
+            max-width="2xl"
+            position="center"
+            @close="closeReplyModal"
         >
-            <div
-                class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-2xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-            >
-                <!-- Modal Header -->
-                <div
-                    class="flex items-center justify-between border-b border-slate-100 pb-4 dark:border-gray-800"
-                >
-                    <div class="flex items-center gap-2">
-                        <span
-                            class="rounded-md bg-slate-100 px-2 py-0.5 font-mono text-xs font-bold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
-                        >
-                            {{ activeTicket.ticket_number }}
-                        </span>
-                        <h3
-                            class="text-base font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            {{ activeTicket.subject }}
-                        </h3>
-                    </div>
-                    <button
-                        @click="closeReplyModal"
-                        class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-800"
+            <template #header>
+                <div v-if="activeTicket" class="flex items-center gap-2">
+                    <span
+                        class="rounded-md bg-slate-100 px-2 py-0.5 font-mono text-xs font-bold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
+                    >
+                        {{ activeTicket.ticket_number }}
+                    </span>
+                    <h3
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
                     >
-                        <X class="h-5 w-5" />
-                    </button>
+                        {{ activeTicket.subject }}
+                    </h3>
                 </div>
+            </template>
 
+            <div v-if="activeTicket" class="p-6 pt-4">
                 <!-- User Query Details -->
-                <div class="mt-4 space-y-4">
+                <div class="space-y-4">
                     <div
                         class="rounded-xl border border-slate-200/60 bg-slate-50 p-4 dark:border-gray-800 dark:bg-gray-950/60"
                     >
@@ -617,49 +526,46 @@ const formatDate = (dateString: string) => {
                             <a
                                 :href="activeTicket.attachment_url"
                                 target="_blank"
-                                class="inline-block overflow-hidden rounded-lg border border-slate-200 transition-opacity hover:opacity-90 dark:border-gray-700"
+                                rel="noopener noreferrer"
+                                class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
                             >
-                                <img
-                                    :src="activeTicket.attachment_url"
-                                    alt="Ticket screenshot"
-                                    class="max-h-48 rounded object-contain"
-                                />
+                                <ImageIcon class="h-3.5 w-3.5" />
+                                <span>View Attachment</span>
                             </a>
                         </div>
                     </div>
 
                     <!-- Reply Form -->
-                    <form @submit.prevent="submitReply" class="space-y-4 pt-2">
+                    <form @submit.prevent="submitReply" class="space-y-3">
                         <div>
                             <label
-                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
+                                class="mb-1 block text-xs font-bold text-slate-700 dark:text-gray-300"
                             >
-                                Admin Response / Resolution *
+                                Your Response / Staff Message
                             </label>
                             <textarea
                                 v-model="replyForm.admin_reply"
                                 rows="5"
-                                placeholder="Type your response to the student..."
+                                placeholder="Type your response to the user here..."
+                                class="w-full rounded-xl border border-slate-200 bg-white p-3 text-xs leading-relaxed text-slate-800 focus:border-indigo-600 focus:outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200"
                                 required
-                                class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/20 focus:outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-100"
                             ></textarea>
-                            <p
+                            <div
                                 v-if="replyForm.errors.admin_reply"
                                 class="mt-1 text-xs text-rose-500"
                             >
                                 {{ replyForm.errors.admin_reply }}
-                            </p>
+                            </div>
                         </div>
 
-                        <!-- Update Status Selector -->
                         <div
-                            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+                            class="flex flex-wrap items-center justify-between gap-3 pt-2"
                         >
                             <div class="flex items-center gap-2">
                                 <label
                                     class="text-xs font-bold text-slate-700 dark:text-gray-300"
                                 >
-                                    Set Status to:
+                                    Update Status:
                                 </label>
                                 <select
                                     v-model="replyForm.status"
@@ -679,14 +585,14 @@ const formatDate = (dateString: string) => {
                                 <button
                                     type="button"
                                     @click="closeReplyModal"
-                                    class="rounded-xl px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                                    class="cursor-pointer rounded-xl px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
                                 >
                                     Cancel
                                 </button>
                                 <button
                                     type="submit"
                                     :disabled="replyForm.processing"
-                                    class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-5 py-2 text-xs font-bold text-white shadow-2xs hover:bg-indigo-700 disabled:opacity-50"
+                                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-5 py-2 text-xs font-bold text-white shadow-2xs hover:bg-indigo-700 disabled:opacity-50"
                                 >
                                     <Send class="h-3.5 w-3.5" />
                                     <span>{{
@@ -700,6 +606,6 @@ const formatDate = (dateString: string) => {
                     </form>
                 </div>
             </div>
-        </div>
+        </BaseModal>
     </div>
 </template>
diff --git a/resources/js/pages/admin/chat/Reports.vue b/resources/js/pages/admin/chat/Reports.vue
index af782b1b..97b8210a 100644
--- a/resources/js/pages/admin/chat/Reports.vue
+++ b/resources/js/pages/admin/chat/Reports.vue
@@ -13,9 +13,8 @@ import {
 import { ref, computed } from 'vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-
-defineOptions({ layout: AdminLayout });
+import EmptyState from '@/components/EmptyState.vue';
+import { formatDateTime } from '@/lib/useDate';
 
 interface ReportItem {
     id: number;
@@ -117,25 +116,7 @@ const openBanModal = (report: ReportItem) => {
     isBanModalOpen.value = true;
 };
 
-const formatDate = (isoString?: string | null) => {
-    if (!isoString) {
-        return '';
-    }
-
-    try {
-        const d = new Date(isoString);
-
-        return d.toLocaleString([], {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    } catch {
-        return '';
-    }
-};
+const formatDate = formatDateTime;
 </script>
 
 <template>
@@ -365,26 +346,13 @@ const formatDate = (isoString?: string | null) => {
 
         <!-- Reports List Feed -->
         <div class="space-y-4">
-            <div
+            <EmptyState
                 v-if="filteredReports.length === 0"
-                class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 py-16 text-center dark:border-gray-800 dark:bg-gray-900/40"
-            >
-                <div
-                    class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-2xs dark:bg-gray-800 dark:text-gray-400"
-                >
-                    <Flag class="h-6 w-6 text-slate-400 dark:text-gray-500" />
-                </div>
-                <h3
-                    class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
-                >
-                    No
-                    {{ currentFilter !== 'all' ? currentFilter : '' }} reports
-                    found
-                </h3>
-                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                    Everything looks clean for this filter criteria.
-                </p>
-            </div>
+                :icon="Flag"
+                variant="dashed"
+                :title="`No ${currentFilter !== 'all' ? currentFilter : ''} reports found`"
+                description="Everything looks clean for this filter criteria."
+            />
 
             <div v-else class="space-y-3.5">
                 <div
diff --git a/resources/js/pages/admin/forums/Index.vue b/resources/js/pages/admin/forums/Index.vue
index b67b0309..11a3f2b7 100644
--- a/resources/js/pages/admin/forums/Index.vue
+++ b/resources/js/pages/admin/forums/Index.vue
@@ -14,9 +14,8 @@ import {
 import { ref } from 'vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-
-defineOptions({ layout: AdminLayout });
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
 
 interface ForumPostItem {
     id: number;
@@ -285,14 +284,12 @@ const openBanModal = (post: ForumPostItem) => {
         <div
             class="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
         >
-            <div v-if="posts.data.length === 0" class="py-14 text-center">
-                <HelpCircle class="mx-auto h-7 w-7 text-slate-400" />
-                <p
-                    class="mt-2 text-xs font-bold text-slate-700 dark:text-gray-300"
-                >
-                    No discussions match your filter
-                </p>
-            </div>
+            <EmptyState
+                v-if="posts.data.length === 0"
+                :icon="HelpCircle"
+                title="No discussions match your filter"
+                description="Try changing your search keywords or filter status."
+            />
 
             <div v-else class="overflow-x-auto">
                 <table
@@ -465,11 +462,13 @@ const openBanModal = (post: ForumPostItem) => {
             <!-- Pagination -->
             <div
                 v-if="posts.links && posts.links.length > 3"
-                class="flex items-center justify-between border-t border-slate-100 bg-slate-50/40 px-4 py-2.5 text-xs dark:border-gray-800 dark:bg-gray-900"
+                class="border-t border-slate-100 bg-slate-50/40 px-4 py-1 dark:border-gray-800 dark:bg-gray-900"
             >
-                <div class="text-slate-400">
-                    Page {{ posts.current_page }} of {{ posts.last_page }}
-                </div>
+                <Pagination
+                    :links="posts.links"
+                    :current-page="posts.current_page"
+                    :last-page="posts.last_page"
+                />
             </div>
         </div>
 
diff --git a/resources/js/pages/admin/forums/Reports.vue b/resources/js/pages/admin/forums/Reports.vue
index 4314ef05..1ec1b54f 100644
--- a/resources/js/pages/admin/forums/Reports.vue
+++ b/resources/js/pages/admin/forums/Reports.vue
@@ -12,11 +12,10 @@ import {
 import { ref, computed } from 'vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import { formatDateTime } from '@/lib/useDate';
 import { usePermissions } from '@/lib/usePermissions';
 
-defineOptions({ layout: AdminLayout });
-
 const { can } = usePermissions();
 
 interface ReportItem {
@@ -122,25 +121,7 @@ const openBanModal = (report: ReportItem) => {
     isBanModalOpen.value = true;
 };
 
-const formatDate = (isoString?: string | null) => {
-    if (!isoString) {
-        return '';
-    }
-
-    try {
-        const d = new Date(isoString);
-
-        return d.toLocaleString([], {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    } catch {
-        return '';
-    }
-};
+const formatDate = formatDateTime;
 </script>
 
 <template>
@@ -273,26 +254,13 @@ const formatDate = (isoString?: string | null) => {
 
         <!-- Reports List -->
         <div class="space-y-4">
-            <div
+            <EmptyState
                 v-if="filteredReports.length === 0"
-                class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 py-16 text-center dark:border-gray-800 dark:bg-gray-900/40"
-            >
-                <div
-                    class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-2xs dark:bg-gray-800 dark:text-gray-400"
-                >
-                    <Flag class="h-6 w-6 text-slate-400 dark:text-gray-500" />
-                </div>
-                <h3
-                    class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
-                >
-                    No {{ currentFilter !== 'all' ? currentFilter : '' }} forum
-                    reports found
-                </h3>
-                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                    The forum is clear of flagged discussions or answers under
-                    this filter.
-                </p>
-            </div>
+                :icon="Flag"
+                variant="dashed"
+                :title="`No ${currentFilter !== 'all' ? currentFilter : ''} forum reports found`"
+                description="The forum is clear of flagged discussions or answers under this filter."
+            />
 
             <div v-else class="space-y-3.5">
                 <div
diff --git a/resources/js/pages/admin/forums/Settings.vue b/resources/js/pages/admin/forums/Settings.vue
index b2bcdc3f..c8bae4a9 100644
--- a/resources/js/pages/admin/forums/Settings.vue
+++ b/resources/js/pages/admin/forums/Settings.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
 import { Settings, Flag, Save, Loader2 } from 'lucide-vue-next';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-
-defineOptions({ layout: AdminLayout });
 
 const props = defineProps<{
     settings: {
diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
index 3c0ab7e5..8bcb6d1a 100644
--- a/resources/js/pages/admin/users/Index.vue
+++ b/resources/js/pages/admin/users/Index.vue
@@ -4,6 +4,7 @@ import { Plus, Search, ShieldCheck, Users, X } from 'lucide-vue-next';
 import { ref } from 'vue';
 import UserRow from '@/components/admin/UserRow.vue';
 import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 interface PaginationLink {
@@ -218,70 +219,44 @@ const clearSearch = () => {
             </div>
 
             <!-- Search Empty State -->
-            <div
+            <EmptyState
                 v-else-if="searchQuery"
-                class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 px-4 py-12 text-center dark:border-gray-800 dark:bg-gray-900/40"
+                :icon="Search"
+                variant="dashed"
+                title="No users found"
+                :description="`&quot;${searchQuery}&quot; দিয়ে কোনো ইউজার পাওয়া যায়নি। অন্য কিছু লিখে সার্চ করুন।`"
             >
-                <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-2xs dark:bg-gray-800"
-                >
-                    <Search class="h-5 w-5 text-slate-400" />
-                </div>
-                <h3
-                    class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
-                >
-                    No users found
-                </h3>
-                <p
-                    class="mt-1 max-w-xs text-xs text-slate-500 dark:text-gray-400"
-                >
-                    "{{ searchQuery }}" দিয়ে কোনো ইউজার পাওয়া যায়নি। অন্য কিছু
-                    লিখে সার্চ করুন।
-                </p>
                 <button
-                    @click="clearSearch"
                     type="button"
-                    class="mt-3.5 inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
+                    @click="clearSearch"
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
                 >
                     <span>Clear Search</span>
                 </button>
-            </div>
+            </EmptyState>
 
             <!-- Staff Filter Empty State -->
-            <div
+            <EmptyState
                 v-else-if="selectedRole === 'staff'"
-                class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 px-4 py-12 text-center dark:border-gray-800 dark:bg-gray-900/40"
+                :icon="ShieldCheck"
+                variant="dashed"
+                title="No staff members found"
+                description="Currently there are no users assigned to staff roles."
             >
-                <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-2xs dark:bg-gray-800"
-                >
-                    <ShieldCheck class="h-5 w-5 text-indigo-500" />
-                </div>
-                <h3
-                    class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
-                >
-                    No staff members found
-                </h3>
-                <p
-                    class="mt-1 max-w-xs text-xs text-slate-500 dark:text-gray-400"
-                >
-                    Currently there are no users assigned to staff roles.
-                </p>
                 <button
-                    @click="applyFilters('all')"
                     type="button"
-                    class="mt-3.5 inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
+                    @click="applyFilters('all')"
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
                 >
                     <span>Show All Users</span>
                 </button>
-            </div>
+            </EmptyState>
 
             <!-- Global Empty State -->
             <EmptyState
                 v-else
                 title="No users found"
                 description="No registered users found in the system."
-                :show-cta="false"
             />
 
             <!-- Pagination Bar -->
@@ -289,103 +264,15 @@ const clearSearch = () => {
                 v-if="users.links && users.links.length > 3"
                 class="mt-6 border-t border-slate-100 pt-4 dark:border-gray-800"
             >
-                <!-- Desktop Pagination (Tablet/PC) -->
-                <div class="hidden items-center justify-between gap-3 sm:flex">
-                    <p class="text-xs text-slate-500 dark:text-gray-400">
-                        Showing
-                        <span
-                            class="font-semibold text-slate-700 dark:text-gray-200"
-                            >{{ users.from ?? 0 }}</span
-                        >
-                        to
-                        <span
-                            class="font-semibold text-slate-700 dark:text-gray-200"
-                            >{{ users.to ?? 0 }}</span
-                        >
-                        of
-                        <span
-                            class="font-semibold text-slate-700 dark:text-gray-200"
-                            >{{ users.total ?? 0 }}</span
-                        >
-                        users
-                    </p>
-
-                    <div
-                        class="flex flex-wrap items-center justify-center gap-1"
-                    >
-                        <component
-                            :is="link.url ? Link : 'span'"
-                            v-for="(link, index) in users.links"
-                            :key="index"
-                            :href="link.url || '#'"
-                            preserve-scroll
-                            class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-lg px-2.5 py-1 text-xs font-semibold transition-all"
-                            :class="{
-                                'bg-indigo-600 text-white shadow-2xs':
-                                    link.active,
-                                'border border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800':
-                                    !link.active && link.url,
-                                'cursor-not-allowed text-slate-300 dark:text-gray-600':
-                                    !link.url,
-                            }"
-                        >
-                            <span v-html="link.label"></span>
-                        </component>
-                    </div>
-                </div>
-
-                <!-- Mobile Pagination (Phone) -->
-                <div class="flex flex-col gap-2.5 sm:hidden">
-                    <div class="flex items-center justify-between gap-2">
-                        <component
-                            :is="users.links[0].url ? Link : 'span'"
-                            :href="users.links[0].url || '#'"
-                            preserve-scroll
-                            class="flex flex-1 items-center justify-center rounded-xl border px-3 py-2 text-center text-xs font-semibold shadow-2xs transition active:scale-95"
-                            :class="
-                                users.links[0].url
-                                    ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
-                                    : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600'
-                            "
-                        >
-                            &larr; Prev
-                        </component>
-
-                        <div
-                            class="shrink-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2 text-xs font-bold text-slate-700 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300"
-                        >
-                            Page {{ users.current_page }} of
-                            {{ users.last_page }}
-                        </div>
-
-                        <component
-                            :is="
-                                users.links[users.links.length - 1].url
-                                    ? Link
-                                    : 'span'
-                            "
-                            :href="
-                                users.links[users.links.length - 1].url || '#'
-                            "
-                            preserve-scroll
-                            class="flex flex-1 items-center justify-center rounded-xl border px-3 py-2 text-center text-xs font-semibold shadow-2xs transition active:scale-95"
-                            :class="
-                                users.links[users.links.length - 1].url
-                                    ? 'border-slate-200 bg-white text-slate-700 active:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:active:bg-gray-800'
-                                    : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-600'
-                            "
-                        >
-                            Next &rarr;
-                        </component>
-                    </div>
-
-                    <p
-                        class="text-center text-[11px] text-slate-400 dark:text-gray-500"
-                    >
-                        Showing {{ users.from ?? 0 }} to {{ users.to ?? 0 }} of
-                        {{ users.total ?? 0 }} users
-                    </p>
-                </div>
+                <Pagination
+                    :links="users.links"
+                    :from="users.from"
+                    :to="users.to"
+                    :total="users.total"
+                    :current-page="users.current_page"
+                    :last-page="users.last_page"
+                    show-summary
+                />
             </div>
         </div>
     </div>
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
index 269586ee..f7ed1247 100644
--- a/resources/js/types/index.ts
+++ b/resources/js/types/index.ts
@@ -1 +1,2 @@
 export * from './auth';
+export type { PaginationLink } from '@/components/Pagination.vue';