From d7e4a429b9f5b7eaa79879ff9ca6a1dcbb9b941a Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Thu, 13 Aug 2026 19:32:59 +0600
Subject: [PATCH] feat: add dark mode

Because apparently the white background was burning everyone's retinas and someone had to do something about it.

- System/Light/Dark toggle in navbar (cycles through all three)
- Cross-tab sync via localStorage
- Follows OS preference by default
- Flash prevention on page load
- CSS overrides for dynamic subject colors (those bg-red-50 text-red-600 icons that looked terrible in dark)
- Every component, page, layout, modal, toast, and FAQ accordion updated
- Light shadow glow fixes (goodbye cringey white halos)

Actual redesign and modernization coming soon. This is just the band-aid.
---
 resources/css/app.css                         |  81 ++++++++
 resources/js/app.ts                           |  11 +
 resources/js/components/AIBanner.vue          |  10 +-
 resources/js/components/AppLogo.vue           |  17 +-
 resources/js/components/BlogCard.vue          |  28 ++-
 resources/js/components/BlogRow.vue           |  22 +-
 resources/js/components/BreadcrumbNav.vue     |  12 +-
 resources/js/components/CourseSwitcher.vue    |  10 +-
 resources/js/components/EmptyState.vue        |   6 +-
 resources/js/components/FAQSection.vue        |  42 ++--
 resources/js/components/Footer.vue            |  64 +++---
 resources/js/components/HTMLEditor.vue        |  25 ++-
 resources/js/components/HomeHeader.vue        |  10 +-
 resources/js/components/NavBar.vue            |  30 ++-
 resources/js/components/NodeRow.vue           |  12 +-
 resources/js/components/NoticeDialog.vue      |  12 +-
 resources/js/components/PwaInstallPrompt.vue  |  28 ++-
 resources/js/components/ResourceRow.vue       |  12 +-
 resources/js/components/SubjectCard.vue       |  10 +-
 resources/js/components/ToastNotification.vue |  10 +-
 resources/js/components/UserCard.vue          |  38 ++--
 .../js/components/admin/DesktopSidebar.vue    |  26 +--
 .../js/components/admin/MobileSideBar.vue     |  18 +-
 resources/js/components/admin/NodeRow.vue     |  10 +-
 resources/js/components/admin/ResourceRow.vue |  10 +-
 resources/js/components/admin/SubjectCard.vue |  28 +--
 resources/js/components/admin/UserRow.vue     |  36 ++--
 resources/js/layouts/AdminLayout.vue          |  16 +-
 resources/js/layouts/AppLayout.vue            |  10 +-
 resources/js/lib/useDarkMode.ts               |  83 ++++++++
 resources/js/pages/Blog/Index.vue             |  40 ++--
 resources/js/pages/Blog/Show.vue              |  56 +++--
 resources/js/pages/ContributorGuide.vue       | 194 ++++++++++--------
 resources/js/pages/Home.vue                   |  14 +-
 resources/js/pages/Node.vue                   |  14 +-
 resources/js/pages/Resource.vue               |  87 ++++----
 resources/js/pages/Support.vue                |  86 +++++---
 resources/js/pages/admin/Blog.vue             |  16 +-
 resources/js/pages/admin/BlogCreateOrEdit.vue |  58 +++---
 resources/js/pages/admin/Dashboard.vue        |  74 ++++---
 resources/js/pages/admin/Index.vue            |  16 +-
 resources/js/pages/admin/Node.vue             |  32 +--
 resources/js/pages/admin/NodeCreateOrEdit.vue |  56 +++--
 resources/js/pages/admin/NoticeEdit.vue       |  76 ++++---
 .../js/pages/admin/ResourceCreateOrEdit.vue   |  72 ++++---
 .../js/pages/admin/SubjectCreateOrEdit.vue    |  58 +++---
 .../pages/admin/resources/BulkImageCreate.vue |  94 +++++----
 .../pages/admin/resources/BulkVideoCreate.vue |  94 +++++----
 .../js/pages/admin/users/CreateOrEdit.vue     | 118 ++++++-----
 resources/js/pages/admin/users/Index.vue      |  24 ++-
 resources/js/pages/ai/Index.vue               |  80 ++++----
 resources/js/pages/auth/Login.vue             |  40 ++--
 resources/js/pages/errors/404.vue             |  42 ++--
 resources/js/pages/errors/503.vue             |  42 ++--
 resources/js/pages/legal/ContentPolicy.vue    | 118 ++++++-----
 resources/js/pages/legal/PrivacyPolicy.vue    |  90 ++++----
 resources/js/pages/legal/TermsConditions.vue  |  64 +++---
 resources/js/pages/platform/AboutUs.vue       |  14 +-
 resources/js/pages/platform/JoinTeam.vue      |  68 +++---
 59 files changed, 1535 insertions(+), 1029 deletions(-)
 create mode 100644 resources/js/lib/useDarkMode.ts

diff --git a/resources/css/app.css b/resources/css/app.css
index 9fde97c..f12718b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -23,8 +23,89 @@
         'Noto Color Emoji';
 }
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @layer base {
     body {
         font-stretch: 96%;
+        @apply transition-colors duration-300;
     }
 }
+
+.dark .bg-red-50 {
+    background-color: rgb(239 68 68 / 0.1);
+}
+.dark .bg-red-100 {
+    background-color: rgb(239 68 68 / 0.15);
+}
+.dark .text-red-600 {
+    color: rgb(248 113 113);
+}
+.dark .text-red-700 {
+    color: rgb(252 165 165);
+}
+
+.dark .bg-blue-50 {
+    background-color: rgb(59 130 246 / 0.1);
+}
+.dark .bg-blue-100 {
+    background-color: rgb(59 130 246 / 0.15);
+}
+.dark .text-blue-600 {
+    color: rgb(96 165 250);
+}
+.dark .text-blue-700 {
+    color: rgb(147 197 253);
+}
+
+.dark .bg-purple-50 {
+    background-color: rgb(168 85 247 / 0.1);
+}
+.dark .bg-purple-100 {
+    background-color: rgb(168 85 247 / 0.15);
+}
+.dark .text-purple-600 {
+    color: rgb(192 132 252);
+}
+.dark .text-purple-700 {
+    color: rgb(216 180 254);
+}
+
+.dark .bg-emerald-50 {
+    background-color: rgb(16 185 129 / 0.1);
+}
+.dark .bg-emerald-100 {
+    background-color: rgb(16 185 129 / 0.15);
+}
+.dark .text-emerald-600 {
+    color: rgb(52 211 153);
+}
+.dark .text-emerald-700 {
+    color: rgb(110 231 183);
+}
+
+.dark .bg-amber-50 {
+    background-color: rgb(245 158 11 / 0.1);
+}
+.dark .bg-amber-100 {
+    background-color: rgb(245 158 11 / 0.15);
+}
+.dark .text-amber-600 {
+    color: rgb(251 191 36);
+}
+.dark .text-amber-700 {
+    color: rgb(252 211 77);
+}
+
+.dark .bg-green-50 {
+    background-color: rgb(34 197 94 / 0.1);
+}
+.dark .bg-green-100 {
+    background-color: rgb(34 197 94 / 0.15);
+}
+.dark .text-green-600 {
+    color: rgb(74 222 128);
+}
+.dark .text-green-700 {
+    color: rgb(134 239 172);
+}
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 3894fea..787b2ac 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -5,6 +5,17 @@ import AppLayout from './layouts/AppLayout.vue';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
+// Apply dark mode before paint to prevent flash
+const stored = localStorage.getItem('theme');
+
+if (
+    stored === 'dark' ||
+    (stored !== 'light' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+    document.documentElement.classList.add('dark');
+}
+
 registerSW({ immediate: true });
 
 createInertiaApp({
diff --git a/resources/js/components/AIBanner.vue b/resources/js/components/AIBanner.vue
index 8fc5b03..e7da5e7 100644
--- a/resources/js/components/AIBanner.vue
+++ b/resources/js/components/AIBanner.vue
@@ -6,11 +6,11 @@ import { Sparkles, ArrowRight } from 'lucide-vue-next';
 <template>
     <Link
         href="/ai"
-        class="group relative mb-6 flex items-center justify-between gap-3 overflow-hidden rounded-2xl border border-indigo-100/80 bg-gradient-to-r from-indigo-50/90 via-violet-50/40 to-fuchsia-50/30 p-3.5 shadow-xs transition-all duration-300 hover:border-indigo-300 hover:shadow-md sm:p-4"
+        class="group relative mb-6 flex items-center justify-between gap-3 overflow-hidden rounded-2xl border border-indigo-100/80 bg-gradient-to-r from-indigo-50/90 via-violet-50/40 to-fuchsia-50/30 p-3.5 shadow-xs transition-all duration-300 hover:border-indigo-300 hover:shadow-md sm:p-4 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:via-violet-500/5 dark:to-fuchsia-500/5 dark:hover:border-indigo-500/40"
     >
         <!-- Background Ambient Glow -->
         <div
-            class="pointer-events-none absolute -top-8 -right-8 h-28 w-28 rounded-full bg-indigo-500/10 blur-xl transition-all duration-300 group-hover:scale-125 sm:-top-10 sm:-right-10 sm:h-32 sm:w-32 sm:blur-2xl"
+            class="pointer-events-none absolute -top-8 -right-8 h-28 w-28 rounded-full bg-indigo-500/10 blur-xl transition-all duration-300 group-hover:scale-125 sm:-top-10 sm:-right-10 sm:h-32 sm:w-32 sm:blur-2xl dark:bg-indigo-500/5"
         ></div>
 
         <!-- Left Content Section -->
@@ -26,12 +26,12 @@ import { Sparkles, ArrowRight } from 'lucide-vue-next';
             <div class="min-w-0 flex-1">
                 <div class="flex flex-wrap items-center gap-1.5 sm:gap-2">
                     <span
-                        class="text-sm leading-tight font-extrabold text-slate-900"
+                        class="text-sm leading-tight font-extrabold text-slate-900 dark:text-gray-100"
                         >HSCStack AI</span
                     >
                 </div>
                 <p
-                    class="mt-0.5 truncate text-[11px] font-medium text-slate-600 sm:text-xs sm:whitespace-normal"
+                    class="mt-0.5 truncate text-[11px] font-medium text-slate-600 sm:text-xs sm:whitespace-normal dark:text-gray-400"
                 >
                     বিষয় ও অধ্যায় সিলেক্ট করে সরাসরি প্রশ্ন ও গাণিতিক সমস্যা
                     সলভ করুন।
@@ -41,7 +41,7 @@ import { Sparkles, ArrowRight } from 'lucide-vue-next';
 
         <!-- Right Action Arrow (Visible on Mobile & Desktop) -->
         <div
-            class="relative z-10 flex shrink-0 items-center gap-1 text-xs font-bold text-indigo-600"
+            class="relative z-10 flex shrink-0 items-center gap-1 text-xs font-bold text-indigo-600 dark:text-indigo-400"
         >
             <span class="hidden sm:inline">এক্সপ্লোর করুন</span>
             <ArrowRight
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index ea79ce4..edcf3f1 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -9,25 +9,32 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
 <template>
     <Link href="/" class="flex items-center gap-2.5">
         <div
-            class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm"
+            class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm dark:bg-gray-100"
         >
             <img
                 src="/favicon.svg"
                 alt="HSCStack"
-                class="h-6 w-6 scale-110 object-cover"
+                class="h-6 w-6 scale-120 object-cover"
             />
         </div>
 
         <div class="flex items-center gap-1.5">
-            <span class="text-lg font-extrabold tracking-tight text-slate-900">
-                HSC<span :class="isSsc ? 'text-emerald-600' : 'text-indigo-600'"
+            <span
+                class="text-lg font-extrabold tracking-tight text-slate-900 dark:text-gray-100"
+            >
+                HSC<span
+                    :class="
+                        isSsc
+                            ? 'text-emerald-600 dark:text-emerald-400'
+                            : 'text-indigo-600 dark:text-indigo-400'
+                    "
                     >Stack</span
                 >
             </span>
 
             <span
                 v-if="isSsc"
-                class="rounded border border-emerald-200 bg-emerald-100 px-1.5 py-0.5 text-[10px] font-black tracking-wider text-emerald-700 uppercase"
+                class="rounded border border-emerald-200 bg-emerald-100 px-1.5 py-0.5 text-[10px] font-black tracking-wider text-emerald-700 uppercase dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400"
             >
                 SSC
             </span>
diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 79f66f7..086840a 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -28,12 +28,12 @@ const formattedDate = computed(() => {
 
 <template>
     <div
-        class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md"
+        class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
     >
         <!-- Featured Image Container -->
         <Link
             :href="'/blogs/' + blog.slug"
-            class="relative block aspect-[16/9] overflow-hidden bg-slate-100"
+            class="relative block aspect-[16/9] overflow-hidden bg-slate-100 dark:bg-gray-800"
         >
             <img
                 :src="blog.featured_image || 'https://placehold.co/600x400'"
@@ -53,22 +53,26 @@ const formattedDate = computed(() => {
         <div class="flex flex-1 flex-col p-4">
             <!-- News Meta (Author & Date) -->
             <div
-                class="mb-1.5 flex items-center gap-1.5 text-xs text-slate-500"
+                class="mb-1.5 flex items-center gap-1.5 text-xs text-slate-500 dark:text-gray-400"
             >
-                <span class="text-slate-400">Author</span>
+                <span class="text-slate-400 dark:text-gray-500">Author</span>
                 <Link
                     :href="`/about-us#${blog.user?.id}`"
-                    class="font-medium text-indigo-600 underline transition-colors hover:underline"
+                    class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
                 >
                     {{ blog.user?.name }}
                 </Link>
 
-                <span v-if="formattedDate" class="text-slate-300">•</span>
+                <span
+                    v-if="formattedDate"
+                    class="text-slate-300 dark:text-gray-600"
+                    >•</span
+                >
 
                 <time
                     v-if="formattedDate"
                     :datetime="blog.created_at"
-                    class="text-slate-400"
+                    class="text-slate-400 dark:text-gray-500"
                 >
                     {{ formattedDate }}
                 </time>
@@ -77,7 +81,7 @@ const formattedDate = computed(() => {
             <!-- Title -->
             <Link :href="'/blogs/' + blog.slug" class="group/title block">
                 <h3
-                    class="line-clamp-2 text-base leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600"
+                    class="line-clamp-2 text-base leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600 dark:text-gray-100 dark:group-hover/title:text-indigo-400"
                 >
                     {{ blog.title }}
                 </h3>
@@ -85,16 +89,18 @@ const formattedDate = computed(() => {
 
             <!-- Excerpt -->
             <p
-                class="mt-1.5 mb-3 line-clamp-2 text-xs leading-relaxed text-slate-600"
+                class="mt-1.5 mb-3 line-clamp-2 text-xs leading-relaxed text-slate-600 dark:text-gray-400"
             >
                 {{ blog.excerpt }}
             </p>
 
             <!-- Footer Action -->
-            <div class="mt-auto border-t border-slate-100 pt-3">
+            <div
+                class="mt-auto border-t border-slate-100 pt-3 dark:border-gray-800"
+            >
                 <Link
                     :href="'/blogs/' + blog.slug"
-                    class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 transition hover:text-indigo-700"
+                    class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
                 >
                     <span>বিস্তারিত পড়ুন</span>
                     <ArrowRight
diff --git a/resources/js/components/BlogRow.vue b/resources/js/components/BlogRow.vue
index ab23c19..42b7826 100644
--- a/resources/js/components/BlogRow.vue
+++ b/resources/js/components/BlogRow.vue
@@ -16,14 +16,14 @@ const deleteBlog = () => {
 
 <template>
     <div
-        class="group relative flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white p-3.5 transition-colors duration-150 hover:border-blue-200"
+        class="group relative flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white p-3.5 transition-colors duration-150 hover:border-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500/30"
     >
         <Link
             :href="`/admin/blogs/edit/${blog.slug}`"
             class="flex min-w-0 flex-1 items-center gap-3 active:scale-[0.99]"
         >
             <div
-                class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50"
+                class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
             >
                 <img
                     v-if="blog.featured_image"
@@ -33,34 +33,36 @@ const deleteBlog = () => {
                 />
                 <div
                     v-else
-                    class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase"
+                    class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase dark:text-gray-500"
                 >
                     TXT
                 </div>
             </div>
 
             <div class="min-w-0 flex-1">
-                <h4 class="truncate text-sm font-semibold text-gray-900">
+                <h4
+                    class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
+                >
                     {{ blog.title }}
                 </h4>
 
                 <div
-                    class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500"
+                    class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500 dark:text-gray-400"
                 >
                     <span>{{ blog.views }} views</span>
                     <span>•</span>
                     <span
                         :class="
                             blog.is_published
-                                ? 'text-green-600'
-                                : 'text-gray-400'
+                                ? 'text-green-600 dark:text-green-400'
+                                : 'text-gray-400 dark:text-gray-500'
                         "
                     >
                         {{ blog.is_published ? 'Published' : 'Draft' }}
                     </span>
                     <span
                         v-if="blog.is_featured"
-                        class="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-amber-700 uppercase"
+                        class="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-amber-700 uppercase dark:bg-amber-500/10 dark:text-amber-400"
                     >
                         Featured
                     </span>
@@ -72,7 +74,7 @@ const deleteBlog = () => {
             <button
                 @click.stop.prevent="deleteBlog"
                 type="button"
-                class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:text-gray-500 dark:hover:bg-red-500/10 dark:hover:text-red-400"
                 title="Delete blog"
             >
                 <svg
@@ -91,7 +93,7 @@ const deleteBlog = () => {
                 </svg>
             </button>
 
-            <span class="text-lg text-gray-300">→</span>
+            <span class="text-lg text-gray-300 dark:text-gray-600">→</span>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/BreadcrumbNav.vue b/resources/js/components/BreadcrumbNav.vue
index e86cdaa..a373c91 100644
--- a/resources/js/components/BreadcrumbNav.vue
+++ b/resources/js/components/BreadcrumbNav.vue
@@ -25,22 +25,22 @@ const breadcrumbs = computed(() => {
 
 <template>
     <nav
-        class="no-scrollbar mb-6 flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase"
+        class="no-scrollbar mb-6 flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase dark:text-gray-500"
     >
         <Link
             href="/"
-            class="mr-0.5 flex items-center rounded-lg p-1 transition-colors hover:bg-slate-100/80 hover:text-indigo-600"
+            class="mr-0.5 flex items-center rounded-lg p-1 transition-colors hover:bg-slate-100/80 hover:text-indigo-600 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
         >
             <Home class="h-4 w-4 stroke-[2.2]" />
         </Link>
 
         <ChevronRight
-            class="h-3.5 w-3.5 shrink-0 stroke-[2.5] text-slate-300"
+            class="h-3.5 w-3.5 shrink-0 stroke-[2.5] text-slate-300 dark:text-gray-600"
         />
 
         <Link
             :href="`/${props.subject?.slug || ''}`"
-            class="px-1 whitespace-nowrap transition-colors hover:text-indigo-600"
+            class="px-1 whitespace-nowrap transition-colors hover:text-indigo-600 dark:hover:text-indigo-400"
         >
             {{ props.subject?.name }}
         </Link>
@@ -50,12 +50,12 @@ const breadcrumbs = computed(() => {
             :key="`${crumb.name}-${index}`"
         >
             <ChevronRight
-                class="h-3.5 w-3.5 shrink-0 stroke-[2.5] text-slate-300"
+                class="h-3.5 w-3.5 shrink-0 stroke-[2.5] text-slate-300 dark:text-gray-600"
             />
 
             <Link
                 :href="crumb.link"
-                class="px-1 whitespace-nowrap transition-colors hover:text-indigo-600"
+                class="px-1 whitespace-nowrap transition-colors hover:text-indigo-600 dark:hover:text-indigo-400"
             >
                 {{ crumb.name }}
             </Link>
diff --git a/resources/js/components/CourseSwitcher.vue b/resources/js/components/CourseSwitcher.vue
index 8043650..652b051 100644
--- a/resources/js/components/CourseSwitcher.vue
+++ b/resources/js/components/CourseSwitcher.vue
@@ -9,7 +9,7 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
 
 <template>
     <div
-        class="mb-6 flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-5"
+        class="mb-6 flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-5 dark:border-gray-700 dark:bg-gray-900"
     >
         <!-- Large Browsing Indicator -->
         <div class="flex items-center gap-3">
@@ -21,12 +21,12 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
             </span>
             <div class="flex min-w-0 flex-col">
                 <span
-                    class="text-[11px] font-bold tracking-wider text-slate-400 uppercase sm:text-xs"
+                    class="text-[11px] font-bold tracking-wider text-slate-400 uppercase sm:text-xs dark:text-gray-500"
                 >
                     Active Repository
                 </span>
                 <p
-                    class="text-sm leading-snug font-extrabold text-slate-900 sm:text-base"
+                    class="text-sm leading-snug font-extrabold text-slate-900 sm:text-base dark:text-gray-100"
                 >
                     আপনি <span>{{ isSsc ? 'SSC' : 'HSC' }}</span> এর
                     কন্টেন্টগুলো দেখছেন
@@ -41,8 +41,8 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
             :class="[
                 'group inline-flex w-full shrink-0 items-center justify-center gap-2 rounded-lg border px-5 py-2.5 text-xs font-bold shadow-xs transition-all active:scale-[0.98] sm:w-auto',
                 isSsc
-                    ? 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white active:bg-indigo-700'
-                    : 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white active:bg-emerald-700',
+                    ? 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white active:bg-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500 dark:hover:text-white'
+                    : 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white active:bg-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500 dark:hover:text-white',
             ]"
         >
             <span>
diff --git a/resources/js/components/EmptyState.vue b/resources/js/components/EmptyState.vue
index da2aa8e..3ab5bd4 100644
--- a/resources/js/components/EmptyState.vue
+++ b/resources/js/components/EmptyState.vue
@@ -7,15 +7,15 @@ import { Folder } from 'lucide-vue-next';
         class="flex flex-col items-center justify-center px-4 py-14 text-center"
     >
         <div
-            class="flex h-12 w-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-slate-400"
+            class="flex h-12 w-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-slate-400 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500"
         >
             <Folder class="h-6 w-6 stroke-[1.8]" />
         </div>
-        <h3 class="mt-4 text-sm font-bold text-slate-900">
+        <h3 class="mt-4 text-sm font-bold text-slate-900 dark:text-gray-100">
             No items available
         </h3>
         <p
-            class="mt-1 max-w-xs text-xs leading-relaxed font-medium text-slate-400"
+            class="mt-1 max-w-xs text-xs leading-relaxed font-medium text-slate-400 dark:text-gray-500"
         >
             There are currently no files or sub-folders located inside this
             section.
diff --git a/resources/js/components/FAQSection.vue b/resources/js/components/FAQSection.vue
index 158c83a..4f637da 100644
--- a/resources/js/components/FAQSection.vue
+++ b/resources/js/components/FAQSection.vue
@@ -13,12 +13,12 @@ const isExpanded = ref(false);
 const faqs = [
     {
         question: 'HSCStack কী এবং এটি কাদের জন্য?',
-        answer: 'HSCStack হলো বাংলাদেশের HSC ও SSC শিক্ষার্থীদের জন্য তৈরি একটি ওপেন রিসোর্স প্ল্যাটফর্ম। এখানে চ্যাপ্টার ও সাবজেক্ট অনুযায়ী প্রয়োজনীয় ক্লাস নোট, পিডিএফ, ছবি, ভিডিও এবং পরীক্ষার প্রশ্নপত্র একসাথে ফ্রি-তে খুঁজে পাওয়া যায়।',
+        answer: 'HSCStack হলো বাংলাদেশের HSC ও SSC শিক্ষার্থীদের জন্য তৈরি একটি ওপেন রিসোর্স প্ল্যাটফর্ম। এখানে চ্যাপ্টার ও সাবজেক্ট অনুযায়ী প্রয়োজনীয় ক্লাস নোট, পিডিএফ, ছবি, ভিডিও এবং পরীক্ষার প্রশ্নপত্র একসাথে ফ্রি-তে খুঁজে পাওয়া যায়।',
         type: 'text',
     },
     {
-        question: 'ওয়েবসাইট সম্পর্কিত নতুন আপডেট বা ঘোষণা কোথায় পাওয়া যাবে?',
-        answer: 'প্ল্যাটফর্মের সাম্প্রতিক ফিচার, কনটেন্ট আপডেট এবং গুরুত্বপূর্ণ সকল ঘোষণা পেতে ফলো করুন আমাদের অফিশিয়াল ',
+        question: 'ওয়েবসাইট সম্পর্কিত নতুন আপডেট বা ঘোষণা কোথায় পাওয়া যাবে?',
+        answer: 'প্ল্যাটফর্মের সাম্প্রতিক ফিচার, কনটেন্ট আপডেট এবং গুরুত্বপূর্ণ সকল ঘোষণা পেতে ফলো করুন আমাদের অফিশিয়াল ',
         linkText: 'Facebook পেজ',
         linkUrl: 'https://facebook.com/hscstackbd',
         answerAfter: '।',
@@ -34,7 +34,7 @@ const faqs = [
     },
     {
         question: 'এটি কে বা কারা পরিচালনা করে?',
-        answer: 'এটি কোনো বাণিজ্যিক প্রতিষ্ঠান নয়; দেশজুড়ে ছড়িয়ে থাকা একদল উদ্যমী শিক্ষার্থী স্বেচ্ছাশ্রমে প্ল্যাটফর্মটি পরিচালনা ও কনটেন্ট কিউরেট করে থাকে। আমাদের টিম সম্পর্কে আরও জানতে পড়ুন ',
+        answer: 'এটি কোনো বাণিজ্যিক প্রতিষ্ঠান নয়; দেশজুড়ে ছড়িয়ে থাকা একদল উদ্যমী শিক্ষার্থী স্বেচ্ছাশ্রমে প্ল্যাটফর্মটি পরিচালনা ও কনটেন্ট কিউরেট করে থাকে। আমাদের টিম সম্পর্কে আরও জানতে পড়ুন ',
         linkText: 'আমাদের কথা',
         linkUrl: '/about-us',
         answerAfter: '।',
@@ -50,7 +50,7 @@ const faqs = [
     },
     {
         question: 'রিসোর্স দেখার জন্য কি কোনো অ্যাকাউন্ট তৈরি করতে হবে?',
-        answer: 'না, রিসোর্স খোঁজা, পড়া বা ডাউনলোড করার জন্য কোনো অ্যাকাউন্ট খোলার প্রয়োজন নেই। যেকোনো শিক্ষার্থী ফ্রিতে সরাসরি রিসোর্সগুলো ব্রাউজ ও ব্যবহার করতে পারবে।',
+        answer: 'না, রিসোর্স খোঁজা, পড়া বা ডাউনলোড করার জন্য কোনো অ্যাকাউন্ট খোলার প্রয়োজন নেই। যেকোনো শিক্ষার্থী ফ্রিতে সরাসরি রিসোর্সগুলো ব্রাউজ ও ব্যবহার করতে পারবে।',
         type: 'text',
     },
     {
@@ -62,18 +62,18 @@ const faqs = [
         type: 'link',
     },
     {
-        question: 'এখানে কী কী ধরনের স্টাডি মেটেরিয়াল পাওয়া যাবে?',
-        answer: 'এখানে অধ্যায়ভিত্তিক হ্যান্ডরিটেন নোটস, লেকচার শিট, সাজেস্টভ প্রশ্ন ব্যাঙ্ক, ডায়াগ্রাম এবং বিভিন্ন প্রয়োজনীয় টিউটোরিয়াল ও প্র্যাক্টিক্যাল গাইড পাওয়া যাবে।',
+        question: 'এখানে কী কী ধরনের স্টাডি মেটেরিয়াল পাওয়া যাবে?',
+        answer: 'এখানে অধ্যায়ভিত্তিক হ্যান্ডরিটেন নোটস, লেকচার শিট, সাজেস্টভ প্রশ্ন ব্যাঙ্ক, ডায়াগ্রাম এবং বিভিন্ন প্রয়োজনীয় টিউটোরিয়াল ও প্র্যাক্টিক্যাল গাইড পাওয়া যাবে।',
         type: 'text',
     },
     {
         question: 'ওয়েবসাইটটি ফোনে অ্যাপ হিসেবে ব্যবহার করা যাবে?',
-        answer: 'হ্যাঁ, প্ল্যাটফর্মটি PWA (Progressive Web App) সাপোর্টেড। ব্রাউজারের "Add to Home Screen" বা ইনস্টল পপআপ থেকে এক ক্লিকেই অ্যাপের মতো ফোনে ইনস্টল করে নেওয়া যায়।',
+        answer: 'হ্যাঁ, প্ল্যাটফর্মটি PWA (Progressive Web App) সাপোর্টেড। ব্রাউজারের "Add to Home Screen" বা ইনস্টল পপআপ থেকে এক ক্লিকেই অ্যাপের মতো ফোনে ইনস্টল করে নেওয়া যায়।',
         type: 'text',
     },
     {
         question:
-            'ডেভেলপমেন্টে সাহায্য করতে বা কোড কন্ট্রিবিউট করতে চাইলে করণীয় কী?',
+            'ডেভেলপমেন্টে সাহায্য করতে বা কোড কন্ট্রিবিউট করতে চাইলে করণীয় কী?',
         answer: 'HSCStack-এর ওপেন ডেভেলপমেন্ট টিমে যোগ দিতে আমাদের ',
         linkText: 'আবেদন ফর্মে',
         linkUrl: '/join',
@@ -107,17 +107,17 @@ const isOpen = (index) => openIndex.value === index;
         <!-- Section Header -->
         <div class="mb-8 text-center sm:mb-10">
             <div
-                class="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 shadow-xs ring-1 ring-indigo-500/10"
+                class="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 shadow-xs ring-1 ring-indigo-500/10 dark:bg-indigo-500/10 dark:text-indigo-400 dark:ring-indigo-500/20"
             >
                 <HelpCircle class="h-5 w-5" />
             </div>
             <h2
-                class="text-2xl font-black tracking-tight text-slate-900 sm:text-3xl lg:text-4xl"
+                class="text-2xl font-black tracking-tight text-slate-900 sm:text-3xl lg:text-4xl dark:text-gray-100"
             >
                 সাধারণ জিজ্ঞাসা
             </h2>
             <p
-                class="mx-auto mt-2 max-w-md text-xs leading-relaxed font-medium text-slate-500 sm:text-sm"
+                class="mx-auto mt-2 max-w-md text-xs leading-relaxed font-medium text-slate-500 sm:text-sm dark:text-gray-400"
             >
                 HSCStack এবং রিসোর্স সম্পর্কিত আপনার বিভিন্ন প্রশ্নের উত্তর এক
                 নজরে দেখে নিন।
@@ -140,8 +140,8 @@ const isOpen = (index) => openIndex.value === index;
                     class="group overflow-hidden rounded-2xl border transition-all duration-300"
                     :class="[
                         isOpen(index)
-                            ? 'border-indigo-200 bg-white shadow-lg ring-1 shadow-indigo-500/5 ring-indigo-500/10'
-                            : 'border-slate-200/80 bg-white/80 hover:border-slate-300 hover:bg-white',
+                            ? 'border-indigo-200 bg-white shadow-lg ring-1 shadow-indigo-500/5 ring-indigo-500/10 dark:border-indigo-500/30 dark:bg-gray-900 dark:shadow-indigo-500/5 dark:ring-indigo-500/10'
+                            : 'border-slate-200/80 bg-white/80 hover:border-slate-300 hover:bg-white dark:border-gray-700/80 dark:bg-gray-900/80 dark:hover:border-gray-600 dark:hover:bg-gray-900',
                     ]"
                 >
                     <!-- Header / Trigger Button -->
@@ -154,8 +154,8 @@ const isOpen = (index) => openIndex.value === index;
                             class="text-xs leading-snug font-bold transition-colors duration-200 sm:text-sm lg:text-base"
                             :class="
                                 isOpen(index)
-                                    ? 'text-indigo-600'
-                                    : 'text-slate-800 group-hover:text-slate-900'
+                                    ? 'text-indigo-600 dark:text-indigo-400'
+                                    : 'text-slate-800 group-hover:text-slate-900 dark:text-gray-200 dark:group-hover:text-gray-100'
                             "
                         >
                             {{ faq.question }}
@@ -166,7 +166,7 @@ const isOpen = (index) => openIndex.value === index;
                             :class="[
                                 isOpen(index)
                                     ? 'rotate-180 bg-indigo-600 text-white shadow-xs'
-                                    : 'bg-slate-100 text-slate-400 group-hover:bg-slate-200 group-hover:text-slate-600',
+                                    : 'bg-slate-100 text-slate-400 group-hover:bg-slate-200 group-hover:text-slate-600 dark:bg-gray-800 dark:text-gray-500 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300',
                             ]"
                         >
                             <ChevronDown class="h-4 w-4 stroke-[2.5]" />
@@ -184,7 +184,7 @@ const isOpen = (index) => openIndex.value === index;
                     >
                         <div class="overflow-hidden">
                             <div
-                                class="cubic-bezier(0.16, 1, 0.3, 1) border-t border-slate-100 px-4 pt-3 pb-4 text-xs leading-relaxed font-medium text-slate-600 transition-transform duration-500 sm:px-5 sm:pb-5 sm:text-sm"
+                                class="cubic-bezier(0.16, 1, 0.3, 1) border-t border-slate-100 px-4 pt-3 pb-4 text-xs leading-relaxed font-medium text-slate-600 transition-transform duration-500 sm:px-5 sm:pb-5 sm:text-sm dark:border-gray-800 dark:text-gray-400"
                                 :class="[
                                     isOpen(index)
                                         ? 'translate-y-0'
@@ -196,7 +196,7 @@ const isOpen = (index) => openIndex.value === index;
                                     {{ faq.answer }}
                                     <Link
                                         :href="faq.linkUrl"
-                                        class="font-bold text-indigo-600 hover:underline"
+                                        class="font-bold text-indigo-600 hover:underline dark:text-indigo-400"
                                     >
                                         {{ faq.linkText }}
                                     </Link>
@@ -212,7 +212,7 @@ const isOpen = (index) => openIndex.value === index;
                                         :href="faq.linkUrl"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="inline-flex items-center gap-0.5 font-bold text-indigo-600 hover:underline"
+                                        class="inline-flex items-center gap-0.5 font-bold text-indigo-600 hover:underline dark:text-indigo-400"
                                     >
                                         {{ faq.linkText }}
                                     </a>
@@ -234,7 +234,7 @@ const isOpen = (index) => openIndex.value === index;
                 <button
                     type="button"
                     @click="toggleExpand"
-                    class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-xs font-bold text-slate-700 shadow-xs transition-all duration-300 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-600 hover:shadow-md hover:shadow-indigo-500/5 focus:outline-none active:scale-95 sm:text-sm"
+                    class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-xs font-bold text-slate-700 shadow-xs transition-all duration-300 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-600 hover:shadow-md hover:shadow-indigo-500/5 focus:outline-none active:scale-95 sm:text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-indigo-500/50 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
                 >
                     <template v-if="!isExpanded">
                         <Plus class="h-4 w-4 stroke-[2.5]" />
diff --git a/resources/js/components/Footer.vue b/resources/js/components/Footer.vue
index 962eec2..71e0867 100644
--- a/resources/js/components/Footer.vue
+++ b/resources/js/components/Footer.vue
@@ -14,7 +14,9 @@ import AppLogo from './AppLogo.vue';
 </script>
 
 <template>
-    <footer class="mt-16 border-t border-slate-100 bg-white py-12 sm:py-16">
+    <footer
+        class="mt-16 border-t border-slate-100 bg-white py-12 sm:py-16 dark:border-gray-800 dark:bg-gray-900"
+    >
         <div class="mx-auto max-w-7xl px-4 sm:px-6">
             <div class="grid grid-cols-1 gap-y-10 md:grid-cols-12 md:gap-x-12">
                 <div
@@ -22,7 +24,7 @@ import AppLogo from './AppLogo.vue';
                 >
                     <AppLogo />
                     <p
-                        class="mt-4 max-w-sm text-sm leading-relaxed text-slate-500"
+                        class="mt-4 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
                     >
                         Empowering the next generation of students with high
                         quality, direct, and accessible academic resources.
@@ -33,7 +35,7 @@ import AppLogo from './AppLogo.vue';
                             href="https://github.com/hscstack"
                             rel="noopener noreferrer"
                             target="_blank"
-                            class="text-slate-400 transition-colors duration-150 hover:text-slate-900"
+                            class="text-slate-400 transition-colors duration-150 hover:text-slate-900 dark:text-gray-500 dark:hover:text-gray-100"
                             aria-label="GitHub Repository"
                         >
                             <Github class="h-5 w-5" />
@@ -43,7 +45,7 @@ import AppLogo from './AppLogo.vue';
                             href="https://facebook.com/hscstackbd"
                             rel="noopener noreferrer"
                             target="_blank"
-                            class="text-slate-400 transition-colors duration-150 hover:text-blue-600"
+                            class="text-slate-400 transition-colors duration-150 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400"
                             aria-label="Facebook Page"
                         >
                             <Facebook class="h-5 w-5" />
@@ -52,7 +54,7 @@ import AppLogo from './AppLogo.vue';
                             href="https://instagram.com/hscstack"
                             rel="noopener noreferrer"
                             target="_blank"
-                            class="text-slate-400 transition-colors duration-150 hover:text-blue-600"
+                            class="text-slate-400 transition-colors duration-150 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400"
                             aria-label="Facebook Page"
                         >
                             <Instagram class="h-5 w-5" />
@@ -60,25 +62,25 @@ import AppLogo from './AppLogo.vue';
                     </div>
 
                     <p
-                        class="mt-4 hidden text-xs font-medium text-slate-400 md:block"
+                        class="mt-4 hidden text-xs font-medium text-slate-400 md:block dark:text-gray-500"
                     >
                         A concern of
                         <a
                             href="https://tajimz.xyz"
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="text-slate-600 underline transition-colors hover:text-indigo-600"
+                            class="text-slate-600 underline transition-colors hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400"
                             >Tajim</a
                         >
                     </p>
                 </div>
 
                 <div
-                    class="grid grid-cols-2 gap-x-8 gap-y-8 border-t border-slate-100 pt-10 sm:gap-x-12 md:col-span-7 md:grid-cols-2 md:border-t-0 md:pt-0"
+                    class="grid grid-cols-2 gap-x-8 gap-y-8 border-t border-slate-100 pt-10 sm:gap-x-12 md:col-span-7 md:grid-cols-2 md:border-t-0 md:pt-0 dark:border-gray-800"
                 >
                     <div class="text-center md:text-left">
                         <h4
-                            class="text-xs font-bold tracking-widest text-slate-900 uppercase"
+                            class="text-xs font-bold tracking-widest text-slate-900 uppercase dark:text-gray-100"
                         >
                             Platform
                         </h4>
@@ -86,36 +88,44 @@ import AppLogo from './AppLogo.vue';
                             <li>
                                 <Link
                                     href="/guide"
-                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
-                                    <BookOpen class="h-4 w-4 text-indigo-500" />
+                                    <BookOpen
+                                        class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
+                                    />
                                     <span>Documentation</span>
                                 </Link>
                             </li>
                             <li>
                                 <Link
                                     href="/about-us"
-                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
-                                    <Users class="h-4 w-4 text-indigo-500" />
+                                    <Users
+                                        class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
+                                    />
                                     <span>Our Contributors</span>
                                 </Link>
                             </li>
                             <li>
                                 <Link
                                     href="/join"
-                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
-                                    <UserPlus class="h-4 w-4 text-indigo-500" />
+                                    <UserPlus
+                                        class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
+                                    />
                                     <span>Join Our Team</span>
                                 </Link>
                             </li>
                             <li>
                                 <Link
                                     href="/support"
-                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
-                                    <Heart class="h-4 w-4 text-indigo-500" />
+                                    <Heart
+                                        class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
+                                    />
                                     <span>Support HSCStack</span>
                                 </Link>
                             </li>
@@ -124,10 +134,10 @@ import AppLogo from './AppLogo.vue';
                                     href="https://tajimz.xyz/projects"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
                                     <ExternalLink
-                                        class="h-4 w-4 text-indigo-500"
+                                        class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
                                     />
                                     <span>More From Us</span>
                                 </a>
@@ -137,7 +147,7 @@ import AppLogo from './AppLogo.vue';
 
                     <div class="text-center md:text-left">
                         <h4
-                            class="text-xs font-bold tracking-widest text-slate-900 uppercase"
+                            class="text-xs font-bold tracking-widest text-slate-900 uppercase dark:text-gray-100"
                         >
                             Legal
                         </h4>
@@ -145,7 +155,7 @@ import AppLogo from './AppLogo.vue';
                             <li>
                                 <Link
                                     href="/privacy-policy"
-                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
                                     Privacy Policy
                                 </Link>
@@ -153,7 +163,7 @@ import AppLogo from './AppLogo.vue';
                             <li>
                                 <Link
                                     href="/terms-service"
-                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
                                     Terms of Service
                                 </Link>
@@ -162,7 +172,7 @@ import AppLogo from './AppLogo.vue';
                             <li>
                                 <Link
                                     href="/content-policy"
-                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600"
+                                    class="text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
                                     Content Policy
                                 </Link>
@@ -173,23 +183,23 @@ import AppLogo from './AppLogo.vue';
             </div>
 
             <div
-                class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row"
+                class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row dark:border-gray-800"
             >
                 <p
-                    class="text-center text-xs font-medium text-slate-400 md:hidden"
+                    class="text-center text-xs font-medium text-slate-400 md:hidden dark:text-gray-500"
                 >
                     A concern of
                     <a
                         href="https://tajimz.xyz"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="text-slate-600 underline transition-colors hover:text-indigo-600"
+                        class="text-slate-600 underline transition-colors hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400"
                         >Tajim</a
                     >
                 </p>
 
                 <p
-                    class="text-center text-xs font-medium text-slate-400 sm:text-left"
+                    class="text-center text-xs font-medium text-slate-400 sm:text-left dark:text-gray-500"
                 >
                     &copy; 2026 HSCStack. Built for the future of learning.
                 </p>
diff --git a/resources/js/components/HTMLEditor.vue b/resources/js/components/HTMLEditor.vue
index 34a5e2b..615f601 100644
--- a/resources/js/components/HTMLEditor.vue
+++ b/resources/js/components/HTMLEditor.vue
@@ -310,19 +310,19 @@ const toolbarGroups: ToolbarButton[][] = [
 
 <template>
     <div
-        class="overflow-hidden rounded-lg border bg-white transition-shadow"
+        class="overflow-hidden rounded-lg border bg-white transition-shadow dark:bg-gray-900"
         :class="[
             error
                 ? 'border-rose-500'
                 : isFocused
                   ? 'border-blue-500'
-                  : 'border-slate-300',
+                  : 'border-slate-300 dark:border-gray-600',
             isFocused && !error ? 'ring-2 ring-blue-500/20' : '',
         ]"
     >
         <!-- Toolbar -->
         <div
-            class="flex flex-wrap items-center gap-1 border-b border-slate-200 bg-slate-50 p-2 select-none"
+            class="flex flex-wrap items-center gap-1 border-b border-slate-200 bg-slate-50 p-2 select-none dark:border-gray-700 dark:bg-gray-950"
         >
             <template v-for="(group, gi) in toolbarGroups" :key="gi">
                 <div class="flex items-center gap-0.5">
@@ -336,8 +336,8 @@ const toolbarGroups: ToolbarButton[][] = [
                         class="rounded p-1.5 transition"
                         :class="
                             (activeStates as any)[btn.key]
-                                ? 'bg-blue-100 text-blue-600'
-                                : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900'
+                                ? 'bg-blue-100 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
+                                : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100'
                         "
                     >
                         <component :is="btn.icon" class="h-4 w-4" />
@@ -345,7 +345,7 @@ const toolbarGroups: ToolbarButton[][] = [
                 </div>
                 <div
                     v-if="gi < toolbarGroups.length - 1"
-                    class="mx-1 h-4 w-[1px] bg-slate-200"
+                    class="mx-1 h-4 w-[1px] bg-slate-200 dark:bg-gray-700"
                 ></div>
             </template>
         </div>
@@ -364,14 +364,14 @@ const toolbarGroups: ToolbarButton[][] = [
             @mouseup="updateActiveStates"
             @keydown="handleKeydown"
             @paste="handlePaste"
-            class="wysiwyg-content max-h-[600px] min-h-[350px] overflow-y-auto p-4 font-sans text-base leading-relaxed text-slate-800 outline-none"
+            class="wysiwyg-content max-h-[600px] min-h-[350px] overflow-y-auto p-4 font-sans text-base leading-relaxed text-slate-800 outline-none dark:text-gray-200"
             :placeholder="placeholder"
         ></div>
 
         <!-- Error message -->
         <p
             v-if="error"
-            class="border-t border-rose-200 bg-rose-50 px-4 py-2 text-sm text-rose-600"
+            class="border-t border-rose-200 bg-rose-50 px-4 py-2 text-sm text-rose-600 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-400"
         >
             {{ error }}
         </p>
@@ -379,11 +379,14 @@ const toolbarGroups: ToolbarButton[][] = [
 </template>
 
 <style scoped>
-.wysiwyg-content:empty:before {
+:deep(.wysiwyg-content:empty:before) {
     content: attr(placeholder);
     color: #94a3b8;
     cursor: text;
 }
+:deep(.dark .wysiwyg-content:empty:before) {
+    color: #6b7280;
+}
 :deep(.wysiwyg-content h1) {
     font-size: 1.875rem;
     font-weight: 700;
@@ -422,6 +425,10 @@ const toolbarGroups: ToolbarButton[][] = [
     font-style: italic;
     margin: 0.75rem 0;
 }
+:deep(.dark .wysiwyg-content blockquote) {
+    border-left-color: #4b5563;
+    color: #9ca3af;
+}
 :deep(.wysiwyg-content a) {
     color: #2563eb;
     text-decoration: underline;
diff --git a/resources/js/components/HomeHeader.vue b/resources/js/components/HomeHeader.vue
index d9e2c5a..9286617 100644
--- a/resources/js/components/HomeHeader.vue
+++ b/resources/js/components/HomeHeader.vue
@@ -11,7 +11,7 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
     <div class="px-6 pt-16 pb-3 text-center sm:pt-24 sm:pb-6">
         <div class="mx-auto max-w-3xl">
             <h1
-                class="mb-4 text-4xl font-black tracking-tight text-slate-900 sm:text-6xl lg:leading-[1.15]"
+                class="mb-4 text-4xl font-black tracking-tight text-slate-900 sm:text-6xl lg:leading-[1.15] dark:text-gray-100"
             >
                 Your knowledge, <br />
                 <span
@@ -27,10 +27,10 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
             </h1>
 
             <p
-                class="mx-auto mb-10 max-w-xl text-base leading-relaxed font-medium text-slate-700/90 sm:text-lg"
+                class="mx-auto mb-10 max-w-xl text-base leading-relaxed font-medium text-slate-700/90 sm:text-lg dark:text-gray-400"
             >
                 HSC & SSC স্টুডেন্টদের জন্য একদম ক্লিন ও ফাস্ট রিসোর্স
-                রিপোজিটরি। সাবজেক্ট এবং চ্যাপ্টার অনুযায়ী খুঁজে নিন প্রয়োজনীয়
+                রিপোজিটরি। সাবজেক্ট এবং চ্যাপ্টার অনুযায়ী খুঁজে নিন প্রয়োজনীয়
                 ক্লাস, নোটস এবং প্র্যাক্টিক্যাল ।
             </p>
 
@@ -44,10 +44,10 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
                         v-model="searchQuery"
                         type="text"
                         placeholder="Search for subjects..."
-                        class="w-full appearance-none rounded-2xl border border-slate-200 bg-white/90 py-4 pr-4 pl-12 text-sm font-semibold shadow-md shadow-slate-100/40 backdrop-blur-md transition-all duration-300 placeholder:text-slate-400/90 focus:border-indigo-500 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 focus:outline-none"
+                        class="w-full appearance-none rounded-2xl border border-slate-200 bg-white/90 py-4 pr-4 pl-12 text-sm font-semibold shadow-md shadow-slate-100/40 backdrop-blur-md transition-all duration-300 placeholder:text-slate-400/90 focus:border-indigo-500 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-800/90 dark:text-gray-100 dark:shadow-gray-900/60 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800 dark:focus:ring-indigo-500/20"
                     />
                     <Search
-                        class="pointer-events-none absolute top-[18px] left-4 h-4.5 w-4.5 text-slate-400 transition-colors duration-300 group-focus-within:text-indigo-600"
+                        class="pointer-events-none absolute top-[18px] left-4 h-4.5 w-4.5 text-slate-400 transition-colors duration-300 group-focus-within:text-indigo-600 dark:text-gray-500 dark:group-focus-within:text-indigo-400"
                     />
                 </div>
             </div>
diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index c563432..153505c 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { Moon, Sun, Monitor } from 'lucide-vue-next';
+import { useDarkMode } from '@/lib/useDarkMode';
 import AppLogo from './AppLogo.vue';
 
 defineProps({
@@ -8,11 +10,13 @@ defineProps({
         default: false,
     },
 });
+
+const { theme, toggle } = useDarkMode();
 </script>
 
 <template>
     <nav
-        class="sticky top-0 z-50 border-b border-slate-200/60 bg-white/80 backdrop-blur-md"
+        class="sticky top-0 z-50 border-b border-slate-200/60 bg-white/80 backdrop-blur-md dark:border-gray-700/60 dark:bg-gray-900/80"
     >
         <div
             class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6"
@@ -22,26 +26,42 @@ defineProps({
 
                 <span
                     v-if="isAdmin"
-                    class="rounded bg-slate-100 px-2 py-0.5 text-xs font-semibold tracking-wider text-slate-400 uppercase"
+                    class="rounded bg-slate-100 px-2 py-0.5 text-xs font-semibold tracking-wider text-slate-400 uppercase dark:bg-gray-800 dark:text-gray-500"
                 >
                     Admin
                 </span>
             </div>
 
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
                 <Link
                     href="/blogs"
-                    class="text-sm font-medium text-slate-600 transition-colors hover:text-slate-900"
+                    class="text-sm font-medium text-slate-600 transition-colors hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100"
                 >
                     Blogs
                 </Link>
 
                 <Link
                     :href="isAdmin ? '/' : '/admin'"
-                    class="text-sm font-medium text-slate-600 transition-colors hover:text-slate-900"
+                    class="text-sm font-medium text-slate-600 transition-colors hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100"
                 >
                     {{ isAdmin ? 'Home' : 'Login' }}
                 </Link>
+
+                <button
+                    @click="toggle"
+                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    :title="
+                        theme === 'system'
+                            ? 'System theme (click to cycle)'
+                            : theme === 'dark'
+                              ? 'Dark mode (click to cycle)'
+                              : 'Light mode (click to cycle)'
+                    "
+                >
+                    <Monitor v-if="theme === 'system'" class="h-4 w-4" />
+                    <Sun v-else-if="theme === 'light'" class="h-4 w-4" />
+                    <Moon v-else class="h-4 w-4" />
+                </button>
             </div>
         </div>
     </nav>
diff --git a/resources/js/components/NodeRow.vue b/resources/js/components/NodeRow.vue
index e7241a4..aff655b 100644
--- a/resources/js/components/NodeRow.vue
+++ b/resources/js/components/NodeRow.vue
@@ -16,23 +16,23 @@ const href = computed(() => {
 <template>
     <Link
         :href="href"
-        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100"
+        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100 dark:bg-gray-900 dark:hover:bg-gray-800/50"
     >
         <div class="flex min-w-0 items-center gap-4">
             <div
-                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600"
+                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:border-gray-700/40 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
             >
                 <Folder class="h-5 w-5 stroke-[2.2]" />
             </div>
 
             <div class="min-w-0">
                 <span
-                    class="block truncate text-base font-bold text-slate-900 transition-colors group-hover:text-indigo-600"
+                    class="block truncate text-base font-bold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                 >
                     {{ node.name }}
                 </span>
                 <span
-                    class="mt-0.5 inline-block text-xs font-semibold text-slate-400 sm:hidden"
+                    class="mt-0.5 inline-block text-xs font-semibold text-slate-400 sm:hidden dark:text-gray-500"
                 >
                     {{ node.children_count + node.resources_count || 0 }}
                     Materials
@@ -42,7 +42,7 @@ const href = computed(() => {
 
         <div class="flex shrink-0 items-center gap-4 pl-3">
             <span
-                class="hidden rounded-md border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-xs font-bold text-slate-500 transition-colors group-hover:border-indigo-100/80 group-hover:bg-indigo-50/60 group-hover:text-indigo-600 sm:inline-block"
+                class="hidden rounded-md border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-xs font-bold text-slate-500 transition-colors group-hover:border-indigo-100/80 group-hover:bg-indigo-50/60 group-hover:text-indigo-600 sm:inline-block dark:border-gray-700/60 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
             >
                 {{ node.children_count + node.resources_count || 0 }}
                 Materials
@@ -50,7 +50,7 @@ const href = computed(() => {
 
             <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-indigo-600"
+                class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover:text-indigo-400"
                 viewBox="0 0 20 20"
                 fill="currentColor"
             >
diff --git a/resources/js/components/NoticeDialog.vue b/resources/js/components/NoticeDialog.vue
index 97bb062..6186fd4 100644
--- a/resources/js/components/NoticeDialog.vue
+++ b/resources/js/components/NoticeDialog.vue
@@ -57,17 +57,17 @@ const close = () => {
                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
             >
                 <div
-                    class="absolute inset-0 bg-slate-950/20 backdrop-blur-sm"
+                    class="absolute inset-0 bg-slate-950/20 backdrop-blur-sm dark:bg-black/50"
                     @click="close"
                 ></div>
 
                 <div
-                    class="relative w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-900/5"
+                    class="relative w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-900/5 dark:bg-gray-900 dark:ring-gray-700/50"
                     role="alertdialog"
                 >
                     <button
                         @click="close"
-                        class="absolute top-4 right-4 z-10 rounded-full bg-slate-100 p-2 text-slate-600 transition"
+                        class="absolute top-4 right-4 z-10 rounded-full bg-slate-100 p-2 text-slate-600 transition dark:bg-gray-800 dark:text-gray-400"
                         aria-label="Close notice"
                     >
                         <X class="h-5 w-5" />
@@ -83,13 +83,13 @@ const close = () => {
                     <div class="p-6">
                         <h2
                             v-if="notice.title"
-                            class="text-lg font-semibold text-slate-900"
+                            class="text-lg font-semibold text-slate-900 dark:text-gray-100"
                         >
                             {{ notice.title }}
                         </h2>
                         <p
                             v-if="notice.message"
-                            class="mt-2 text-sm leading-relaxed whitespace-pre-line text-slate-600"
+                            class="mt-2 text-sm leading-relaxed whitespace-pre-line text-slate-600 dark:text-gray-400"
                         >
                             {{ notice.message }}
                         </p>
@@ -100,7 +100,7 @@ const close = () => {
                                 :href="notice.button_link"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-center text-sm font-medium text-white transition hover:bg-slate-800"
+                                class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-center text-sm font-medium text-white transition hover:bg-slate-800 dark:bg-indigo-600 dark:hover:bg-indigo-500"
                             >
                                 {{ notice.button_title || 'Learn more' }}
                             </a>
diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index 5896167..9e74ba0 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -82,22 +82,26 @@ const handleDismiss = () => {
     <template v-if="isVisible && deferredPrompt">
         <Teleport v-if="variant === 'modal'" to="body">
             <div
-                class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-sm"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-sm dark:bg-black/60"
             >
                 <div
-                    class="w-full max-w-sm rounded-2xl border border-slate-100 bg-white p-6 shadow-xl"
+                    class="w-full max-w-sm rounded-2xl border border-slate-100 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-900"
                 >
                     <div class="mb-4 flex items-center gap-3">
                         <div
-                            class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-xl text-indigo-600"
+                            class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-xl text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                         >
                             📱
                         </div>
                         <div>
-                            <h3 class="text-base font-bold text-slate-900">
+                            <h3
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
                                 Install Our App
                             </h3>
-                            <p class="text-xs text-slate-500">
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
                                 Get fast, offline access right from your home
                                 screen.
                             </p>
@@ -113,7 +117,7 @@ const handleDismiss = () => {
                         </button>
                         <button
                             @click="handleDismiss"
-                            class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50"
+                            class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
                         >
                             Maybe Later
                         </button>
@@ -126,21 +130,23 @@ const handleDismiss = () => {
         <div
             v-else
             v-bind="$attrs"
-            class="flex items-center justify-between gap-2.5 rounded-xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3 py-2 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5"
+            class="flex items-center justify-between gap-2.5 rounded-xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3 py-2 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
         >
             <div class="flex min-w-0 items-center gap-2.5 sm:gap-3.5">
                 <div
-                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-600/10 text-base sm:h-10 sm:w-10 sm:rounded-xl sm:text-xl"
+                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-600/10 text-base sm:h-10 sm:w-10 sm:rounded-xl sm:text-xl dark:bg-indigo-500/20"
                 >
                     📱
                 </div>
                 <div class="min-w-0">
                     <h3
-                        class="truncate text-xs font-bold text-slate-900 sm:text-sm"
+                        class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
                     >
                         Install Our App
                     </h3>
-                    <p class="truncate text-[11px] text-slate-500 sm:text-xs">
+                    <p
+                        class="truncate text-[11px] text-slate-500 sm:text-xs dark:text-gray-400"
+                    >
                         Fast, offline home screen access.
                     </p>
                 </div>
@@ -155,7 +161,7 @@ const handleDismiss = () => {
                 </button>
                 <button
                     @click="handleDismiss"
-                    class="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8"
+                    class="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                     title="Dismiss"
                 >
                     ✕
diff --git a/resources/js/components/ResourceRow.vue b/resources/js/components/ResourceRow.vue
index 843efa2..08cccf8 100644
--- a/resources/js/components/ResourceRow.vue
+++ b/resources/js/components/ResourceRow.vue
@@ -10,11 +10,11 @@ const { resource } = defineProps({
 <template>
     <Link
         :href="`/resources/${resource.id}`"
-        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100"
+        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100 dark:bg-gray-900 dark:hover:bg-gray-800/50"
     >
         <div class="flex min-w-0 items-center gap-4">
             <div
-                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70"
+                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400 dark:group-hover:border-amber-500/30 dark:group-hover:bg-amber-500/20"
             >
                 <FileImage
                     v-if="resource.resource_type == 'image'"
@@ -37,12 +37,12 @@ const { resource } = defineProps({
 
             <div class="min-w-0">
                 <span
-                    class="block text-base font-bold break-words text-slate-900 transition-colors group-hover:text-amber-700"
+                    class="block text-base font-bold break-words text-slate-900 transition-colors group-hover:text-amber-700 dark:text-gray-100 dark:group-hover:text-amber-400"
                 >
                     {{ resource.title }}
                 </span>
                 <span
-                    class="mt-0.5 inline-block text-xs font-semibold text-amber-600 sm:hidden"
+                    class="mt-0.5 inline-block text-xs font-semibold text-amber-600 sm:hidden dark:text-amber-400"
                 >
                     {{ resource.resource_type }}
                 </span>
@@ -51,14 +51,14 @@ const { resource } = defineProps({
 
         <div class="flex shrink-0 items-center gap-4 pl-3">
             <span
-                class="hidden rounded-md border border-amber-200/60 bg-amber-50/60 px-2.5 py-1 text-xs font-bold text-amber-600 sm:inline-block"
+                class="hidden rounded-md border border-amber-200/60 bg-amber-50/60 px-2.5 py-1 text-xs font-bold text-amber-600 sm:inline-block dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400"
             >
                 {{ resource.resource_type }}
             </span>
 
             <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600"
+                class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 dark:text-gray-500 dark:group-hover:text-amber-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
diff --git a/resources/js/components/SubjectCard.vue b/resources/js/components/SubjectCard.vue
index 71f4402..b862d10 100644
--- a/resources/js/components/SubjectCard.vue
+++ b/resources/js/components/SubjectCard.vue
@@ -32,7 +32,7 @@ const icons = {
 <template>
     <Link
         :href="subject.slug"
-        class="group relative flex touch-manipulation items-center justify-between overflow-hidden rounded-xl border border-slate-200 bg-white px-5 py-4.5 transition-all duration-200 hover:border-indigo-300 hover:shadow-sm active:scale-[0.99]"
+        class="group relative flex touch-manipulation items-center justify-between overflow-hidden rounded-xl border border-slate-200 bg-white px-5 py-4.5 transition-all duration-200 hover:border-indigo-300 hover:shadow-sm active:scale-[0.99] dark:border-gray-700 dark:bg-gray-900 dark:hover:border-indigo-500/50 dark:hover:shadow-indigo-500/5"
     >
         <div class="flex min-w-0 items-center gap-4">
             <!-- Balanced Icon Wrapper -->
@@ -51,11 +51,13 @@ const icons = {
             <!-- Content Area -->
             <div class="min-w-0">
                 <h3
-                    class="truncate text-base font-bold text-slate-800 transition-colors group-hover:text-indigo-600"
+                    class="truncate text-base font-bold text-slate-800 transition-colors group-hover:text-indigo-600 dark:text-gray-200 dark:group-hover:text-indigo-400"
                 >
                     {{ subject.name }}
                 </h3>
-                <p class="mt-0.5 text-xs font-semibold text-slate-400">
+                <p
+                    class="mt-0.5 text-xs font-semibold text-slate-400 dark:text-gray-500"
+                >
                     {{ subject.nodes_count }} Chapters
                 </p>
             </div>
@@ -65,7 +67,7 @@ const icons = {
         <div class="flex items-center pl-4">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-indigo-500"
+                class="h-5 w-5 text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-indigo-500 dark:text-gray-600 dark:group-hover:text-indigo-400"
                 viewBox="0 0 20 20"
                 fill="currentColor"
             >
diff --git a/resources/js/components/ToastNotification.vue b/resources/js/components/ToastNotification.vue
index de163b0..e458e65 100644
--- a/resources/js/components/ToastNotification.vue
+++ b/resources/js/components/ToastNotification.vue
@@ -52,8 +52,8 @@ watch(
                 class="pointer-events-auto flex w-full items-start gap-3 rounded-2xl border p-4 shadow-xl backdrop-blur-md transition-all duration-300 hover:scale-[1.01]"
                 :class="
                     toast.type === 'success'
-                        ? 'border-emerald-500/25 bg-emerald-50/95 text-emerald-950 shadow-emerald-100/30'
-                        : 'border-rose-500/25 bg-rose-50/95 text-rose-950 shadow-rose-100/30'
+                        ? 'border-emerald-500/25 bg-emerald-50/95 text-emerald-950 shadow-emerald-100/30 dark:border-emerald-500/20 dark:bg-emerald-950/90 dark:text-emerald-100 dark:shadow-emerald-900/30'
+                        : 'border-rose-500/25 bg-rose-50/95 text-rose-950 shadow-rose-100/30 dark:border-rose-500/20 dark:bg-rose-950/90 dark:text-rose-100 dark:shadow-rose-900/30'
                 "
             >
                 <!-- Icon -->
@@ -64,8 +64,8 @@ watch(
                     class="h-5 w-5 shrink-0"
                     :class="
                         toast.type === 'success'
-                            ? 'text-emerald-600'
-                            : 'text-rose-600'
+                            ? 'text-emerald-600 dark:text-emerald-400'
+                            : 'text-rose-600 dark:text-rose-400'
                     "
                 />
 
@@ -77,7 +77,7 @@ watch(
                 <!-- Close Button -->
                 <button
                     @click="removeToast(toast.id)"
-                    class="cursor-pointer rounded-lg p-0.5 text-slate-400 transition-colors hover:bg-black/5 hover:text-slate-700"
+                    class="cursor-pointer rounded-lg p-0.5 text-slate-400 transition-colors hover:bg-black/5 hover:text-slate-700 dark:text-gray-500 dark:hover:bg-white/10 dark:hover:text-gray-300"
                 >
                     <X class="h-4 w-4" />
                 </button>
diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index 1a0f6f8..ec43154 100644
--- a/resources/js/components/UserCard.vue
+++ b/resources/js/components/UserCard.vue
@@ -26,9 +26,9 @@ onBeforeUnmount(() => {
 <template>
     <div
         :id="id"
-        class="group flex scroll-mt-64 flex-col justify-between rounded-2xl border border-slate-200 bg-white p-8 text-center transition-all duration-300 hover:border-slate-300 hover:shadow-md hover:shadow-slate-100/50"
+        class="group flex scroll-mt-64 flex-col justify-between rounded-2xl border border-slate-200 bg-white p-8 text-center transition-all duration-300 hover:border-slate-300 hover:shadow-md hover:shadow-slate-100/50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:hover:shadow-gray-800/40"
         :class="{
-            'border-indigo-500 shadow-lg ring-2 shadow-indigo-100 ring-indigo-500 ring-offset-4':
+            'border-indigo-500 shadow-lg ring-2 shadow-indigo-100 ring-indigo-500 ring-offset-4 dark:shadow-indigo-500/20 dark:ring-offset-gray-900':
                 activeHash === `#${id}`,
         }"
     >
@@ -38,11 +38,11 @@ onBeforeUnmount(() => {
                     v-if="member.image_url"
                     :src="member.image_url"
                     :alt="member.name"
-                    class="h-28 w-28 rounded-3xl border border-slate-100 object-cover shadow-sm transition-transform duration-300 group-hover:scale-[1.03]"
+                    class="h-28 w-28 rounded-3xl border border-slate-100 object-cover shadow-sm transition-transform duration-300 group-hover:scale-[1.03] dark:border-gray-800"
                 />
                 <div
                     v-else
-                    class="flex h-28 w-28 items-center justify-center rounded-3xl border border-indigo-100 bg-indigo-50 text-2xl font-black text-indigo-600 shadow-sm"
+                    class="flex h-28 w-28 items-center justify-center rounded-3xl border border-indigo-100 bg-indigo-50 text-2xl font-black text-indigo-600 shadow-sm dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     {{
                         member.name
@@ -54,17 +54,19 @@ onBeforeUnmount(() => {
             </div>
 
             <div class="space-y-1">
-                <h3 class="text-xl font-black tracking-tight text-slate-950">
+                <h3
+                    class="text-xl font-black tracking-tight text-slate-950 dark:text-gray-100"
+                >
                     {{ member.name }}
                 </h3>
                 <span
                     class="inline-block rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider capitalize"
                     :class="{
-                        'border border-rose-100 bg-rose-50 text-rose-600':
+                        'border border-rose-100 bg-rose-50 text-rose-600 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-400':
                             member.roles[0].name.toLowerCase() === 'admin',
-                        'border border-blue-100 bg-blue-50 text-blue-600':
+                        'border border-blue-100 bg-blue-50 text-blue-600 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-400':
                             member.roles[0].name.toLowerCase() === 'editor',
-                        'border border-amber-100 bg-amber-50 text-amber-600':
+                        'border border-amber-100 bg-amber-50 text-amber-600 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400':
                             member.roles[0].name.toLowerCase() === 'manager',
                     }"
                 >
@@ -75,24 +77,26 @@ onBeforeUnmount(() => {
                     }}
                 </span>
                 <p
-                    class="text-xs font-bold tracking-wide text-indigo-600 uppercase"
+                    class="text-xs font-bold tracking-wide text-indigo-600 uppercase dark:text-indigo-400"
                 >
                     {{ member.title }}
                 </p>
-                <p class="text-xs font-semibold text-slate-400">
+                <p
+                    class="text-xs font-semibold text-slate-400 dark:text-gray-500"
+                >
                     {{ member.institution }}
                 </p>
             </div>
 
             <p
-                class="mt-5 max-w-xs text-sm leading-relaxed font-medium text-slate-600"
+                class="mt-5 max-w-xs text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
             >
                 {{ member.about }}
             </p>
         </div>
 
         <div
-            class="mt-8 flex items-center justify-center gap-4 border-t border-slate-100 pt-5"
+            class="mt-8 flex items-center justify-center gap-4 border-t border-slate-100 pt-5 dark:border-gray-800"
         >
             <!-- GitHub Link -->
             <a
@@ -100,7 +104,7 @@ onBeforeUnmount(() => {
                 :href="member.github"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-slate-950"
+                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-slate-950 dark:text-gray-500 dark:hover:text-gray-100"
             >
                 <Github class="h-4 w-4" />
                 GitHub
@@ -109,7 +113,7 @@ onBeforeUnmount(() => {
             <!-- Separator between GitHub and Facebook -->
             <span
                 v-if="member.github && (member.facebook || member.instagram)"
-                class="h-3.5 w-px bg-slate-200"
+                class="h-3.5 w-px bg-slate-200 dark:bg-gray-700"
             ></span>
 
             <!-- Facebook Link -->
@@ -118,7 +122,7 @@ onBeforeUnmount(() => {
                 :href="member.facebook"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600"
+                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600 dark:text-gray-500 dark:hover:text-indigo-400"
             >
                 <Facebook class="h-4 w-4" />
                 Facebook
@@ -126,7 +130,7 @@ onBeforeUnmount(() => {
 
             <span
                 v-if="member.facebook && member.instagram"
-                class="h-3.5 w-px bg-slate-200"
+                class="h-3.5 w-px bg-slate-200 dark:bg-gray-700"
             ></span>
 
             <a
@@ -134,7 +138,7 @@ onBeforeUnmount(() => {
                 :href="member.instagram"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-pink-600"
+                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-pink-600 dark:text-gray-500 dark:hover:text-pink-400"
             >
                 <Instagram class="h-4 w-4" />
                 Instagram
diff --git a/resources/js/components/admin/DesktopSidebar.vue b/resources/js/components/admin/DesktopSidebar.vue
index 891e6ad..32ea2d8 100644
--- a/resources/js/components/admin/DesktopSidebar.vue
+++ b/resources/js/components/admin/DesktopSidebar.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
 import { Database, LogOut } from 'lucide-vue-next';
+
 defineProps({
     navigation: Array,
 });
+
 const handleLogout = () => {
     if (confirm('Are you sure you want to log out?')) {
         router.post('/logout');
@@ -20,7 +22,7 @@ const handleClearCache = () => {
 <template>
     <nav class="space-y-1">
         <p
-            class="mb-3 px-3 text-xs font-semibold tracking-wider text-slate-400 uppercase"
+            class="mb-3 px-3 text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
         >
             Management
         </p>
@@ -32,14 +34,14 @@ const handleClearCache = () => {
         >
             <Link
                 :href="item.to"
-                class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 transition-all duration-300 hover:bg-indigo-50/60 hover:text-indigo-600"
+                class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 transition-all duration-300 hover:bg-indigo-50/60 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
             >
                 <span
-                    class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-indigo-600 transition-transform duration-200 group-hover:scale-y-100"
+                    class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-indigo-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-indigo-400"
                 ></span>
                 <component
                     :is="item.icon"
-                    class="h-4 w-4 text-slate-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:rotate-[2deg] group-hover:text-indigo-500"
+                    class="h-4 w-4 text-slate-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:rotate-[2deg] group-hover:text-indigo-500 dark:text-gray-500 dark:group-hover:text-indigo-400"
                     :stroke-width="2"
                 />
                 <span
@@ -50,7 +52,7 @@ const handleClearCache = () => {
             </Link>
             <hr
                 v-if="index < navigation.length - 1"
-                class="mx-3 my-1 border-slate-200/60"
+                class="mx-3 my-1 border-slate-200/60 dark:border-gray-700/60"
             />
         </div>
     </nav>
@@ -58,13 +60,13 @@ const handleClearCache = () => {
     <div class="space-y-3">
         <button
             @click="handleClearCache"
-            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700"
+            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700 dark:text-rose-400 dark:hover:bg-rose-500/10 dark:hover:text-rose-300"
         >
             <span
-                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100"
+                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-rose-400"
             ></span>
             <Database
-                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500"
+                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500 dark:text-rose-500 dark:group-hover:text-rose-400"
                 :stroke-width="2"
             />
             <span
@@ -75,13 +77,13 @@ const handleClearCache = () => {
         </button>
         <button
             @click="handleLogout"
-            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700"
+            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700 dark:text-rose-400 dark:hover:bg-rose-500/10 dark:hover:text-rose-300"
         >
             <span
-                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100"
+                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-rose-400"
             ></span>
             <LogOut
-                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500"
+                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500 dark:text-rose-500 dark:group-hover:text-rose-400"
                 :stroke-width="2"
             />
             <span
@@ -92,7 +94,7 @@ const handleClearCache = () => {
         </button>
 
         <div
-            class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400"
+            class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400 dark:border-gray-700/60 dark:text-gray-500"
         >
             Internal Dashboard
         </div>
diff --git a/resources/js/components/admin/MobileSideBar.vue b/resources/js/components/admin/MobileSideBar.vue
index 60559e7..aa81223 100644
--- a/resources/js/components/admin/MobileSideBar.vue
+++ b/resources/js/components/admin/MobileSideBar.vue
@@ -13,23 +13,23 @@ defineEmits(['close', 'logout']);
 <template>
     <div v-if="isOpen" class="fixed inset-0 z-50 flex md:hidden">
         <div
-            class="fixed inset-0 bg-slate-900/20 backdrop-blur-sm"
+            class="fixed inset-0 bg-slate-900/20 backdrop-blur-sm dark:bg-black/40"
             @click="$emit('close')"
         ></div>
 
         <div
-            class="relative flex w-full max-w-xs flex-1 flex-col justify-between border-r border-slate-200 bg-white/90 p-5 shadow-2xl backdrop-blur-xl"
+            class="relative flex w-full max-w-xs flex-1 flex-col justify-between border-r border-slate-200 bg-white/90 p-5 shadow-2xl backdrop-blur-xl dark:border-gray-700 dark:bg-gray-900/90"
         >
             <div>
                 <div class="mb-6 flex items-center justify-between">
                     <p
-                        class="text-xs font-semibold tracking-wider text-slate-400 uppercase"
+                        class="text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
                         Navigation
                     </p>
                     <button
                         @click="$emit('close')"
-                        class="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100"
+                        class="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
                     >
                         <X class="h-5 w-5" />
                     </button>
@@ -40,7 +40,7 @@ defineEmits(['close', 'logout']);
                         <Link
                             :href="item.to"
                             @click="$emit('close')"
-                            class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-indigo-50/60 hover:text-indigo-600"
+                            class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-indigo-50/60 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
                         >
                             <component :is="item.icon" class="h-4 w-4" />
                             <span>{{ item.name }}</span>
@@ -48,7 +48,7 @@ defineEmits(['close', 'logout']);
 
                         <hr
                             v-if="index < navigation.length - 1"
-                            class="mx-3 my-1 border-slate-200/60"
+                            class="mx-3 my-1 border-slate-200/60 dark:border-gray-700/60"
                         />
                     </div>
                 </nav>
@@ -59,7 +59,7 @@ defineEmits(['close', 'logout']);
                     method="post"
                     href="/admin/clear-cache"
                     as="button"
-                    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"
+                    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
@@ -68,14 +68,14 @@ defineEmits(['close', 'logout']);
                     method="post"
                     href="/logout"
                     as="button"
-                    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"
+                    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"
                 >
                     <LogOut class="h-4 w-4" />
                     Logout
                 </Link>
 
                 <div
-                    class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400"
+                    class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400 dark:border-gray-700/60 dark:text-gray-500"
                 >
                     Internal Dashboard
                 </div>
diff --git a/resources/js/components/admin/NodeRow.vue b/resources/js/components/admin/NodeRow.vue
index 5f638f7..359fed7 100644
--- a/resources/js/components/admin/NodeRow.vue
+++ b/resources/js/components/admin/NodeRow.vue
@@ -16,7 +16,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`${$page.url}/${node.slug}`)"
-        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-xl border border-transparent p-2 text-center transition-all duration-200 hover:border-indigo-100/60 hover:bg-slate-50/60 hover:shadow-sm active:scale-95"
+        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-xl border border-transparent p-2 text-center transition-all duration-200 hover:border-indigo-100/60 hover:bg-slate-50/60 hover:shadow-sm active:scale-95 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/60"
     >
         <div
             class="absolute top-1 right-1 z-10 flex gap-1 opacity-100 transition-opacity duration-150 md:opacity-0 md:group-hover:opacity-100"
@@ -24,7 +24,7 @@ const handleDelete = () => {
         >
             <Link
                 :href="`/admin/nodes/edit/${node.id}`"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600"
+                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
                 title="Edit Node"
             >
                 <Pencil class="h-2.5 w-2.5" :stroke-width="2.2" />
@@ -34,7 +34,7 @@ const handleDelete = () => {
             <button
                 type="button"
                 @click="handleDelete"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600"
+                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
                 title="Delete Node"
             >
                 <Trash2 class="h-2.5 w-2.5" :stroke-width="2.2" />
@@ -43,14 +43,14 @@ const handleDelete = () => {
         </div>
 
         <div
-            class="mb-2 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600"
+            class="mb-2 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:border-gray-700/40 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
         >
             <Folder class="h-6.5 w-6.5 stroke-[2.2]" />
         </div>
 
         <div class="w-full max-w-[100px] px-0.5">
             <span
-                class="block truncate text-xs font-bold text-slate-900 transition-colors group-hover:text-indigo-600"
+                class="block truncate text-xs font-bold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                 :title="node.name"
             >
                 {{ node.name }}
diff --git a/resources/js/components/admin/ResourceRow.vue b/resources/js/components/admin/ResourceRow.vue
index 6f88573..6e17042 100644
--- a/resources/js/components/admin/ResourceRow.vue
+++ b/resources/js/components/admin/ResourceRow.vue
@@ -24,7 +24,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`/resources/${resource.id}`)"
-        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-xl border border-transparent p-2 text-center transition-all duration-200 hover:border-amber-100/60 hover:bg-amber-50/30 hover:shadow-sm active:scale-95"
+        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-xl border border-transparent p-2 text-center transition-all duration-200 hover:border-amber-100/60 hover:bg-amber-50/30 hover:shadow-sm active:scale-95 dark:hover:border-amber-500/30 dark:hover:bg-amber-500/10"
     >
         <div
             class="absolute top-1 right-1 z-10 flex gap-1 opacity-100 transition-opacity duration-150 md:opacity-0 md:group-hover:opacity-100"
@@ -33,7 +33,7 @@ const handleDelete = () => {
             <Link
                 :href="`/admin/resources/edit/${resource.id}`"
                 target="_self"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-amber-200 hover:bg-amber-50 hover:text-amber-700"
+                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-amber-200 hover:bg-amber-50 hover:text-amber-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-amber-500/30 dark:hover:bg-amber-500/10 dark:hover:text-amber-400"
                 title="Edit Resource"
             >
                 <Pencil class="h-2.5 w-2.5" :stroke-width="2.2" />
@@ -43,7 +43,7 @@ const handleDelete = () => {
             <button
                 type="button"
                 @click="handleDelete"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600"
+                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
                 title="Delete Resource"
             >
                 <Trash2 class="h-2.5 w-2.5" :stroke-width="2.2" />
@@ -52,7 +52,7 @@ const handleDelete = () => {
         </div>
 
         <div
-            class="mb-2 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70 group-hover:text-amber-700"
+            class="mb-2 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70 group-hover:text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400 dark:group-hover:border-amber-500/30 dark:group-hover:bg-amber-500/20 dark:group-hover:text-amber-400"
         >
             <FileImage
                 v-if="resource.resource_type === 'image'"
@@ -75,7 +75,7 @@ const handleDelete = () => {
 
         <div class="w-full max-w-[100px] px-0.5">
             <span
-                class="block truncate text-xs font-bold text-slate-900 transition-colors group-hover:text-amber-700"
+                class="block truncate text-xs font-bold text-slate-900 transition-colors group-hover:text-amber-700 dark:text-gray-100 dark:group-hover:text-amber-400"
                 :title="resource.title"
             >
                 {{ resource.title }}
diff --git a/resources/js/components/admin/SubjectCard.vue b/resources/js/components/admin/SubjectCard.vue
index a6c7174..4f3f3c6 100644
--- a/resources/js/components/admin/SubjectCard.vue
+++ b/resources/js/components/admin/SubjectCard.vue
@@ -41,7 +41,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`/admin/subjects/${subject.slug}/nodes`)"
-        class="group relative flex cursor-pointer flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-indigo-200 hover:bg-slate-50/40 hover:shadow-sm"
+        class="group relative flex cursor-pointer flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-indigo-200 hover:bg-slate-50/40 hover:shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/40"
     >
         <!-- Quick Actions: Edit & Delete Buttons -->
         <div
@@ -50,7 +50,7 @@ const handleDelete = () => {
         >
             <Link
                 :href="`/admin/subjects/edit/${subject.id}`"
-                class="inline-flex h-6 items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600"
+                class="inline-flex h-6 items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
                 title="Edit Subject"
             >
                 <Pencil class="h-3 w-3" :stroke-width="2" />
@@ -60,7 +60,7 @@ const handleDelete = () => {
             <button
                 type="button"
                 @click="handleDelete"
-                class="inline-flex h-6 items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600"
+                class="inline-flex h-6 items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
                 title="Delete Subject"
             >
                 <Trash2 class="h-3 w-3" :stroke-width="2" />
@@ -74,8 +74,8 @@ const handleDelete = () => {
                 <div
                     :class="[
                         subject.tailwind_format ||
-                            'bg-slate-100 text-slate-600',
-                        'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-black/5 shadow-inner transition-transform duration-200 group-hover:scale-105',
+                            'bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-400',
+                        'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-black/5 shadow-inner transition-transform duration-200 group-hover:scale-105 dark:border-white/10',
                     ]"
                 >
                     <component
@@ -89,10 +89,10 @@ const handleDelete = () => {
                     v-if="subject.course"
                     :class="[
                         subject.course.toUpperCase() === 'SSC'
-                            ? 'bg-amber-50 text-amber-700 ring-amber-600/20'
+                            ? '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'
-                              : 'bg-slate-100 text-slate-600 ring-slate-500/10',
+                              ? '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',
                         'hidden items-center rounded-md px-2 py-0.5 text-[10px] font-extrabold tracking-wider uppercase ring-1 ring-inset sm:inline-flex',
                     ]"
                 >
@@ -103,12 +103,14 @@ const handleDelete = () => {
             <!-- Title & Items Count -->
             <div class="w-full min-w-0 pr-12 sm:pr-0">
                 <h3
-                    class="truncate text-sm font-bold text-slate-800 transition-colors group-hover:text-indigo-600"
+                    class="truncate text-sm font-bold text-slate-800 transition-colors group-hover:text-indigo-600 dark:text-gray-200 dark:group-hover:text-indigo-400"
                 >
                     {{ subject.name }}
                 </h3>
 
-                <p class="mt-0.5 text-[11px] font-semibold text-slate-400">
+                <p
+                    class="mt-0.5 text-[11px] font-semibold text-slate-400 dark:text-gray-500"
+                >
                     {{ subject.nodes_count || 0 }} items
                 </p>
             </div>
@@ -119,10 +121,10 @@ const handleDelete = () => {
             v-if="subject.course"
             :class="[
                 subject.course.toUpperCase() === 'SSC'
-                    ? 'bg-amber-50 text-amber-700 ring-amber-600/20'
+                    ? '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'
-                      : 'bg-slate-100 text-slate-600 ring-slate-500/10',
+                      ? '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',
                 'absolute right-3 bottom-3 inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-extrabold tracking-wider uppercase ring-1 ring-inset sm:hidden',
             ]"
         >
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index c90b68f..05de85d 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -10,13 +10,13 @@ const userId = page.props.auth.user.id;
 const getRoleBadgeStyles = (role: string) => {
     switch (role) {
         case 'admin':
-            return 'bg-red-50 text-red-700 border-red-100';
+            return 'bg-red-50 text-red-700 border-red-100 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/30';
         case 'manager':
-            return 'bg-amber-50 text-amber-700 border-amber-100';
+            return 'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30';
         case 'editor':
-            return 'bg-purple-50 text-purple-700 border-purple-100';
+            return 'bg-purple-50 text-purple-700 border-purple-100 dark:bg-purple-500/10 dark:text-purple-400 dark:border-purple-500/30';
         default:
-            return 'bg-gray-50 text-gray-700 border-gray-100';
+            return 'bg-gray-50 text-gray-700 border-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700';
     }
 };
 
@@ -28,37 +28,37 @@ const deleteUser = (id: number) => {
 </script>
 <template>
     <tr
-        class="block border-b border-gray-100 p-5 transition-colors duration-200 last:border-b-0 md:table-row md:border-b md:border-gray-200/60 md:p-0"
+        class="block border-b border-gray-100 p-5 transition-colors duration-200 last:border-b-0 md:table-row md:border-b md:border-gray-200/60 md:p-0 dark:border-gray-800 dark:md:border-gray-600"
         :class="[
             user.id === userId
-                ? 'bg-blue-50/50 md:bg-blue-50/30 md:hover:bg-blue-50/50'
-                : 'bg-white md:hover:bg-gray-50/50',
+                ? 'bg-blue-50/50 md:bg-blue-50/30 md:hover:bg-blue-50/50 dark:bg-blue-500/10 dark:md:bg-blue-500/10 dark:md:hover:bg-blue-500/20'
+                : 'bg-white md:hover:bg-gray-50/50 dark:bg-gray-900 dark:md:hover:bg-gray-800',
         ]"
     >
         <td
-            class="block py-1.5 font-medium text-gray-900 md:table-cell md:px-6 md:py-4.5"
+            class="block py-1.5 font-medium text-gray-900 md:table-cell md:px-6 md:py-4.5 dark:text-gray-100"
         >
             <div class="flex items-center gap-3.5">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold tracking-wider text-slate-700 uppercase shadow-xs ring-1 ring-black/5"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold tracking-wider text-slate-700 uppercase shadow-xs ring-1 ring-black/5 dark:bg-gray-800 dark:text-gray-300"
                 >
                     {{ user.name.charAt(0) }}
                 </div>
                 <div class="flex min-w-0 flex-col">
                     <div class="flex items-center gap-1.5">
                         <span
-                            class="truncate text-sm font-semibold text-gray-900"
+                            class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
                             >{{ user.name }}</span
                         >
                         <span
                             v-if="user.id === userId"
-                            class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700"
+                            class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                         >
                             You
                         </span>
                     </div>
                     <span
-                        class="mt-0.5 truncate text-xs text-gray-400 md:hidden"
+                        class="mt-0.5 truncate text-xs text-gray-400 md:hidden dark:text-gray-500"
                     >
                         {{ user.email }}
                     </span>
@@ -67,14 +67,16 @@ const deleteUser = (id: number) => {
         </td>
 
         <td
-            class="hidden text-sm font-normal text-gray-600 md:table-cell md:px-6 md:py-4.5"
+            class="hidden text-sm font-normal text-gray-600 md:table-cell md:px-6 md:py-4.5 dark:text-gray-400"
         >
             {{ user.email }}
         </td>
 
         <td class="mt-1 block py-1.5 md:mt-0 md:table-cell md:px-6 md:py-4.5">
             <div class="flex items-center gap-2 md:block">
-                <span class="w-12 text-xs font-medium text-gray-400 md:hidden">
+                <span
+                    class="w-12 text-xs font-medium text-gray-400 md:hidden dark:text-gray-500"
+                >
                     Role:
                 </span>
                 <span
@@ -87,19 +89,19 @@ const deleteUser = (id: number) => {
         </td>
 
         <td
-            class="mt-3 block border-t border-gray-100 py-2 pt-3 md:mt-0 md:table-cell md:border-t-0 md:px-6 md:py-4.5 md:pt-0 md:text-right"
+            class="mt-3 block border-t border-gray-100 py-2 pt-3 md:mt-0 md:table-cell md:border-t-0 md:px-6 md:py-4.5 md:pt-0 md:text-right dark:border-gray-800"
         >
             <div class="flex items-center justify-start gap-3.5 md:justify-end">
                 <Link
                     :href="`/admin/users/edit/${user.id}`"
-                    class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-2xs transition-all hover:bg-gray-50 hover:text-blue-600 md:border-0 md:bg-transparent md:p-0 md:text-blue-600 md:shadow-none md:hover:text-blue-700 md:hover:underline"
+                    class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-2xs transition-all hover:bg-gray-50 hover:text-blue-600 md:border-0 md:bg-transparent md:p-0 md:text-blue-600 md:shadow-none md:hover:text-blue-700 md:hover:underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-blue-400 dark:md:bg-transparent dark:md:text-blue-400 dark:md:hover:text-blue-400"
                 >
                     Edit
                 </Link>
 
                 <button
                     @click="deleteUser(user.id)"
-                    class="inline-flex items-center justify-center gap-1 rounded-lg border border-red-100 bg-red-50/40 px-3 py-1.5 text-xs font-medium text-red-600 shadow-2xs transition-all hover:bg-red-50 hover:text-red-700 md:border-0 md:bg-transparent md:p-0 md:text-red-500 md:shadow-none md:hover:text-red-700"
+                    class="inline-flex items-center justify-center gap-1 rounded-lg border border-red-100 bg-red-50/40 px-3 py-1.5 text-xs font-medium text-red-600 shadow-2xs transition-all hover:bg-red-50 hover:text-red-700 md:border-0 md:bg-transparent md:p-0 md:text-red-500 md:shadow-none md:hover:text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/10 dark:hover:text-red-400 dark:md:bg-transparent dark:md:text-red-400 dark:md:hover:text-red-400"
                 >
                     <Trash2 class="h-3.5 w-3.5" />
                     <span class="md:hidden">Delete</span>
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 108f232..99fbab9 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -38,17 +38,17 @@ const closeMobileSidebar = () => {
 <template>
     <LoadingSpinner />
     <div
-        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white"
+        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
     >
         <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
             <div
-                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px]"
+                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
             ></div>
             <div
-                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px]"
+                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
             ></div>
             <div
-                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px]"
+                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
             ></div>
         </div>
 
@@ -56,23 +56,23 @@ const closeMobileSidebar = () => {
             <NavBar :is-admin="true" />
 
             <div
-                class="flex items-center gap-3 border-b border-slate-200/80 bg-white/60 px-4 py-3 backdrop-blur-md md:hidden"
+                class="flex items-center gap-3 border-b border-slate-200/80 bg-white/60 px-4 py-3 backdrop-blur-md md:hidden dark:border-gray-700/80 dark:bg-gray-900/60"
             >
                 <button
                     @click="openMobileSidebar"
-                    class="rounded-lg p-1.5 text-slate-600 hover:bg-slate-100"
+                    class="rounded-lg p-1.5 text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
                 >
                     ☰
                 </button>
                 <span
-                    class="text-xs font-semibold tracking-wider text-slate-400 uppercase"
+                    class="text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >Dashboard Menu</span
                 >
             </div>
 
             <div class="flex flex-1">
                 <aside
-                    class="hidden w-64 border-r border-slate-200/80 bg-white/40 backdrop-blur-md md:block"
+                    class="hidden w-64 border-r border-slate-200/80 bg-white/40 backdrop-blur-md md:block dark:border-gray-700/80 dark:bg-gray-900/40"
                 >
                     <div
                         class="sticky top-16 flex h-[calc(100vh-4rem)] flex-col justify-between p-4"
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index ee8f7be..c0639ae 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -3,25 +3,23 @@ import Footer from '@/components/Footer.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import NavBar from '@/components/NavBar.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
-
-// const searchQuery = ref('');
 </script>
 
 <template>
     <LoadingSpinner />
     <div
-        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white"
+        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
     >
         <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
             <div
-                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px]"
+                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
             ></div>
 
             <div
-                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px]"
+                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
             ></div>
             <div
-                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px]"
+                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
             ></div>
         </div>
 
diff --git a/resources/js/lib/useDarkMode.ts b/resources/js/lib/useDarkMode.ts
new file mode 100644
index 0000000..3ef0de4
--- /dev/null
+++ b/resources/js/lib/useDarkMode.ts
@@ -0,0 +1,83 @@
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+
+type Theme = 'light' | 'dark' | 'system';
+
+const theme = ref<Theme>('system');
+const isDark = ref(false);
+let initialized = false;
+let mediaQuery: MediaQueryList | null = null;
+
+function applyTheme(dark: boolean) {
+    document.documentElement.classList.toggle('dark', dark);
+}
+
+function resolveTheme(t: Theme): boolean {
+    if (t === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+
+    return t === 'dark';
+}
+
+function handleSystemChange() {
+    if (theme.value === 'system') {
+        isDark.value = resolveTheme('system');
+        applyTheme(isDark.value);
+    }
+}
+
+export function useDarkMode() {
+    if (!initialized) {
+        initialized = true;
+
+        onMounted(() => {
+            const stored = localStorage.getItem('theme') as Theme | null;
+
+            if (
+                stored === 'light' ||
+                stored === 'dark' ||
+                stored === 'system'
+            ) {
+                theme.value = stored;
+            } else {
+                theme.value = 'system';
+            }
+
+            isDark.value = resolveTheme(theme.value);
+            applyTheme(isDark.value);
+
+            mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', handleSystemChange);
+
+            window.addEventListener('storage', (e) => {
+                if (e.key === 'theme') {
+                    const val = e.newValue as Theme | null;
+
+                    if (val === 'light' || val === 'dark' || val === 'system') {
+                        theme.value = val;
+                        isDark.value = resolveTheme(val);
+                        applyTheme(isDark.value);
+                    }
+                }
+            });
+        });
+
+        onUnmounted(() => {
+            mediaQuery?.removeEventListener('change', handleSystemChange);
+        });
+
+        watch(theme, (t) => {
+            isDark.value = resolveTheme(t);
+            applyTheme(isDark.value);
+            localStorage.setItem('theme', t);
+        });
+    }
+
+    function toggle() {
+        const cycle: Theme[] = ['system', 'light', 'dark'];
+        const next = cycle[(cycle.indexOf(theme.value) + 1) % 3];
+        theme.value = next;
+    }
+
+    return { theme, isDark, toggle };
+}
diff --git a/resources/js/pages/Blog/Index.vue b/resources/js/pages/Blog/Index.vue
index a8e84f2..06e955e 100644
--- a/resources/js/pages/Blog/Index.vue
+++ b/resources/js/pages/Blog/Index.vue
@@ -25,15 +25,15 @@ const clearSearch = () => {
 <template>
     <main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
         <div
-            class="mb-10 flex flex-col gap-6 border-b border-slate-100 pb-6 lg:flex-row lg:items-center lg:justify-between"
+            class="mb-10 flex flex-col gap-6 border-b border-slate-100 pb-6 lg:flex-row lg:items-center lg:justify-between dark:border-gray-800"
         >
             <div>
                 <h1
-                    class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl"
+                    class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl dark:text-gray-100"
                 >
                     Our Journal
                 </h1>
-                <p class="mt-2 text-sm text-slate-500">
+                <p class="mt-2 text-sm text-slate-500 dark:text-gray-400">
                     পড়াশোনার টিপস, শিক্ষাসংক্রান্ত খবর এবং অন্যান্য
                     গুরুত্বপূর্ণ তথ্য পড়ুন।
                 </p>
@@ -43,7 +43,7 @@ const clearSearch = () => {
                 <div class="flex flex-col gap-2.5 sm:flex-row">
                     <div class="relative flex-1">
                         <div
-                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400"
+                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400 dark:text-gray-500"
                         >
                             <Search class="h-5 w-5" />
                         </div>
@@ -53,14 +53,14 @@ const clearSearch = () => {
                             type="text"
                             placeholder="আর্টিকেল খুঁজুন..."
                             @keyup.enter="handleSearch"
-                            class="w-full rounded-xl border border-slate-200 py-3 pr-10 pl-11 text-sm text-slate-900 shadow-sm transition-all placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none"
+                            class="w-full rounded-xl border border-slate-200 py-3 pr-10 pl-11 text-sm text-slate-900 shadow-sm transition-all placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
                         />
 
                         <button
                             v-if="searchQuery"
                             @click="clearSearch"
                             type="button"
-                            class="absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
+                            class="absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400"
                             aria-label="Clear search"
                         >
                             <X class="h-4 w-4" />
@@ -88,15 +88,17 @@ const clearSearch = () => {
 
         <div
             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"
+            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"
         >
-            <div class="mb-4 rounded-xl bg-white p-3 text-slate-400 shadow-sm">
+            <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">
+            <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">
+            <p class="mt-1 max-w-sm text-sm text-slate-500 dark:text-gray-400">
                 "{{ searchQuery }}"-এর সাথে মিল থাকা কোনো আর্টিকেল পাওয়া
                 যায়নি। বানান যাচাই করুন অথবা অনুসন্ধান মুছে আবার চেষ্টা করুন।
             </p>
@@ -110,7 +112,7 @@ const clearSearch = () => {
 
         <div
             v-if="blogs.links && blogs.links.length > 3"
-            class="mt-16 border-t border-slate-100 pt-6"
+            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
@@ -124,9 +126,9 @@ const clearSearch = () => {
                         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':
+                            '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':
+                            '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,
                         }"
                     >
@@ -142,13 +144,15 @@ const clearSearch = () => {
                     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'
-                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300'
+                            ? '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">
+                <div
+                    class="px-4 text-xs font-semibold text-slate-500 dark:text-gray-400"
+                >
                     Page {{ blogs.current_page }}
                 </div>
                 <component
@@ -159,8 +163,8 @@ const clearSearch = () => {
                     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'
-                            : 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300'
+                            ? '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;
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 6b8deb3..7a8dcbb 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -58,7 +58,7 @@ const copyLink = async () => {
         <div class="mb-8">
             <button
                 @click="goBack"
-                class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-600"
+                class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
             >
                 <ArrowLeft class="h-4 w-4" />
                 <span>Back to journal</span>
@@ -69,12 +69,14 @@ const copyLink = async () => {
             <div
                 class="mb-6 flex flex-wrap items-center gap-4 text-xs sm:text-sm"
             >
-                <div class="flex items-center gap-1.5 text-slate-500">
-                    <User class="h-4 w-4 text-slate-400" />
+                <div
+                    class="flex items-center gap-1.5 text-slate-500 dark:text-gray-400"
+                >
+                    <User class="h-4 w-4 text-slate-400 dark:text-gray-500" />
                     <span>By</span>
                     <Link
                         :href="`/about-us#author-${blog.user?.id}`"
-                        class="font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline"
+                        class="font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         {{ blog.user?.name }}
                     </Link>
@@ -82,28 +84,34 @@ const copyLink = async () => {
 
                 <div
                     v-if="formattedDate"
-                    class="flex items-center gap-1.5 text-slate-500"
+                    class="flex items-center gap-1.5 text-slate-500 dark:text-gray-400"
                 >
-                    <Calendar class="h-4 w-4 text-slate-400" />
-                    <time :datetime="blog.created_at" class="text-slate-500">{{
-                        formattedDate
-                    }}</time>
+                    <Calendar
+                        class="h-4 w-4 text-slate-400 dark:text-gray-500"
+                    />
+                    <time
+                        :datetime="blog.created_at"
+                        class="text-slate-500 dark:text-gray-400"
+                        >{{ formattedDate }}</time
+                    >
                 </div>
 
-                <div class="flex items-center gap-1.5 text-slate-500">
-                    <Eye class="h-4 w-4 text-slate-400" />
+                <div
+                    class="flex items-center gap-1.5 text-slate-500 dark:text-gray-400"
+                >
+                    <Eye class="h-4 w-4 text-slate-400 dark:text-gray-500" />
                     <span>{{ blog.views }} views</span>
                 </div>
             </div>
 
             <h1
-                class="text-3xl leading-tight font-extrabold tracking-tight text-slate-900 sm:text-4xl md:text-5xl"
+                class="text-3xl leading-tight font-extrabold tracking-tight text-slate-900 sm:text-4xl md:text-5xl dark:text-gray-100"
             >
                 {{ blog.title }}
             </h1>
 
             <div
-                class="my-8 overflow-hidden rounded-2xl border border-slate-100 bg-slate-50 shadow-sm"
+                class="my-8 overflow-hidden rounded-2xl border border-slate-100 bg-slate-50 shadow-sm dark:border-gray-800 dark:bg-gray-800"
             >
                 <img
                     :src="
@@ -119,13 +127,13 @@ const copyLink = async () => {
 
         <!-- "Write for us" CTA Banner -->
         <section
-            class="mt-12 rounded-2xl border border-indigo-100 bg-indigo-50/50 p-6 sm:flex sm:items-center sm:justify-between"
+            class="mt-12 rounded-2xl border border-indigo-100 bg-indigo-50/50 p-6 sm:flex sm:items-center sm:justify-between dark:border-indigo-500/30 dark:bg-indigo-500/10"
         >
             <div class="mb-4 sm:mb-0">
-                <h3 class="text-lg font-bold text-slate-900">
+                <h3 class="text-lg font-bold text-slate-900 dark:text-gray-100">
                     Want to write a blog on this site?
                 </h3>
-                <p class="mt-1 text-sm text-slate-600">
+                <p class="mt-1 text-sm text-slate-600 dark:text-gray-400">
                     Share your thoughts, stories, and expertise with our
                     community.
                 </p>
@@ -138,23 +146,27 @@ const copyLink = async () => {
             </Link>
         </section>
 
-        <footer class="mt-12 border-t border-slate-200 pt-8">
+        <footer
+            class="mt-12 border-t border-slate-200 pt-8 dark:border-gray-700"
+        >
             <div
-                class="flex flex-col gap-6 rounded-2xl bg-slate-50 p-6 sm:flex-row sm:items-center sm:justify-between"
+                class="flex flex-col gap-6 rounded-2xl bg-slate-50 p-6 sm:flex-row sm:items-center sm:justify-between dark:bg-gray-800"
             >
                 <div>
-                    <p class="text-sm text-slate-500">Written by</p>
+                    <p class="text-sm text-slate-500 dark:text-gray-400">
+                        Written by
+                    </p>
 
                     <Link
                         :href="`/about-us#author-${blog.user?.id}`"
-                        class="mt-1 block text-lg font-semibold text-slate-900 underline transition"
+                        class="mt-1 block text-lg font-semibold text-slate-900 underline transition dark:text-gray-100"
                     >
                         {{ blog.user?.name }}
                     </Link>
 
                     <Link
                         :href="`/blogs?q=${encodeURIComponent(blog.user?.name || '')}`"
-                        class="mt-2 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline"
+                        class="mt-2 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         View more articles by {{ blog.user?.name }} →
                     </Link>
@@ -163,7 +175,7 @@ const copyLink = async () => {
                 <div class="flex gap-3">
                     <button
                         @click="copyLink"
-                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-indigo-500 hover:text-indigo-600"
+                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-indigo-500 hover:text-indigo-600 dark:border-gray-600 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:text-indigo-400"
                     >
                         {{ copied ? 'Copied!' : 'Copy link' }}
                     </button>
diff --git a/resources/js/pages/ContributorGuide.vue b/resources/js/pages/ContributorGuide.vue
index 691970f..66316d4 100644
--- a/resources/js/pages/ContributorGuide.vue
+++ b/resources/js/pages/ContributorGuide.vue
@@ -104,7 +104,7 @@ onUnmounted(() => {
     <header class="mx-auto max-w-4xl px-4 pt-8 pb-4 text-center sm:pt-12">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-sm font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-sm font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-4 w-4 transition-transform group-hover:-translate-x-1"
@@ -112,12 +112,12 @@ onUnmounted(() => {
             Back to Home
         </Link>
         <h1
-            class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
             Contributor <span class="text-indigo-600">Guide</span>
         </h1>
         <p
-            class="mx-auto max-w-lg text-xs font-bold tracking-widest text-slate-500 uppercase sm:text-sm"
+            class="mx-auto max-w-lg text-xs font-bold tracking-widest text-slate-500 uppercase sm:text-sm dark:text-gray-400"
         >
             Content Management-এর ধাপে ধাপে সম্পূর্ণ নির্দেশিকা
         </p>
@@ -126,13 +126,13 @@ onUnmounted(() => {
     <!-- Sticky Navigation Access Bar -->
     <nav class="sticky top-4 z-30 mx-auto mb-10 max-w-4xl px-4">
         <div
-            class="rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-lg shadow-slate-200/50 backdrop-blur-md"
+            class="rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-lg shadow-slate-200/50 backdrop-blur-md dark:border-gray-700 dark:bg-gray-900/95 dark:shadow-gray-900/50"
         >
             <div
-                class="mb-2.5 flex items-center justify-between gap-2 border-b border-slate-100 px-1 pb-2"
+                class="mb-2.5 flex items-center justify-between gap-2 border-b border-slate-100 px-1 pb-2 dark:border-gray-800"
             >
                 <div
-                    class="flex items-center gap-2 text-xs font-extrabold tracking-wider text-slate-900 uppercase"
+                    class="flex items-center gap-2 text-xs font-extrabold tracking-wider text-slate-900 uppercase dark:text-gray-100"
                 >
                     <div
                         class="flex h-6 w-6 items-center justify-center rounded-lg bg-indigo-600 text-white"
@@ -141,7 +141,8 @@ onUnmounted(() => {
                     </div>
                     <span>Quick Navigation Index</span>
                 </div>
-                <span class="text-[11px] font-bold text-slate-400"
+                <span
+                    class="text-[11px] font-bold text-slate-400 dark:text-gray-500"
                     >8 Chapters</span
                 >
             </div>
@@ -157,8 +158,8 @@ onUnmounted(() => {
                     :class="[
                         'group flex shrink-0 items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95',
                         activeId === link.id
-                            ? 'border-indigo-600 bg-indigo-50 text-indigo-700 shadow-xs'
-                            : 'border-slate-200 bg-slate-50/80 text-slate-800 hover:border-indigo-300 hover:bg-indigo-50/60 hover:text-indigo-700',
+                            ? 'border-indigo-600 bg-indigo-50 text-indigo-700 shadow-xs dark:border-indigo-500 dark:bg-indigo-500/10 dark:text-indigo-300'
+                            : 'border-slate-200 bg-slate-50/80 text-slate-800 hover:border-indigo-300 hover:bg-indigo-50/60 hover:text-indigo-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-indigo-500/50 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300',
                     ]"
                 >
                     <span
@@ -166,7 +167,7 @@ onUnmounted(() => {
                             'flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-black transition-colors',
                             activeId === link.id
                                 ? 'bg-indigo-600 text-white'
-                                : 'border border-slate-200 bg-white text-indigo-600 group-hover:border-indigo-600 group-hover:bg-indigo-600 group-hover:text-white',
+                                : 'border border-slate-200 bg-white text-indigo-600 group-hover:border-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:border-gray-700 dark:bg-gray-900',
                         ]"
                     >
                         {{ link.num }}
@@ -179,25 +180,27 @@ onUnmounted(() => {
 
     <main class="mx-auto max-w-4xl px-4 pb-24 sm:px-6">
         <div
-            class="space-y-12 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-10"
+            class="space-y-12 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <!-- Section 01: Welcome & Getting Started -->
             <section id="getting-started" class="scroll-mt-44 space-y-5">
                 <div class="flex items-center gap-2">
                     <span
-                        class="inline-flex items-center justify-center rounded-lg bg-indigo-100 px-2.5 py-1 text-xs font-black text-indigo-700"
+                        class="inline-flex items-center justify-center rounded-lg bg-indigo-100 px-2.5 py-1 text-xs font-black text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300"
                         >01</span
                     >
                     <h2
-                        class="text-xl font-black tracking-tight text-slate-950 sm:text-2xl"
+                        class="text-xl font-black tracking-tight text-slate-950 sm:text-2xl dark:text-gray-100"
                     >
                         Welcome to the Team!
                     </h2>
                 </div>
                 <p
-                    class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                    class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                 >
-                    <strong class="font-bold text-slate-900">HSCStack</strong>
+                    <strong class="font-bold text-slate-900 dark:text-gray-100"
+                        >HSCStack</strong
+                    >
                     -কে আরও গোছানো এবং শিক্ষার্থীদের জন্য আরও উপকারী করে তুলতে
                     আপনার অবদানের জন্য ধন্যবাদ। এই গাইডে আমাদের admin panel
                     কীভাবে কাজ করে তা সহজ ভাষায় ব্যাখ্যা করা হয়েছে। এটি বুঝতে
@@ -205,7 +208,7 @@ onUnmounted(() => {
                 </p>
 
                 <div
-                    class="flex flex-col items-start justify-between gap-4 rounded-xl border border-indigo-100 bg-indigo-50/70 p-4 sm:flex-row sm:items-center sm:p-6"
+                    class="flex flex-col items-start justify-between gap-4 rounded-xl border border-indigo-100 bg-indigo-50/70 p-4 sm:flex-row sm:items-center sm:p-6 dark:border-indigo-500/30 dark:bg-indigo-500/10"
                 >
                     <div class="flex items-start gap-3.5">
                         <div
@@ -215,12 +218,12 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <h3
-                                class="text-xs font-bold tracking-wide text-indigo-950 uppercase sm:text-sm"
+                                class="text-xs font-bold tracking-wide text-indigo-950 uppercase sm:text-sm dark:text-indigo-300"
                             >
                                 Become an Official Contributor
                             </h3>
                             <p
-                                class="mt-1 text-xs leading-relaxed font-medium text-indigo-800/90 sm:text-sm"
+                                class="mt-1 text-xs leading-relaxed font-medium text-indigo-800/90 sm:text-sm dark:text-indigo-300/90"
                             >
                                 Admin panel ব্যবহার করার জন্য আপনার একটি
                                 approved contributor account থাকা আবশ্যক।
@@ -236,7 +239,7 @@ onUnmounted(() => {
                 </div>
 
                 <p
-                    class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                    class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                 >
                     আপনার account approve হওয়ার পর, আপনি কী ধরনের কাজ করবেন তার
                     ভিত্তিতে আপনাকে একটি নির্দিষ্ট role প্রদান করা হবে, এবং সেই
@@ -245,7 +248,7 @@ onUnmounted(() => {
                 </p>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 02: Dashboard -->
             <section
@@ -253,23 +256,25 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11 dark:bg-indigo-500/10"
                 >
                     02
                 </div>
                 <div class="space-y-2">
-                    <h3 class="text-base font-bold text-slate-900 sm:text-lg">
+                    <h3
+                        class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
+                    >
                         Dashboard (Overview)
                     </h3>
                     <p
-                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                     >
                         Login করার পর এটিই হবে আপনার প্রথম screen। এখানে visitor
                         traffic এবং ওয়েবসাইটের বিভিন্ন basic statistics দেখতে
                         পাবেন।
                     </p>
                     <p
-                        class="block rounded-lg border border-slate-100 bg-slate-50 p-3 text-xs font-semibold text-slate-500 italic sm:text-sm"
+                        class="block rounded-lg border border-slate-100 bg-slate-50 p-3 text-xs font-semibold text-slate-500 italic sm:text-sm dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400"
                     >
                         💡 Note: এখানে আপনার কোনো action নেওয়ার প্রয়োজন নেই।
                         এটি শুধু statistics দেখার জন্য।
@@ -277,7 +282,7 @@ onUnmounted(() => {
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 03: Manage Contents -->
             <section
@@ -285,19 +290,19 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11 dark:bg-indigo-500/10"
                 >
                     03
                 </div>
                 <div class="space-y-4">
                     <div>
                         <h3
-                            class="text-base font-bold text-slate-900 sm:text-lg"
+                            class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
                         >
                             Manage Contents
                         </h3>
                         <p
-                            class="mt-1 text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                            class="mt-1 text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                         >
                             আপনি সবচেয়ে বেশি সময় এই section-এ কাজ করবেন। এখানে
                             <strong>Subjects</strong>, <strong>Folders</strong>,
@@ -307,30 +312,32 @@ onUnmounted(() => {
                     </div>
 
                     <div
-                        class="space-y-4 border-l-2 border-indigo-100 pl-3 sm:pl-6"
+                        class="space-y-4 border-l-2 border-indigo-100 pl-3 sm:pl-6 dark:border-indigo-500/30"
                     >
                         <div
-                            class="space-y-2 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5"
+                            class="space-y-2 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5 dark:border-gray-700 dark:bg-gray-800/50"
                         >
                             <h4
-                                class="text-xs font-black tracking-wider text-indigo-600 uppercase"
+                                class="text-xs font-black tracking-wider text-indigo-600 uppercase dark:text-indigo-400"
                             >
                                 Top Level: Subject
                             </h4>
                             <p
-                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base"
+                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base dark:text-gray-300"
                             >
                                 Subject বলতে মূল academic course বোঝায়, যেমন:
-                                <strong class="text-slate-900"
+                                <strong
+                                    class="text-slate-900 dark:text-gray-100"
                                     >Bangla 1st Paper</strong
                                 >
                                 অথবা
-                                <strong class="text-slate-900"
+                                <strong
+                                    class="text-slate-900 dark:text-gray-100"
                                     >English 1st Paper</strong
                                 >।
                             </p>
                             <div
-                                class="rounded-lg border border-amber-200/60 bg-amber-50 p-3 text-xs leading-relaxed font-medium text-amber-900 sm:text-sm"
+                                class="rounded-lg border border-amber-200/60 bg-amber-50 p-3 text-xs leading-relaxed font-medium text-amber-900 sm:text-sm dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100"
                             >
                                 <strong>Important Rule:</strong> প্রতিটি
                                 paper-এর জন্য আলাদা Subject তৈরি করুন। (যেমন:
@@ -342,15 +349,15 @@ onUnmounted(() => {
                         </div>
 
                         <div
-                            class="space-y-2 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5"
+                            class="space-y-2 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5 dark:border-gray-700 dark:bg-gray-800/50"
                         >
                             <h4
-                                class="text-xs font-black tracking-wider text-indigo-600 uppercase"
+                                class="text-xs font-black tracking-wider text-indigo-600 uppercase dark:text-indigo-400"
                             >
                                 Second Level: Folders
                             </h4>
                             <p
-                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base"
+                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base dark:text-gray-300"
                             >
                                 একটি Subject-এর ভেতরে Folder তৈরি করা যায়।
                                 এক্ষেত্রে Folder-কে
@@ -362,10 +369,11 @@ onUnmounted(() => {
                                 >)।
                             </p>
                             <p
-                                class="text-xs leading-relaxed font-normal text-slate-600 sm:text-sm"
+                                class="text-xs leading-relaxed font-normal text-slate-600 sm:text-sm dark:text-gray-400"
                             >
                                 নতুন Folder তৈরি করতে
-                                <strong class="text-slate-900"
+                                <strong
+                                    class="text-slate-900 dark:text-gray-100"
                                     >"Add Folder"</strong
                                 >
                                 বাটন ব্যবহার করুন।
@@ -373,15 +381,15 @@ onUnmounted(() => {
                         </div>
 
                         <div
-                            class="space-y-3 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5"
+                            class="space-y-3 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 sm:p-5 dark:border-gray-700 dark:bg-gray-800/50"
                         >
                             <h4
-                                class="text-xs font-black tracking-wider text-indigo-600 uppercase"
+                                class="text-xs font-black tracking-wider text-indigo-600 uppercase dark:text-indigo-400"
                             >
                                 Folder-এর ভেতরে: Resources
                             </h4>
                             <p
-                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base"
+                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base dark:text-gray-300"
                             >
                                 Resource হলো আসল study material, যা শিক্ষার্থীরা
                                 ব্যবহার করবে। যেমন: একটি handwritten note-এর ১টি
@@ -391,16 +399,16 @@ onUnmounted(() => {
                             </p>
 
                             <p
-                                class="text-xs font-bold text-slate-800 sm:text-sm"
+                                class="text-xs font-bold text-slate-800 sm:text-sm dark:text-gray-200"
                             >
                                 Supported Resource Types:
                             </p>
                             <ul
-                                class="space-y-2 text-xs font-normal text-slate-600 sm:text-sm"
+                                class="space-y-2 text-xs font-normal text-slate-600 sm:text-sm dark:text-gray-400"
                             >
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-indigo-100 px-2 py-0.5 text-xs font-bold text-indigo-700"
+                                        class="mt-0.5 shrink-0 rounded bg-indigo-100 px-2 py-0.5 text-xs font-bold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300"
                                         >Image</span
                                     >
                                     <span
@@ -410,7 +418,7 @@ onUnmounted(() => {
                                 </li>
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700"
+                                        class="mt-0.5 shrink-0 rounded bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700 dark:bg-red-500/20 dark:text-red-300"
                                         >Video</span
                                     >
                                     <span
@@ -420,13 +428,13 @@ onUnmounted(() => {
                                 </li>
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700"
+                                        class="mt-0.5 shrink-0 rounded bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300"
                                         >PDF</span
                                     >
                                     <span
                                         >এমন direct link যা
                                         <code
-                                            class="rounded bg-slate-200 px-1 font-mono text-slate-800"
+                                            class="rounded bg-slate-200 px-1 font-mono text-slate-800 dark:bg-gray-700 dark:text-gray-200"
                                             >.pdf</code
                                         >
                                         দিয়ে শেষ হয়।</span
@@ -434,7 +442,7 @@ onUnmounted(() => {
                                 </li>
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-purple-100 px-2 py-0.5 text-xs font-bold text-purple-700"
+                                        class="mt-0.5 shrink-0 rounded bg-purple-100 px-2 py-0.5 text-xs font-bold text-purple-700 dark:bg-purple-500/20 dark:text-purple-300"
                                         >Text Note</span
                                     >
                                     <span
@@ -444,18 +452,18 @@ onUnmounted(() => {
                                 </li>
                             </ul>
                             <p
-                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base"
+                                class="text-sm leading-relaxed font-normal text-slate-700 sm:text-base dark:text-gray-300"
                             >
                                 দ্রুত content management-এর জন্য Bulk Upload
                                 Tools ব্যবহার করতে পারেন:
                             </p>
 
                             <ul
-                                class="space-y-2 text-xs font-normal text-slate-600 sm:text-sm"
+                                class="space-y-2 text-xs font-normal text-slate-600 sm:text-sm dark:text-gray-400"
                             >
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-indigo-100 px-2 py-0.5 text-xs font-bold text-indigo-700"
+                                        class="mt-0.5 shrink-0 rounded bg-indigo-100 px-2 py-0.5 text-xs font-bold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300"
                                         >Bulk Images</span
                                     >
                                     <span
@@ -469,7 +477,7 @@ onUnmounted(() => {
                                 </li>
                                 <li class="flex items-start gap-2">
                                     <span
-                                        class="mt-0.5 shrink-0 rounded bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700"
+                                        class="mt-0.5 shrink-0 rounded bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700 dark:bg-red-500/20 dark:text-red-300"
                                         >Bulk Videos</span
                                     >
                                     <span
@@ -485,7 +493,7 @@ onUnmounted(() => {
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 04: Manage Blogs -->
             <section
@@ -493,51 +501,55 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11 dark:bg-indigo-500/10"
                 >
                     04
                 </div>
                 <div class="space-y-2">
-                    <h3 class="text-base font-bold text-slate-900 sm:text-lg">
+                    <h3
+                        class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
+                    >
                         Manage Blogs
                     </h3>
                     <p
-                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                     >
                         যেসব contributor-কে blog লেখার দায়িত্ব দেওয়া হয়েছে,
                         তারা
-                        <strong class="text-slate-900">"Create Blog"</strong>
+                        <strong class="text-slate-900 dark:text-gray-100"
+                            >"Create Blog"</strong
+                        >
                         ব্যবহার করে article publish করতে পারবেন।
                     </p>
                     <p
-                        class="text-xs leading-relaxed font-normal text-slate-600 sm:text-sm"
+                        class="text-xs leading-relaxed font-normal text-slate-600 sm:text-sm dark:text-gray-400"
                     >
                         Editor-এর উপরের toolbar ব্যবহার করে লেখা ফরম্যাট করুন:
                     </p>
                     <div
-                        class="flex flex-wrap gap-2 text-xs font-semibold text-slate-700"
+                        class="flex flex-wrap gap-2 text-xs font-semibold text-slate-700 dark:text-gray-300"
                     >
                         <span
-                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1"
+                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1 dark:border-gray-700 dark:bg-gray-800"
                             ><strong>B</strong> = Bold</span
                         >
                         <span
-                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1"
+                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1 dark:border-gray-700 dark:bg-gray-800"
                             ><em>I</em> = Italic</span
                         >
                         <span
-                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1"
+                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1 dark:border-gray-700 dark:bg-gray-800"
                             ><strong>H1</strong> = Big Title</span
                         >
                         <span
-                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1"
+                            class="rounded border border-slate-200 bg-slate-50 px-2 py-1 dark:border-gray-700 dark:bg-gray-800"
                             ><strong>H2 / H3</strong> = Subheadings</span
                         >
                     </div>
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 05: Site Notice -->
             <section
@@ -545,24 +557,24 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-sm font-black text-amber-700 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-sm font-black text-amber-700 sm:h-11 sm:w-11 dark:bg-amber-500/10 dark:text-amber-300"
                 >
                     05
                 </div>
                 <div class="space-y-2">
                     <div class="flex flex-wrap items-center gap-2">
                         <h3
-                            class="text-base font-bold text-slate-900 sm:text-lg"
+                            class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
                         >
                             Site Notice
                         </h3>
                         <span
-                            class="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-bold tracking-wider text-amber-800 uppercase sm:text-xs"
+                            class="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-bold tracking-wider text-amber-800 uppercase sm:text-xs dark:bg-amber-500/20 dark:text-amber-300"
                             >শুধুমাত্র Admin-এর জন্য</span
                         >
                     </div>
                     <p
-                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                     >
                         Public landing page-এর broadcast banner manage করার জন্য
                         এটি ব্যবহার করা হয়। এই section শুধুমাত্র senior
@@ -571,7 +583,7 @@ onUnmounted(() => {
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 06: Users -->
             <section
@@ -579,24 +591,24 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-sm font-black text-amber-700 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-sm font-black text-amber-700 sm:h-11 sm:w-11 dark:bg-amber-500/10 dark:text-amber-300"
                 >
                     06
                 </div>
                 <div class="space-y-2">
                     <div class="flex flex-wrap items-center gap-2">
                         <h3
-                            class="text-base font-bold text-slate-900 sm:text-lg"
+                            class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
                         >
                             User Management
                         </h3>
                         <span
-                            class="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-bold tracking-wider text-amber-800 uppercase sm:text-xs"
+                            class="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-bold tracking-wider text-amber-800 uppercase sm:text-xs dark:bg-amber-500/20 dark:text-amber-300"
                             >শুধুমাত্র Admin-এর জন্য</span
                         >
                     </div>
                     <p
-                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                     >
                         Senior administrator-রা এখান থেকে user account manage
                         করতে এবং permission role assign করতে পারবেন।
@@ -604,7 +616,7 @@ onUnmounted(() => {
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 07: My Profile -->
             <section
@@ -612,16 +624,18 @@ onUnmounted(() => {
                 class="flex scroll-mt-44 items-start gap-4 sm:gap-5"
             >
                 <div
-                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11"
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-sm font-black text-indigo-600 sm:h-11 sm:w-11 dark:bg-indigo-500/10"
                 >
                     07
                 </div>
                 <div class="space-y-2">
-                    <h3 class="text-base font-bold text-slate-900 sm:text-lg">
+                    <h3
+                        class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
+                    >
                         My Profile & Account Settings
                     </h3>
                     <p
-                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base"
+                        class="text-sm leading-relaxed font-normal text-slate-600 sm:text-base dark:text-gray-400"
                     >
                         যেকোনো সময় আপনি আপনার account details update করতে
                         পারবেন। Profile photo-এর জন্য Imgur বা PostImages-এর মতো
@@ -631,53 +645,53 @@ onUnmounted(() => {
                 </div>
             </section>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 08: Troubleshooting -->
             <section id="troubleshooting" class="scroll-mt-44 space-y-4">
                 <div class="flex items-center gap-2">
                     <span
-                        class="inline-flex items-center justify-center rounded-lg bg-indigo-100 px-2.5 py-1 text-xs font-black text-indigo-700"
+                        class="inline-flex items-center justify-center rounded-lg bg-indigo-100 px-2.5 py-1 text-xs font-black text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300"
                         >08</span
                     >
                     <h2
-                        class="flex items-center gap-2 text-lg font-black tracking-tight text-slate-950 sm:text-xl"
+                        class="flex items-center gap-2 text-lg font-black tracking-tight text-slate-950 sm:text-xl dark:text-gray-100"
                     >
                         Toast Notifications & Errors
                     </h2>
                 </div>
                 <div class="grid gap-3 sm:grid-cols-2">
                     <div
-                        class="space-y-1 rounded-xl border border-emerald-200 bg-emerald-50/50 p-4"
+                        class="space-y-1 rounded-xl border border-emerald-200 bg-emerald-50/50 p-4 dark:border-emerald-500/30 dark:bg-emerald-500/10"
                     >
                         <div
-                            class="flex items-center gap-2 text-xs font-bold text-emerald-900 sm:text-sm"
+                            class="flex items-center gap-2 text-xs font-bold text-emerald-900 sm:text-sm dark:text-emerald-100"
                         >
                             <CheckCircle2
-                                class="h-4 w-4 shrink-0 text-emerald-600"
+                                class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400"
                             />
                             <span>"Success"</span>
                         </div>
                         <p
-                            class="text-xs leading-relaxed font-medium text-emerald-800/90"
+                            class="text-xs leading-relaxed font-medium text-emerald-800/90 dark:text-emerald-300/90"
                         >
                             আপনার changes সফলভাবে save হয়েছে এবং এখন live আছে।
                         </p>
                     </div>
 
                     <div
-                        class="space-y-1 rounded-xl border border-rose-200 bg-rose-50/50 p-4"
+                        class="space-y-1 rounded-xl border border-rose-200 bg-rose-50/50 p-4 dark:border-rose-500/30 dark:bg-rose-500/10"
                     >
                         <div
-                            class="flex items-center gap-2 text-xs font-bold text-rose-900 sm:text-sm"
+                            class="flex items-center gap-2 text-xs font-bold text-rose-900 sm:text-sm dark:text-rose-100"
                         >
                             <ShieldAlert
-                                class="h-4 w-4 shrink-0 text-rose-600"
+                                class="h-4 w-4 shrink-0 text-rose-600 dark:text-rose-400"
                             />
                             <span>"Not enough permission..."</span>
                         </div>
                         <p
-                            class="text-xs leading-relaxed font-medium text-rose-800/90"
+                            class="text-xs leading-relaxed font-medium text-rose-800/90 dark:text-rose-300/90"
                         >
                             এই কাজের জন্য প্রয়োজনীয় permission আপনার account-এ
                             নেই। Access পাওয়ার জন্য Admin-এর সাথে যোগাযোগ করুন।
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index e58494c..8aeca74 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -47,14 +47,14 @@ const filteredSubjects = computed(() => {
 
         <div
             v-if="filteredSubjects.length === 0"
-            class="rounded-xl border border-dashed border-slate-200 bg-white/50 py-12 text-center"
+            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"
         >
-            <p class="text-sm font-semibold text-slate-400">
+            <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"
+                class="mt-2 text-xs font-bold text-indigo-600 hover:underline dark:text-indigo-400"
             >
                 Show all subjects
             </button>
@@ -62,22 +62,22 @@ const filteredSubjects = computed(() => {
 
         <div
             v-if="featured_blogs?.length"
-            class="mt-16 border-t border-slate-100 pt-12"
+            class="mt-16 border-t border-slate-100 pt-12 dark:border-gray-800"
         >
             <div class="mb-6 flex items-center justify-between">
                 <div>
                     <h2
-                        class="text-2xl font-bold tracking-tight text-slate-900"
+                        class="text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
                     >
                         Featured Blogs
                     </h2>
-                    <p class="text-sm text-slate-500">
+                    <p class="text-sm text-slate-500 dark:text-gray-400">
                         Read our latest articles and updates
                     </p>
                 </div>
                 <Link
                     href="/blogs"
-                    class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-700"
+                    class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
                 >
                     See all articles
                     <span
diff --git a/resources/js/pages/Node.vue b/resources/js/pages/Node.vue
index 107b597..6ca8ee9 100644
--- a/resources/js/pages/Node.vue
+++ b/resources/js/pages/Node.vue
@@ -27,33 +27,35 @@ const totalItemsCount = computed(
 
 <template>
     <div
-        class="mx-auto flex min-h-[calc(100vh-10rem)] w-full max-w-4xl flex-col px-4 py-8 font-sans text-slate-700 selection:bg-indigo-50 sm:px-6 md:py-12"
+        class="mx-auto flex min-h-[calc(100vh-10rem)] w-full max-w-4xl flex-col px-4 py-8 font-sans text-slate-700 selection:bg-indigo-50 sm:px-6 md:py-12 dark:text-gray-300 dark:selection:bg-indigo-500/30"
     >
         <BreadcrumbNav :subject="subject" :breadcrumb="breadcrumb" />
 
         <header class="mb-8">
             <h1
-                class="text-3xl font-black tracking-tight text-slate-950 sm:text-4xl"
+                class="text-3xl font-black tracking-tight text-slate-950 sm:text-4xl dark:text-gray-100"
             >
                 {{ currentTitle }}
             </h1>
-            <p class="mt-1.5 text-sm font-semibold text-slate-400">
+            <p
+                class="mt-1.5 text-sm font-semibold text-slate-400 dark:text-gray-500"
+            >
                 <span v-if="crumbs.length">{{ parentTitle }} · </span>
                 {{ totalItemsCount }} Items Total
             </p>
         </header>
 
         <div
-            class="flex flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm"
+            class="flex flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900"
         >
             <div
-                class="flex items-center justify-between border-b border-slate-100 bg-slate-50 px-5 py-3.5 text-xs font-bold tracking-wider text-slate-400 uppercase sm:px-6"
+                class="flex items-center justify-between border-b border-slate-100 bg-slate-50 px-5 py-3.5 text-xs font-bold tracking-wider text-slate-400 uppercase sm:px-6 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-500"
             >
                 <span>Name</span>
                 <span class="hidden sm:inline">Type</span>
             </div>
 
-            <div class="flex-1 divide-y divide-slate-100">
+            <div class="flex-1 divide-y divide-slate-100 dark:divide-gray-800">
                 <template v-if="totalItemsCount > 0">
                     <NodeRow
                         v-for="node in nodes"
diff --git a/resources/js/pages/Resource.vue b/resources/js/pages/Resource.vue
index 37cc5ab..1acb167 100644
--- a/resources/js/pages/Resource.vue
+++ b/resources/js/pages/Resource.vue
@@ -175,7 +175,7 @@ const parseYoutubeUrl = (url) => {
         <div class="mb-2">
             <button
                 @click="handleBack"
-                class="group inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+                class="group inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
             >
                 <ArrowLeft
                     class="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
@@ -185,15 +185,17 @@ const parseYoutubeUrl = (url) => {
         </div>
 
         <div
-            class="w-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+            class="w-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900"
         >
-            <div class="border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6">
+            <div
+                class="border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-800/50"
+            >
                 <div
                     class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
                 >
                     <div class="min-w-0">
                         <span
-                            class="inline-flex items-center gap-1.5 rounded-md bg-slate-100 px-2 py-1 text-xs font-bold tracking-wider text-slate-600 uppercase"
+                            class="inline-flex items-center gap-1.5 rounded-md bg-slate-100 px-2 py-1 text-xs font-bold tracking-wider text-slate-600 uppercase dark:bg-gray-800 dark:text-gray-400"
                         >
                             <FileText
                                 v-if="resource.resource_type === 'note'"
@@ -213,7 +215,7 @@ const parseYoutubeUrl = (url) => {
                         </span>
 
                         <h1
-                            class="mt-2 text-xl font-black tracking-tight text-slate-950 sm:text-2xl"
+                            class="mt-2 text-xl font-black tracking-tight text-slate-950 sm:text-2xl dark:text-gray-100"
                         >
                             {{ resource.title }}
                         </h1>
@@ -221,15 +223,15 @@ const parseYoutubeUrl = (url) => {
                         <Link
                             v-if="resource.user?.name"
                             :href="`/about-us#${resource.user.id}`"
-                            class="group mt-2 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 transition-all hover:bg-indigo-50 hover:text-indigo-700"
+                            class="group mt-2 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 transition-all hover:bg-indigo-50 hover:text-indigo-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
                         >
                             <User
-                                class="h-3.5 w-3.5 stroke-[2.2] text-slate-500 group-hover:text-indigo-600"
+                                class="h-3.5 w-3.5 stroke-[2.2] text-slate-500 group-hover:text-indigo-600 dark:text-gray-400 dark:group-hover:text-indigo-400"
                             />
                             <span>
                                 Shared by
                                 <span
-                                    class="font-bold text-indigo-600 group-hover:underline"
+                                    class="font-bold text-indigo-600 group-hover:underline dark:text-indigo-400"
                                 >
                                     {{ resource.user.name }}
                                 </span>
@@ -246,7 +248,7 @@ const parseYoutubeUrl = (url) => {
                             :href="resource.file_url"
                             download
                             target="_blank"
-                            class="inline-flex h-9 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.98]"
+                            class="inline-flex h-9 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.98] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
                         >
                             <Download class="h-4 w-4 stroke-[2.2]" />
                             Download
@@ -266,15 +268,15 @@ const parseYoutubeUrl = (url) => {
 
             <div v-if="resource.resource_type === 'note'" class="p-6 sm:p-8">
                 <div
-                    class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base"
+                    class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
                 >
                     <h3
-                        class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase"
+                        class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
                         Note:
                     </h3>
                     <p
-                        class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900"
+                        class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
                     >
                         {{ resource.content }}
                     </p>
@@ -284,27 +286,29 @@ const parseYoutubeUrl = (url) => {
             <div v-else-if="resource.resource_type === 'image'">
                 <div
                     v-if="resource.content"
-                    class="border-b border-slate-100 bg-white p-6 sm:p-8"
+                    class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
                 >
                     <div
-                        class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base"
+                        class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
                     >
                         <h3
-                            class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase"
+                            class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >
                             Note:
                         </h3>
                         <p
-                            class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900"
+                            class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
                         >
                             {{ resource.content }}
                         </p>
                     </div>
                 </div>
 
-                <div class="flex justify-center bg-slate-950/5 p-4 sm:p-8">
+                <div
+                    class="flex justify-center bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10"
+                >
                     <div
-                        class="relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md"
+                        class="relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
                     >
                         <img
                             :src="resource.file_url"
@@ -317,18 +321,18 @@ const parseYoutubeUrl = (url) => {
             <div v-else-if="resource.resource_type === 'video'">
                 <div
                     v-if="resource.content"
-                    class="border-b border-slate-100 bg-white p-6 sm:p-8"
+                    class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
                 >
                     <div
-                        class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base"
+                        class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
                     >
                         <h3
-                            class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase"
+                            class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >
                             Note:
                         </h3>
                         <p
-                            class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900"
+                            class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
                         >
                             This content is hosted on YouTube by the original
                             creator. We have embedded it here for educational
@@ -337,9 +341,9 @@ const parseYoutubeUrl = (url) => {
                     </div>
                 </div>
 
-                <div class="bg-slate-950/5 p-4 sm:p-8">
+                <div class="bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10">
                     <div
-                        class="relative aspect-video w-full overflow-hidden rounded-xl border border-slate-200 bg-black shadow-sm"
+                        class="relative aspect-video w-full overflow-hidden rounded-xl border border-slate-200 bg-black shadow-sm dark:border-gray-700"
                     >
                         <iframe
                             :src="parseYoutubeUrl(resource.file_url)"
@@ -361,19 +365,22 @@ const parseYoutubeUrl = (url) => {
             </div>
             <div v-else class="p-6 text-center sm:p-10">
                 <div
-                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl border border-amber-200 bg-amber-50 text-amber-600"
+                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl border border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400"
                 >
                     <AlertCircle class="h-6 w-6 stroke-[2.2]" />
                 </div>
 
-                <h3 class="mt-4 text-base font-bold text-slate-900">
+                <h3
+                    class="mt-4 text-base font-bold text-slate-900 dark:text-gray-100"
+                >
                     Unsupported Preview:
-                    <span class="text-indigo-600 capitalize">{{
-                        resource.resource_type
-                    }}</span>
+                    <span
+                        class="text-indigo-600 capitalize dark:text-indigo-400"
+                        >{{ resource.resource_type }}</span
+                    >
                 </h3>
                 <p
-                    class="mx-auto mt-2 max-w-sm text-xs font-medium text-slate-500 sm:text-sm"
+                    class="mx-auto mt-2 max-w-sm text-xs font-medium text-slate-500 sm:text-sm dark:text-gray-400"
                 >
                     The file can't be shown here. Please download.
                 </p>
@@ -391,7 +398,7 @@ const parseYoutubeUrl = (url) => {
                     </a>
                     <div
                         v-else
-                        class="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-2 text-xs font-semibold text-slate-400"
+                        class="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-2 text-xs font-semibold text-slate-400 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-500"
                     >
                         No download target generated for this asset.
                     </div>
@@ -406,14 +413,14 @@ const parseYoutubeUrl = (url) => {
     >
         <div class="pointer-events-auto mx-auto max-w-4xl px-4 sm:px-6">
             <div
-                class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-xl backdrop-blur-md"
+                class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-xl backdrop-blur-md dark:border-gray-700/80 dark:bg-gray-900/90"
             >
                 <div>
                     <Link
                         v-if="previousResourceId"
                         :href="`/resources/${previousResourceId}`"
                         replace
-                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97]"
+                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
                     >
                         <ArrowLeft
                             class="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
@@ -423,13 +430,13 @@ const parseYoutubeUrl = (url) => {
                     </Link>
                     <span
                         v-else
-                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none"
+                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
                         >First Page</span
                     >
                 </div>
 
                 <div
-                    class="hidden text-[11px] font-bold tracking-wider text-slate-400 uppercase select-none sm:block"
+                    class="hidden text-[11px] font-bold tracking-wider text-slate-400 uppercase select-none sm:block dark:text-gray-500"
                 >
                     Quick Navigation
                 </div>
@@ -439,7 +446,7 @@ const parseYoutubeUrl = (url) => {
                         v-if="nextResourceId"
                         :href="`/resources/${nextResourceId}`"
                         replace
-                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97]"
+                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
                     >
                         <span class="xs:inline hidden">Next Page</span>
                         <span class="xs:hidden">Next Page</span>
@@ -449,7 +456,7 @@ const parseYoutubeUrl = (url) => {
                     </Link>
                     <span
                         v-else
-                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none"
+                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
                         >Last Page</span
                     >
                 </div>
@@ -472,7 +479,7 @@ const parseYoutubeUrl = (url) => {
         >
             <div class="fixed top-4 right-4 z-50 flex items-center gap-2">
                 <div
-                    class="hidden items-center gap-1.5 rounded-full bg-white/10 px-3 py-1.5 text-[11px] font-medium text-slate-300 backdrop-blur-md sm:flex"
+                    class="hidden items-center gap-1.5 rounded-full bg-white/10 px-3 py-1.5 text-[11px] font-medium text-slate-300 backdrop-blur-md sm:flex dark:bg-gray-900/10"
                 >
                     <span>Pinch / Scroll to Zoom</span>
                     <span class="text-slate-500">•</span>
@@ -482,7 +489,7 @@ const parseYoutubeUrl = (url) => {
                 <button
                     v-if="scale > 1"
                     @click="resetZoom"
-                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95"
+                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 dark:bg-gray-900/10 dark:hover:bg-gray-900/20"
                     title="Reset Zoom"
                 >
                     <RotateCcw class="h-5 w-5" />
@@ -490,7 +497,7 @@ const parseYoutubeUrl = (url) => {
 
                 <button
                     @click="toggleFullscreen"
-                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95"
+                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 dark:bg-gray-900/10 dark:hover:bg-gray-900/20"
                     title="Exit Fullscreen"
                 >
                     <Minimize2 class="h-5 w-5" />
diff --git a/resources/js/pages/Support.vue b/resources/js/pages/Support.vue
index 73203fd..ea21713 100644
--- a/resources/js/pages/Support.vue
+++ b/resources/js/pages/Support.vue
@@ -18,7 +18,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
     <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -26,12 +26,13 @@ const supportUrl = 'https://supportkori.com/hscstack';
             Back to Home
         </Link>
         <h1
-            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
-            Support <span class="text-indigo-600">HSCStack</span>
+            Support
+            <span class="text-indigo-600 dark:text-indigo-400">HSCStack</span>
         </h1>
         <p
-            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase"
+            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
         >
             ফ্রি শিক্ষামূলক প্ল্যাটফর্মটিকে সচল রাখতে সাহায্য করুন
         </p>
@@ -41,21 +42,23 @@ const supportUrl = 'https://supportkori.com/hscstack';
         <div class="space-y-8">
             <!-- Hero Support Card -->
             <div
-                class="relative overflow-hidden rounded-xl border border-indigo-100 bg-gradient-to-br from-indigo-50/50 via-white to-slate-50 p-6 shadow-sm sm:p-8"
+                class="relative overflow-hidden rounded-xl border border-indigo-100 bg-gradient-to-br from-indigo-50/50 via-white to-slate-50 p-6 shadow-sm sm:p-8 dark:border-indigo-500/30 dark:from-indigo-500/10 dark:via-gray-900 dark:to-gray-950"
             >
                 <div class="flex flex-col items-center text-center">
                     <div
-                        class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-md shadow-indigo-200"
+                        class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-md shadow-indigo-200 dark:shadow-indigo-500/40"
                     >
                         <Heart
                             class="h-6 w-6 fill-indigo-600 stroke-[2.2] text-white"
                         />
                     </div>
-                    <h2 class="text-xl font-bold text-slate-900 sm:text-2xl">
+                    <h2
+                        class="text-xl font-bold text-slate-900 sm:text-2xl dark:text-gray-100"
+                    >
                         আমাদের প্ল্যাটফর্মটি ১০০% ফ্রি এবং বিজ্ঞাপনমুক্ত
                     </h2>
                     <p
-                        class="mt-2 max-w-xl text-sm leading-relaxed font-medium text-slate-600"
+                        class="mt-2 max-w-xl text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
                     >
                         HSCStack শিক্ষার্থীদের দ্বারা নির্মিত একটি অলাভজনক
                         উদ্যোগ। HSC ও SSC শিক্ষার্থীদের পড়াশোনা সহজ করতে আমরা
@@ -68,7 +71,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         :href="supportUrl"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-bold text-white shadow-md shadow-indigo-200 transition-all hover:bg-indigo-700 hover:shadow-lg active:scale-95"
+                        class="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-bold text-white shadow-md shadow-indigo-200 transition-all hover:bg-indigo-700 hover:shadow-lg active:scale-95 dark:shadow-indigo-500/40 dark:hover:shadow-indigo-500/50"
                     >
                         <Heart class="h-4 w-4 stroke-[2.2]" />
                         Support Us on SupportKori
@@ -79,10 +82,10 @@ const supportUrl = 'https://supportkori.com/hscstack';
 
             <!-- Detailed Breakdown -->
             <div
-                class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8"
+                class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:bg-gray-900"
             >
                 <h3
-                    class="border-b border-slate-100 pb-4 text-base font-bold text-slate-900"
+                    class="border-b border-slate-100 pb-4 text-base font-bold text-slate-900 dark:border-gray-800 dark:text-gray-100"
                 >
                     কেন আপনার সাপোর্ট প্রয়োজন?
                 </h3>
@@ -90,16 +93,18 @@ const supportUrl = 'https://supportkori.com/hscstack';
                 <!-- Reason 1: Server Costs -->
                 <div class="flex items-start gap-4">
                     <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
                         <Server class="h-4 w-4 stroke-[2.2]" />
                     </div>
                     <div>
-                        <h4 class="text-base font-bold text-slate-900">
+                        <h4
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             ১. হাই-স্পিড সার্ভার ও হোস্টিং
                         </h4>
                         <p
-                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
                             হাজার হাজার শিক্ষার্থী যেন একসাথে কোনো লেগ ছাড়া নোট,
                             সাজেশন ও ভিডিও দেখতে পারে, সেজন্য আমাদের নির্ভরযোগ্য
@@ -111,16 +116,18 @@ const supportUrl = 'https://supportkori.com/hscstack';
                 <!-- Reason 2: Domain Renewal -->
                 <div class="flex items-start gap-4">
                     <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
                         <Globe class="h-4 w-4 stroke-[2.2]" />
                     </div>
                     <div>
-                        <h4 class="text-base font-bold text-slate-900">
+                        <h4
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             ২. ডোমেইন ও ইনফাস্ট্রাকচার মেইনটেন্যান্স
                         </h4>
                         <p
-                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
                             ওয়েবসাইটের ডোমেইন নেম নবায়ন, সিকিউরিটি সার্টিফিকেট
                             (SSL) এবং ব্যাকআপ সিস্টেম সচল রাখতে নিয়মিত বাৎসরিক
@@ -132,16 +139,18 @@ const supportUrl = 'https://supportkori.com/hscstack';
                 <!-- Reason 3: Distraction-free Learning -->
                 <div class="flex items-start gap-4">
                     <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
                         <Zap class="h-4 w-4 stroke-[2.2]" />
                     </div>
                     <div>
-                        <h4 class="text-base font-bold text-slate-900">
+                        <h4
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             ৩. ১০০% ক্লিন ও ডিসট্র্যাকশন-ফ্রি অভিজ্ঞতা
                         </h4>
                         <p
-                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
                             আমরা ওয়েবসাইটে কোনো গুগল অ্যাড বা থার্ড-পার্টি
                             বিজ্ঞাপন দেখাই না, যাতে পড়ালেখার সময়ে শিক্ষার্থীদের
@@ -151,21 +160,23 @@ const supportUrl = 'https://supportkori.com/hscstack';
                     </div>
                 </div>
 
-                <hr class="border-slate-100" />
+                <hr class="border-slate-100 dark:border-gray-800" />
 
                 <!-- Transparency Section -->
                 <div class="flex items-start gap-4">
                     <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600"
+                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
                     >
                         <ShieldCheck class="h-4 w-4 stroke-[2.2]" />
                     </div>
                     <div>
-                        <h4 class="text-base font-bold text-slate-900">
+                        <h4
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             স্বচ্ছতা ও নিশ্চয়তা
                         </h4>
                         <p
-                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                            class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
                             সংগৃহীত প্রতিটি টাকা শুধুমাত্র HSCStack-এর অবকাঠামো
                             উন্নয়ন, সার্ভার খরচ এবং ব্যাকএন্ড টেকনোলজি
@@ -177,33 +188,38 @@ const supportUrl = 'https://supportkori.com/hscstack';
                 <!-- Alternative Ways to Support -->
                 <div class="flex items-start gap-4">
                     <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
                         <HelpCircle class="h-4 w-4 stroke-[2.2]" />
                     </div>
                     <div>
-                        <h4 class="text-base font-bold text-slate-900">
+                        <h4
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             অর্থনৈতিক সাহায্য ছাড়াও যেভাবে পাশে থাকতে পারেন
                         </h4>
                         <ul
-                            class="mt-2 list-disc space-y-1.5 pl-5 text-sm font-medium text-slate-500"
+                            class="mt-2 list-disc space-y-1.5 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                         >
                             <li>
-                                <strong class="text-slate-700"
+                                <strong
+                                    class="text-slate-700 dark:text-gray-300"
                                     >শেয়ার করুন:</strong
                                 >
                                 আপনার সহপাঠী ও বন্ধুদের মাঝে HSCStack শেয়ার করে
                                 দিন।
                             </li>
                             <li>
-                                <strong class="text-slate-700"
-                                    >রিসোর্স শেয়ার:</strong
+                                <strong
+                                    class="text-slate-700 dark:text-gray-300"
+                                    >রিসোর্স শেয়ার:</strong
                                 >
                                 আপনার করা লেকচার নোট বা সাজেশন আমাদের
                                 প্ল্যাটফর্মে আপলোড করুন।
                             </li>
                             <li>
-                                <strong class="text-slate-700"
+                                <strong
+                                    class="text-slate-700 dark:text-gray-300"
                                     >ফিডব্যাক দিন:</strong
                                 >
                                 ওয়েবসাইটের কোনো সমস্যা চোখে পড়লে আমাদের জানান।
@@ -215,9 +231,11 @@ const supportUrl = 'https://supportkori.com/hscstack';
 
             <!-- Bottom CTA Card -->
             <div
-                class="rounded-xl border border-slate-200 bg-white p-6 text-center shadow-sm"
+                class="rounded-xl border border-slate-200 bg-white p-6 text-center shadow-sm dark:border-gray-700 dark:bg-gray-900"
             >
-                <p class="text-sm font-bold text-slate-900 sm:text-base">
+                <p
+                    class="text-sm font-bold text-slate-900 sm:text-base dark:text-gray-100"
+                >
                     আপনার যেকোনো ছোট সাহায্যও আমাদের এই যাত্রাকে দীর্ঘস্থায়ী
                     করতে পারে ❤️
                 </p>
@@ -226,7 +244,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         :href="supportUrl"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-600 transition-colors hover:text-indigo-700 hover:underline"
+                        class="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-600 transition-colors hover:text-indigo-700 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         Go to SupportKori payment page
                         <ExternalLink class="h-3.5 w-3.5" />
diff --git a/resources/js/pages/admin/Blog.vue b/resources/js/pages/admin/Blog.vue
index cdbef12..31fc3e5 100644
--- a/resources/js/pages/admin/Blog.vue
+++ b/resources/js/pages/admin/Blog.vue
@@ -14,25 +14,29 @@ defineProps({
 
 <template>
     <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
+        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
     >
         <div
-            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between"
+            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div>
-                <h3 class="text-lg font-semibold tracking-tight text-gray-900">
+                <h3
+                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
+                >
                     Manage Blogs
                 </h3>
-                <p class="mt-0.5 text-sm text-gray-500">
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     View, organize, and publish your blog articles.
                 </p>
             </div>
 
             <div class="flex items-center gap-3 self-start sm:self-center">
                 <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1"
+                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
-                    <span class="text-xs font-medium text-blue-700">
+                    <span
+                        class="text-xs font-medium text-blue-700 dark:text-blue-400"
+                    >
                         Total: {{ blogs.length }}
                     </span>
                 </div>
diff --git a/resources/js/pages/admin/BlogCreateOrEdit.vue b/resources/js/pages/admin/BlogCreateOrEdit.vue
index ed98ce1..99ce6ef 100644
--- a/resources/js/pages/admin/BlogCreateOrEdit.vue
+++ b/resources/js/pages/admin/BlogCreateOrEdit.vue
@@ -40,19 +40,21 @@ const submitForm = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         {{ props.blog ? 'Edit' : 'Create' }} Blog Post
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Compose and manage article content for your web
                         application audience.
                     </p>
@@ -63,7 +65,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="title"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Blog Title</label
                     >
                     <input
@@ -75,7 +77,7 @@ const submitForm = () => {
                         :class="
                             form.errors.title
                                 ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                         "
                     />
                     <p
@@ -88,15 +90,15 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Featured Image</label
                     >
                     <div
-                        class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition"
+                        class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition dark:bg-gray-800/50"
                         :class="
                             form.errors.featured_image
-                                ? 'border-rose-300 bg-rose-50/20'
-                                : 'border-slate-200 hover:bg-slate-50'
+                                ? 'border-rose-300 bg-rose-50/20 dark:border-rose-500/30 dark:bg-rose-500/10'
+                                : 'border-slate-200 dark:border-gray-700 dark:hover:bg-gray-800'
                         "
                     >
                         <input
@@ -111,19 +113,21 @@ const submitForm = () => {
                             class="flex cursor-pointer flex-col items-center justify-center"
                         >
                             <div
-                                class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-sm"
+                                class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-500"
                             >
                                 <Upload class="h-5 w-5" />
                             </div>
                             <span
-                                class="text-center text-sm font-medium break-all text-blue-700"
+                                class="text-center text-sm font-medium break-all text-blue-700 dark:text-blue-400"
                             >
                                 {{
                                     form.featured_image?.name ||
                                     'Click to upload or drag & drop image'
                                 }}
                             </span>
-                            <span class="mt-1 text-xs text-slate-400">
+                            <span
+                                class="mt-1 text-xs text-slate-400 dark:text-gray-500"
+                            >
                                 Supports PNG, JPG or WEBP
                             </span>
                         </label>
@@ -139,7 +143,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="seo_tags"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >SEO Tags (Comma separated)</label
                     >
                     <input
@@ -151,7 +155,7 @@ const submitForm = () => {
                         :class="
                             form.errors.seo_tags
                                 ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                         "
                     />
                     <p
@@ -163,20 +167,21 @@ const submitForm = () => {
                 </div>
 
                 <div
-                    class="flex flex-wrap gap-6 rounded-xl border border-slate-100 bg-slate-50/50 p-4"
+                    class="flex flex-wrap gap-6 rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
                 >
                     <label class="flex cursor-pointer items-center gap-2.5">
                         <input
                             v-model="form.is_published"
                             type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20"
+                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
                         />
                         <div>
                             <span
-                                class="block text-xs font-bold text-slate-700 uppercase"
+                                class="block text-xs font-bold text-slate-700 uppercase dark:text-gray-300"
                                 >Publish immediately</span
                             >
-                            <span class="text-[11px] text-slate-500"
+                            <span
+                                class="text-[11px] text-slate-500 dark:text-gray-400"
                                 >Make this blog post visible right away.</span
                             >
                         </div>
@@ -186,14 +191,15 @@ const submitForm = () => {
                         <input
                             v-model="form.is_featured"
                             type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20"
+                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
                         />
                         <div>
                             <span
-                                class="block text-xs font-bold text-slate-700 uppercase"
+                                class="block text-xs font-bold text-slate-700 uppercase dark:text-gray-300"
                                 >Feature Post</span
                             >
-                            <span class="text-[11px] text-slate-500"
+                            <span
+                                class="text-[11px] text-slate-500 dark:text-gray-400"
                                 >Pin to the top of your blog home screen.</span
                             >
                         </div>
@@ -202,7 +208,7 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Blog Content</label
                     >
 
@@ -221,11 +227,11 @@ const submitForm = () => {
                 </div>
 
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
                     <Link
                         href="/admin/blogs"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </Link>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 00ac9ee..589f803 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -19,27 +19,29 @@ defineProps({
     <div class="animate-fade-in mx-auto max-w-7xl space-y-6 p-1">
         <!-- Main Dashboard Header -->
         <div
-            class="relative overflow-hidden rounded-2xl border border-slate-300 bg-gradient-to-r from-white via-slate-50 to-white p-6 shadow-sm sm:p-8"
+            class="relative overflow-hidden rounded-2xl border border-slate-300 bg-gradient-to-r from-white via-slate-50 to-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900"
         >
             <div
-                class="pointer-events-none absolute -top-10 -right-10 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl"
+                class="pointer-events-none absolute -top-10 -right-10 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl dark:bg-indigo-500/20"
             ></div>
             <div
                 class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
             >
                 <div class="flex items-center gap-4">
                     <div
-                        class="hidden h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-slate-300 bg-gradient-to-b from-white to-slate-100 text-indigo-600 shadow-sm sm:flex"
+                        class="hidden h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-slate-300 bg-gradient-to-b from-white to-slate-100 text-indigo-600 shadow-sm sm:flex dark:border-gray-700 dark:from-gray-900 dark:to-gray-800 dark:text-indigo-400"
                     >
                         <Sparkles class="h-5 w-5" />
                     </div>
                     <div>
                         <h1
-                            class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl"
+                            class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
                         >
                             Dashboard
                         </h1>
-                        <p class="mt-0.5 text-sm text-slate-600">
+                        <p
+                            class="mt-0.5 text-sm text-slate-600 dark:text-gray-400"
+                        >
                             Welcome to your administration workspace. Real-time
                             operational overviews populate here.
                         </p>
@@ -50,22 +52,26 @@ defineProps({
 
         <!-- Highlighted Guide/Tour Card (Placed Directly Below Header) -->
         <div
-            class="relative overflow-hidden rounded-2xl border border-indigo-200 bg-indigo-50/60 p-5 shadow-xs transition-colors hover:border-indigo-300 sm:p-6"
+            class="relative overflow-hidden rounded-2xl border border-indigo-200 bg-indigo-50/60 p-5 shadow-xs transition-colors hover:border-indigo-300 sm:p-6 dark:border-indigo-500/30 dark:bg-indigo-500/10"
         >
             <div
                 class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
             >
                 <div class="flex items-start gap-3.5 sm:items-center">
                     <div
-                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-xs"
+                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-xs dark:bg-indigo-500"
                     >
                         <BookOpen class="h-5 w-5" />
                     </div>
                     <div>
-                        <h2 class="text-base font-bold text-slate-900">
+                        <h2
+                            class="text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             New to the Contributor Workspace?
                         </h2>
-                        <p class="mt-0.5 text-xs text-slate-600 sm:text-sm">
+                        <p
+                            class="mt-0.5 text-xs text-slate-600 sm:text-sm dark:text-gray-400"
+                        >
                             Learn how to manage subjects, upload resources,
                             create blogs, and navigate panel permissions.
                         </p>
@@ -88,54 +94,58 @@ defineProps({
         <div class="grid gap-6 md:grid-cols-2">
             <div class="space-y-6">
                 <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
                 >
                     <div class="flex items-center justify-between">
                         <p
-                            class="text-sm font-semibold tracking-wide text-slate-600 uppercase"
+                            class="text-sm font-semibold tracking-wide text-slate-600 uppercase dark:text-gray-400"
                         >
                             Total Visits
                         </p>
                         <div
-                            class="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-indigo-50 text-indigo-600"
+                            class="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-indigo-50 text-indigo-600 dark:border-gray-800 dark:bg-indigo-500/10 dark:text-indigo-400"
                         >
                             <Eye class="h-5 w-5" />
                         </div>
                     </div>
                     <div class="mt-4">
                         <h3
-                            class="text-3xl font-bold tracking-tight text-slate-900"
+                            class="text-3xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
                         >
                             {{ stats?.total_visits ?? 0 }}
                         </h3>
-                        <p class="mt-1 text-xs text-slate-500">
+                        <p
+                            class="mt-1 text-xs text-slate-500 dark:text-gray-400"
+                        >
                             Cumulative raw platform hits recorded
                         </p>
                     </div>
                 </div>
 
                 <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
                 >
                     <div class="flex items-center justify-between">
                         <p
-                            class="text-sm font-semibold tracking-wide text-slate-600 uppercase"
+                            class="text-sm font-semibold tracking-wide text-slate-600 uppercase dark:text-gray-400"
                         >
                             Unique Visitors
                         </p>
                         <div
-                            class="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-emerald-50 text-emerald-600"
+                            class="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-emerald-50 text-emerald-600 dark:border-gray-800 dark:bg-emerald-500/10 dark:text-emerald-400"
                         >
                             <Users class="h-5 w-5" />
                         </div>
                     </div>
                     <div class="mt-4">
                         <h3
-                            class="text-3xl font-bold tracking-tight text-slate-900"
+                            class="text-3xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
                         >
                             {{ stats?.total_users ?? 0 }}
                         </h3>
-                        <p class="mt-1 text-xs text-slate-500">
+                        <p
+                            class="mt-1 text-xs text-slate-500 dark:text-gray-400"
+                        >
                             Distinct audiences grouped by IP address
                         </p>
                     </div>
@@ -143,21 +153,23 @@ defineProps({
             </div>
 
             <div
-                class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+                class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
             >
                 <div
-                    class="flex items-center gap-3 border-b border-slate-100 pb-4"
+                    class="flex items-center gap-3 border-b border-slate-100 pb-4 dark:border-gray-800"
                 >
                     <div
-                        class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-600"
+                        class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                     >
                         <Share2 class="h-4 w-4" />
                     </div>
                     <div>
-                        <h3 class="font-semibold text-slate-900">
+                        <h3
+                            class="font-semibold text-slate-900 dark:text-gray-100"
+                        >
                             Top Acquisition Sources
                         </h3>
-                        <p class="text-xs text-slate-500">
+                        <p class="text-xs text-slate-500 dark:text-gray-400">
                             Distribution by traffic reference origins
                         </p>
                     </div>
@@ -166,7 +178,7 @@ defineProps({
                 <div class="mt-4 max-h-[300px] flex-1 overflow-auto">
                     <div
                         v-if="stats?.top_sources?.length"
-                        class="divide-y divide-slate-100"
+                        class="divide-y divide-slate-100 dark:divide-gray-800"
                     >
                         <div
                             v-for="(source, index) in stats.top_sources"
@@ -175,7 +187,7 @@ defineProps({
                         >
                             <div class="w-2/3 pr-4">
                                 <p
-                                    class="truncate text-sm font-medium text-slate-700"
+                                    class="truncate text-sm font-medium text-slate-700 dark:text-gray-300"
                                     :title="source.source"
                                 >
                                     {{ source.source || 'Direct / Unknown' }}
@@ -183,7 +195,7 @@ defineProps({
                             </div>
                             <div class="flex w-1/3 items-center justify-end">
                                 <span
-                                    class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800"
+                                    class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800 dark:bg-gray-800 dark:text-gray-200"
                                 >
                                     {{ source.visits }} users
                                 </span>
@@ -195,8 +207,12 @@ defineProps({
                         v-else
                         class="flex h-full flex-col items-center justify-center py-12 text-center"
                     >
-                        <LayoutGrid class="h-8 w-8 text-slate-300" />
-                        <p class="mt-2 text-sm font-medium text-slate-500">
+                        <LayoutGrid
+                            class="h-8 w-8 text-slate-300 dark:text-gray-600"
+                        />
+                        <p
+                            class="mt-2 text-sm font-medium text-slate-500 dark:text-gray-400"
+                        >
                             No source data captured yet.
                         </p>
                     </div>
diff --git a/resources/js/pages/admin/Index.vue b/resources/js/pages/admin/Index.vue
index d176978..8d64633 100644
--- a/resources/js/pages/admin/Index.vue
+++ b/resources/js/pages/admin/Index.vue
@@ -13,25 +13,29 @@ defineProps({
 
 <template>
     <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
+        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
     >
         <div
-            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between"
+            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div>
-                <h3 class="text-lg font-semibold tracking-tight text-gray-900">
+                <h3
+                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
+                >
                     Manage Subjects
                 </h3>
-                <p class="mt-0.5 text-sm text-gray-500">
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     View, organize, and configure active curriculum subjects.
                 </p>
             </div>
 
             <div class="flex items-center gap-3 self-start sm:self-center">
                 <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1"
+                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
-                    <span class="text-xs font-medium text-blue-700">
+                    <span
+                        class="text-xs font-medium text-blue-700 dark:text-blue-400"
+                    >
                         Total: {{ subjects.length }}
                     </span>
                 </div>
diff --git a/resources/js/pages/admin/Node.vue b/resources/js/pages/admin/Node.vue
index 642be25..6d45848 100644
--- a/resources/js/pages/admin/Node.vue
+++ b/resources/js/pages/admin/Node.vue
@@ -58,26 +58,26 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
 
 <template>
     <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
+        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
     >
         <div
-            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between"
+            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div class="flex items-center gap-3">
                 <button
                     @click="handleBack"
-                    class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 text-gray-500 shadow-sm transition-colors duration-150 hover:bg-gray-50 hover:text-gray-700"
+                    class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 text-gray-500 shadow-sm transition-colors duration-150 hover:bg-gray-50 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
                 >
                     <ArrowLeft class="h-4 w-4" :stroke-width="2.5" />
                 </button>
 
                 <div>
                     <h3
-                        class="text-lg font-semibold tracking-tight text-gray-900"
+                        class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
                     >
                         {{ parent?.name ? parent.name : subject.name }}
                     </h3>
-                    <p class="mt-0.5 text-sm text-gray-500">
+                    <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                         Curriculum structure and related resources.
                     </p>
                 </div>
@@ -85,9 +85,11 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
 
             <div class="flex items-center gap-3 self-start sm:self-center">
                 <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1"
+                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
-                    <span class="text-xs font-medium text-blue-700">
+                    <span
+                        class="text-xs font-medium text-blue-700 dark:text-blue-400"
+                    >
                         Total: {{ totalItemsCount }}
                     </span>
                 </div>
@@ -98,10 +100,10 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
                             ? `/admin/subjects/${subject.slug}/nodes/create?parent_id=${parent.id}`
                             : `/admin/subjects/${subject.slug}/nodes/create`
                     "
-                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors duration-150 hover:bg-gray-50"
+                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors duration-150 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
                 >
                     <FolderPlus
-                        class="h-3.5 w-3.5 text-gray-500"
+                        class="h-3.5 w-3.5 text-gray-500 dark:text-gray-400"
                         :stroke-width="2"
                     />
                     Add Folder
@@ -125,26 +127,26 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
 
                     <div
                         v-if="isDropdownOpen"
-                        class="absolute right-0 z-10 mt-2 w-44 rounded-lg border border-gray-100 bg-white p-1 shadow-lg"
+                        class="absolute right-0 z-10 mt-2 w-44 rounded-lg border border-gray-100 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
                     >
                         <Link
                             :href="`/admin/resources/create?node_id=${parent.id}`"
                             @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
                         >
                             Single File
                         </Link>
                         <Link
                             :href="`/admin/resources/create/bulk/images?node_id=${parent.id}&redirect=${currentUrl}`"
                             @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
                         >
                             Upload Bulk Images
                         </Link>
                         <Link
                             :href="`/admin/resources/create/bulk/videos?node_id=${parent.id}&redirect=${currentUrl}`"
                             @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
                         >
                             Upload Bulk Videos
                         </Link>
@@ -156,13 +158,13 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
         <div class="flex flex-1 flex-col">
             <template v-if="totalItemsCount > 0">
                 <div
-                    class="flex shrink-0 items-center justify-between rounded-t-lg border-b border-gray-100 bg-gray-50/70 px-4 py-2.5 text-xs font-semibold tracking-wider text-gray-400 uppercase"
+                    class="flex shrink-0 items-center justify-between rounded-t-lg border-b border-gray-100 bg-gray-50/70 px-4 py-2.5 text-xs font-semibold tracking-wider text-gray-400 uppercase dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-500"
                 >
                     <span>Resources</span>
                 </div>
 
                 <div
-                    class="grid grid-cols-2 gap-4 rounded-b-lg border border-gray-100 p-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
+                    class="grid grid-cols-2 gap-4 rounded-b-lg border border-gray-100 p-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 dark:border-gray-700"
                 >
                     <NodeRow
                         v-for="node in nodes"
diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 15c9832..454e2ee 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -19,7 +19,7 @@ const form = useForm({
 function getInputClass(hasError) {
     return hasError
         ? 'border-rose-500 focus:ring-rose-500/20'
-        : 'border-slate-300 focus:ring-blue-500/20 focus:border-blue-500';
+        : 'border-slate-300 dark:border-gray-600 focus:ring-blue-500/20 focus:border-blue-500';
 }
 
 const submitForm = () => {
@@ -44,55 +44,65 @@ const goBack = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="w-full rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="w-full rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         {{ props.node ? 'Edit Folder' : 'Create Folder' }}
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Subject:
-                        <span class="font-semibold text-slate-700">{{
-                            props.subject?.name
-                        }}</span>
+                        <span
+                            class="font-semibold text-slate-700 dark:text-gray-300"
+                            >{{ props.subject?.name }}</span
+                        >
                     </p>
                 </div>
             </div>
 
             <form @submit.prevent="submitForm" class="space-y-8">
                 <div
-                    class="flex items-start space-x-3 rounded-xl border border-slate-200/60 bg-slate-50 p-5"
+                    class="flex items-start space-x-3 rounded-xl border border-slate-200/60 bg-slate-50 p-5 dark:border-gray-700 dark:bg-gray-800"
                 >
-                    <FolderOpen class="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
+                    <FolderOpen
+                        class="mt-0.5 h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400"
+                    />
                     <div>
                         <span
-                            class="mb-1 block text-xs font-bold tracking-wider text-blue-600 uppercase"
+                            class="mb-1 block text-xs font-bold tracking-wider text-blue-600 uppercase dark:text-blue-400"
                             >Location</span
                         >
                         <p
                             v-if="props.parent?.id"
-                            class="text-sm text-slate-700"
+                            class="text-sm text-slate-700 dark:text-gray-300"
                         >
                             You are {{ props.node ? 'editing' : 'creating' }} a
-                            <span class="font-semibold text-blue-700"
+                            <span
+                                class="font-semibold text-blue-700 dark:text-blue-400"
                                 >sub-folder</span
                             >
                             inside:
                             <span
-                                class="ml-1 rounded bg-blue-100 px-1.5 py-0.5 font-sans text-xs font-bold text-slate-900"
+                                class="ml-1 rounded bg-blue-100 px-1.5 py-0.5 font-sans text-xs font-bold text-slate-900 dark:bg-blue-500/10 dark:text-gray-100"
                             >
                                 {{ props.parent.name }}
                             </span>
                         </p>
-                        <p v-else class="text-sm text-slate-700">
+                        <p
+                            v-else
+                            class="text-sm text-slate-700 dark:text-gray-300"
+                        >
                             You are {{ props.node ? 'editing' : 'creating' }} a
-                            <span class="font-semibold text-blue-700"
+                            <span
+                                class="font-semibold text-blue-700 dark:text-blue-400"
                                 >top-level folder</span
                             >
                             directly under this subject.
@@ -104,7 +114,7 @@ const goBack = () => {
                     <div class="md:col-span-2">
                         <label
                             for="name"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Folder Name</label
                         >
                         <input
@@ -127,7 +137,7 @@ const goBack = () => {
                     <div>
                         <label
                             for="sort_order"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Order Priority</label
                         >
                         <input
@@ -144,18 +154,20 @@ const goBack = () => {
                         >
                             {{ form.errors.sort_order }}
                         </p>
-                        <p class="mt-1.5 text-xs text-slate-400">
+                        <p
+                            class="mt-1.5 text-xs text-slate-400 dark:text-gray-500"
+                        >
                             Lower numbers will appear first in the list.
                         </p>
                     </div>
                 </div>
 
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-4"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-4 dark:border-gray-800"
                 >
                     <button
                         @click="goBack"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </button>
diff --git a/resources/js/pages/admin/NoticeEdit.vue b/resources/js/pages/admin/NoticeEdit.vue
index 3ecf958..d507717 100644
--- a/resources/js/pages/admin/NoticeEdit.vue
+++ b/resources/js/pages/admin/NoticeEdit.vue
@@ -33,16 +33,20 @@ const submitForm = () => {
 </script>
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-4 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-4 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="w-full rounded-3xl bg-white p-6 shadow-xs ring-1 ring-slate-900/5 md:p-10"
+            class="w-full rounded-3xl bg-white p-6 shadow-xs ring-1 ring-slate-900/5 md:p-10 dark:bg-gray-900 dark:ring-gray-700"
         >
-            <div class="mb-10 border-b border-slate-100 pb-6">
-                <h1 class="text-2xl font-bold tracking-tight text-slate-900">
+            <div
+                class="mb-10 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <h1
+                    class="text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
+                >
                     Site Notice
                 </h1>
-                <p class="mt-1 text-sm text-slate-500">
+                <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                     Configure the announcement dialog shown on the home page.
                     Only one notice is displayed at a time.
                 </p>
@@ -56,7 +60,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="title"
-                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase"
+                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                         >
                             Title
                         </label>
@@ -66,11 +70,11 @@ const submitForm = () => {
                             id="title"
                             placeholder="Important announcement"
                             :disabled="form.processing"
-                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400"
+                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
                             :class="
                                 form.errors.title
                                     ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5'
+                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
                             "
                         />
                         <p
@@ -84,7 +88,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="message"
-                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase"
+                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                         >
                             Message
                         </label>
@@ -94,11 +98,11 @@ const submitForm = () => {
                             rows="6"
                             placeholder="Write the notice message for visitors..."
                             :disabled="form.processing"
-                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400"
+                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
                             :class="
                                 form.errors.message
                                     ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5'
+                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
                             "
                         ></textarea>
                         <p
@@ -110,14 +114,18 @@ const submitForm = () => {
                     </div>
 
                     <div
-                        class="space-y-5 rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5"
+                        class="space-y-5 rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5 dark:bg-gray-800 dark:ring-gray-700"
                     >
                         <div class="flex items-center justify-between">
                             <div>
-                                <p class="text-sm font-semibold text-slate-900">
+                                <p
+                                    class="text-sm font-semibold text-slate-900 dark:text-gray-100"
+                                >
                                     Action button
                                 </p>
-                                <p class="mt-0.5 text-xs text-slate-500">
+                                <p
+                                    class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                                >
                                     Optional call-to-action link in the dialog.
                                 </p>
                             </div>
@@ -131,7 +139,7 @@ const submitForm = () => {
                                     :disabled="form.processing"
                                 />
                                 <span
-                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5"
+                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
                                 ></span>
                             </label>
                         </div>
@@ -143,7 +151,7 @@ const submitForm = () => {
                             <div>
                                 <label
                                     for="button_title"
-                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase"
+                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                                 >
                                     Button title
                                 </label>
@@ -153,11 +161,11 @@ const submitForm = () => {
                                     id="button_title"
                                     placeholder="Learn more"
                                     :disabled="form.processing"
-                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4"
+                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4 dark:bg-gray-900"
                                     :class="
                                         form.errors.button_title
                                             ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5'
+                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
                                     "
                                 />
                                 <p
@@ -171,7 +179,7 @@ const submitForm = () => {
                             <div>
                                 <label
                                     for="button_link"
-                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase"
+                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                                 >
                                     Button link
                                 </label>
@@ -181,11 +189,11 @@ const submitForm = () => {
                                     id="button_link"
                                     placeholder="https://example.com/details"
                                     :disabled="form.processing"
-                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4"
+                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4 dark:bg-gray-900"
                                     :class="
                                         form.errors.button_link
                                             ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5'
+                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
                                     "
                                 />
                                 <p
@@ -201,10 +209,12 @@ const submitForm = () => {
 
                 <div class="space-y-6">
                     <div
-                        class="rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5"
+                        class="rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5 dark:bg-gray-800 dark:ring-gray-700"
                     >
                         <div class="flex items-center justify-between">
-                            <p class="text-sm font-semibold text-slate-900">
+                            <p
+                                class="text-sm font-semibold text-slate-900 dark:text-gray-100"
+                            >
                                 Show Notice
                             </p>
                             <label
@@ -217,7 +227,7 @@ const submitForm = () => {
                                     :disabled="form.processing"
                                 />
                                 <span
-                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5"
+                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
                                 ></span>
                             </label>
                         </div>
@@ -225,19 +235,19 @@ const submitForm = () => {
 
                     <div
                         v-if="form.is_active && !hasContent"
-                        class="rounded-2xl bg-amber-50 p-4 text-xs font-medium text-amber-800 ring-1 ring-amber-900/5"
+                        class="rounded-2xl bg-amber-50 p-4 text-xs font-medium text-amber-800 ring-1 ring-amber-900/5 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/20"
                     >
                         Please add a title or message body before switching this
                         notice alive.
                     </div>
 
                     <div
-                        class="space-y-4 rounded-2xl border border-slate-100 p-5 ring-1 ring-slate-900/5"
+                        class="space-y-4 rounded-2xl border border-slate-100 p-5 ring-1 ring-slate-900/5 dark:border-gray-800 dark:ring-gray-700"
                     >
                         <div>
                             <label
                                 for="image"
-                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase"
+                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                             >
                                 Cover Image URL
                             </label>
@@ -247,11 +257,11 @@ const submitForm = () => {
                                 id="image"
                                 placeholder="https://example.com/banner.jpg"
                                 :disabled="form.processing"
-                                class="w-full rounded-xl border px-4 py-2.5 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400"
+                                class="w-full rounded-xl border px-4 py-2.5 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
                                 :class="
                                     form.errors.image
                                         ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                        : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5'
+                                        : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
                                 "
                             />
                             <p
@@ -264,7 +274,7 @@ const submitForm = () => {
 
                         <div
                             v-if="form.image"
-                            class="overflow-hidden rounded-xl ring-1 ring-slate-900/10"
+                            class="overflow-hidden rounded-xl ring-1 ring-slate-900/10 dark:ring-gray-700"
                         >
                             <img
                                 :src="form.image"
@@ -276,19 +286,19 @@ const submitForm = () => {
                 </div>
 
                 <div
-                    class="flex justify-end gap-3 border-t border-slate-100 pt-6 lg:col-span-3"
+                    class="flex justify-end gap-3 border-t border-slate-100 pt-6 lg:col-span-3 dark:border-gray-800"
                 >
                     <button
                         type="button"
                         @click="goBack"
-                        class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </button>
                     <button
                         type="submit"
                         :disabled="form.processing"
-                        class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800 focus:ring-4 focus:ring-slate-900/10 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                        class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800 focus:ring-4 focus:ring-slate-900/10 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
                     >
                         <Loader2
                             v-if="form.processing"
diff --git a/resources/js/pages/admin/ResourceCreateOrEdit.vue b/resources/js/pages/admin/ResourceCreateOrEdit.vue
index 69279bc..5eaf038 100644
--- a/resources/js/pages/admin/ResourceCreateOrEdit.vue
+++ b/resources/js/pages/admin/ResourceCreateOrEdit.vue
@@ -31,25 +31,25 @@ const resourceTypes = [
         id: 'image',
         name: 'Image',
         icon: ImageIcon,
-        color: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+        color: 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-500/10 dark:border-emerald-500/30',
     },
     {
         id: 'pdf',
         name: 'PDF Document',
         icon: File,
-        color: 'text-rose-600 bg-rose-50 border-rose-200',
+        color: 'text-rose-600 bg-rose-50 border-rose-200 dark:text-rose-400 dark:bg-rose-500/10 dark:border-rose-500/30',
     },
     {
         id: 'note',
         name: 'Text Note',
         icon: FileText,
-        color: 'text-amber-600 bg-amber-50 border-amber-200',
+        color: 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-500/10 dark:border-amber-500/30',
     },
     {
         id: 'video',
         name: 'Video Link',
         icon: Video,
-        color: 'text-blue-600 bg-blue-50 border-blue-200',
+        color: 'text-blue-600 bg-blue-50 border-blue-200 dark:text-blue-400 dark:bg-blue-500/10 dark:border-blue-500/30',
     },
 ];
 
@@ -86,19 +86,21 @@ const submitForm = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700/80 dark:bg-gray-900"
         >
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         {{ props.resource ? 'Edit' : 'Add New' }} Resource
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Upload assets or link content for the curriculum
                         structure.
                     </p>
@@ -109,7 +111,7 @@ const submitForm = () => {
                 <!-- 1. Resource Type Selector -->
                 <div>
                     <label
-                        class="mb-3 block text-sm font-semibold text-slate-700"
+                        class="mb-3 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         Resource Type
                     </label>
@@ -124,8 +126,8 @@ const submitForm = () => {
                             class="flex flex-col items-center justify-center gap-2 rounded-xl border-2 p-4 text-center transition-all focus:outline-none"
                             :class="
                                 form.resource_type === type.id
-                                    ? 'border-blue-600 bg-blue-50/40 font-semibold text-blue-700 ring-2 ring-blue-600/10'
-                                    : 'border-slate-100 text-slate-600 hover:border-slate-200'
+                                    ? 'border-blue-600 bg-blue-50/40 font-semibold text-blue-700 ring-2 ring-blue-600/10 dark:border-blue-500 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20'
+                                    : 'border-slate-100 text-slate-600 hover:border-slate-200 dark:border-gray-800 dark:text-gray-400 dark:hover:border-gray-600'
                             "
                         >
                             <div class="rounded-lg p-2" :class="type.color">
@@ -141,7 +143,7 @@ const submitForm = () => {
                     </div>
                     <p
                         v-if="form.errors.resource_type"
-                        class="mt-1 text-sm text-rose-600"
+                        class="mt-1 text-sm text-rose-600 dark:text-rose-400"
                     >
                         {{ form.errors.resource_type }}
                     </p>
@@ -151,7 +153,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="title"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         Resource Title
                     </label>
@@ -165,12 +167,12 @@ const submitForm = () => {
                         :class="
                             form.errors.title
                                 ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
                         "
                     />
                     <p
                         v-if="form.errors.title"
-                        class="mt-1 text-sm text-rose-600"
+                        class="mt-1 text-sm text-rose-600 dark:text-rose-400"
                     >
                         {{ form.errors.title }}
                     </p>
@@ -180,7 +182,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="content"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         Content Body
                     </label>
@@ -193,12 +195,12 @@ const submitForm = () => {
                         :class="
                             form.errors.content
                                 ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
                         "
                     ></textarea>
                     <p
                         v-if="form.errors.content"
-                        class="mt-1 text-sm text-rose-600"
+                        class="mt-1 text-sm text-rose-600 dark:text-rose-400"
                     >
                         {{ form.errors.content }}
                     </p>
@@ -208,7 +210,7 @@ const submitForm = () => {
                 <div v-if="requiresLink">
                     <label
                         for="external_url"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         {{
                             form.resource_type === 'pdf'
@@ -218,7 +220,7 @@ const submitForm = () => {
                     </label>
                     <div class="relative flex items-center">
                         <LinkIcon
-                            class="pointer-events-none absolute left-4 h-4 w-4 text-slate-400"
+                            class="pointer-events-none absolute left-4 h-4 w-4 text-slate-400 dark:text-gray-500"
                         />
                         <input
                             v-model="form.external_url"
@@ -233,13 +235,13 @@ const submitForm = () => {
                             :class="
                                 form.errors.external_url
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
                             "
                         />
                     </div>
                     <p
                         v-if="form.errors.external_url"
-                        class="mt-1 text-sm text-rose-600"
+                        class="mt-1 text-sm text-rose-600 dark:text-rose-400"
                     >
                         {{ form.errors.external_url }}
                     </p>
@@ -248,16 +250,16 @@ const submitForm = () => {
                 <!-- 5. File Upload (Only for Image) -->
                 <div v-if="requiresFile">
                     <label
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         Attach Image File
                     </label>
                     <div
-                        class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition"
+                        class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition dark:bg-gray-950/50"
                         :class="
                             form.errors.file
-                                ? 'border-rose-300 bg-rose-50/20'
-                                : 'border-slate-200 hover:bg-slate-50'
+                                ? 'border-rose-300 bg-rose-50/20 dark:border-rose-400/60 dark:bg-rose-500/10'
+                                : 'border-slate-200 hover:bg-slate-50 dark:border-gray-700 dark:hover:bg-gray-800'
                         "
                     >
                         <input
@@ -272,25 +274,29 @@ const submitForm = () => {
                             class="flex cursor-pointer flex-col items-center justify-center"
                         >
                             <div
-                                class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-sm"
+                                class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-sm dark:border-gray-800 dark:bg-gray-800 dark:text-gray-500"
                             >
                                 <Upload class="h-5 w-5" />
                             </div>
-                            <span class="text-sm font-medium text-red-700">
+                            <span
+                                class="text-sm font-medium text-red-700 dark:text-red-400"
+                            >
                                 {{
                                     form.file
                                         ? form.file.name
                                         : 'Click to upload or drag & drop'
                                 }}
                             </span>
-                            <span class="mt-1 text-xs text-slate-400">
+                            <span
+                                class="mt-1 text-xs text-slate-400 dark:text-gray-500"
+                            >
                                 Max size: 10MB (JPG, JPEG, PNG)
                             </span>
                         </label>
                     </div>
                     <p
                         v-if="form.errors.file"
-                        class="mt-1 text-sm text-rose-600"
+                        class="mt-1 text-sm text-rose-600 dark:text-rose-400"
                     >
                         {{ form.errors.file }}
                     </p>
@@ -298,12 +304,12 @@ const submitForm = () => {
 
                 <!-- Form Actions -->
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
                     <Link
                         :href="redirect"
                         type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </Link>
diff --git a/resources/js/pages/admin/SubjectCreateOrEdit.vue b/resources/js/pages/admin/SubjectCreateOrEdit.vue
index defc512..52e981a 100644
--- a/resources/js/pages/admin/SubjectCreateOrEdit.vue
+++ b/resources/js/pages/admin/SubjectCreateOrEdit.vue
@@ -71,19 +71,21 @@ const submitForm = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="w-full rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="w-full rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         {{ props.subject ? 'Edit' : 'Create' }} New Subject
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         {{
                             props.subject
                                 ? 'Update the subject details below.'
@@ -94,7 +96,7 @@ const submitForm = () => {
                 <button
                     type="button"
                     @click="goBack"
-                    class="inline-flex items-center self-start rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-200 sm:self-center"
+                    class="inline-flex items-center self-start rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-200 sm:self-center dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
                 >
                     &larr; Back
                 </button>
@@ -105,7 +107,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="name"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Subject Name</label
                         >
                         <input
@@ -117,7 +119,7 @@ const submitForm = () => {
                             :class="
                                 form.errors.name
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -131,17 +133,17 @@ const submitForm = () => {
                     <div>
                         <label
                             for="course"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Course</label
                         >
                         <select
                             v-model="form.course"
                             id="course"
-                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none"
+                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none dark:bg-gray-900"
                             :class="
                                 form.errors.course
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         >
                             <option value="hsc">HSC</option>
@@ -158,7 +160,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="sort_order"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Sort Order</label
                         >
                         <input
@@ -169,7 +171,7 @@ const submitForm = () => {
                             :class="
                                 form.errors.sort_order
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -183,7 +185,7 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        class="mb-3 block text-sm font-semibold text-slate-700"
+                        class="mb-3 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Visual Theme Style</label
                     >
                     <div class="flex flex-wrap gap-3">
@@ -200,7 +202,7 @@ const submitForm = () => {
                                     : preset +
                                       ' border-transparent hover:scale-105' +
                                       (preset.includes('100')
-                                          ? 'border-slate-200'
+                                          ? 'border-slate-200 dark:border-gray-700'
                                           : 'border-slate-150'),
                             ]"
                         >
@@ -220,7 +222,7 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        class="mb-2.5 block text-sm font-semibold text-slate-700"
+                        class="mb-2.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Subject Icon</label
                     >
                     <div
@@ -234,8 +236,8 @@ const submitForm = () => {
                             class="flex flex-col items-center justify-center gap-1.5 rounded-xl border p-3.5 transition-all"
                             :class="
                                 form.icon === iconKey
-                                    ? 'border-blue-600 bg-blue-50 text-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                                    ? 'border-blue-600 bg-blue-50 text-blue-600 ring-2 ring-blue-600/10 dark:bg-blue-500/10 dark:text-blue-400'
+                                    : 'border-slate-200 text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800'
                             "
                         >
                             <component
@@ -256,17 +258,17 @@ const submitForm = () => {
                     </p>
                 </div>
 
-                <hr class="my-4 border-slate-100" />
+                <hr class="my-4 border-slate-100 dark:border-gray-800" />
 
                 <div
-                    class="rounded-xl border border-slate-200/60 bg-slate-50 p-5"
+                    class="rounded-xl border border-slate-200/60 bg-slate-50 p-5 dark:border-gray-700 dark:bg-gray-800"
                 >
                     <span
-                        class="mb-3.5 block text-xs font-bold tracking-wider text-slate-400 uppercase"
+                        class="mb-3.5 block text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >Live Dashboard Card Preview</span
                     >
                     <div
-                        class="flex max-w-sm items-center space-x-4 rounded-lg border border-slate-100 bg-white p-4 shadow-sm"
+                        class="flex max-w-sm items-center space-x-4 rounded-lg border border-slate-100 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900"
                     >
                         <div
                             :class="form.tailwind_format"
@@ -278,10 +280,14 @@ const submitForm = () => {
                             />
                         </div>
                         <div class="overflow-hidden">
-                            <h4 class="truncate font-bold text-slate-800">
+                            <h4
+                                class="truncate font-bold text-slate-800 dark:text-gray-200"
+                            >
                                 {{ form.name || 'Untitled Subject' }}
                             </h4>
-                            <p class="text-xs text-slate-500">
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
                                 {{ props.subject?.children_count ?? 0 }}
                                 Chapters
                             </p>
@@ -290,12 +296,12 @@ const submitForm = () => {
                 </div>
 
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-4"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-4 dark:border-gray-800"
                 >
                     <button
                         type="button"
                         @click="goBack"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </button>
diff --git a/resources/js/pages/admin/resources/BulkImageCreate.vue b/resources/js/pages/admin/resources/BulkImageCreate.vue
index 40a2d14..c903417 100644
--- a/resources/js/pages/admin/resources/BulkImageCreate.vue
+++ b/resources/js/pages/admin/resources/BulkImageCreate.vue
@@ -116,20 +116,22 @@ const submitForm = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <!-- Header -->
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         Bulk Upload Images
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Upload multiple image resources simultaneously and
                         configure naming conventions.
                     </p>
@@ -140,7 +142,7 @@ const submitForm = () => {
                 <!-- Dropzone Section -->
                 <div>
                     <label
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         Select Images
                     </label>
@@ -151,10 +153,10 @@ const submitForm = () => {
                         class="relative rounded-xl border-2 border-dashed p-8 text-center transition-all"
                         :class="[
                             isDragging
-                                ? 'border-blue-500 bg-blue-50/50'
-                                : 'border-slate-200 bg-slate-50/50 hover:bg-slate-50',
+                                ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-500/10'
+                                : 'border-slate-200 bg-slate-50/50 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800',
                             form.errors.files
-                                ? 'border-rose-300 bg-rose-50/20'
+                                ? 'border-rose-300 bg-rose-50/20 dark:border-rose-500/30 dark:bg-rose-500/10'
                                 : '',
                         ]"
                     >
@@ -171,14 +173,18 @@ const submitForm = () => {
                             class="flex cursor-pointer flex-col items-center justify-center"
                         >
                             <div
-                                class="mb-3 rounded-full border border-slate-100 bg-white p-3.5 text-blue-600 shadow-sm"
+                                class="mb-3 rounded-full border border-slate-100 bg-white p-3.5 text-blue-600 shadow-sm dark:border-gray-800 dark:bg-gray-900"
                             >
                                 <Upload class="h-6 w-6" />
                             </div>
-                            <span class="text-sm font-semibold text-slate-700">
+                            <span
+                                class="text-sm font-semibold text-slate-700 dark:text-gray-300"
+                            >
                                 Click to upload or drag & drop images
                             </span>
-                            <span class="mt-1 text-xs text-slate-400">
+                            <span
+                                class="mt-1 text-xs text-slate-400 dark:text-gray-500"
+                            >
                                 PNG, JPG, WEBP, or GIF (Multiple selection
                                 supported)
                             </span>
@@ -195,33 +201,35 @@ const submitForm = () => {
                 <!-- Naming Convention Options -->
                 <div
                     v-if="selectedFiles.length > 0"
-                    class="space-y-4 rounded-xl border border-slate-200 bg-slate-50/50 p-5"
+                    class="space-y-4 rounded-xl border border-slate-200 bg-slate-50/50 p-5 dark:border-gray-700 dark:bg-gray-800/50"
                 >
-                    <h3 class="text-sm font-semibold text-slate-800">
+                    <h3
+                        class="text-sm font-semibold text-slate-800 dark:text-gray-200"
+                    >
                         File Naming Settings
                     </h3>
 
                     <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                         <!-- Option 1: Original -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'original'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="original"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
                                 <FileSpreadsheet
-                                    class="h-4 w-4 text-slate-400"
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
                                 />
                                 Original Filenames
                             </div>
@@ -229,46 +237,50 @@ const submitForm = () => {
 
                         <!-- Option 2: Serial -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'serial'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="serial"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
-                                <Hash class="h-4 w-4 text-slate-400" />
+                                <Hash
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
+                                />
                                 Serial Numbers (01, 02)
                             </div>
                         </label>
 
                         <!-- Option 3: Suffix -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'suffix'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="suffix"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
-                                <Tag class="h-4 w-4 text-slate-400" />
+                                <Tag
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
+                                />
                                 Custom Prefix + Serial
                             </div>
                         </label>
@@ -281,7 +293,7 @@ const submitForm = () => {
                     >
                         <div v-if="form.naming_strategy === 'suffix'">
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600"
+                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
                             >
                                 Custom Name Prefix
                             </label>
@@ -289,13 +301,13 @@ const submitForm = () => {
                                 v-model="form.naming_suffix"
                                 type="text"
                                 placeholder="e.g. Lecture Slide"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
                             />
                         </div>
 
                         <div>
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600"
+                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
                             >
                                 Starting Number
                             </label>
@@ -304,7 +316,7 @@ const submitForm = () => {
                                 type="number"
                                 min="1"
                                 placeholder="1"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
                             />
                         </div>
                     </div>
@@ -313,7 +325,9 @@ const submitForm = () => {
                 <!-- File Previews Grid -->
                 <div v-if="selectedFiles.length > 0">
                     <div class="mb-3 flex items-center justify-between">
-                        <label class="text-sm font-semibold text-slate-700">
+                        <label
+                            class="text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >
                             Selected Images ({{ selectedFiles.length }})
                         </label>
                         <button
@@ -332,11 +346,11 @@ const submitForm = () => {
                         <div
                             v-for="(item, index) in selectedFiles"
                             :key="item.id"
-                            class="group relative flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white p-2 shadow-xs transition hover:border-slate-300"
+                            class="group relative flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white p-2 shadow-xs transition hover:border-slate-300 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600"
                         >
                             <!-- Thumbnail -->
                             <div
-                                class="relative aspect-video w-full overflow-hidden rounded-lg bg-slate-100"
+                                class="relative aspect-video w-full overflow-hidden rounded-lg bg-slate-100 dark:bg-gray-800"
                             >
                                 <img
                                     :src="item.previewUrl"
@@ -355,13 +369,13 @@ const submitForm = () => {
                             <!-- Title Preview -->
                             <div class="mt-2.5 px-1">
                                 <p
-                                    class="truncate text-xs font-bold text-slate-800"
+                                    class="truncate text-xs font-bold text-slate-800 dark:text-gray-200"
                                     :title="processedTitles[index]"
                                 >
                                     {{ processedTitles[index] }}
                                 </p>
                                 <p
-                                    class="mt-0.5 truncate text-[10px] text-slate-400"
+                                    class="mt-0.5 truncate text-[10px] text-slate-400 dark:text-gray-500"
                                 >
                                     Original: {{ item.file.name }}
                                 </p>
@@ -372,12 +386,12 @@ const submitForm = () => {
 
                 <!-- Footer Actions -->
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
                     <Link
                         :href="redirect"
                         type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </Link>
diff --git a/resources/js/pages/admin/resources/BulkVideoCreate.vue b/resources/js/pages/admin/resources/BulkVideoCreate.vue
index d1b99ae..a798157 100644
--- a/resources/js/pages/admin/resources/BulkVideoCreate.vue
+++ b/resources/js/pages/admin/resources/BulkVideoCreate.vue
@@ -34,20 +34,22 @@ const submitForm = () => {
 
 <template>
     <div
-        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10"
+        class="flex min-h-full w-full flex-col justify-start bg-slate-50 p-6 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10"
+            class="mx-auto w-full max-w-4xl rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm md:p-10 dark:border-gray-700 dark:bg-gray-900"
         >
             <!-- Header -->
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         Import YouTube Playlist
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Automatically fetch videos from a YouTube playlist and
                         create resources preserving playlist order.
                     </p>
@@ -59,7 +61,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="playlist_url"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         YouTube Playlist URL
                     </label>
@@ -77,11 +79,11 @@ const submitForm = () => {
                             :class="
                                 form.errors.playlist_url
                                     ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20'
+                                    : 'border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                     </div>
-                    <p class="mt-1 text-xs text-slate-500">
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
                         Paste the full URL of the public or unlisted YouTube
                         playlist.
                     </p>
@@ -95,13 +97,17 @@ const submitForm = () => {
 
                 <!-- Naming Strategy Selection -->
                 <div
-                    class="space-y-4 rounded-xl border border-slate-200 bg-slate-50/50 p-5"
+                    class="space-y-4 rounded-xl border border-slate-200 bg-slate-50/50 p-5 dark:border-gray-700 dark:bg-gray-800/50"
                 >
                     <div>
-                        <h3 class="text-sm font-semibold text-slate-800">
+                        <h3
+                            class="text-sm font-semibold text-slate-800 dark:text-gray-200"
+                        >
                             Resource Naming Strategy
                         </h3>
-                        <p class="mt-0.5 text-xs text-slate-500">
+                        <p
+                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                        >
                             Choose how each resource title will be generated
                             during import.
                         </p>
@@ -110,24 +116,24 @@ const submitForm = () => {
                     <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                         <!-- Strategy 1: YouTube Title -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'youtube'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="youtube"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
                                 <FileSpreadsheet
-                                    class="h-4 w-4 text-slate-400"
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
                                 />
                                 Use YouTube Titles
                             </div>
@@ -135,46 +141,50 @@ const submitForm = () => {
 
                         <!-- Strategy 2: Sequential Numbering -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'serial'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="serial"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
-                                <Hash class="h-4 w-4 text-slate-400" />
+                                <Hash
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
+                                />
                                 Sequential Numbering
                             </div>
                         </label>
 
                         <!-- Strategy 3: Prefix + Sequential -->
                         <label
-                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition"
+                            class="flex cursor-pointer items-center gap-3 rounded-lg border bg-white p-3 transition dark:bg-gray-900"
                             :class="
                                 form.naming_strategy === 'prefix'
                                     ? 'border-blue-600 ring-2 ring-blue-600/10'
-                                    : 'border-slate-200 hover:border-slate-300'
+                                    : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
                             <input
                                 type="radio"
                                 value="prefix"
                                 v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500"
+                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
                             />
                             <div
-                                class="flex items-center gap-2 text-xs font-medium text-slate-700"
+                                class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
                             >
-                                <Tag class="h-4 w-4 text-slate-400" />
+                                <Tag
+                                    class="h-4 w-4 text-slate-400 dark:text-gray-500"
+                                />
                                 Custom Prefix + Serial
                             </div>
                         </label>
@@ -182,7 +192,7 @@ const submitForm = () => {
 
                     <!-- Micro Helper Text for Strategy Choice -->
                     <p
-                        class="rounded-lg border border-slate-200/80 bg-white p-2.5 text-xs text-slate-500"
+                        class="rounded-lg border border-slate-200/80 bg-white p-2.5 text-xs text-slate-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
                     >
                         <span v-if="form.naming_strategy === 'youtube'">
                             💡 <strong>Example:</strong> Uses original YouTube
@@ -208,7 +218,7 @@ const submitForm = () => {
                     >
                         <div v-if="form.naming_strategy === 'prefix'">
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600"
+                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
                             >
                                 Prefix String
                             </label>
@@ -216,16 +226,18 @@ const submitForm = () => {
                                 v-model="form.naming_prefix"
                                 type="text"
                                 placeholder="e.g. Lecture 01"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
                             />
-                            <p class="mt-1 text-[11px] text-slate-400">
+                            <p
+                                class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
+                            >
                                 Applied before the sequential number.
                             </p>
                         </div>
 
                         <div>
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600"
+                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
                             >
                                 Starting Number
                             </label>
@@ -234,9 +246,11 @@ const submitForm = () => {
                                 type="number"
                                 min="1"
                                 placeholder="1"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
                             />
-                            <p class="mt-1 text-[11px] text-slate-400">
+                            <p
+                                class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
+                            >
                                 Number to begin incrementing from (default is
                                 1).
                             </p>
@@ -246,10 +260,14 @@ const submitForm = () => {
 
                 <!-- Information Box -->
                 <div
-                    class="flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50/60 p-4"
+                    class="flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
-                    <Info class="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
-                    <p class="text-xs leading-relaxed text-blue-900">
+                    <Info
+                        class="mt-0.5 h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400"
+                    />
+                    <p
+                        class="text-xs leading-relaxed text-blue-900 dark:text-blue-300"
+                    >
                         Playlists containing more than 50 videos will
                         automatically page through and import all available
                         lessons sequentially.
@@ -258,12 +276,12 @@ const submitForm = () => {
 
                 <!-- Footer Actions -->
                 <div
-                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6"
+                    class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
                     <Link
                         :href="redirect"
                         type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </Link>
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index 293e205..9244823 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -64,19 +64,21 @@ const submitForm = () => {
 
 <template>
     <div
-        class="mobile-deep-border:p-4 flex min-h-full w-full flex-col justify-start bg-slate-50 p-4 lg:p-10"
+        class="mobile-deep-border:p-4 flex min-h-full w-full flex-col justify-start bg-slate-50 p-4 lg:p-10 dark:bg-gray-950"
     >
         <div
-            class="w-full rounded-2xl border border-gray-300 bg-white p-5 shadow-xs md:p-10"
+            class="w-full rounded-2xl border border-gray-300 bg-white p-5 shadow-xs md:p-10 dark:border-gray-600 dark:bg-gray-900"
         >
             <div
-                class="mb-8 flex flex-col justify-between gap-4 border-b border-gray-300 pb-6 sm:flex-row sm:items-center"
+                class="mb-8 flex flex-col justify-between gap-4 border-b border-gray-300 pb-6 sm:flex-row sm:items-center dark:border-gray-600"
             >
                 <div>
-                    <h1 class="text-2xl font-bold text-slate-900">
+                    <h1
+                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
+                    >
                         {{ props.user ? 'Edit' : 'Create New' }} User
                     </h1>
-                    <p class="mt-1 text-sm text-slate-500">
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         {{
                             props.user
                                 ? 'Update team member details and system access rules.'
@@ -92,7 +94,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="name"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Full Name</label
                         >
                         <input
@@ -101,11 +103,11 @@ const submitForm = () => {
                             id="name"
                             placeholder="John Doe"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.name
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -119,7 +121,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="email"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Email Address</label
                         >
                         <input
@@ -128,11 +130,11 @@ const submitForm = () => {
                             id="email"
                             placeholder="johndoe@example.com"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.email
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -149,12 +151,12 @@ const submitForm = () => {
                     <div>
                         <label
                             for="password"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >
                             Password
                             <span
                                 v-if="props.user"
-                                class="text-xs font-normal text-slate-400"
+                                class="text-xs font-normal text-slate-400 dark:text-gray-500"
                                 >(Leave blank to keep current)</span
                             >
                         </label>
@@ -165,11 +167,11 @@ const submitForm = () => {
                             placeholder="••••••••"
                             :required="!props.user"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.password
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -183,18 +185,18 @@ const submitForm = () => {
                     <div v-if="!shouldHideOptions">
                         <label
                             for="role"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >System Role</label
                         >
                         <select
                             id="role"
                             v-model="form.role"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.role
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         >
                             <option
@@ -217,13 +219,15 @@ const submitForm = () => {
                 <!-- DYNAMIC EDITOR PERMISSIONS SECTION -->
                 <div
                     v-if="form.role === 'editor' && !shouldHideOptions"
-                    class="animate-fadeIn space-y-3 rounded-xl border border-blue-200 bg-blue-50/30 p-5 transition-all"
+                    class="animate-fadeIn space-y-3 rounded-xl border border-blue-200 bg-blue-50/30 p-5 transition-all dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
                     <div>
-                        <h3 class="text-sm font-semibold text-slate-900">
+                        <h3
+                            class="text-sm font-semibold text-slate-900 dark:text-gray-100"
+                        >
                             Editor Permissions
                         </h3>
-                        <p class="text-xs text-slate-500">
+                        <p class="text-xs text-slate-500 dark:text-gray-400">
                             Select the features this editor is authorized to
                             modify.
                         </p>
@@ -235,7 +239,7 @@ const submitForm = () => {
                         <div
                             v-for="permission in availablePermissions"
                             :key="permission.name"
-                            class="flex items-start gap-2.5 rounded-lg border border-gray-200 bg-white p-3 shadow-xs"
+                            class="flex items-start gap-2.5 rounded-lg border border-gray-200 bg-white p-3 shadow-xs dark:border-gray-700 dark:bg-gray-900"
                         >
                             <input
                                 type="checkbox"
@@ -246,20 +250,20 @@ const submitForm = () => {
                                     form.processing ||
                                     permission.name === 'view admin'
                                 "
-                                class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-60"
+                                class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-60 dark:border-gray-600"
                             />
                             <label
                                 :for="`perm-${permission.name}`"
-                                class="cursor-pointer text-xs font-medium text-slate-700 select-none disabled:cursor-not-allowed"
+                                class="cursor-pointer text-xs font-medium text-slate-700 select-none disabled:cursor-not-allowed dark:text-gray-300"
                                 :class="{
-                                    'text-slate-400':
+                                    'text-slate-400 dark:text-gray-500':
                                         permission.name === 'view admin',
                                 }"
                             >
                                 {{ permission.name }}
                                 <span
                                     v-if="permission.name === 'view admin'"
-                                    class="block text-[10px] font-normal text-slate-400"
+                                    class="block text-[10px] font-normal text-slate-400 dark:text-gray-500"
                                     >(Required)</span
                                 >
                             </label>
@@ -278,7 +282,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="file"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Profile Image</label
                         >
                         <input
@@ -287,11 +291,11 @@ const submitForm = () => {
                             accept="image/*"
                             @change="form.file = $event.target.files[0]"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-500 transition outline-none file:mr-4 file:rounded-md file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-700 file:transition hover:file:bg-slate-200 disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-500 transition outline-none file:mr-4 file:rounded-md file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-700 file:transition hover:file:bg-slate-200 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-400 dark:file:bg-gray-800 dark:file:text-gray-300 dark:hover:file:bg-gray-700 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.file
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -305,7 +309,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="title"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Title</label
                         >
                         <input
@@ -314,11 +318,11 @@ const submitForm = () => {
                             id="title"
                             placeholder="e.g. Lead Developer, Professor"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.title
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -334,7 +338,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="institution"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Institution</label
                         >
                         <input
@@ -343,11 +347,11 @@ const submitForm = () => {
                             id="institution"
                             placeholder="University / Company"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.institution
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -361,7 +365,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="facebook"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Facebook</label
                         >
                         <input
@@ -370,11 +374,11 @@ const submitForm = () => {
                             id="facebook"
                             placeholder="Facebook profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.facebook
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -390,7 +394,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="github"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >GitHub</label
                         >
                         <input
@@ -399,11 +403,11 @@ const submitForm = () => {
                             id="github"
                             placeholder="GitHub profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.github
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -417,7 +421,7 @@ const submitForm = () => {
                     <div>
                         <label
                             for="instagram"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Instagram</label
                         >
                         <input
@@ -426,11 +430,11 @@ const submitForm = () => {
                             id="instagram"
                             placeholder="Instagram profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                             :class="
                                 form.errors.instagram
                                     ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                             "
                         />
                         <p
@@ -445,7 +449,7 @@ const submitForm = () => {
                 <div>
                     <label
                         for="about"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >About</label
                     >
                     <textarea
@@ -454,11 +458,11 @@ const submitForm = () => {
                         rows="4"
                         placeholder="Short bio..."
                         :disabled="form.processing"
-                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500"
+                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
                         :class="
                             form.errors.about
                                 ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20'
+                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
                         "
                     ></textarea>
                     <p
@@ -471,10 +475,10 @@ const submitForm = () => {
 
                 <!-- Role Permissions Reference Card -->
                 <div
-                    class="space-y-3.5 rounded-xl border border-gray-300 bg-slate-50/50 p-4.5"
+                    class="space-y-3.5 rounded-xl border border-gray-300 bg-slate-50/50 p-4.5 dark:border-gray-600 dark:bg-gray-800/50"
                 >
                     <h4
-                        class="text-xs font-bold tracking-wider text-slate-500 uppercase"
+                        class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
                     >
                         Role Permissions Reference
                     </h4>
@@ -483,7 +487,9 @@ const submitForm = () => {
                             <div class="text-xs font-bold text-red-700">
                                 Admin
                             </div>
-                            <div class="text-xs leading-relaxed text-slate-600">
+                            <div
+                                class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
+                            >
                                 Superuser control. Automatically has all
                                 permissions system-wide.
                             </div>
@@ -494,7 +500,9 @@ const submitForm = () => {
                             <div class="text-xs font-bold text-purple-700">
                                 Editor
                             </div>
-                            <div class="text-xs leading-relaxed text-slate-600">
+                            <div
+                                class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
+                            >
                                 Customizable access. Permissions can be
                                 checked/unchecked explicitly above.
                             </div>
@@ -503,7 +511,9 @@ const submitForm = () => {
                             <div class="text-xs font-bold text-amber-700">
                                 Manager
                             </div>
-                            <div class="text-xs leading-relaxed text-slate-600">
+                            <div
+                                class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
+                            >
                                 Dashboard view. Basic view access with no
                                 modification capabilities.
                             </div>
@@ -512,12 +522,12 @@ const submitForm = () => {
                 </div>
 
                 <div
-                    class="flex justify-end space-x-3 border-t border-gray-300 pt-6"
+                    class="flex justify-end space-x-3 border-t border-gray-300 pt-6 dark:border-gray-600"
                 >
                     <button
                         type="button"
                         @click="goBack"
-                        class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                        class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
                     >
                         Cancel
                     </button>
diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
index 099403c..fac39f4 100644
--- a/resources/js/pages/admin/users/Index.vue
+++ b/resources/js/pages/admin/users/Index.vue
@@ -11,16 +11,18 @@ defineProps({
 
 <template>
     <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-300 bg-white p-4 shadow-xs sm:p-6"
+        class="flex w-full flex-1 flex-col rounded-xl border border-gray-300 bg-white p-4 shadow-xs sm:p-6 dark:border-gray-600 dark:bg-gray-900"
     >
         <div
-            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-300 pb-5 sm:flex-row sm:items-center sm:justify-between"
+            class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-300 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-600"
         >
             <div>
-                <h3 class="text-lg font-semibold tracking-tight text-gray-900">
+                <h3
+                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
+                >
                     Manage Users
                 </h3>
-                <p class="mt-0.5 text-sm text-gray-500">
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     Control administrative system access, roles, and profile
                     directories.
                 </p>
@@ -28,9 +30,11 @@ defineProps({
 
             <div class="flex items-center justify-between gap-3 sm:justify-end">
                 <div
-                    class="rounded-full border border-blue-200 bg-blue-50 px-3 py-1"
+                    class="rounded-full border border-blue-200 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
                 >
-                    <span class="text-xs font-medium text-blue-700">
+                    <span
+                        class="text-xs font-medium text-blue-700 dark:text-blue-400"
+                    >
                         Total Users: {{ users.length }}
                     </span>
                 </div>
@@ -48,13 +52,13 @@ defineProps({
         <div class="flex flex-1 flex-col">
             <div
                 v-if="users.length > 0"
-                class="overflow-hidden rounded-xl border border-gray-300 md:border-gray-300"
+                class="overflow-hidden rounded-xl border border-gray-300 md:border-gray-300 dark:border-gray-600"
             >
                 <table
-                    class="block min-w-full divide-y divide-gray-300 text-left text-sm text-gray-500 md:table"
+                    class="block min-w-full divide-y divide-gray-300 text-left text-sm text-gray-500 md:table dark:divide-gray-700 dark:text-gray-400"
                 >
                     <thead
-                        class="hidden bg-gray-50 text-xs font-semibold tracking-wider text-gray-600 uppercase md:table-header-group"
+                        class="hidden bg-gray-50 text-xs font-semibold tracking-wider text-gray-600 uppercase md:table-header-group dark:bg-gray-800 dark:text-gray-400"
                     >
                         <tr>
                             <th scope="col" class="px-6 py-3.5">Name</th>
@@ -71,7 +75,7 @@ defineProps({
                         </tr>
                     </thead>
                     <tbody
-                        class="block divide-y divide-gray-300 bg-white md:table-row-group"
+                        class="block divide-y divide-gray-300 bg-white md:table-row-group dark:divide-gray-700 dark:bg-gray-900"
                     >
                         <UserRow
                             v-for="user in users"
diff --git a/resources/js/pages/ai/Index.vue b/resources/js/pages/ai/Index.vue
index ae80d51..c4d1f0c 100644
--- a/resources/js/pages/ai/Index.vue
+++ b/resources/js/pages/ai/Index.vue
@@ -112,14 +112,16 @@ const handleMockSubmit = (question?: string) => {
         <div class="mx-auto max-w-3xl text-center">
             <!-- Launching Badge -->
             <div
-                class="mb-4 inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50/80 px-3.5 py-1.5 text-xs font-bold text-indigo-700 shadow-xs backdrop-blur-md"
+                class="mb-4 inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50/80 px-3.5 py-1.5 text-xs font-bold text-indigo-700 shadow-xs backdrop-blur-md dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
             >
-                <Sparkles class="h-3.5 w-3.5 animate-pulse text-indigo-600" />
+                <Sparkles
+                    class="h-3.5 w-3.5 animate-pulse text-indigo-600 dark:text-indigo-400"
+                />
                 <span>HSCStack AI • Coming Soon</span>
             </div>
 
             <h1
-                class="mb-4 text-3xl font-black tracking-tight text-slate-900 sm:text-5xl lg:leading-[1.15]"
+                class="mb-4 text-3xl font-black tracking-tight text-slate-900 sm:text-5xl lg:leading-[1.15] dark:text-gray-100"
             >
                 তোমার বিষয় ও টপিক অনুযায়ী <br />
                 <span
@@ -130,7 +132,7 @@ const handleMockSubmit = (question?: string) => {
             </h1>
 
             <p
-                class="mx-auto mb-8 max-w-xl text-sm leading-relaxed font-medium text-slate-600 sm:text-base"
+                class="mx-auto mb-8 max-w-xl text-sm leading-relaxed font-medium text-slate-600 sm:text-base dark:text-gray-400"
             >
                 পছন্দের বিষয় ও অধ্যায় সিলেক্ট করে সরাসরি প্রশ্ন করুন। NCTB
                 কারিকুলাম অনুযায়ী প্রতিটি জটিল কনসেপ্ট সহজ ভাষায় বুঝিয়ে দেবে
@@ -140,7 +142,7 @@ const handleMockSubmit = (question?: string) => {
 
         <!-- Funding Banner / Callout -->
         <div
-            class="relative mx-auto mb-10 max-w-3xl overflow-hidden rounded-2xl border border-indigo-100 bg-gradient-to-br from-indigo-50/90 via-white to-violet-50/50 p-5 shadow-xs sm:p-6"
+            class="relative mx-auto mb-10 max-w-3xl overflow-hidden rounded-2xl border border-indigo-100 bg-gradient-to-br from-indigo-50/90 via-white to-violet-50/50 p-5 shadow-xs sm:p-6 dark:border-indigo-500/30 dark:from-indigo-500/5 dark:via-gray-900 dark:to-violet-500/5"
         >
             <div
                 class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between"
@@ -153,12 +155,12 @@ const handleMockSubmit = (question?: string) => {
                     </div>
                     <div>
                         <h3
-                            class="text-sm font-bold text-slate-900 sm:text-base"
+                            class="text-sm font-bold text-slate-900 sm:text-base dark:text-gray-100"
                         >
                             এই সার্ভিসটি চালু করতে আমাদের ফান্ডিং প্রয়োজন!
                         </h3>
                         <p
-                            class="mt-0.5 text-xs leading-relaxed font-medium text-slate-600"
+                            class="mt-0.5 text-xs leading-relaxed font-medium text-slate-600 dark:text-gray-400"
                         >
                             HSCStack একটি অলাভজনক উদ্যোগ। AI সার্ভিস সম্পূর্ণ
                             ফ্রিতে দিতে এবং সার্ভার ও API কস্ট বহন করতে আমাদের
@@ -179,29 +181,35 @@ const handleMockSubmit = (question?: string) => {
 
         <!-- AI Mockup Flow Container -->
         <div
-            class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl shadow-slate-200/50"
+            class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl shadow-slate-200/50 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900/50"
         >
             <!-- Top Bar / Breadcrumb Flow -->
             <div
-                class="border-b border-slate-100 bg-slate-50/80 px-5 py-3.5 backdrop-blur-md"
+                class="border-b border-slate-100 bg-slate-50/80 px-5 py-3.5 backdrop-blur-md dark:border-gray-800 dark:bg-gray-800"
             >
                 <div
-                    class="flex flex-wrap items-center gap-2 text-xs font-bold text-slate-500"
+                    class="flex flex-wrap items-center gap-2 text-xs font-bold text-slate-500 dark:text-gray-400"
                 >
-                    <span class="flex items-center gap-1.5 text-slate-700">
+                    <span
+                        class="flex items-center gap-1.5 text-slate-700 dark:text-gray-300"
+                    >
                         <component
                             :is="selectedSubject.icon"
-                            class="h-4 w-4 stroke-[2.2] text-indigo-600"
+                            class="h-4 w-4 stroke-[2.2] text-indigo-600 dark:text-indigo-400"
                         />
                         {{ selectedSubject.name }}
                     </span>
-                    <ChevronRight class="h-3.5 w-3.5 text-slate-300" />
-                    <span class="flex items-center gap-1 text-indigo-600">
+                    <ChevronRight
+                        class="h-3.5 w-3.5 text-slate-300 dark:text-gray-600"
+                    />
+                    <span
+                        class="flex items-center gap-1 text-indigo-600 dark:text-indigo-400"
+                    >
                         <Layers class="h-3.5 w-3.5" />
                         {{ selectedTopic }}
                     </span>
                     <span
-                        class="ml-auto inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] text-amber-700"
+                        class="ml-auto inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"
                     >
                         <Lock class="h-3 w-3" /> Coming Soon
                     </span>
@@ -212,10 +220,10 @@ const handleMockSubmit = (question?: string) => {
                 <!-- STEP 1: Select Subject -->
                 <div>
                     <label
-                        class="mb-2.5 flex items-center gap-1.5 text-xs font-extrabold tracking-wider text-slate-400 uppercase"
+                        class="mb-2.5 flex items-center gap-1.5 text-xs font-extrabold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
                         <span
-                            class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-[10px] text-indigo-600"
+                            class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-[10px] text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400"
                             >1</span
                         >
                         বিষয় সিলেক্ট করুন:
@@ -229,8 +237,8 @@ const handleMockSubmit = (question?: string) => {
                             :class="[
                                 'inline-flex items-center justify-between rounded-xl border px-3.5 py-2.5 text-xs font-bold transition-all duration-200 active:scale-95',
                                 selectedSubject.id === sub.id
-                                    ? 'border-indigo-600 bg-indigo-50/80 text-indigo-700 shadow-xs ring-2 ring-indigo-600/10'
-                                    : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50',
+                                    ? 'border-indigo-600 bg-indigo-50/80 text-indigo-700 shadow-xs ring-2 ring-indigo-600/10 dark:border-indigo-500 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20'
+                                    : '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',
                             ]"
                         >
                             <div class="flex items-center gap-2.5">
@@ -239,7 +247,7 @@ const handleMockSubmit = (question?: string) => {
                                         'flex h-7 w-7 items-center justify-center rounded-lg transition-colors',
                                         selectedSubject.id === sub.id
                                             ? 'bg-indigo-600 text-white'
-                                            : 'bg-slate-100 text-slate-500',
+                                            : 'bg-slate-100 text-slate-500 dark:bg-gray-800 dark:text-gray-400',
                                     ]"
                                 >
                                     <component
@@ -251,7 +259,7 @@ const handleMockSubmit = (question?: string) => {
                             </div>
                             <CheckCircle2
                                 v-if="selectedSubject.id === sub.id"
-                                class="h-4 w-4 text-indigo-600"
+                                class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
                             />
                         </button>
                     </div>
@@ -260,10 +268,10 @@ const handleMockSubmit = (question?: string) => {
                 <!-- STEP 2: Select Topic / Chapter -->
                 <div>
                     <label
-                        class="mb-2.5 flex items-center gap-1.5 text-xs font-extrabold tracking-wider text-slate-400 uppercase"
+                        class="mb-2.5 flex items-center gap-1.5 text-xs font-extrabold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
                         <span
-                            class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-[10px] text-indigo-600"
+                            class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-[10px] text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400"
                             >2</span
                         >
                         টপিক / অধ্যায় পছন্দ করুন:
@@ -278,7 +286,7 @@ const handleMockSubmit = (question?: string) => {
                                 'rounded-xl border px-3 py-1.5 text-xs font-semibold transition-all duration-200 active:scale-95',
                                 selectedTopic === topic
                                     ? 'border-indigo-500 bg-indigo-600 text-white shadow-xs'
-                                    : 'border-slate-200 bg-slate-50/80 text-slate-600 hover:border-slate-300 hover:bg-white',
+                                    : 'border-slate-200 bg-slate-50/80 text-slate-600 hover:border-slate-300 hover:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-900',
                             ]"
                         >
                             {{ topic }}
@@ -288,7 +296,7 @@ const handleMockSubmit = (question?: string) => {
 
                 <!-- Chat Box Screen Simulation -->
                 <div
-                    class="space-y-4 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4"
+                    class="space-y-4 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
                 >
                     <!-- AI Greeting Message -->
                     <div class="flex gap-3">
@@ -298,7 +306,7 @@ const handleMockSubmit = (question?: string) => {
                             <Bot class="h-4 w-4" />
                         </div>
                         <div
-                            class="max-w-xl rounded-2xl rounded-tl-xs border border-slate-200/60 bg-white p-3.5 text-xs leading-relaxed font-medium text-slate-700 shadow-xs sm:text-sm"
+                            class="max-w-xl rounded-2xl rounded-tl-xs border border-slate-200/60 bg-white p-3.5 text-xs leading-relaxed font-medium text-slate-700 shadow-xs sm:text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
                         >
                             তুমি
                             <strong>{{ selectedSubject.name }}</strong> বিষয়ের
@@ -311,7 +319,7 @@ const handleMockSubmit = (question?: string) => {
                     <!-- Suggested Prompts for this topic -->
                     <div>
                         <p
-                            class="mb-2 flex items-center gap-1 text-[11px] font-bold tracking-wider text-slate-400 uppercase"
+                            class="mb-2 flex items-center gap-1 text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >
                             <MessageSquareText class="h-3 w-3" />
                             নমুনা প্রশ্নসমূহ (Sample Queries):
@@ -322,15 +330,15 @@ const handleMockSubmit = (question?: string) => {
                                 :key="idx"
                                 @click="handleMockSubmit(q)"
                                 type="button"
-                                class="group flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white p-2.5 text-left transition-all duration-200 hover:border-indigo-300 hover:shadow-xs active:scale-[0.99]"
+                                class="group flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white p-2.5 text-left transition-all duration-200 hover:border-indigo-300 hover:shadow-xs active:scale-[0.99] dark:border-gray-700 dark:bg-gray-900 dark:hover:border-indigo-500/50"
                             >
                                 <span
-                                    class="text-xs font-semibold text-slate-700 group-hover:text-indigo-600"
+                                    class="text-xs font-semibold text-slate-700 group-hover:text-indigo-600 dark:text-gray-300 dark:group-hover:text-indigo-400"
                                 >
                                     "{{ q }}"
                                 </span>
                                 <Zap
-                                    class="h-3.5 w-3.5 shrink-0 text-slate-300 group-hover:text-indigo-500"
+                                    class="h-3.5 w-3.5 shrink-0 text-slate-300 group-hover:text-indigo-500 dark:text-gray-600 dark:group-hover:text-indigo-400"
                                 />
                             </button>
                         </div>
@@ -339,20 +347,22 @@ const handleMockSubmit = (question?: string) => {
             </div>
 
             <!-- Lock Overlay Footer -->
-            <div class="relative border-t border-slate-100 bg-slate-50/80 p-4">
+            <div
+                class="relative border-t border-slate-100 bg-slate-50/80 p-4 dark:border-gray-800 dark:bg-gray-800"
+            >
                 <!-- Disabled Lock Screen Overlay -->
                 <div
-                    class="absolute inset-0 z-10 flex items-center justify-center bg-white/85 backdrop-blur-[2px]"
+                    class="absolute inset-0 z-10 flex items-center justify-center bg-white/85 backdrop-blur-[2px] dark:bg-gray-900/85"
                 >
                     <div
-                        class="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold text-slate-600 shadow-xs"
+                        class="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold text-slate-600 shadow-xs dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
                     >
                         <Lock class="h-3.5 w-3.5 text-amber-500" />
                         <span
                             >AI চালু করতে সাহায্য করুন 👉
                             <Link
                                 href="/support"
-                                class="text-indigo-600 hover:underline"
+                                class="text-indigo-600 hover:underline dark:text-indigo-400"
                                 >Support Page</Link
                             ></span
                         >
@@ -368,7 +378,7 @@ const handleMockSubmit = (question?: string) => {
                         type="text"
                         disabled
                         :placeholder="`${selectedTopic} নিয়ে প্রশ্নটি লিখুন...`"
-                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-xs font-semibold text-slate-700"
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-xs font-semibold text-slate-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
                     />
                     <button
                         type="button"
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index b353915..d6ea7cf 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -18,10 +18,10 @@ const submit = () => {
     <!-- Atmospheric Blobs -->
     <div class="pointer-events-none fixed inset-0 z-0">
         <div
-            class="absolute top-[-10%] left-[-10%] h-[50%] w-[50%] rounded-full bg-indigo-200/40 blur-[120px]"
+            class="absolute top-[-10%] left-[-10%] h-[50%] w-[50%] rounded-full bg-indigo-200/40 blur-[120px] dark:bg-indigo-500/10"
         ></div>
         <div
-            class="absolute right-[-5%] bottom-[10%] h-[40%] w-[40%] rounded-full bg-violet-200/30 blur-[100px]"
+            class="absolute right-[-5%] bottom-[10%] h-[40%] w-[40%] rounded-full bg-violet-200/30 blur-[100px] dark:bg-violet-500/10"
         ></div>
     </div>
 
@@ -30,11 +30,13 @@ const submit = () => {
     >
         <div class="w-full max-w-sm">
             <div class="mb-10 text-center">
-                <h1 class="text-3xl font-black tracking-tight text-slate-900">
+                <h1
+                    class="text-3xl font-black tracking-tight text-slate-900 dark:text-gray-100"
+                >
                     Member Portal
                 </h1>
                 <p
-                    class="mt-2 text-[10px] font-black tracking-[0.2em] text-slate-400 uppercase"
+                    class="mt-2 text-[10px] font-black tracking-[0.2em] text-slate-400 uppercase dark:text-gray-500"
                 >
                     Restricted Access
                 </p>
@@ -43,57 +45,59 @@ const submit = () => {
             <!-- Deep Shadow Login Card -->
             <form
                 @submit.prevent="submit"
-                class="rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-[0_20px_50px_rgba(8,11,46,0.15)] backdrop-blur-xl"
+                class="rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-[0_20px_50px_rgba(8,11,46,0.15)] backdrop-blur-xl dark:border-gray-800 dark:bg-gray-900/80"
             >
                 <div class="space-y-6">
                     <div>
                         <label
-                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase"
+                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
                             >Email</label
                         >
                         <input
                             v-model="form.email"
                             type="email"
                             required
-                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900"
+                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900 dark:bg-gray-800 dark:placeholder:text-gray-600 dark:focus:ring-gray-100"
                             placeholder="admin@example.com"
                         />
                     </div>
 
                     <div>
                         <label
-                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase"
+                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
                             >Password</label
                         >
                         <input
                             v-model="form.password"
                             type="password"
                             required
-                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900"
+                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900 dark:bg-gray-800 dark:placeholder:text-gray-600 dark:focus:ring-gray-100"
                             placeholder="••••••••"
                         />
                     </div>
                 </div>
                 <div
-                    class="mt-6 rounded-xl border border-indigo-100 bg-indigo-50/50 p-4"
+                    class="mt-6 rounded-xl border border-indigo-100 bg-indigo-50/50 p-4 dark:border-indigo-500/30 dark:bg-indigo-500/10"
                 >
                     <p
-                        class="mb-1 text-center text-[9px] font-bold tracking-widest text-indigo-400 uppercase"
+                        class="mb-1 text-center text-[9px] font-bold tracking-widest text-indigo-400 uppercase dark:text-indigo-300"
                     >
                         Read-only Access For Viewing Admin Panel
                     </p>
                     <div
-                        class="flex justify-center gap-4 font-mono text-[10px] text-slate-600"
+                        class="flex justify-center gap-4 font-mono text-[10px] text-slate-600 dark:text-gray-400"
                     >
                         <p>
                             Email:
-                            <span class="font-bold text-slate-900"
+                            <span
+                                class="font-bold text-slate-900 dark:text-gray-100"
                                 >check@example.com</span
                             >
                         </p>
                         <p>
                             Pass:
-                            <span class="font-bold text-slate-900"
+                            <span
+                                class="font-bold text-slate-900 dark:text-gray-100"
                                 >check123</span
                             >
                         </p>
@@ -101,19 +105,19 @@ const submit = () => {
                 </div>
                 <button
                     :disabled="form.processing"
-                    class="mt-8 w-full rounded-2xl bg-slate-900 py-4 text-xs font-black tracking-widest text-white uppercase transition-all hover:scale-[1.02] hover:bg-indigo-600 active:scale-[0.98]"
+                    class="mt-8 w-full rounded-2xl bg-slate-900 py-4 text-xs font-black tracking-widest text-white uppercase transition-all hover:scale-[1.02] hover:bg-indigo-600 active:scale-[0.98] dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-indigo-600 dark:hover:text-white"
                 >
                     {{ form.processing ? 'Authenticating...' : 'Enter System' }}
                 </button>
 
                 <div class="mt-6 text-center">
                     <p
-                        class="text-[10px] font-black tracking-widest text-slate-400 uppercase"
+                        class="text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
                     >
                         Want to be a member?
                         <Link
                             href="/join"
-                            class="ml-1 text-indigo-600 transition-colors hover:text-indigo-800"
+                            class="ml-1 text-indigo-600 transition-colors hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                         >
                             Join here
                         </Link>
@@ -124,7 +128,7 @@ const submit = () => {
             <div class="mt-8 text-center">
                 <Link
                     href="/"
-                    class="text-[10px] font-black tracking-widest text-slate-400 uppercase transition-colors hover:text-slate-900"
+                    class="text-[10px] font-black tracking-widest text-slate-400 uppercase transition-colors hover:text-slate-900 dark:text-gray-500 dark:hover:text-gray-100"
                 >
                     ← Back to Site
                 </Link>
diff --git a/resources/js/pages/errors/404.vue b/resources/js/pages/errors/404.vue
index 6db5236..b5e88dd 100644
--- a/resources/js/pages/errors/404.vue
+++ b/resources/js/pages/errors/404.vue
@@ -28,20 +28,20 @@ const goBack = () => {
 
         <!-- Glass card content -->
         <div
-            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10"
+            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10 dark:border-gray-700/50 dark:bg-gray-900/70 dark:hover:border-gray-600/40"
         >
             <!-- Animated decorative icon wrapper -->
             <div
-                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner"
+                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
             >
                 <div
-                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60"
+                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
                 ></div>
                 <div
-                    class="animate-float flex items-center justify-center text-slate-700"
+                    class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
                 >
                     <HelpCircle
-                        class="h-12 w-12 stroke-[1.5] text-indigo-600"
+                        class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
                     />
                 </div>
             </div>
@@ -53,12 +53,14 @@ const goBack = () => {
                 404
             </h1>
 
-            <h2 class="mt-4 text-2xl font-bold tracking-tight text-slate-900">
+            <h2
+                class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
+            >
                 পৃষ্ঠাটি খুঁজে পাওয়া যায়নি
             </h2>
 
             <p
-                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500"
+                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
             >
                 আপনি যে পৃষ্ঠাটি খুঁজছেন, সেটি পাওয়া যায়নি। এটি হয়তো সরিয়ে
                 ফেলা হয়েছে, ঠিকানা পরিবর্তন হয়েছে, ডিলেট করা হয়েছে অথবা এমন
@@ -71,7 +73,7 @@ const goBack = () => {
             >
                 <button
                     @click="goBack"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-slate-100 px-5 py-2.5 text-sm font-semibold text-slate-700 transition-all duration-150 hover:bg-slate-200 active:scale-95 sm:w-auto"
+                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-slate-100 px-5 py-2.5 text-sm font-semibold text-slate-700 transition-all duration-150 hover:bg-slate-200 active:scale-95 sm:w-auto dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                 >
                     <ArrowLeft class="h-4 w-4" />
                     আগের পৃষ্ঠায় ফিরুন
@@ -79,7 +81,7 @@ const goBack = () => {
 
                 <Link
                     href="/"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto"
+                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto dark:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30"
                 >
                     <Home class="h-4 w-4" />
                     হোমপেজে যান
@@ -87,12 +89,12 @@ const goBack = () => {
             </div>
 
             <!-- Divider -->
-            <div class="my-8 h-px bg-slate-200/60"></div>
+            <div class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"></div>
 
             <!-- Directory / Helpful Links -->
             <div class="text-left">
                 <h3
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase"
+                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                 >
                     অন্যান্য লিংকসমূহ
                 </h3>
@@ -100,52 +102,52 @@ const goBack = () => {
                 <div class="mt-3 grid grid-cols-1 gap-2.5">
                     <Link
                         href="/"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500/20"
                             >
                                 <BookOpen class="h-4 w-4" />
                             </div>
                             <span>Academic Resources</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </Link>
 
                     <Link
                         href="/join"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20"
                             >
                                 <Users class="h-4 w-4" />
                             </div>
                             <span>Join Our Team</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </Link>
 
                     <Link
                         href="/about-us"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600 transition-colors group-hover:bg-sky-100"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600 transition-colors group-hover:bg-sky-100 dark:bg-sky-500/10 dark:text-sky-400 dark:group-hover:bg-sky-500/20"
                             >
                                 <Info class="h-4 w-4" />
                             </div>
                             <span>About Us</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </Link>
                 </div>
diff --git a/resources/js/pages/errors/503.vue b/resources/js/pages/errors/503.vue
index 5a0002a..d75affe 100644
--- a/resources/js/pages/errors/503.vue
+++ b/resources/js/pages/errors/503.vue
@@ -21,19 +21,21 @@ import {
 
         <!-- Glass card content -->
         <div
-            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10"
+            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10 dark:border-gray-700/50 dark:bg-gray-900/70 dark:hover:border-gray-600/40"
         >
             <!-- Animated decorative icon wrapper -->
             <div
-                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner"
+                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
             >
                 <div
-                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60"
+                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
                 ></div>
                 <div
-                    class="animate-float flex items-center justify-center text-slate-700"
+                    class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
                 >
-                    <Wrench class="h-12 w-12 stroke-[1.5] text-indigo-600" />
+                    <Wrench
+                        class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
+                    />
                 </div>
             </div>
 
@@ -44,12 +46,14 @@ import {
                 503
             </h1>
 
-            <h2 class="mt-4 text-2xl font-bold tracking-tight text-slate-900">
+            <h2
+                class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
+            >
                 রক্ষণাবেক্ষণের কাজ চলছে
             </h2>
 
             <p
-                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500"
+                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
             >
                 আপনার অভিজ্ঞতা আরও উন্নত করতে আমরা সিস্টেমের আধুনিকায়নের কাজ
                 করছি। খুব শীঘ্রই আমরা পুনরায় অনলাইনে ফিরব। আপনার ধৈর্যের জন্য
@@ -62,7 +66,7 @@ import {
             >
                 <Link
                     href="/"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto"
+                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto dark:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30"
                 >
                     <Home class="h-4 w-4" />
                     পেজটি রিফ্রেশ করুন
@@ -70,12 +74,12 @@ import {
             </div>
 
             <!-- Divider -->
-            <div class="my-8 h-px bg-slate-200/60"></div>
+            <div class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"></div>
 
             <!-- Directory / Helpful Links -->
             <div class="text-left">
                 <h3
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase"
+                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                 >
                     Stay Connected & Updates
                 </h3>
@@ -86,18 +90,18 @@ import {
                         href="https://facebook.com/hscstackbd"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500/20"
                             >
                                 <Facebook class="h-4 w-4" />
                             </div>
                             <span>Follow us on Facebook</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </a>
 
@@ -106,36 +110,36 @@ import {
                         href="https://github.com/hscstack"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900 text-white transition-colors group-hover:bg-slate-800"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900 text-white transition-colors group-hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:group-hover:bg-gray-200"
                             >
                                 <Github class="h-4 w-4" />
                             </div>
                             <span>Check our GitHub</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </a>
 
                     <!-- Support Email -->
                     <a
                         href="mailto:support@hscstack.com"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm"
+                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
                     >
                         <div class="flex items-center gap-3">
                             <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/20"
                             >
                                 <Mail class="h-4 w-4" />
                             </div>
                             <span>Contact Support</span>
                         </div>
                         <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5"
+                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
                         />
                     </a>
                 </div>
diff --git a/resources/js/pages/legal/ContentPolicy.vue b/resources/js/pages/legal/ContentPolicy.vue
index 2c355c0..bbb9180 100644
--- a/resources/js/pages/legal/ContentPolicy.vue
+++ b/resources/js/pages/legal/ContentPolicy.vue
@@ -19,7 +19,7 @@ import {
     <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -27,12 +27,12 @@ import {
             Back to Home
         </Link>
         <h1
-            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
             Content <span class="text-indigo-600">Policy</span>
         </h1>
         <p
-            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase"
+            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
         >
             সর্বশেষ আপডেট: জুলাই ২০২৬
         </p>
@@ -40,36 +40,40 @@ import {
 
     <main class="mx-auto max-w-3xl px-4 pb-20 sm:px-6">
         <div
-            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8"
+            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:bg-gray-900"
         >
-            <p class="text-sm leading-relaxed font-medium text-slate-600">
+            <p
+                class="text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
+            >
                 HSCStack-এ প্রকাশিত সব ধরনের কনটেন্ট কীভাবে সংগ্রহ, প্রদর্শন এবং
                 পরিচালনা করা হয়, এই Content Policy তা ব্যাখ্যা করে।
                 প্ল্যাটফর্মে কোনো কিছু submit বা browse করার আগে দয়া করে এটি
                 পড়ে নিন।
             </p>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 1 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <FileText class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ১. আমাদের কনটেন্টের ধরন
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack-এ বিভিন্ন ধরনের শিক্ষামূলক কনটেন্ট থাকতে পারে,
                         যার মধ্যে রয়েছে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>Contributor-submitted notes</li>
                         <li>Educational resources</li>
@@ -78,7 +82,7 @@ import {
                         <li>External references and links</li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আমরা শিক্ষার্থীদের জন্য সহজলভ্য ও সংগঠিত শিক্ষামূলক
                         রিসোর্স তৈরি করার চেষ্টা করি।
@@ -89,22 +93,24 @@ import {
             <!-- Section 2 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Users class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ২. Contributor Submitted Notes
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         কন্ট্রিবিউটররা HSCStack-এ নোট বা শিক্ষামূলক উপকরণ জমা
                         দেওয়ার মাধ্যমে নিশ্চিত করেন যে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>তারা সেই কনটেন্ট জমা দেওয়ার অধিকার রাখেন।</li>
                         <li>
@@ -117,7 +123,7 @@ import {
                         </li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack-এ প্রকাশিত নোটগুলো শিক্ষার্থীদের শেখার সুবিধার
                         জন্য প্রদান করা হয়। কোনো কন্ট্রিবিউটর নোট জমা দিলে,
@@ -131,23 +137,25 @@ import {
             <!-- Section 3 (NEW) -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <ShieldAlert class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৩. Prohibited Content
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         শিক্ষার্থী এবং প্ল্যাটফর্ম উভয়ের নিরাপত্তার স্বার্থে,
                         HSCStack-এ নিচের ধরনের কনটেন্ট জমা দেওয়া বা প্রকাশ করা
                         নিষিদ্ধ:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>
                             কপিরাইট লঙ্ঘনকারী বা চুরি করা (stolen) নোট বা
@@ -172,7 +180,7 @@ import {
                         <li>শিক্ষামূলক উদ্দেশ্যের সাথে সম্পর্কহীন কনটেন্ট।</li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         এই নীতিমালা লঙ্ঘনকারী কনটেন্ট আমরা পূর্বনোটিশ ছাড়াই
                         সরিয়ে ফেলতে পারি, এবং গুরুতর বা বারবার লঙ্ঘনের ক্ষেত্রে
@@ -180,7 +188,7 @@ import {
                         পারে — যেমনটি আমাদের
                         <Link
                             href="/terms-service"
-                            class="text-indigo-600 underline"
+                            class="text-indigo-600 underline dark:text-indigo-400"
                             >Terms & Conditions</Link
                         >-এ ব্যাখ্যা করা হয়েছে।
                     </p>
@@ -190,23 +198,25 @@ import {
             <!-- Section 4 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Share2 class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৪. Attribution এবং Redistribution
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack কন্ট্রিবিউটরদের অবদানকে সম্মান করে এবং যেখানে
                         সম্ভব, সাইটে কন্ট্রিবিউটরের নাম বা প্রোফাইল প্রদর্শন করা
                         হবে। তবে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>
                             HSCStack থেকে ডাউনলোড করা নোট শিক্ষার্থীরা ব্যক্তিগত
@@ -233,21 +243,23 @@ import {
             <!-- Section 5 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <UserMinus class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৫. Contributor Account Removal
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         কোনো কন্ট্রিবিউটর তাদের অ্যাকাউন্ট মুছে ফেললে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>তাদের প্রোফাইল তথ্য অপসারণ করা হতে পারে।</li>
                         <li>
@@ -261,7 +273,7 @@ import {
                         </li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         কন্টেন্ট অপসারণের অনুরোধ করা যেতে পারে, তবে প্রতিটি
                         অনুরোধ HSCStack পরিস্থিতি অনুযায়ী পর্যালোচনা করবে।
@@ -274,22 +286,24 @@ import {
             <!-- Section 6 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Youtube class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৬. Embedded YouTube Content
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack কিছু ক্ষেত্রে YouTube-এ প্রকাশিত শিক্ষামূলক
                         ভিডিও ক্লাস embed করতে পারে। আমরা:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>ভিডিওতে কোনো পরিবর্তন করি না।</li>
                         <li>ভিডিও নিজের সার্ভারে সংরক্ষণ করি না।</li>
@@ -299,7 +313,7 @@ import {
                         </li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         YouTube-এর embedding feature ব্যবহার করে কোনো ভিডিও
                         embed করা হলে, ভিডিও মালিক তাদের YouTube channel
@@ -314,23 +328,25 @@ import {
             <!-- Section 7 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <PenLine class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৭. Blogs এবং Articles
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack-এ প্রকাশিত ব্লগ ও আর্টিকেল সাধারণত
                         কন্ট্রিবিউটরদের নিজস্ব লেখা। কন্ট্রিবিউটররা নিশ্চিত
                         করবেন যে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>লেখাটি তাদের নিজস্ব।</li>
                         <li>
@@ -342,7 +358,7 @@ import {
                         </li>
                     </ul>
                     <p
-                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-2 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         কিছু লেখায় থাকতে পারে External links, reference
                         sources, অথবা short quotations। এসব ক্ষেত্রে প্রাসঙ্গিক
@@ -355,16 +371,18 @@ import {
             <!-- Section 8 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Copyright class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৮. Copyright এবং Removal Requests
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         যদি কোনো ব্যক্তি মনে করেন HSCStack-এ থাকা কোনো কনটেন্ট
                         তাদের অধিকার লঙ্ঘন করছে, তারা আমাদের সাথে যোগাযোগ করতে
@@ -372,7 +390,7 @@ import {
                         ব্যবস্থা নিতে পারি, যার মধ্যে থাকতে পারে:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>কনটেন্ট পরিবর্তন</li>
                         <li>Attribution update</li>
@@ -384,21 +402,23 @@ import {
             <!-- Section 9 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <RefreshCw class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৯. Content Review and Modification
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>কনটেন্ট যাচাই করতে পারে।</li>
                         <li>
diff --git a/resources/js/pages/legal/PrivacyPolicy.vue b/resources/js/pages/legal/PrivacyPolicy.vue
index 595543a..e0d9831 100644
--- a/resources/js/pages/legal/PrivacyPolicy.vue
+++ b/resources/js/pages/legal/PrivacyPolicy.vue
@@ -17,7 +17,7 @@ import {
     <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -25,12 +25,12 @@ import {
             Back to Home
         </Link>
         <h1
-            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
             Privacy <span class="text-indigo-600">Policy</span>
         </h1>
         <p
-            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase"
+            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
         >
             সর্বশেষ আপডেট: জুলাই ২০২৬
         </p>
@@ -38,9 +38,11 @@ import {
 
     <main class="mx-auto max-w-3xl px-4 pb-20 sm:px-6">
         <div
-            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8"
+            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:bg-gray-900"
         >
-            <p class="text-sm leading-relaxed font-medium text-slate-600">
+            <p
+                class="text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
+            >
                 আমাদের প্ল্যাটফর্মে স্বাগতম। HSC & SSC স্টুডেন্টদের জন্য
                 প্রিমিয়াম, কিউরেটেড এবং distraction-free স্টাডি ম্যাটেরিয়াল
                 দেওয়ার ব্যাপারে আমরা নিবেদিত। এই প্রাইভেসি পলিসিতে ব্যাখ্যা করা
@@ -48,36 +50,40 @@ import {
                 কীভাবে সংগ্রহ, ব্যবহার এবং সুরক্ষিত করি।
             </p>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 1 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Eye class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ১. আমরা যে তথ্য সংগ্রহ করি
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আমরা জিনিসগুলো fast এবং clean রাখার চেষ্টা করি । একটা
                         ভালো experience দেওয়ার জন্য যতটুকু প্রয়োজন, ঠিক ততটুকু
                         তথ্যই আমরা সংগ্রহ করি:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>
-                            <strong class="text-slate-700">Usage Data:</strong>
+                            <strong class="text-slate-700 dark:text-gray-300"
+                                >Usage Data:</strong
+                            >
                             layout পারফরম্যান্স অপটিমাইজ করার জন্য ব্রাউজার টাইপ
                             এবং ভিজিট করা পেজের মতো non-personal ডেটা।
                         </li>
                         <li>
-                            <strong class="text-slate-700"
+                            <strong class="text-slate-700 dark:text-gray-300"
                                 >Search Queries:</strong
                             >
                             সাবজেক্ট instantly ফিল্টার করার জন্য আপনার সার্চ
@@ -90,16 +96,18 @@ import {
             <!-- Section 2 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Cookie class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ২. কুকিজ এবং ট্র্যাকিং
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আপনার visual preference (যেমন লেআউট সাইজিং বা cached
                         data) মনে রাখার জন্য আমরা lightweight local storage বা
@@ -116,16 +124,18 @@ import {
             <!-- Section 3 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Shield class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৩. থার্ড-পার্টি সার্ভিস
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         অনলাইনে থাকতে এবং দ্রুত পারফর্ম করতে আমাদের আর্কাইভ
                         modern hosting platform এবং lightweight analytics টুল
@@ -139,16 +149,18 @@ import {
             <!-- Section 4 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Lock class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৪. ডেটা সিকিউরিটি
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         প্ল্যাটফর্মের safety নিশ্চিত করতে আমরা strict, clean
                         codebase practice অনুসরণ করি। এই ডিজিটাল আর্কাইভ
@@ -162,16 +174,18 @@ import {
             <!-- Section 5 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <PersonStanding class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৫. কনট্রিবিউটর তথ্য
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         কনট্রিবিউটর হিসেবে কাজ করার জন্য আপনি যে তথ্য প্রদান
                         করেন (যেমন নাম, ইমেইল বা প্রোফাইল তথ্য), তা কনট্রিবিউটর
@@ -182,7 +196,7 @@ import {
                         স্বয়ংক্রিয়ভাবে মুছে যাবে — বিস্তারিত জানতে আমাদের
                         <Link
                             href="/content-policy"
-                            class="text-indigo-600 underline"
+                            class="text-indigo-600 underline dark:text-indigo-400"
                             >Content Policy
                         </Link>
                         দেখুন।
@@ -193,16 +207,18 @@ import {
             <!-- Section 6 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <LocateIcon class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৬. অ্যানালিটিক্স ও ট্র্যাকিং
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         ব্যবহারকারীর অভিজ্ঞতা এবং প্ল্যাটফর্মের কার্যকারিতা
                         উন্নত করার জন্য আমরা বিভিন্ন analytics এবং performance
@@ -220,16 +236,18 @@ import {
             <!-- Section 7 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Trash class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৭. ব্যক্তিগত তথ্য মুছে ফেলার অনুরোধ
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack সাধারণ দর্শকদের কাছ থেকে কোনো ব্যক্তিগত
                         অ্যাকাউন্ট তথ্য সংগ্রহ বা সংরক্ষণ করে না। তাই সাধারণ
@@ -246,23 +264,25 @@ import {
             <!-- Section 8 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Text class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৮. কনটেন্ট সম্পর্কিত তথ্য
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack-এ প্রকাশিত শিক্ষামূলক কনটেন্ট, তৃতীয় পক্ষের
                         রিসোর্স, কনটেন্ট মালিকানা এবং অপসারণ নীতিমালা সম্পর্কে
                         বিস্তারিত জানতে আমাদের
                         <Link
                             href="/content-policy"
-                            class="text-indigo-600 underline"
+                            class="text-indigo-600 underline dark:text-indigo-400"
                             >Content Policy
                         </Link>
                         দেখুন।
diff --git a/resources/js/pages/legal/TermsConditions.vue b/resources/js/pages/legal/TermsConditions.vue
index 4520be7..1d75045 100644
--- a/resources/js/pages/legal/TermsConditions.vue
+++ b/resources/js/pages/legal/TermsConditions.vue
@@ -14,7 +14,7 @@ import {
     <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -22,12 +22,12 @@ import {
             Back to Home
         </Link>
         <h1
-            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
             Terms & <span class="text-indigo-600">Conditions</span>
         </h1>
         <p
-            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase"
+            class="mx-auto max-w-md text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
         >
             সর্বশেষ আপডেট: জুলাই ২০২৬
         </p>
@@ -35,37 +35,41 @@ import {
 
     <main class="mx-auto max-w-3xl px-4 pb-20 sm:px-6">
         <div
-            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8"
+            class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:bg-gray-900"
         >
-            <p class="text-sm leading-relaxed font-medium text-slate-600">
+            <p
+                class="text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
+            >
                 এই আর্কাইভ অ্যাক্সেস বা ব্রাউজ করার মাধ্যমে, আপনি নিচের Terms &
                 Conditions মেনে চলতে এবং এতে বাউন্ড থাকতে সম্মত হচ্ছেন। এই
                 নিয়মের কোনো অংশের সাথে আপনি একমত না হলে, আমাদের educational
                 directory ব্যবহার থেকে বিরত থাকুন।
             </p>
 
-            <hr class="border-slate-100" />
+            <hr class="border-slate-100 dark:border-gray-800" />
 
             <!-- Section 1 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <FileText class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ১. সার্ভিসের বর্ণনা
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         এই প্ল্যাটফর্ম HSC & SSC স্টুডেন্টদের জন্য একটা fast,
                         distraction-free স্টাডি আর্কাইভ হিসেবে কাজ করে। আমরা
                         হোস্ট করি:
                     </p>
                     <ul
-                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500"
+                        class="mt-2 list-disc space-y-1 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
                     >
                         <li>
                             ব্যক্তিগতভাবে হাতে লেখা নোট, প্র্যাকটিক্যাল রেকর্ড,
@@ -83,16 +87,18 @@ import {
             <!-- Section 2 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Scale class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ২. Intellectual Property ও Fair Use
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আমাদের original টেক্সট লেআউট, সিস্টেম স্ক্রিপ্ট, এবং
                         আমাদের নিজস্বভাবে লেখা নোটের মালিকানা আমাদের।
@@ -102,13 +108,15 @@ import {
                         লাইসেন্স প্রদান করেন, যেমনটি আমাদের
                         <Link
                             href="/content-policy"
-                            class="text-indigo-600 underline"
+                            class="text-indigo-600 underline dark:text-indigo-400"
                             >Content Policy</Link
                         >-তে বিস্তারিত ব্যাখ্যা করা হয়েছে। স্টুডেন্টদের
                         প্রাইভেট স্টাডি ব্যবহারের জন্য অ্যাক্সেস দেওয়া হয়।
                         অফিশিয়াল state board evaluation প্রশ্ন বা public
                         question structure সম্পূর্ণভাবে
-                        <strong class="text-slate-700">Fair Use নীতির</strong>
+                        <strong class="text-slate-700 dark:text-gray-300"
+                            >Fair Use নীতির</strong
+                        >
                         আওতায় শেয়ার করা হয়, স্পষ্ট educational backup হিসেবে।
                         অফিশিয়াল বোর্ড আইটেমের ওপর আমরা কোনো dynamic entity
                         right দাবি করি না। প্ল্যাটফর্মের ডেটা বাল্ক scrape করা
@@ -120,16 +128,18 @@ import {
             <!-- Section 3 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <HelpCircle class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৩. এডুকেশনাল Accuracy সংক্রান্ত Disclaimer
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আমরা clean curation এবং accuracy বজায় রাখার চেষ্টা
                         করলেও, সবকিছু "as-is" ভিত্তিতে শেয়ার করা হয়। আমরা কোনো
@@ -143,16 +153,18 @@ import {
             <!-- Section 4 -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <AlertCircle class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৪. দায়বদ্ধতার সীমাবদ্ধতা
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         আর্কাইভাল কনটেন্ট ব্যবহারের কারণে সরাসরি বা পরোক্ষভাবে
                         ঘটা কোনো internal data outage, গ্রেডিং ডিসক্রেপ্যান্সি,
@@ -166,21 +178,23 @@ import {
             <!-- Section 5 (NEW) -->
             <div class="flex items-start gap-4">
                 <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                 >
                     <Ban class="h-4 w-4 stroke-[2.2]" />
                 </div>
                 <div>
-                    <h2 class="text-base font-bold text-slate-900">
+                    <h2
+                        class="text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
                         ৫. অ্যাকাউন্ট স্থগিতকরণ ও বাতিলকরণ
                     </h2>
                     <p
-                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500"
+                        class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                     >
                         HSCStack এই Terms & Conditions, আমাদের
                         <Link
                             href="/content-policy"
-                            class="text-indigo-600 underline"
+                            class="text-indigo-600 underline dark:text-indigo-400"
                             >Content Policy</Link
                         >, অথবা প্ল্যাটফর্মের জন্য নিরাপত্তাঝুঁকি তৈরি করে এমন
                         যেকোনো অ্যাকাউন্ট (কনট্রিবিউটর বা ব্যবহারকারী) সীমিত,
diff --git a/resources/js/pages/platform/AboutUs.vue b/resources/js/pages/platform/AboutUs.vue
index 25fd57f..3d76423 100644
--- a/resources/js/pages/platform/AboutUs.vue
+++ b/resources/js/pages/platform/AboutUs.vue
@@ -15,7 +15,7 @@ const goBack = () => {
     <header class="mx-auto max-w-4xl px-4 pt-16 pb-14 text-center sm:pt-20">
         <button
             @click="goBack"
-            class="group mb-5 inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600"
+            class="group mb-5 inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600 dark:text-gray-500 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -23,7 +23,7 @@ const goBack = () => {
             Go Back
         </button>
         <h1
-            class="text-4xl font-black tracking-tight text-slate-950 sm:text-6xl"
+            class="text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-gray-100"
         >
             The Team Behind <br class="hidden sm:inline" />
             <span class="text-indigo-600">The Archive.</span>
@@ -42,14 +42,16 @@ const goBack = () => {
             />
 
             <div
-                class="flex flex-col justify-between rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/40 p-8 text-center"
+                class="flex flex-col justify-between rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/40 p-8 text-center dark:border-gray-700 dark:bg-gray-800/40"
             >
                 <div class="my-auto space-y-3 py-8">
-                    <h3 class="text-lg font-extrabold text-slate-900">
+                    <h3
+                        class="text-lg font-extrabold text-slate-900 dark:text-gray-100"
+                    >
                         Want your card here?
                     </h3>
                     <p
-                        class="mx-auto max-w-xs text-xs leading-relaxed font-medium text-slate-400"
+                        class="mx-auto max-w-xs text-xs leading-relaxed font-medium text-slate-400 dark:text-gray-500"
                     >
                         We are currently looking for active Campus Promoters,
                         Core Developers, and Resource Curators across colleges
@@ -58,7 +60,7 @@ const goBack = () => {
                 </div>
                 <Link
                     href="/join"
-                    class="inline-flex w-full items-center justify-center rounded-xl bg-slate-950 px-4 py-3 text-xs font-bold text-white shadow-sm transition-all hover:bg-slate-900 active:scale-[0.98]"
+                    class="inline-flex w-full items-center justify-center rounded-xl bg-slate-950 px-4 py-3 text-xs font-bold text-white shadow-sm transition-all hover:bg-slate-900 active:scale-[0.98] dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
                 >
                     Apply for a Role
                 </Link>
diff --git a/resources/js/pages/platform/JoinTeam.vue b/resources/js/pages/platform/JoinTeam.vue
index 27d47eb..97fd51b 100644
--- a/resources/js/pages/platform/JoinTeam.vue
+++ b/resources/js/pages/platform/JoinTeam.vue
@@ -19,7 +19,8 @@ const roles = [
         description:
             'আমাদের এই উদ্যোগকে একদম রুট-লেভেলে পৌঁছে দিতে সাহায্য করুন। বিভিন্ন স্টুডেন্ট গ্রুপে কমিউনিটি অ্যাওয়ারনেস তৈরি করা, নতুন আর্কাইভ আপডেট শেয়ার করা এবং আপনার কলেজে আমাদের রিপ্রেজেন্ট করাই হবে আপনার কাজ।',
         icon: Megaphone,
-        iconContainer: 'bg-emerald-50 text-emerald-600',
+        iconContainer:
+            'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
     },
     {
         id: 'curator',
@@ -27,7 +28,8 @@ const roles = [
         description:
             'হাই-কোয়ালিটি এবং কাজের পড়াশোনার ম্যাটেরিয়াল সংগ্রহ ও গুছিয়ে রাখা আপনার কাজ। একদম নিখুঁত বোর্ড কোশ্চেন সেট, প্র্যাক্টিক্যাল রেকর্ডস কালেক্ট করা এবং চ্যাপ্টার ওয়াইজ ডেটা টেমপ্লেট সাজাতে সাহায্য করবেন।',
         icon: FolderHeart,
-        iconContainer: 'bg-amber-50 text-amber-700',
+        iconContainer:
+            'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300',
     },
     {
         id: 'moderator',
@@ -35,7 +37,8 @@ const roles = [
         description:
             'আমাদের ফেসবুক পেজ, গ্রুপ এবং ইনস্টাগ্রাম হ্যান্ডেল অ্যাক্টিভ ও এনগেজিং রাখা আপনার কাজ। স্টুডেন্টদের কমেন্টের ইনস্ট্যান্ট রিপ্লাই দেওয়া, কন্টেন্ট শিডিউল করা এবং মডারেশন গাইডলাইন মেইনটেইন করবেন।',
         icon: MessageSquare,
-        iconContainer: 'bg-blue-50 text-blue-600',
+        iconContainer:
+            'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400',
     },
     {
         id: 'writer',
@@ -43,7 +46,8 @@ const roles = [
         description:
             'আমাদের অফিশিয়াল ব্লগ সেকশনে রেগুলার এডুকেশনাল টিপস, গাইডলাইন, নিউজ এবং স্টুডেন্টদের ইনস্পায়ার করার মতো কন্টেন্ট লিখবেন। কোয়ালিটি রাইটিংয়ের মাধ্যমে স্টুডেন্ট কমিউনিটির সাথে নলেজ শেয়ার করাই হবে মূল কাজ।',
         icon: PenTool,
-        iconContainer: 'bg-rose-50 text-rose-600',
+        iconContainer:
+            'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400',
     },
     {
         id: 'developer',
@@ -51,7 +55,8 @@ const roles = [
         description:
             'আমাদের প্ল্যাটফর্ম আর্কিটেকচার আরও অপ্টিমাইজ করুন। একদম হাইপার-ক্লিন ফ্রন্টএন্ড কম্পোনেন্ট ডিজাইন করা, লেআউট আই-কমফর্ট রিফাইন করা এবং নতুন রেপোজিটরি ফিচার নিয়ে কাজ করবেন।',
         icon: Code2,
-        iconContainer: 'bg-purple-50 text-purple-600',
+        iconContainer:
+            'bg-purple-50 text-purple-600 dark:bg-purple-500/10 dark:text-purple-400',
     },
 ];
 
@@ -79,7 +84,7 @@ const whatsappLink = computed(() => {
     <header class="mx-auto max-w-3xl px-4 pt-12 pb-10 text-center sm:pt-16">
         <Link
             href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600"
+            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
         >
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
@@ -87,13 +92,13 @@ const whatsappLink = computed(() => {
             Back to Home
         </Link>
         <h1
-            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl"
+            class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
             Build the ultimate archive, <br />
             <span class="text-indigo-600">together.</span>
         </h1>
         <p
-            class="mx-auto mb-4 max-w-md text-sm font-medium text-slate-800 sm:text-base"
+            class="mx-auto mb-4 max-w-md text-sm font-medium text-slate-800 sm:text-base dark:text-gray-200"
         >
             সারাদেশের HSC & SSC স্টুডেন্টদের কাছে প্রিমিয়াম ও ডিস্ট্রাকশন-ফ্রি
             লার্নিং এক্সপেরিয়েন্স পৌঁছে দিতে আমাদের সাহায্য করুন। নিচের যেকোনো
@@ -106,7 +111,7 @@ const whatsappLink = computed(() => {
             <!-- Roles Selector Grid Left -->
             <div class="space-y-4 lg:col-span-3">
                 <h2
-                    class="mb-2 text-xs font-bold tracking-wider text-slate-400 uppercase"
+                    class="mb-2 text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                 >
                     Open Roles
                 </h2>
@@ -117,8 +122,8 @@ const whatsappLink = computed(() => {
                     @click="selectedRole = role.id"
                     :class="[
                         selectedRole === role.id
-                            ? 'border-indigo-500 bg-indigo-50/10 ring-4 ring-indigo-500/5'
-                            : 'border-slate-200 bg-white hover:border-slate-300',
+                            ? 'border-indigo-500 bg-indigo-50/10 ring-4 ring-indigo-500/5 dark:border-indigo-500 dark:bg-indigo-500/10 dark:ring-indigo-500/10'
+                            : 'border-slate-200 bg-white hover:border-slate-300 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600',
                         'relative flex cursor-pointer touch-manipulation gap-4 rounded-xl border p-5 transition-all duration-200 active:scale-[0.99] sm:active:scale-100',
                     ]"
                 >
@@ -136,24 +141,26 @@ const whatsappLink = computed(() => {
 
                     <div class="min-w-0 pr-4">
                         <div class="flex flex-wrap items-center gap-2">
-                            <h3 class="text-base font-bold text-slate-900">
+                            <h3
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
                                 {{ role.title }}
                             </h3>
                             <span
                                 v-if="selectedRole === role.id"
-                                class="inline-flex items-center rounded-md border border-indigo-100 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-indigo-700 uppercase"
+                                class="inline-flex items-center rounded-md border border-indigo-100 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-indigo-700 uppercase dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
                             >
                                 Selected
                             </span>
                         </div>
                         <p
-                            class="mt-1 text-sm leading-relaxed font-medium text-slate-700"
+                            class="mt-1 text-sm leading-relaxed font-medium text-slate-700 dark:text-gray-300"
                         >
                             <template v-if="role.id === 'writer'">
                                 আমাদের অফিশিয়াল
                                 <Link
                                     href="/blogs"
-                                    class="font-bold text-indigo-600 underline decoration-indigo-200 underline-offset-2 hover:text-indigo-700"
+                                    class="font-bold text-indigo-600 underline decoration-indigo-200 underline-offset-2 hover:text-indigo-700 dark:text-indigo-400 dark:decoration-indigo-500/50 dark:hover:text-indigo-300"
                                     >blog</Link
                                 >
                                 সেকশনে রেগুলার এডুকেশনাল টিপস, গাইডলাইন, নিউজ
@@ -172,13 +179,17 @@ const whatsappLink = computed(() => {
             <!-- Contextual CTA Right Panel -->
             <div class="lg:col-span-2">
                 <div
-                    class="sticky top-6 space-y-5 rounded-xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6"
+                    class="sticky top-6 space-y-5 rounded-xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 dark:border-gray-700 dark:bg-gray-900"
                 >
                     <div>
-                        <h2 class="mb-1 text-base font-bold text-slate-900">
+                        <h2
+                            class="mb-1 text-base font-bold text-slate-900 dark:text-gray-100"
+                        >
                             How to Apply
                         </h2>
-                        <p class="text-xs font-medium text-slate-900">
+                        <p
+                            class="text-xs font-medium text-slate-900 dark:text-gray-100"
+                        >
                             আপনার ব্যাকগ্রাউন্ড বা আগ্রহের কথা জানিয়ে সরাসরি
                             আমাদের মেসেজ দিন।
                         </p>
@@ -186,24 +197,27 @@ const whatsappLink = computed(() => {
 
                     <!-- Recognition Benefit Box -->
                     <div
-                        class="flex items-start gap-3.5 rounded-xl border border-indigo-100 bg-indigo-50/30 p-4"
+                        class="flex items-start gap-3.5 rounded-xl border border-indigo-100 bg-indigo-50/30 p-4 dark:border-indigo-500/30 dark:bg-indigo-500/10"
                     >
                         <div
-                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600"
+                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400"
                         >
                             <Award class="h-4 w-4 stroke-[2.2]" />
                         </div>
                         <div>
-                            <h4 class="text-xs font-bold text-slate-900">
+                            <h4
+                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
+                            >
                                 About Us Recognition
                             </h4>
                             <p
-                                class="mt-1 text-xs leading-relaxed font-medium text-slate-800"
+                                class="mt-1 text-xs leading-relaxed font-medium text-slate-800 dark:text-gray-200"
                             >
                                 আমাদের অনুমোদিত প্রমোটর, কিউরেটর, মডারেটর,
                                 রাইটার এবং ডেভেলপারদের অবদানকে সম্মান জানাতে
                                 আমাদের অফিশিয়াল
-                                <strong class="text-blue-800 underline"
+                                <strong
+                                    class="text-blue-800 underline dark:text-blue-300"
                                     ><Link href="/about-us"
                                         >About Us</Link
                                     ></strong
@@ -214,8 +228,12 @@ const whatsappLink = computed(() => {
                         </div>
                     </div>
 
-                    <div class="border-t border-slate-100 pt-2">
-                        <p class="mb-3 text-xs font-semibold text-slate-400">
+                    <div
+                        class="border-t border-slate-100 pt-2 dark:border-gray-800"
+                    >
+                        <p
+                            class="mb-3 text-xs font-semibold text-slate-400 dark:text-gray-500"
+                        >
                             Ready to pitch for
                             <span class="font-bold text-indigo-600">{{
                                 currentRoleTitle