diff --git a/assets/editor/EditorAssetPicker.vue b/assets/editor/EditorAssetPicker.vue
index ba16dc2..de31e46 100644
--- a/assets/editor/EditorAssetPicker.vue
+++ b/assets/editor/EditorAssetPicker.vue
@@ -8,37 +8,37 @@
       aria-labelledby="editor-asset-picker-title"
       @keydown.esc="$emit('close')"
     >
-      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl">
-        <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
+      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-xl">
+        <div class="flex items-center justify-between gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3">
           <div class="min-w-0">
-            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900">
+            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900 dark:text-slate-100">
               Choose an existing asset
             </h3>
-            <p class="text-xs text-slate-500">Pick a file to insert it at the cursor position.</p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">Pick a file to insert it at the cursor position.</p>
           </div>
 
           <button
             type="button"
-            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
             @click="$emit('close')"
           >
             Close
           </button>
         </div>
 
-        <div class="flex flex-col gap-3 border-b border-slate-200 px-4 py-3 sm:flex-row sm:items-center">
+        <div class="flex flex-col gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3 sm:flex-row sm:items-center">
           <input
             ref="searchInput"
             :value="query"
             type="search"
-            class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+            class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
             placeholder="Search by file name"
             @input="$emit('update:query', $event.target.value)"
           >
 
           <button
             type="button"
-            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
             @click="$emit('refresh')"
           >
             Refresh
@@ -46,28 +46,28 @@
         </div>
 
         <div class="max-h-[60vh] overflow-auto">
-          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500">
+          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500 dark:text-slate-400">
             Loading assets...
           </div>
 
-          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600">
+          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600 dark:text-red-400">
             {{ error }}
           </div>
 
           <table v-else class="w-full table-fixed border-separate border-spacing-0">
-            <thead class="sticky top-0 bg-slate-50">
-              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
-                <th class="w-24 border-b border-slate-200 px-4 py-3">Preview</th>
-                <th class="border-b border-slate-200 px-4 py-3">Name</th>
-                <th class="w-32 border-b border-slate-200 px-4 py-3">Type</th>
-                <th class="w-28 border-b border-slate-200 px-4 py-3">Size</th>
-                <th class="w-40 border-b border-slate-200 px-4 py-3">Updated</th>
-                <th class="w-28 border-b border-slate-200 px-4 py-3"></th>
+            <thead class="sticky top-0 bg-slate-50 dark:bg-slate-800">
+              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                <th class="w-24 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Preview</th>
+                <th class="border-b border-slate-200 dark:border-slate-700 px-4 py-3">Name</th>
+                <th class="w-32 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Type</th>
+                <th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Size</th>
+                <th class="w-40 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Updated</th>
+                <th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3"></th>
               </tr>
             </thead>
             <tbody>
               <tr v-if="!filteredItems.length">
-                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
+                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400">
                   No assets found.
                 </td>
               </tr>
@@ -75,33 +75,33 @@
               <tr
                 v-for="item in filteredItems"
                 :key="item.url"
-                class="border-b border-slate-100 text-sm text-slate-700 hover:bg-slate-50"
+                class="border-b border-slate-100 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
               >
                 <td class="px-4 py-3 align-top">
                   <img
                     v-if="item.isImage"
                     :src="item.url"
                     :alt="item.fileName.slice(0, 5) + '...'"
-                    class="h-14 w-14 rounded border border-slate-200 object-cover"
+                    class="h-14 w-14 rounded border border-slate-200 dark:border-slate-700 object-cover"
                   >
                   <div
                     v-else
-                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-500"
+                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase text-slate-500 dark:text-slate-400"
                   >
                     {{ extensionLabel(item.fileName) }}
                   </div>
                 </td>
                 <td class="px-4 py-3 align-top">
-                  <p class="break-all font-medium text-slate-900">{{ item.fileName }}</p>
-                  <p class="break-all text-xs text-slate-500">{{ item.url }}</p>
+                  <p class="break-all font-medium text-slate-900 dark:text-slate-100">{{ item.fileName }}</p>
+                  <p class="break-all text-xs text-slate-500 dark:text-slate-400">{{ item.url }}</p>
                 </td>
-                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500">
+                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500 dark:text-slate-400">
                   {{ item.mimeType }}
                 </td>
-                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                <td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
                   {{ formatBytes(item.size) }}
                 </td>
-                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                <td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
                   {{ formatDate(item.modifiedAt) }}
                 </td>
                 <td class="px-4 py-3 align-top text-right">
@@ -118,9 +118,9 @@
           </table>
         </div>
 
-        <div class="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
+        <div class="flex items-center justify-between gap-3 border-t border-slate-200 dark:border-slate-700 px-4 py-3 text-sm text-slate-600 dark:text-slate-300">
           <span>{{ filteredItems.length }} asset{{ filteredItems.length === 1 ? '' : 's' }}</span>
-          <span class="text-xs text-slate-500">Choose a row to insert it immediately.</span>
+          <span class="text-xs text-slate-500 dark:text-slate-400">Choose a row to insert it immediately.</span>
         </div>
       </div>
     </div>
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 540b446..ffcaa25 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @tailwind utilities;
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --color-primary: #2563eb;
   --color-secondary: #6b7280;
@@ -14,3 +16,12 @@
 
 @source "../../templates/**/*.twig";
 @source "../**/*.vue";
+
+@layer base {
+  button:not(:disabled),
+  [type="button"]:not(:disabled),
+  [type="submit"]:not(:disabled),
+  [type="reset"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
diff --git a/assets/vue/App.vue b/assets/vue/App.vue
index dacfe52..8ce3613 100644
--- a/assets/vue/App.vue
+++ b/assets/vue/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
+  <div class="min-h-screen bg-[#F8FAFC] dark:bg-slate-900 flex text-slate-900 dark:text-slate-100 font-sans">
     <AppSidebar />
 
     <div class="flex flex-col flex-1 min-h-screen min-w-0">
@@ -9,5 +9,13 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import AppSidebar from './components/sidebar/AppSidebar.vue'
+import { useDarkMode } from './composables/useDarkMode'
+
+const { initDarkMode } = useDarkMode()
+
+onMounted(() => {
+  initDarkMode()
+})
 </script>
diff --git a/assets/vue/api.js b/assets/vue/api.js
index be71e85..3ac00be 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -38,7 +38,8 @@ const redirectToLogin = () => {
 
 const appElement = document.getElementById('vue-app');
 const apiToken = appElement?.dataset.apiToken;
-const apiBaseUrl = appElement?.dataset.apiBaseUrl;
+const apiElement = document.getElementById('api-config');
+const apiBaseUrl = apiElement?.dataset.apiBaseUrl;
 
 if (!apiBaseUrl) {
     console.error('API Base URL is not configured.');
diff --git a/assets/vue/components/base/BaseBadge.vue b/assets/vue/components/base/BaseBadge.vue
index 217fd1b..53f2fec 100644
--- a/assets/vue/components/base/BaseBadge.vue
+++ b/assets/vue/components/base/BaseBadge.vue
@@ -19,10 +19,10 @@ const badgeClass = computed(() => {
   const base = 'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium';
   switch (props.variant) {
     case 'counter':
-      return `${base} bg-indigo-50 text-ext-wf3 border border-indigo-100`;
+      return `${base} bg-indigo-50 dark:bg-indigo-500/10 text-ext-wf3 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-500/20`;
     case 'neutral':
     default:
-      return `${base} bg-gray-100 text-gray-800`;
+      return `${base} bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-200`;
   }
 })
 </script>
diff --git a/assets/vue/components/base/BaseButton.vue b/assets/vue/components/base/BaseButton.vue
index aaeb2e8..10e5056 100644
--- a/assets/vue/components/base/BaseButton.vue
+++ b/assets/vue/components/base/BaseButton.vue
@@ -23,9 +23,9 @@ const buttonClass = computed(() => {
   const base = 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2';
   switch (props.variant) {
     case 'secondary':
-      return `${base} text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500`;
+      return `${base} text-gray-700 dark:text-slate-200 bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700 focus:ring-blue-500`;
     case 'ghost':
-      return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-transparent hover:bg-blue-50 focus:outline-none';
+      return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 dark:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-500/10 focus:outline-none';
     case 'primary':
     default:
       return `${base} text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500`;
diff --git a/assets/vue/components/base/BaseCard.vue b/assets/vue/components/base/BaseCard.vue
index 5a15a04..f44dc77 100644
--- a/assets/vue/components/base/BaseCard.vue
+++ b/assets/vue/components/base/BaseCard.vue
@@ -16,8 +16,8 @@ const props = defineProps({
 })
 
 const cardVariantMap = {
-  default: 'rounded-lg shadow-sm border border-gray-100 bg-white',
-  subtle: 'rounded-lg shadow-sm border-0 bg-gray-50',
+  default: 'rounded-lg shadow-sm border border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-800',
+  subtle: 'rounded-lg shadow-sm border-0 bg-gray-50 dark:bg-slate-800',
   danger: 'rounded-lg shadow-sm border-0 bg-red-600 text-white',
   success: 'rounded-lg shadow-sm border-0 bg-green-600 text-white',
 }
diff --git a/assets/vue/components/base/BaseIcon.vue b/assets/vue/components/base/BaseIcon.vue
index 2955106..573d2f8 100644
--- a/assets/vue/components/base/BaseIcon.vue
+++ b/assets/vue/components/base/BaseIcon.vue
@@ -94,6 +94,10 @@ const icons = {
 
   pause: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="3" height="14" rx="1"></rect><rect x="14" y="5" width="3" height="14" rx="1"></rect></svg>`,
 
+  sun: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`,
+
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>`,
+
   start: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" rx="1"></polygon></svg>`,
 };
 
@@ -108,9 +112,9 @@ const wrapperClass = computed(() => {
   ];
 
   if (props.active) {
-    classes.push("text-ext-wf3");
+    classes.push("text-ext-wf3 dark:text-indigo-400");
   } else {
-    classes.push("text-slate-400 group-hover:text-slate-600");
+    classes.push("text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300");
   }
 
   return classes.join(" ");
diff --git a/assets/vue/components/base/BaseProgressBar.vue b/assets/vue/components/base/BaseProgressBar.vue
index 91ac7a7..6deb956 100644
--- a/assets/vue/components/base/BaseProgressBar.vue
+++ b/assets/vue/components/base/BaseProgressBar.vue
@@ -1,6 +1,6 @@
 <!-- assets/vue/components/base/BaseProgressBar.vue -->
 <template>
-  <div class="progress bg-secondary bg-opacity-25 rounded-pill" :style="wrapperStyle">
+  <div class="progress bg-secondary bg-opacity-25 dark:bg-slate-700 rounded-pill" :style="wrapperStyle">
     <div
         class="progress-bar bg-primary rounded-pill"
         role="progressbar"
diff --git a/assets/vue/components/base/CkEditorField.vue b/assets/vue/components/base/CkEditorField.vue
index 2f8e3b3..9b05d86 100644
--- a/assets/vue/components/base/CkEditorField.vue
+++ b/assets/vue/components/base/CkEditorField.vue
@@ -3,7 +3,7 @@
     <label
         v-if="label"
         :for="fieldId"
-        class="mb-1 block text-sm font-medium text-slate-700"
+        class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {{ label }}
     </label>
@@ -22,8 +22,8 @@
         :config="config"
     />
 
-    <p v-if="helperText" class="mt-1 text-xs text-slate-500">{{ helperText }}</p>
-    <p v-if="errorMessage" class="mt-1 text-xs text-red-600">{{ errorMessage }}</p>
+    <p v-if="helperText" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ helperText }}</p>
+    <p v-if="errorMessage" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ errorMessage }}</p>
   </div>
 </template>
 
diff --git a/assets/vue/components/bounces/BounceOverview.vue b/assets/vue/components/bounces/BounceOverview.vue
index 02cf479..c368bf7 100644
--- a/assets/vue/components/bounces/BounceOverview.vue
+++ b/assets/vue/components/bounces/BounceOverview.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="space-y-6">
-    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-      <div class="p-5 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <h3 class="text-base font-semibold text-slate-900">Bounces</h3>
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+      <div class="p-5 border-b border-slate-100 dark:border-slate-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Bounces</h3>
         <div class="flex items-center gap-2">
-          <label class="text-sm text-slate-600" for="bounce-status-filter">Status</label>
+          <label class="text-sm text-slate-600 dark:text-slate-300" for="bounce-status-filter">Status</label>
           <select
             id="bounce-status-filter"
             v-model="statusFilter"
-            class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+            class="px-3 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none"
             :disabled="isLoading"
           >
             <option value="identified">Processed</option>
@@ -19,7 +19,7 @@
 
       <div class="overflow-x-auto">
         <table class="w-full text-left text-sm hidden md:table">
-          <thead class="bg-slate-50 text-slate-500 font-medium">
+          <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
             <tr>
               <th class="px-6 py-4">ID</th>
               <th class="px-6 py-4">Date</th>
@@ -29,51 +29,51 @@
               <th class="px-6 py-4">Comment</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-slate-200">
+          <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
             <tr v-if="isLoading">
-              <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading bounces...</td>
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading bounces...</td>
             </tr>
             <tr v-else-if="errorMessage">
-              <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+              <td colspan="6" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ errorMessage }}</td>
             </tr>
             <tr v-else-if="paginatedBounces.length === 0">
-              <td colspan="6" class="px-6 py-8 text-center text-slate-500">No bounces found.</td>
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No bounces found.</td>
             </tr>
             <tr
               v-for="bounce in paginatedBounces"
               :key="bounce.id"
-              class="hover:bg-slate-50 transition-colors"
+              class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
             >
-              <td class="px-6 py-4 text-slate-700 font-mono">#{{ bounce.id }}</td>
-              <td class="px-6 py-4 text-slate-600">{{ bounce.formattedDate }}</td>
-              <td class="px-6 py-4 text-slate-900 font-medium">{{ bounce.email }}</td>
-              <td class="px-6 py-4 text-slate-700">{{ bounce.subject }}</td>
+              <td class="px-6 py-4 text-slate-700 dark:text-slate-200 font-mono">#{{ bounce.id }}</td>
+              <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ bounce.formattedDate }}</td>
+              <td class="px-6 py-4 text-slate-900 dark:text-slate-100 font-medium">{{ bounce.email }}</td>
+              <td class="px-6 py-4 text-slate-700 dark:text-slate-200">{{ bounce.subject }}</td>
               <td class="px-6 py-4">
                 <span class="px-2.5 py-0.5 rounded-full text-xs font-medium capitalize" :class="bounce.statusClass">
                   {{ bounce.status }}
                 </span>
               </td>
-              <td class="px-6 py-4 text-slate-600">{{ bounce.comment }}</td>
+              <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ bounce.comment }}</td>
             </tr>
           </tbody>
         </table>
 
-        <div class="block md:hidden divide-y divide-slate-100">
+        <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
           <div
             v-if="isLoading"
-            class="px-4 py-8 text-center text-slate-500 text-sm"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
           >
             Loading bounces...
           </div>
           <div
             v-else-if="errorMessage"
-            class="px-4 py-8 text-center text-red-600 text-sm"
+            class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm"
           >
             {{ errorMessage }}
           </div>
           <div
             v-else-if="paginatedBounces.length === 0"
-            class="px-4 py-8 text-center text-slate-500 text-sm"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
           >
             No bounces found.
           </div>
@@ -83,27 +83,27 @@
             class="p-4 space-y-2.5"
           >
             <div class="flex items-center justify-between gap-2">
-              <p class="font-semibold text-slate-900">#{{ bounce.id }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">#{{ bounce.id }}</p>
               <span class="px-2.5 py-0.5 rounded-full text-xs font-medium capitalize" :class="bounce.statusClass">
                 {{ bounce.status }}
               </span>
             </div>
-            <p class="text-xs text-slate-500">{{ bounce.formattedDate }}</p>
-            <p class="text-sm font-medium text-slate-800">{{ bounce.email }}</p>
-            <p class="text-sm text-slate-700">{{ bounce.subject }}</p>
-            <p class="text-xs text-slate-600">{{ bounce.comment }}</p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">{{ bounce.formattedDate }}</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-100">{{ bounce.email }}</p>
+            <p class="text-sm text-slate-700 dark:text-slate-200">{{ bounce.subject }}</p>
+            <p class="text-xs text-slate-600 dark:text-slate-300">{{ bounce.comment }}</p>
           </div>
         </div>
       </div>
 
-      <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500">
+      <div class="p-4 sm:p-6 border-t border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
         <div class="text-center sm:text-left">
-          Page <span class="font-medium text-slate-900">{{ currentPage }}</span>
+          Page <span class="font-medium text-slate-900 dark:text-slate-100">{{ currentPage }}</span>
         </div>
         <div class="flex gap-2 w-full sm:w-auto">
           <button
             type="button"
-            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
             :disabled="!canGoPrevious"
             @click="previousPage"
           >
@@ -111,7 +111,7 @@
           </button>
           <button
             type="button"
-            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
             :disabled="!canGoNext"
             @click="nextPage"
           >
@@ -157,18 +157,18 @@ const getStatusClass = (status) => {
   const normalized = String(status ?? '').toLowerCase()
 
   if (normalized.includes('blacklist')) {
-    return 'bg-purple-100 text-purple-700'
+    return 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400'
   }
 
   if (normalized.includes('retry') || normalized.includes('soft')) {
-    return 'bg-amber-100 text-amber-700'
+    return 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
   }
 
   if (normalized.includes('process')) {
-    return 'bg-emerald-100 text-emerald-700'
+    return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
   }
 
-  return 'bg-slate-100 text-slate-700'
+  return 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300'
 }
 
 const normalizedBounces = computed(() =>
diff --git a/assets/vue/components/bounces/BouncePer.vue b/assets/vue/components/bounces/BouncePer.vue
index b487eb2..68941f4 100644
--- a/assets/vue/components/bounces/BouncePer.vue
+++ b/assets/vue/components/bounces/BouncePer.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="space-y-6 pb-4">
-    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-      <div class="p-5 border-b border-slate-100">
-        <h3 class="text-base font-semibold text-slate-900">Bounces By Subscriber</h3>
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+      <div class="p-5 border-b border-slate-100 dark:border-slate-700">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Bounces By Subscriber</h3>
       </div>
 
       <div class="overflow-x-auto">
         <table class="w-full text-left text-sm hidden md:table">
-          <thead class="bg-slate-50 text-slate-500 font-medium">
+          <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
             <tr>
               <th class="px-6 py-4">Subscriber</th>
               <th class="px-6 py-4">Email</th>
@@ -16,27 +16,27 @@
               <th class="px-6 py-4 text-right">Total Bounces</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-slate-200">
+          <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
             <tr v-if="isLoadingSubscribers">
-              <td colspan="5" class="px-6 py-8 text-center text-slate-500">Loading subscriber bounce data...</td>
+              <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading subscriber bounce data...</td>
             </tr>
             <tr v-else-if="subscriberErrorMessage">
-              <td colspan="5" class="px-6 py-8 text-center text-red-600">{{ subscriberErrorMessage }}</td>
+              <td colspan="5" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ subscriberErrorMessage }}</td>
             </tr>
             <tr v-else-if="normalizedSubscriberBounces.length === 0">
-              <td colspan="5" class="px-6 py-8 text-center text-slate-500">No subscriber bounce data found.</td>
+              <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No subscriber bounce data found.</td>
             </tr>
             <tr
               v-for="subscriber in normalizedSubscriberBounces"
               :key="subscriber.subscriberId"
-              class="hover:bg-slate-50 transition-colors"
+              class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
             >
-              <td class="px-6 py-4 text-slate-700 font-mono">#{{ subscriber.subscriberId }}</td>
-              <td class="px-6 py-4 text-slate-900 font-medium">{{ subscriber.email }}</td>
+              <td class="px-6 py-4 text-slate-700 dark:text-slate-200 font-mono">#{{ subscriber.subscriberId }}</td>
+              <td class="px-6 py-4 text-slate-900 dark:text-slate-100 font-medium">{{ subscriber.email }}</td>
               <td class="px-6 py-4">
                 <span
                   class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                  :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+                  :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
                 >
                   {{ subscriber.confirmed ? 'Yes' : 'No' }}
                 </span>
@@ -44,24 +44,24 @@
               <td class="px-6 py-4">
                 <span
                   class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                  :class="subscriber.blacklisted ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-600'"
+                  :class="subscriber.blacklisted ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
                 >
                   {{ subscriber.blacklisted ? 'Yes' : 'No' }}
                 </span>
               </td>
-              <td class="px-6 py-4 text-right text-slate-900 font-semibold">{{ subscriber.totalBounces }}</td>
+              <td class="px-6 py-4 text-right text-slate-900 dark:text-slate-100 font-semibold">{{ subscriber.totalBounces }}</td>
             </tr>
           </tbody>
         </table>
 
-        <div class="block md:hidden divide-y divide-slate-100">
-          <div v-if="isLoadingSubscribers" class="px-4 py-8 text-center text-slate-500 text-sm">
+        <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
+          <div v-if="isLoadingSubscribers" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
             Loading subscriber bounce data...
           </div>
-          <div v-else-if="subscriberErrorMessage" class="px-4 py-8 text-center text-red-600 text-sm">
+          <div v-else-if="subscriberErrorMessage" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">
             {{ subscriberErrorMessage }}
           </div>
-          <div v-else-if="normalizedSubscriberBounces.length === 0" class="px-4 py-8 text-center text-slate-500 text-sm">
+          <div v-else-if="normalizedSubscriberBounces.length === 0" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
             No subscriber bounce data found.
           </div>
           <div
@@ -70,20 +70,20 @@
             class="p-4 space-y-2"
           >
             <div class="flex items-center justify-between gap-2">
-              <p class="font-semibold text-slate-900">#{{ subscriber.subscriberId }}</p>
-              <p class="text-sm font-semibold text-slate-900">{{ subscriber.totalBounces }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">#{{ subscriber.subscriberId }}</p>
+              <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ subscriber.totalBounces }}</p>
             </div>
-            <p class="text-sm text-slate-800">{{ subscriber.email }}</p>
+            <p class="text-sm text-slate-800 dark:text-slate-100">{{ subscriber.email }}</p>
             <div class="flex items-center gap-2 text-xs">
               <span
                 class="px-2 py-0.5 rounded-full font-medium"
-                :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+                :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
               >
                 Confirmed: {{ subscriber.confirmed ? 'Yes' : 'No' }}
               </span>
               <span
                 class="px-2 py-0.5 rounded-full font-medium"
-                :class="subscriber.blacklisted ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-600'"
+                :class="subscriber.blacklisted ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
               >
                 Blacklisted: {{ subscriber.blacklisted ? 'Yes' : 'No' }}
               </span>
@@ -93,50 +93,50 @@
       </div>
     </div>
 
-    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-      <div class="p-5 border-b border-slate-100">
-        <h3 class="text-base font-semibold text-slate-900">Bounces By Campaign</h3>
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+      <div class="p-5 border-b border-slate-100 dark:border-slate-700">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Bounces By Campaign</h3>
       </div>
 
       <div class="overflow-x-auto">
         <table class="w-full text-left text-sm hidden md:table">
-          <thead class="bg-slate-50 text-slate-500 font-medium">
+          <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
             <tr>
               <th class="px-6 py-4">Campaign</th>
               <th class="px-6 py-4">Subject</th>
               <th class="px-6 py-4 text-right">Total Bounces</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-slate-200">
+          <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
             <tr v-if="isLoadingCampaigns">
-              <td colspan="3" class="px-6 py-8 text-center text-slate-500">Loading campaign bounce data...</td>
+              <td colspan="3" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading campaign bounce data...</td>
             </tr>
             <tr v-else-if="campaignErrorMessage">
-              <td colspan="3" class="px-6 py-8 text-center text-red-600">{{ campaignErrorMessage }}</td>
+              <td colspan="3" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ campaignErrorMessage }}</td>
             </tr>
             <tr v-else-if="normalizedCampaignBounces.length === 0">
-              <td colspan="3" class="px-6 py-8 text-center text-slate-500">No campaign bounce data found.</td>
+              <td colspan="3" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No campaign bounce data found.</td>
             </tr>
             <tr
               v-for="campaign in normalizedCampaignBounces"
               :key="campaign.messageId"
-              class="hover:bg-slate-50 transition-colors"
+              class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
             >
-              <td class="px-6 py-4 text-slate-700 font-mono">#{{ campaign.messageId }}</td>
-              <td class="px-6 py-4 text-slate-900 font-medium">{{ campaign.subject }}</td>
-              <td class="px-6 py-4 text-right text-slate-900 font-semibold">{{ campaign.totalBounces }}</td>
+              <td class="px-6 py-4 text-slate-700 dark:text-slate-200 font-mono">#{{ campaign.messageId }}</td>
+              <td class="px-6 py-4 text-slate-900 dark:text-slate-100 font-medium">{{ campaign.subject }}</td>
+              <td class="px-6 py-4 text-right text-slate-900 dark:text-slate-100 font-semibold">{{ campaign.totalBounces }}</td>
             </tr>
           </tbody>
         </table>
 
-        <div class="block md:hidden divide-y divide-slate-100">
-          <div v-if="isLoadingCampaigns" class="px-4 py-8 text-center text-slate-500 text-sm">
+        <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
+          <div v-if="isLoadingCampaigns" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
             Loading campaign bounce data...
           </div>
-          <div v-else-if="campaignErrorMessage" class="px-4 py-8 text-center text-red-600 text-sm">
+          <div v-else-if="campaignErrorMessage" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">
             {{ campaignErrorMessage }}
           </div>
-          <div v-else-if="normalizedCampaignBounces.length === 0" class="px-4 py-8 text-center text-slate-500 text-sm">
+          <div v-else-if="normalizedCampaignBounces.length === 0" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
             No campaign bounce data found.
           </div>
           <div
@@ -145,10 +145,10 @@
             class="p-4 space-y-2"
           >
             <div class="flex items-center justify-between gap-2">
-              <p class="font-semibold text-slate-900">#{{ campaign.messageId }}</p>
-              <p class="text-sm font-semibold text-slate-900">{{ campaign.totalBounces }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">#{{ campaign.messageId }}</p>
+              <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ campaign.totalBounces }}</p>
             </div>
-            <p class="text-sm text-slate-800">{{ campaign.subject }}</p>
+            <p class="text-sm text-slate-800 dark:text-slate-100">{{ campaign.subject }}</p>
           </div>
         </div>
       </div>
diff --git a/assets/vue/components/bounces/BounceRules.vue b/assets/vue/components/bounces/BounceRules.vue
index 9a1d58f..18561a3 100644
--- a/assets/vue/components/bounces/BounceRules.vue
+++ b/assets/vue/components/bounces/BounceRules.vue
@@ -2,8 +2,8 @@
   <div class="space-y-6 pb-4">
     <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
       <div>
-        <h3 class="text-base font-semibold text-slate-900">Bounce Rules</h3>
-        <p class="text-xs text-slate-500 mt-0.5">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Bounce Rules</h3>
+        <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
           Rules are evaluated top-to-bottom. Drag to reorder priority.
         </p>
       </div>
@@ -16,8 +16,8 @@
       </button>
     </div>
 
-    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-      <div class="hidden md:grid px-5 py-3.5 border-b border-slate-100 grid-cols-12 gap-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+      <div class="hidden md:grid px-5 py-3.5 border-b border-slate-100 dark:border-slate-700 grid-cols-12 gap-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
         <span class="col-span-1 hidden md:block">#</span>
         <span class="col-span-4 md:col-span-3">Rule</span>
         <span class="col-span-4 md:col-span-3">Pattern</span>
@@ -29,31 +29,31 @@
       <div
           v-for="rule in allBounceRules"
           :key="rule.id"
-          class="border-b last:border-b-0 border-slate-100 hover:bg-slate-50"
+          class="border-b last:border-b-0 border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700"
       >
         <div class="md:hidden px-5 py-4 space-y-1.5 text-sm">
-          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 shrink-0">Rule -</span> <span class="text-slate-900 min-w-0 break-words">{{ rule.comment }}</span></p>
-          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 shrink-0">Pattern -</span> <span class="font-mono text-xs text-slate-500 min-w-0 break-all">{{ rule.regex }}</span></p>
-          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 shrink-0">Action -</span> <span :class="rule.actionClass" class="text-xs font-medium min-w-0 break-words">{{ rule.action }}</span></p>
-          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 shrink-0">Hits -</span> <span class="text-slate-700 min-w-0 break-words">{{ rule.count }}</span></p>
-          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 shrink-0">Status -</span> <span class="capitalize min-w-0 break-words">{{ rule.status }}</span></p>
+          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 dark:text-slate-200 shrink-0">Rule -</span> <span class="text-slate-900 dark:text-slate-100 min-w-0 break-words">{{ rule.comment }}</span></p>
+          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 dark:text-slate-200 shrink-0">Pattern -</span> <span class="font-mono text-xs text-slate-500 dark:text-slate-400 min-w-0 break-all">{{ rule.regex }}</span></p>
+          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 dark:text-slate-200 shrink-0">Action -</span> <span :class="rule.actionClass" class="text-xs font-medium min-w-0 break-words">{{ rule.action }}</span></p>
+          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 dark:text-slate-200 shrink-0">Hits -</span> <span class="text-slate-700 dark:text-slate-200 min-w-0 break-words">{{ rule.count }}</span></p>
+          <p class="flex items-start gap-1"><span class="font-medium text-slate-700 dark:text-slate-200 shrink-0">Status -</span> <span class="capitalize min-w-0 break-words">{{ rule.status }}</span></p>
         </div>
 
         <div class="hidden md:grid md:grid-cols-12 md:gap-4 px-5 py-4 items-center">
-          <span class="col-span-1 text-xs font-mono text-slate-400">{{ rule.list_order }}</span>
+          <span class="col-span-1 text-xs font-mono text-slate-400 dark:text-slate-500">{{ rule.list_order }}</span>
           <div class="col-span-3">
-          <p class="text-sm font-medium text-slate-900">{{ rule.comment }}</p>
+          <p class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ rule.comment }}</p>
           </div>
-          <p class="col-span-3 text-xs font-mono text-slate-500" :title="rule.pattern">{{ rule.regex }}</p>
+          <p class="col-span-3 text-xs font-mono text-slate-500 dark:text-slate-400" :title="rule.pattern">{{ rule.regex }}</p>
           <span class="col-span-2">
             <span class="px-2 py-0.5 rounded-full text-xs font-medium" :class="rule.actionClass">{{ rule.action }}</span>
           </span>
-          <span class="col-span-1 text-right text-sm font-semibold text-slate-700">{{ rule.count }}</span>
+          <span class="col-span-1 text-right text-sm font-semibold text-slate-700 dark:text-slate-200">{{ rule.count }}</span>
           <div class="col-span-2 flex justify-end items-center gap-2">
             <button
                 type="button"
                 class="text-xs px-2 py-1 rounded-md"
-                :class="rule.status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'"
+                :class="rule.status === 'active' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400'"
             >
               {{ rule.status }}
             </button>
@@ -77,57 +77,57 @@
       <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="closeCreateModal"></div>
 
       <form class="w-full sm:max-w-lg z-10" @submit.prevent="submitCreateRule">
-        <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all">
-          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+        <div class="bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all">
+          <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 space-y-4">
             <div class="flex justify-between items-center">
-              <h3 id="create-bounce-rule-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              <h3 id="create-bounce-rule-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
                 New Bounce Rule
               </h3>
-              <button type="button" class="text-slate-400 hover:text-slate-500" :disabled="isCreatingRule" @click="closeCreateModal" data-testid="modal-close">
+              <button type="button" class="text-slate-400 hover:text-slate-500 dark:text-slate-500 dark:hover:text-slate-400" :disabled="isCreatingRule" @click="closeCreateModal" data-testid="modal-close">
                 <span aria-hidden="true">×</span>
               </button>
             </div>
 
             <div>
-              <label for="bounce-rule-regex" class="block text-sm font-medium text-slate-700">Regex</label>
+              <label for="bounce-rule-regex" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Regex</label>
               <input
                 id="bounce-rule-regex"
                 v-model.trim="createForm.regex"
                 type="text"
                 required
                 :class="[
-                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm bg-white dark:bg-slate-800 dark:text-slate-100',
                   fieldHasError('regex')
-                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
-                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                    ? 'border border-red-300 dark:border-red-500/40 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 dark:border-slate-600 focus:ring-blue-500 focus:border-blue-500'
                 ]"
               >
               <p
                 v-for="message in fieldErrors('regex')"
                 :key="`regex-${message}`"
-                class="mt-1 text-sm text-red-600"
+                class="mt-1 text-sm text-red-600 dark:text-red-400"
               >
                 {{ message }}
               </p>
             </div>
 
             <div>
-              <label for="bounce-rule-comment" class="block text-sm font-medium text-slate-700">Comment (optional)</label>
+              <label for="bounce-rule-comment" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Comment (optional)</label>
               <input
                 id="bounce-rule-comment"
                 v-model.trim="createForm.comment"
                 type="text"
                 :class="[
-                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm bg-white dark:bg-slate-800 dark:text-slate-100',
                   fieldHasError('comment')
-                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
-                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                    ? 'border border-red-300 dark:border-red-500/40 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 dark:border-slate-600 focus:ring-blue-500 focus:border-blue-500'
                 ]"
               >
               <p
                 v-for="message in fieldErrors('comment')"
                 :key="`comment-${message}`"
-                class="mt-1 text-sm text-red-600"
+                class="mt-1 text-sm text-red-600 dark:text-red-400"
               >
                 {{ message }}
               </p>
@@ -135,15 +135,15 @@
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <label for="bounce-rule-action" class="block text-sm font-medium text-slate-700">Action</label>
+                <label for="bounce-rule-action" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Action</label>
                 <select
                   id="bounce-rule-action"
                   v-model="createForm.action"
                   :class="[
-                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none sm:text-sm',
+                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white dark:bg-slate-800 dark:text-slate-100 focus:outline-none sm:text-sm',
                     fieldHasError('action')
-                      ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
-                      : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                      ? 'border border-red-300 dark:border-red-500/40 focus:ring-red-500 focus:border-red-500'
+                      : 'border border-slate-300 dark:border-slate-600 focus:ring-blue-500 focus:border-blue-500'
                   ]"
                 >
                   <option v-for="bounceAction in bounceActions" :key="bounceAction" :value="bounceAction">{{ bounceAction }}</option>
@@ -151,22 +151,22 @@
                 <p
                   v-for="message in fieldErrors('action')"
                   :key="`action-${message}`"
-                  class="mt-1 text-sm text-red-600"
+                  class="mt-1 text-sm text-red-600 dark:text-red-400"
                 >
                   {{ message }}
                 </p>
               </div>
 
               <div>
-                <label for="bounce-rule-status" class="block text-sm font-medium text-slate-700">Status</label>
+                <label for="bounce-rule-status" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Status</label>
                 <select
                   id="bounce-rule-status"
                   v-model="createForm.status"
                   :class="[
-                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none sm:text-sm',
+                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white dark:bg-slate-800 dark:text-slate-100 focus:outline-none sm:text-sm',
                     fieldHasError('status')
-                      ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
-                      : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                      ? 'border border-red-300 dark:border-red-500/40 focus:ring-red-500 focus:border-red-500'
+                      : 'border border-slate-300 dark:border-slate-600 focus:ring-blue-500 focus:border-blue-500'
                   ]"
                 >
                   <option value="active">active</option>
@@ -175,7 +175,7 @@
                 <p
                   v-for="message in fieldErrors('status')"
                   :key="`status-${message}`"
-                  class="mt-1 text-sm text-red-600"
+                  class="mt-1 text-sm text-red-600 dark:text-red-400"
                 >
                   {{ message }}
                 </p>
@@ -183,7 +183,7 @@
             </div>
 
             <div>
-              <label for="bounce-rule-order" class="block text-sm font-medium text-slate-700">List Order (optional)</label>
+              <label for="bounce-rule-order" class="block text-sm font-medium text-slate-700 dark:text-slate-200">List Order (optional)</label>
               <input
                 id="bounce-rule-order"
                 v-model="createForm.list_order"
@@ -191,25 +191,25 @@
                 min="0"
                 step="1"
                 :class="[
-                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm bg-white dark:bg-slate-800 dark:text-slate-100',
                   fieldHasError('list_order')
-                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
-                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                    ? 'border border-red-300 dark:border-red-500/40 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 dark:border-slate-600 focus:ring-blue-500 focus:border-blue-500'
                 ]"
               >
               <p
                 v-for="message in fieldErrors('list_order')"
                 :key="`list-order-${message}`"
-                class="mt-1 text-sm text-red-600"
+                class="mt-1 text-sm text-red-600 dark:text-red-400"
               >
                 {{ message }}
               </p>
             </div>
 
-            <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+            <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
           </div>
 
-          <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
             <button
               type="submit"
               class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:w-auto sm:text-sm disabled:opacity-50"
@@ -220,7 +220,7 @@
             </button>
             <button
               type="button"
-              class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
+              class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
               :disabled="isCreatingRule"
               @click="closeCreateModal"
               data-testid="modal-cancel"
diff --git a/assets/vue/components/bounces/BouncesActionsPanel.vue b/assets/vue/components/bounces/BouncesActionsPanel.vue
index ad05614..c22f6f1 100644
--- a/assets/vue/components/bounces/BouncesActionsPanel.vue
+++ b/assets/vue/components/bounces/BouncesActionsPanel.vue
@@ -2,8 +2,8 @@
   <section class="space-y-6">
     <div class="flex items-center justify-between">
       <div>
-        <h2 class="text-xl font-bold text-slate-900">Bounce Management</h2>
-        <p class="mt-0.5 text-sm text-slate-500">
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Bounce Management</h2>
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
           Monitor, process and automate bounce handling across all campaigns
         </p>
       </div>
@@ -20,15 +20,15 @@
         type="button"
         class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap shrink-0"
         :class="activeTab === tab.id
-          ? 'bg-white text-slate-900 shadow-sm border border-slate-300'
-          : 'text-slate-500 hover:text-slate-700 hover:bg-white/60'"
+          ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm border border-slate-300 dark:border-slate-600'
+          : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white/60 dark:hover:bg-slate-800/60'"
         @click="setActiveTab(tab.id)"
       >
         <span>{{ tab.label }}</span>
         <span
           v-if="tab.count"
           class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full font-semibold"
-          :class="activeTab === tab.id ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500'"
+          :class="activeTab === tab.id ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400'"
         >
           {{ tab.count }}
         </span>
@@ -48,9 +48,9 @@
     </template>
 
     <template v-else>
-      <div class="bg-white rounded-xl border border-slate-200 p-6">
-        <h3 class="text-base font-semibold text-slate-900">{{ currentTabLabel }}</h3>
-        <p class="mt-1 text-sm text-slate-500">This panel matches the template navigation and can be expanded next.</p>
+      <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">{{ currentTabLabel }}</h3>
+        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">This panel matches the template navigation and can be expanded next.</p>
       </div>
     </template>
   </section>
diff --git a/assets/vue/components/campaigns/CampaignDirectory.vue b/assets/vue/components/campaigns/CampaignDirectory.vue
index af6c92c..7d01d61 100644
--- a/assets/vue/components/campaigns/CampaignDirectory.vue
+++ b/assets/vue/components/campaigns/CampaignDirectory.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-      <h2 class="text-xl font-bold text-slate-900">Campaigns</h2>
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Campaigns</h2>
 
-      <div class="inline-flex rounded-lg border border-slate-200 p-1 bg-slate-50 w-full sm:w-auto">
+      <div class="inline-flex rounded-lg border border-slate-200 dark:border-slate-700 p-1 bg-slate-50 dark:bg-slate-900 w-full sm:w-auto">
         <button
           v-for="option in filterOptions"
           :key="option.id"
           type="button"
           class="flex-1 sm:flex-none px-3 py-1.5 text-xs font-semibold rounded-md transition-colors"
-          :class="statusFilter === option.id ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
+          :class="statusFilter === option.id ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'"
           @click="setFilter(option.id)"
         >
           {{ option.label }}
@@ -19,7 +19,7 @@
 
     <div class="overflow-x-auto">
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">Subject</th>
           <th class="px-6 py-4">Status</th>
@@ -30,25 +30,25 @@
         </tr>
         </thead>
 
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
         <tr v-if="isLoading">
-          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500">Loading campaigns...</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading campaigns...</td>
         </tr>
 
         <tr v-else-if="errorMessage">
-          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ errorMessage }}</td>
         </tr>
 
         <tr v-else-if="paginatedCampaigns.length === 0">
-          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500">No campaigns for this filter.</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No campaigns for this filter.</td>
         </tr>
 
         <tr
           v-for="campaign in paginatedCampaigns"
           :key="campaign.id"
-          class="hover:bg-slate-50 transition-colors"
+          class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
         >
-          <td class="px-6 py-4 font-medium text-slate-900">{{ campaign.subject }}</td>
+          <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">{{ campaign.subject }}</td>
           <td class="px-6 py-4">
             <span
               class="px-2.5 py-0.5 rounded-full text-xs font-medium"
@@ -57,7 +57,7 @@
               {{ campaign.statusLabel }}
             </span>
           </td>
-          <td class="px-6 py-4 text-slate-600 align-top">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300 align-top">
             <p v-if="isListsLoading(campaign.id)" class="text-xs">Loading lists...</p>
             <p v-else-if="campaign.lists.length === 0" class="text-xs">-</p>
             <p
@@ -67,30 +67,30 @@
             >
               <router-link
                   :to="`/lists/${list.id}/subscribers`"
-                  class="text-blue-600 hover:underline"
+                  class="text-blue-600 dark:text-blue-400 hover:underline"
               >
                 {{ list.name }}
               </router-link>
             </p>
           </td>
-          <td class="px-6 py-4 text-slate-600 align-top">
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Started:</span> {{ campaign.startedAt }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Time to send:</span> {{ campaign.timeToSend }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Total:</span> {{ campaign.processedTotal }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Text:</span> {{ campaign.processedText }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">HTML:</span> {{ campaign.processedHtml }}</p>
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300 align-top">
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Started:</span> {{ campaign.startedAt }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Time to send:</span> {{ campaign.timeToSend }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Total:</span> {{ campaign.processedTotal }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Text:</span> {{ campaign.processedText }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">HTML:</span> {{ campaign.processedHtml }}</p>
           </td>
-          <td class="px-6 py-4 text-slate-600 align-top" v-if="showStatistics">
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Total views:</span> {{ campaign.totalViews }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Unique views:</span> {{ campaign.uniqueViews }}</p>
-            <p class="text-xs leading-5"><span class="font-medium text-slate-700">Bounced:</span> {{ campaign.bounced }}</p>
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300 align-top" v-if="showStatistics">
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Total views:</span> {{ campaign.totalViews }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Unique views:</span> {{ campaign.uniqueViews }}</p>
+            <p class="text-xs leading-5"><span class="font-medium text-slate-700 dark:text-slate-200">Bounced:</span> {{ campaign.bounced }}</p>
           </td>
           <td class="px-6 py-4 align-top text-right">
             <div class="inline-flex flex-wrap justify-end gap-2">
               <button
                 v-if="campaign.statusKey === 'draft'"
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleDelete(campaign)"
               >
@@ -100,7 +100,7 @@
               <button
                 v-else-if="campaign.statusKey === 'active'"
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleSuspend(campaign.id)"
               >
@@ -110,7 +110,7 @@
               <button
                 v-else
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 dark:border-amber-500/20 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleRequeue(campaign.id)"
               >
@@ -120,7 +120,7 @@
               <button
                 v-if="campaign.statusKey === 'sent'"
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 text-green-700 hover:bg-green-50 transition-colors"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 dark:border-green-500/20 text-green-700 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleCopyToDraft(campaign.id)"
               >
@@ -130,7 +130,7 @@
               <button
                   v-if="campaign.statusKey === 'draft'"
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleEdit(campaign.id)"
               >
@@ -139,7 +139,7 @@
               </button>
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleView(campaign.id)"
               >
@@ -151,9 +151,9 @@
               v-if="getActionFeedback(campaign.id)"
               class="mt-2 text-xs"
               :class="{
-                'text-emerald-700': getActionFeedback(campaign.id)?.type === 'success',
-                'text-red-700': getActionFeedback(campaign.id)?.type === 'error',
-                'text-slate-500': getActionFeedback(campaign.id)?.type === 'info'
+                'text-emerald-700 dark:text-emerald-400': getActionFeedback(campaign.id)?.type === 'success',
+                'text-red-700 dark:text-red-400': getActionFeedback(campaign.id)?.type === 'error',
+                'text-slate-500 dark:text-slate-400': getActionFeedback(campaign.id)?.type === 'info'
               }"
             >
               {{ getActionFeedback(campaign.id)?.message }}
@@ -163,24 +163,24 @@
         </tbody>
       </table>
 
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
         <div
           v-if="isLoading"
-          class="px-4 py-8 text-center text-slate-500 text-sm"
+          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           Loading campaigns...
         </div>
 
         <div
           v-else-if="errorMessage"
-          class="px-4 py-8 text-center text-red-600 text-sm"
+          class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm"
         >
           {{ errorMessage }}
         </div>
 
         <div
           v-else-if="paginatedCampaigns.length === 0"
-          class="px-4 py-8 text-center text-slate-500 text-sm"
+          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           No campaigns for this filter.
         </div>
@@ -192,7 +192,7 @@
         >
           <div class="flex items-start justify-between gap-3">
             <div>
-              <p class="font-semibold text-slate-900">{{ campaign.subject }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">{{ campaign.subject }}</p>
             </div>
             <span
               class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
@@ -202,9 +202,9 @@
             </span>
           </div>
 
-          <div class="text-xs text-slate-600 space-y-1">
+          <div class="text-xs text-slate-600 dark:text-slate-300 space-y-1">
             <p>
-              <span class="font-medium text-slate-700">Lists: </span>
+              <span class="font-medium text-slate-700 dark:text-slate-200">Lists: </span>
               <template v-if="campaign.lists.length > 0">
                 <span
                     v-for="(list, index) in campaign.lists"
@@ -212,7 +212,7 @@
                 >
                   <router-link
                       :to="`/lists/${list.id}/subscribers`"
-                      class="text-blue-600 hover:underline"
+                      class="text-blue-600 dark:text-blue-400 hover:underline"
                   >
                     {{ list.name }}
                   </router-link>
@@ -220,11 +220,11 @@
                 </span>
               </template>
             </p>
-            <p><span class="font-medium text-slate-700">Started:</span> {{ campaign.startedAt }}</p>
-            <p><span class="font-medium text-slate-700">Time to send:</span> {{ campaign.timeToSend }}</p>
-            <p><span class="font-medium text-slate-700">Processed:</span> {{ campaign.processedTotal }} (Text: {{ campaign.processedText }}, HTML: {{ campaign.processedHtml }})</p>
+            <p><span class="font-medium text-slate-700 dark:text-slate-200">Started:</span> {{ campaign.startedAt }}</p>
+            <p><span class="font-medium text-slate-700 dark:text-slate-200">Time to send:</span> {{ campaign.timeToSend }}</p>
+            <p><span class="font-medium text-slate-700 dark:text-slate-200">Processed:</span> {{ campaign.processedTotal }} (Text: {{ campaign.processedText }}, HTML: {{ campaign.processedHtml }})</p>
             <p v-if="showStatistics">
-              <span class="font-medium text-slate-700">Statistics:</span>
+              <span class="font-medium text-slate-700 dark:text-slate-200">Statistics:</span>
               Total views {{ campaign.totalViews }}, Unique views {{ campaign.uniqueViews }}, Bounced {{ campaign.bounced }}
             </p>
           </div>
@@ -233,7 +233,7 @@
             <button
               v-if="campaign.statusKey === 'draft'"
               type="button"
-              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleDelete(campaign)"
             >
@@ -243,7 +243,7 @@
             <button
               v-else-if="campaign.statusKey === 'active'"
               type="button"
-              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleSuspend(campaign.id)"
             >
@@ -253,7 +253,7 @@
             <button
               v-else
               type="button"
-              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 dark:border-amber-500/20 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleRequeue(campaign.id)"
             >
@@ -263,7 +263,7 @@
             <button
               v-if="campaign.statusKey === 'sent'"
               type="button"
-              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 text-green-700 hover:bg-green-50 transition-colors disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 dark:border-green-500/20 text-green-700 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleCopyToDraft(campaign.id)"
             >
@@ -273,7 +273,7 @@
             <button
                 v-if="campaign.statusKey === 'draft'"
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleEdit(campaign.id)"
             >
@@ -282,7 +282,7 @@
             </button>
             <button
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleView(campaign.id)"
             >
@@ -294,9 +294,9 @@
             v-if="getActionFeedback(campaign.id)"
             class="text-xs"
             :class="{
-              'text-emerald-700': getActionFeedback(campaign.id)?.type === 'success',
-              'text-red-700': getActionFeedback(campaign.id)?.type === 'error',
-              'text-slate-500': getActionFeedback(campaign.id)?.type === 'info'
+              'text-emerald-700 dark:text-emerald-400': getActionFeedback(campaign.id)?.type === 'success',
+              'text-red-700 dark:text-red-400': getActionFeedback(campaign.id)?.type === 'error',
+              'text-slate-500 dark:text-slate-400': getActionFeedback(campaign.id)?.type === 'info'
             }"
           >
             {{ getActionFeedback(campaign.id)?.message }}
@@ -305,14 +305,14 @@
       </div>
     </div>
 
-    <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500">
+    <div class="p-4 sm:p-6 border-t border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
       <div class="text-center sm:text-left">
-        Showing <span class="font-medium text-slate-900">{{ rangeStart }}</span>-<span class="font-medium text-slate-900">{{ rangeEnd }}</span> of <span class="font-medium text-slate-900">{{ filteredCampaigns.length }}</span>
+        Showing <span class="font-medium text-slate-900 dark:text-slate-100">{{ rangeStart }}</span>-<span class="font-medium text-slate-900 dark:text-slate-100">{{ rangeEnd }}</span> of <span class="font-medium text-slate-900 dark:text-slate-100">{{ filteredCampaigns.length }}</span>
       </div>
       <div class="flex gap-2 w-full sm:w-auto">
         <button
           type="button"
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
           :disabled="!canGoPrevious"
           @click="previousPage"
         >
@@ -320,7 +320,7 @@
         </button>
         <button
           type="button"
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50"
           :disabled="!canGoNext"
           @click="nextPage"
         >
@@ -413,13 +413,13 @@ const filterOptions = [
 ]
 
 const statusClasses = {
-  sent: 'bg-emerald-100 text-emerald-700',
-  active: 'bg-blue-100 text-blue-700',
-  draft: 'bg-slate-100 text-slate-700',
-  unknown: 'bg-amber-100 text-amber-700'
+  sent: 'bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+  active: 'bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400',
+  draft: 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300',
+  unknown: 'bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400'
 }
 
-const activeStatuses = new Set(['active', 'submitted', 'prepared', 'inprocess', 'requeued', 'scheduled'])
+const activeStatuses = new Set(['active', 'submitted', 'prepared', 'inprocess', 'scheduled'])
 
 const resolveStatusKey = (statusRaw) => {
   if (statusRaw === 'sent') return 'sent'
@@ -509,7 +509,7 @@ const handleRequeue = async (campaignId) => {
   setActionFeedback(campaignId, 'Requeueing campaign...')
 
   try {
-    await campaignClient.updateCampaignStatus(campaignId, 'requeued')
+    await campaignClient.updateCampaignStatus(campaignId, 'submitted')
     setActionFeedback(campaignId, 'Campaign requeued.', 'success')
     await fetchCampaigns()
   } catch (error) {
diff --git a/assets/vue/components/campaigns/ViewCampaignModal.vue b/assets/vue/components/campaigns/ViewCampaignModal.vue
index 80b73de..4ec1e20 100644
--- a/assets/vue/components/campaigns/ViewCampaignModal.vue
+++ b/assets/vue/components/campaigns/ViewCampaignModal.vue
@@ -4,12 +4,12 @@
       class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
       @click.self="emit('close')"
   >
-    <div class="w-full max-w-2xl rounded-xl border border-slate-200 bg-white shadow-xl">
-      <div class="flex items-center justify-between border-b border-slate-200 px-5 py-4">
-        <h3 class="text-lg font-semibold text-slate-900">Campaign details: {{ campaign?.id || '-' }}</h3>
+    <div class="w-full max-w-2xl rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-xl">
+      <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 px-5 py-4">
+        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Campaign details: {{ campaign?.id || '-' }}</h3>
         <button
             type="button"
-            class="text-sm text-slate-500 hover:text-slate-700"
+            class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
             @click="emit('close')"
             data-testid="close-btn"
         >
@@ -18,60 +18,60 @@
       </div>
 
       <div class="p-5">
-        <p v-if="isViewLoading" class="text-sm text-slate-500">
+        <p v-if="isViewLoading" class="text-sm text-slate-500 dark:text-slate-400">
           Loading campaign...
         </p>
 
-        <p v-else-if="viewErrorMessage" class="text-sm text-red-600">
+        <p v-else-if="viewErrorMessage" class="text-sm text-red-600 dark:text-red-400">
           {{ viewErrorMessage }}
         </p>
 
-        <div v-else-if="campaign" class="space-y-2 text-sm text-slate-700">
+        <div v-else-if="campaign" class="space-y-2 text-sm text-slate-700 dark:text-slate-200">
           <p>
-            <span class="font-medium text-slate-900">Subject:</span>
+            <span class="font-medium text-slate-900 dark:text-slate-100">Subject:</span>
             {{ campaign?.messageContent?.subject || '-' }}
           </p>
 
           <p>
-            <span class="font-medium text-slate-900">Entered:</span>
+            <span class="font-medium text-slate-900 dark:text-slate-100">Entered:</span>
             {{ formatDate(campaign?.messageMetadata?.entered || null) }}
           </p>
 
           <p>
-            <span class="font-medium text-slate-900">From:</span>
+            <span class="font-medium text-slate-900 dark:text-slate-100">From:</span>
             {{ campaign?.messageOptions?.fromField || '-' }}
           </p>
 
           <div class="pt-2">
-            <p class="font-medium text-slate-900">HTML content</p>
-            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 bg-slate-50 p-3 text-xs whitespace-pre-wrap">{{
+            <p class="font-medium text-slate-900 dark:text-slate-100">HTML content</p>
+            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 p-3 text-xs text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{{
                 campaign?.messageContent?.text || '-'
               }}</pre>
           </div>
 
           <div class="pt-2">
-            <p class="font-medium text-slate-900">Text content</p>
-            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 bg-slate-50 p-3 text-xs whitespace-pre-wrap">{{
+            <p class="font-medium text-slate-900 dark:text-slate-100">Text content</p>
+            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 p-3 text-xs text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{{
                 campaign?.messageContent?.textMessage || '-'
               }}</pre>
           </div>
 
           <div class="pt-2">
-            <p class="font-medium text-slate-900">Footer</p>
-            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 bg-slate-50 p-3 text-xs whitespace-pre-wrap">{{
+            <p class="font-medium text-slate-900 dark:text-slate-100">Footer</p>
+            <pre class="mt-1 max-h-52 overflow-auto rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 p-3 text-xs text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{{
                 campaign?.messageContent?.footer || '-'
               }}</pre>
           </div>
 
           <p v-if="campaign?.messageSchedule?.requeueInterval || campaign?.messageSchedule?.repeatInterval">
-            <span class="font-medium text-slate-900">Requeueing:</span>
+            <span class="font-medium text-slate-900 dark:text-slate-100">Requeueing:</span>
             {{ getMessage(campaign?.messageSchedule) }}
           </p>
 
-          <div class="mt-6 border-t border-slate-200 pt-4">
-            <p class="mb-2 font-medium text-slate-900">
+          <div class="mt-6 border-t border-slate-200 dark:border-slate-700 pt-4">
+            <p class="mb-2 font-medium text-slate-900 dark:text-slate-100">
               Resend campaign
-              <span class="ml-2 text-xs font-light text-slate-600">
+              <span class="ml-2 text-xs font-light text-slate-600 dark:text-slate-300">
                 Choose mailing lists
               </span>
             </p>
@@ -79,7 +79,7 @@
             <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
               <div class="flex-1">
                 <div
-                    class="max-h-44 overflow-auto rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm"
+                    class="max-h-44 overflow-auto rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm"
                 >
                   <label
                       v-for="list in mailingLists"
@@ -92,12 +92,12 @@
                         v-model="selectedMailingListIds"
                         type="checkbox"
                         :value="list.id"
-                        class="h-4 w-4 rounded border-slate-300 text-slate-900 accent-ext-wf1"
+                        class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-slate-900 accent-ext-wf1"
                     >
                     <span>{{ list.name }}</span>
                   </label>
 
-                  <p v-if="mailingLists.length === 0" class="py-1 text-slate-500">
+                  <p v-if="mailingLists.length === 0" class="py-1 text-slate-500 dark:text-slate-400">
                     No mailing lists found.
                   </p>
                 </div>
@@ -105,7 +105,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
+                  class="inline-flex items-center justify-center rounded-md bg-slate-900 dark:bg-slate-700 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:hover:bg-slate-600 disabled:cursor-not-allowed disabled:opacity-50"
                   :disabled="selectedMailingListIds.length === 0 || isResending"
                   @click="handleResend"
               >
@@ -113,13 +113,13 @@
               </button>
             </div>
 
-            <p v-if="resendErrorMessage" class="mt-2 text-sm text-red-600">
+            <p v-if="resendErrorMessage" class="mt-2 text-sm text-red-600 dark:text-red-400">
               {{ resendErrorMessage }}
             </p>
           </div>
         </div>
 
-        <p v-else class="text-sm text-slate-500">
+        <p v-else class="text-sm text-slate-500 dark:text-slate-400">
           No campaign selected.
         </p>
       </div>
diff --git a/assets/vue/components/dashboard/CampaignsTable.vue b/assets/vue/components/dashboard/CampaignsTable.vue
index 6688945..a7fbd5c 100644
--- a/assets/vue/components/dashboard/CampaignsTable.vue
+++ b/assets/vue/components/dashboard/CampaignsTable.vue
@@ -1,7 +1,7 @@
 <template>
   <table class="w-full text-left border-collapse">
-    <thead class="border-b border-gray-200">
-    <tr class="uppercase text-xs text-gray-500 font-semibold">
+    <thead class="border-b border-gray-200 dark:border-slate-700">
+    <tr class="uppercase text-xs text-gray-500 font-semibold dark:text-slate-400">
       <th class="py-3 pr-4">Campaign Name</th>
       <th class="py-3 px-4">Status</th>
       <th class="py-3 px-4">Date</th>
@@ -14,9 +14,9 @@
     <tr
         v-for="row in rows"
         :key="row.id"
-        class="border-b border-gray-200 last:border-0 hover:bg-gray-50"
+        class="border-b border-gray-200 last:border-0 hover:bg-gray-50 dark:border-slate-700 dark:hover:bg-slate-700"
     >
-      <td class="py-3 pr-4 font-medium text-gray-900">
+      <td class="py-3 pr-4 font-medium text-gray-900 dark:text-slate-100">
         {{ row.name }}
       </td>
 
@@ -29,14 +29,14 @@
           </span>
       </td>
 
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.date }}</td>
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.openRate ?? '—' }}</td>
-      <td class="py-3 pl-4 text-sm text-gray-500">{{ row.clickRate ?? '—' }}</td>
+      <td class="py-3 px-4 text-sm text-gray-500 dark:text-slate-400">{{ row.date }}</td>
+      <td class="py-3 px-4 text-sm text-gray-500 dark:text-slate-400">{{ row.openRate ?? '—' }}</td>
+      <td class="py-3 pl-4 text-sm text-gray-500 dark:text-slate-400">{{ row.clickRate ?? '—' }}</td>
     </tr>
 
     <!-- empty state -->
     <tr v-if="!rows.length">
-      <td colspan="5" class="text-center py-8 text-gray-500">
+      <td colspan="5" class="text-center py-8 text-gray-500 dark:text-slate-400">
         No campaigns yet.
       </td>
     </tr>
@@ -56,9 +56,9 @@ const statusClass = (status) => {
   const s = status.toLowerCase()
 
   return {
-    sent: 'bg-green-100 text-green-800',
-    scheduled: 'bg-blue-100 text-blue-800',
-    draft: 'bg-gray-100 text-gray-800',
-  }[s] || 'bg-gray-100 text-gray-800'
+    sent: 'bg-green-100 text-green-800 dark:bg-green-500/10 dark:text-green-400',
+    scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-500/10 dark:text-blue-400',
+    draft: 'bg-gray-100 text-gray-800 dark:bg-slate-700 dark:text-slate-300',
+  }[s] || 'bg-gray-100 text-gray-800 dark:bg-slate-700 dark:text-slate-300'
 }
 </script>
diff --git a/assets/vue/components/dashboard/KpiCard.vue b/assets/vue/components/dashboard/KpiCard.vue
index f90e008..7e89b50 100644
--- a/assets/vue/components/dashboard/KpiCard.vue
+++ b/assets/vue/components/dashboard/KpiCard.vue
@@ -3,15 +3,15 @@
   <BaseCard>
     <header class="flex items-center mb-2">
       <div
-        class="inline-flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mr-2"
+        class="inline-flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mr-2 dark:bg-slate-700 dark:text-slate-400"
         style="width: 40px; height: 40px;"
       >
         <BaseIcon :name="icon" />
       </div>
-      <p class="mb-0 text-gray-500 uppercase text-xs font-semibold">{{ label }}</p>
+      <p class="mb-0 text-gray-500 uppercase text-xs font-semibold dark:text-slate-400">{{ label }}</p>
     </header>
 
-    <p class="mb-1 text-2xl font-bold">{{ value }}</p>
+    <p class="mb-1 text-2xl font-bold dark:text-slate-100">{{ value }}</p>
 
     <p class="mb-0 text-sm" :class="trendClass">
       {{ change }} vs last month
@@ -36,5 +36,5 @@ const props = defineProps({
   icon: String,
 })
 
-const trendClass = computed(() => (props.trend === 'down' ? 'text-red-600' : 'text-green-600'))
+const trendClass = computed(() => (props.trend === 'down' ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'))
 </script>
diff --git a/assets/vue/components/dashboard/PerformanceChartCard.vue b/assets/vue/components/dashboard/PerformanceChartCard.vue
index 4dd02a2..010be74 100644
--- a/assets/vue/components/dashboard/PerformanceChartCard.vue
+++ b/assets/vue/components/dashboard/PerformanceChartCard.vue
@@ -2,10 +2,10 @@
 <template>
   <BaseCard>
     <header class="mb-3 flex items-center justify-between">
-      <h2 class="text-sm font-bold text-gray-900">
+      <h2 class="text-sm font-bold text-gray-900 dark:text-slate-100">
         Campaign Performance
       </h2>
-      <p class="text-gray-500 text-xs mb-0">
+      <p class="text-gray-500 text-xs mb-0 dark:text-slate-400">
         Daily opens and clicks for the last 30 days
       </p>
     </header>
@@ -25,6 +25,7 @@
 import { computed } from 'vue'
 import BaseCard from '../../components/base/BaseCard.vue'
 import VueApexCharts from 'vue3-apexcharts'
+import { useDarkMode } from '../../composables/useDarkMode'
 
 defineOptions({
   components: {
@@ -43,6 +44,8 @@ const props = defineProps({
   },
 })
 
+const { isDark } = useDarkMode()
+
 const series = computed(() => props.chart?.series ?? [])
 
 const chartOptions = computed(() => ({
@@ -71,7 +74,7 @@ const chartOptions = computed(() => ({
     enabled: false,
   },
   grid: {
-    borderColor: '#e5e7eb',
+    borderColor: isDark.value ? '#334155' : '#e5e7eb',
     strokeDashArray: 4,
     padding: {
       left: 8,
@@ -85,6 +88,9 @@ const chartOptions = computed(() => ({
     position: 'top',
     horizontalAlign: 'right',
     fontSize: '12px',
+    labels: {
+      colors: isDark.value ? '#cbd5e1' : '#374151',
+    },
     markers: {
       width: 8,
       height: 8,
@@ -97,7 +103,7 @@ const chartOptions = computed(() => ({
     axisTicks: { show: false },
     labels: {
       style: {
-        colors: '#9ca3af',
+        colors: isDark.value ? '#64748b' : '#9ca3af',
         fontSize: '12px',
       },
     },
@@ -105,7 +111,7 @@ const chartOptions = computed(() => ({
   yaxis: {
     labels: {
       style: {
-        colors: '#9ca3af',
+        colors: isDark.value ? '#64748b' : '#9ca3af',
         fontSize: '12px',
       },
       formatter: (value) => Math.round(value).toLocaleString(),
@@ -114,6 +120,7 @@ const chartOptions = computed(() => ({
   tooltip: {
     shared: true,
     intersect: false,
+    theme: isDark.value ? 'dark' : 'light',
     y: {
       formatter: (value) => value.toLocaleString(),
     },
diff --git a/assets/vue/components/dashboard/QuickActionsCard.vue b/assets/vue/components/dashboard/QuickActionsCard.vue
index ba403f4..2d3c442 100644
--- a/assets/vue/components/dashboard/QuickActionsCard.vue
+++ b/assets/vue/components/dashboard/QuickActionsCard.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseCard class="h-full">
     <header class="mb-4">
-      <h2 class="text-sm font-bold text-gray-900 mb-0">
+      <h2 class="text-sm font-bold text-gray-900 mb-0 dark:text-slate-100">
         Quick Actions
       </h2>
     </header>
@@ -11,14 +11,14 @@
         v-for="action in quickActions"
         :key="action.id"
         :href="action.href"
-        class="rounded-xl border border-gray-200 bg-gray-100/70 px-4 py-4 text-center transition-colors hover:bg-gray-100"
+        class="rounded-xl border border-gray-200 bg-gray-100/70 px-4 py-4 text-center transition-colors hover:bg-gray-100 dark:border-slate-700 dark:bg-slate-800/70 dark:hover:bg-slate-700"
       >
         <div class="mb-2 flex justify-center">
           <span class="inline-flex items-center justify-center">
             <svg
               v-if="action.id === 'campaign'"
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 text-blue-600"
+              class="h-5 w-5 text-blue-600 dark:text-blue-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -30,7 +30,7 @@
             <svg
               v-else-if="action.id === 'subscribers'"
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 text-emerald-600"
+              class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -44,20 +44,20 @@
             <svg
               v-else-if="action.id === 'import'"
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 text-indigo-600"
+              class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
               stroke-width="2"
               aria-hidden="true"
             >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 16V8m0 0-3 3m3-3 3 3" />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M20 16.6A5 5 0 0 0 18 7H6a5 5 0 0 0-2 9.6" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v10m0 0-4-4m4 4 4-4"/>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 15v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
             </svg>
             <svg
               v-else
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 text-amber-600"
+              class="h-5 w-5 text-amber-600 dark:text-amber-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -69,7 +69,7 @@
             </svg>
           </span>
         </div>
-        <p class="m-0 text-sm font-semibold text-slate-800">
+        <p class="m-0 text-sm font-semibold text-slate-800 dark:text-slate-100">
           {{ action.label }}
         </p>
       </a>
diff --git a/assets/vue/components/dashboard/RecentCampaignsCard.vue b/assets/vue/components/dashboard/RecentCampaignsCard.vue
index 0f6f010..2a83ce4 100644
--- a/assets/vue/components/dashboard/RecentCampaignsCard.vue
+++ b/assets/vue/components/dashboard/RecentCampaignsCard.vue
@@ -2,7 +2,7 @@
 <template>
   <BaseCard>
     <header class="mb-3">
-      <h2 class="text-sm font-bold text-gray-900 mb-0">
+      <h2 class="text-sm font-bold text-gray-900 mb-0 dark:text-slate-100">
         Recent Campaigns
       </h2>
     </header>
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
index 421e261..2cf7d0b 100644
--- a/assets/vue/components/lists/AddSubscribersModal.vue
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -8,21 +8,21 @@
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
 
-    <div class="relative z-10 w-full overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full">
+    <div class="relative z-10 w-full overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full">
       <form class="mt-4 space-y-4" @submit.prevent="submitAddSubscribers">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6">
           <div class="flex items-center justify-between">
-            <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900">
+            <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900 dark:text-slate-100">
               Add subscribers
             </h3>
 
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="close">
               <BaseIcon name="close" class="w-5 h-5" />
             </button>
           </div>
 
             <div>
-              <label for="subscriber-emails" class="block text-sm font-medium text-slate-700">
+              <label for="subscriber-emails" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                 Email addresses
               </label>
               <textarea
@@ -30,28 +30,28 @@
                   v-model.trim="addSubsForm.emails"
                   rows="8"
                   placeholder="john@example.com&#10;jane@example.com&#10;team@example.com"
-                  class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+                  class="mt-1 block w-full rounded-md border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
               ></textarea>
-              <p class="mt-1 text-xs text-slate-500">
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                 Enter one email per line, or separate multiple emails with commas.
               </p>
             </div>
 
-            <label class="flex items-center gap-2 text-sm text-slate-700">
+            <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
               <input
                   v-model="addSubsForm.autoConfirm"
                   type="checkbox"
-                  class="h-4 w-4 rounded border-slate-300 text-ext-wf1 accent-ext-wf1"
+                  class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 text-ext-wf1 accent-ext-wf1"
               />
               Auto confirm subscribers
             </label>
 
-            <p v-if="addSubsError" class="text-sm text-red-600">
+            <p v-if="addSubsError" class="text-sm text-red-600 dark:text-red-400">
               {{ addSubsError }}
             </p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
         <button
             type="submit"
             :disabled="addingSubscribers || !addSubsForm.emails.trim()"
@@ -62,7 +62,7 @@
 
         <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-2 text-base font-medium text-slate-700 dark:text-slate-200 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
             @click="close"
         >
           Cancel
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
index e7199b7..1d8c30f 100644
--- a/assets/vue/components/lists/CreateListModal.vue
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -8,25 +8,25 @@
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
     <form class="mt-4 space-y-4" @submit.prevent="submitCreateList">
-      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+      <div class="relative bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6">
           <div class="flex justify-between items-center">
-            <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
               Create New List
             </h3>
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="close">
               <BaseIcon name="close" class="w-5 h-5" />
             </button>
           </div>
 
             <div>
-              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <label for="list-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Name</label>
               <input
                 id="list-name"
                 v-model.trim="createForm.name"
                 type="text"
                 required
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
@@ -35,39 +35,39 @@
                 id="list-public"
                 v-model="createForm.public"
                 type="checkbox"
-                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 dark:bg-slate-800 rounded accent-ext-wf1"
               >
-              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+              <label for="list-public" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                 Public
               </label>
             </div>
 
             <div>
-              <label for="list-position" class="block text-sm font-medium text-slate-700">List Position (optional)</label>
+              <label for="list-position" class="block text-sm font-medium text-slate-700 dark:text-slate-200">List Position (optional)</label>
               <input
                 id="list-position"
                 v-model="createForm.listPosition"
                 type="number"
                 min="0"
                 step="1"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
             <div>
-              <label for="list-description" class="block text-sm font-medium text-slate-700">Description (optional)</label>
+              <label for="list-description" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Description (optional)</label>
               <textarea
                 id="list-description"
                 v-model.trim="createForm.description"
                 rows="3"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               ></textarea>
             </div>
 
-            <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+            <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="submit"
             :disabled="creatingList || !createForm.name.trim()"
@@ -77,7 +77,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
             @click="close"
           >
             Cancel
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
index 5e3dc01..a168221 100644
--- a/assets/vue/components/lists/EditListModal.vue
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -8,25 +8,25 @@
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
     <form class="mt-4 space-y-4" @submit.prevent="submitEditList">
-      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+      <div class="relative bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6">
           <div class="flex justify-between items-center">
-            <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
               Edit List
             </h3>
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="close">
               <BaseIcon name="close" class="w-5 h-5" />
             </button>
           </div>
 
             <div>
-              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <label for="list-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Name</label>
               <input
                 id="list-name"
                 v-model.trim="editForm.name"
                 type="text"
                 required
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
@@ -35,15 +35,15 @@
                 id="list-public"
                 v-model="editForm.public"
                 type="checkbox"
-                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 dark:bg-slate-800 rounded accent-ext-wf1"
               >
-              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+              <label for="list-public" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                 Public
               </label>
             </div>
 
             <div>
-              <label for="list-position" class="block text-sm font-medium text-slate-700">
+              <label for="list-position" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                 List Position (optional)
               </label>
               <input
@@ -52,56 +52,56 @@
                 type="number"
                 min="0"
                 step="1"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
             <div>
-              <label for="list-description" class="block text-sm font-medium text-slate-700">
+              <label for="list-description" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                 Description (optional)
               </label>
               <textarea
                 id="list-description"
                 v-model.trim="editForm.description"
                 rows="3"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               ></textarea>
             </div>
 
             <div>
-              <label for="list-category" class="block text-sm font-medium text-slate-700">Category</label>
+              <label for="list-category" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Category</label>
               <input
                 id="list-category"
                 v-model.trim="editForm.category"
                 type="text"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
             <div>
-              <label for="list-rss" class="block text-sm font-medium text-slate-700">RssFeed url</label>
+              <label for="list-rss" class="block text-sm font-medium text-slate-700 dark:text-slate-200">RssFeed url</label>
               <input
                 id="list-rss"
                 v-model.trim="editForm.rssFeed"
                 type="text"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
             <div>
-              <label for="list-prefix" class="block text-sm font-medium text-slate-700">Subject Prefix</label>
+              <label for="list-prefix" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Subject Prefix</label>
               <input
                 id="list-prefix"
                 v-model.trim="editForm.subjectPrefix"
                 type="text"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               >
             </div>
 
-            <p v-if="editError" class="text-sm text-red-600">{{ editError }}</p>
+            <p v-if="editError" class="text-sm text-red-600 dark:text-red-400">{{ editError }}</p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="submit"
             :disabled="updatingList || !editForm.name.trim()"
@@ -111,7 +111,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
             @click="close"
           >
             Cancel
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index eb939cc..ec12c51 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
-      <h2 class="text-xl font-bold text-slate-900">Mailing Lists</h2>
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
+      <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Mailing Lists</h2>
 
       <button
         type="button"
@@ -18,7 +18,7 @@
 
     <div class="overflow-x-auto">
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">ID</th>
           <th class="px-6 py-4">Name</th>
@@ -26,18 +26,18 @@
           <th class="px-6 py-4 text-right">Actions</th>
         </tr>
         </thead>
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
         <tr
             v-for="list in mailingLists"
             :key="list.id"
-            class="hover:bg-slate-50 transition-colors"
+            class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
         >
-          <td class="px-6 py-4 text-slate-600">{{ list.id }}</td>
-          <td class="px-6 py-4 font-medium text-slate-900">{{ list.name }}</td>
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ list.id }}</td>
+          <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">{{ list.name }}</td>
           <td class="px-6 py-4">
               <span
                   class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                  :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+                  :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
               >
                 {{ isPublic(list) ? 'Yes' : 'No' }}
               </span>
@@ -46,7 +46,7 @@
             <div class="flex flex-wrap justify-end gap-2">
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors"
                   @click="handleDelete(list)"
               >
                 <BaseIcon name="delete" class="w-3.5 h-3.5" />
@@ -55,7 +55,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-500/20 dark:text-emerald-400 dark:hover:bg-emerald-500/10 transition-colors"
                   @click="handleAddSubscriber(list)"
               >
                 <BaseIcon name="addUser" class="w-3.5 h-3.5" />
@@ -64,7 +64,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                   @click="handleEdit(list)"
               >
                 <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -73,7 +73,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors"
                   @click="handleStartCampaign(list)"
               >
                 <BaseIcon name="plane" class="w-3.5 h-3.5" />
@@ -82,7 +82,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                   @click="handleViewMembers(list)"
               >
                 <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -93,31 +93,31 @@
         </tr>
 
         <tr v-if="!isLoading && !loadError && mailingLists.length === 0">
-          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             No mailing lists found.
           </td>
         </tr>
         <tr v-if="isLoading">
-          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             Loading mailing lists...
           </td>
         </tr>
 
         <tr v-else-if="loadError">
-          <td colspan="4" class="px-6 py-8 text-center text-red-600">
+          <td colspan="4" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
             {{ loadError }}
           </td>
         </tr>
 
         <tr v-else-if="mailingLists.length === 0">
-          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             No mailing lists found.
           </td>
         </tr>
         </tbody>
       </table>
 
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
         <div
             v-for="list in mailingLists"
             :key="`mobile-${list.id}`"
@@ -125,13 +125,13 @@
         >
           <div class="flex items-start justify-between gap-3">
             <div>
-              <p class="text-xs uppercase tracking-wide text-slate-500">#{{ list.id }}</p>
-              <p class="font-semibold text-slate-900">{{ list.name }}</p>
+              <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">#{{ list.id }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">{{ list.name }}</p>
             </div>
 
             <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
-                :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+                :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ isPublic(list) ? 'Public' : 'Private' }}
             </span>
@@ -140,7 +140,7 @@
           <div class="grid grid-cols-2 gap-2">
             <button
                 type="button"
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors"
                 @click="handleDelete(list)"
             >
               <BaseIcon name="delete" class="w-3.5 h-3.5" />
@@ -149,7 +149,7 @@
 
             <button
                 type="button"
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-500/20 dark:text-emerald-400 dark:hover:bg-emerald-500/10 transition-colors"
                 @click="handleAddSubscriber(list)"
             >
               <BaseIcon name="addUser" class="w-3.5 h-3.5" />
@@ -158,7 +158,7 @@
 
             <button
                 type="button"
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                 @click="handleEdit(list)"
             >
               <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -167,7 +167,7 @@
 
             <button
                 type="button"
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors"
                 @click="handleStartCampaign(list)"
             >
               <BaseIcon name="plane" class="w-3.5 h-3.5" />
@@ -176,7 +176,7 @@
 
             <button
                 type="button"
-                class="col-span-2 inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="col-span-2 inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                 @click="handleViewMembers(list)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -187,21 +187,21 @@
 
         <div
             v-if="isLoading"
-            class="px-4 py-8 text-center text-slate-500 text-sm"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           Loading mailing lists...
         </div>
 
         <div
             v-else-if="loadError"
-            class="px-4 py-8 text-center text-red-600 text-sm"
+            class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm"
         >
           {{ loadError }}
         </div>
 
         <div
             v-else-if="mailingLists.length === 0"
-            class="px-4 py-8 text-center text-slate-500 text-sm"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           No mailing lists found.
         </div>
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
index cf63d1f..c647dc6 100644
--- a/assets/vue/components/lists/ListSubscribersExportPanel.vue
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
     <div class="p-4 sm:p-6 space-y-5">
       <!-- Date type -->
       <div class="space-y-2">
-        <p class="text-sm font-medium text-slate-800">What date needs to be used:</p>
+        <p class="text-sm font-medium text-slate-800 dark:text-slate-100">What date needs to be used:</p>
 
         <div class="flex flex-wrap gap-x-5 gap-y-2">
           <label
               v-for="option in dateTypeOptions"
               :key="option.value"
-              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer mr-2"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200 cursor-pointer mr-2"
           >
             <input
                 v-model="form.dateType"
                 type="radio"
                 name="list-export-date-type"
-                class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                class="h-4 w-4 border-slate-300 dark:border-slate-600 dark:bg-slate-800 text-ext-wf1 focus:ring-ext-wf1"
                 :value="option.value"
             >
             <span>{{ option.label }}</span>
@@ -26,19 +26,19 @@
       <!-- Date range -->
       <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-3 items-end">
         <div>
-          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-from">
+          <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1" for="list-export-date-from">
             Date From
           </label>
           <input
               id="list-export-date-from"
               v-model="form.dateFrom"
               type="date"
-              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              class="block w-full rounded-md border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
               :disabled="usesAnyDate"
           >
         </div>
 
-        <div class="hidden lg:flex items-center justify-center pb-2 text-slate-400">
+        <div class="hidden lg:flex items-center justify-center pb-2 text-slate-400 dark:text-slate-500">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path
                 fill-rule="evenodd"
@@ -49,14 +49,14 @@
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-to">
+          <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1" for="list-export-date-to">
             Date To
           </label>
           <input
               id="list-export-date-to"
               v-model="form.dateTo"
               type="date"
-              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              class="block w-full rounded-md border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
               :disabled="usesAnyDate"
           >
         </div>
@@ -65,13 +65,13 @@
       <!-- Columns -->
       <div class="space-y-3">
         <div class="flex flex-wrap items-center justify-between gap-3">
-          <p class="text-sm font-medium text-slate-800">Columns</p>
+          <p class="text-sm font-medium text-slate-800 dark:text-slate-100">Columns</p>
 
-          <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-900 cursor-pointer">
+          <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-900 dark:text-slate-100 cursor-pointer">
             <input
                 ref="selectAllColumnsCheckbox"
                 type="checkbox"
-                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
+                class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                 :checked="allColumnsSelected"
                 @change="toggleAllColumns"
             >
@@ -83,12 +83,12 @@
           <label
               v-for="column in columnOptions"
               :key="column.value"
-              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer min-w-0"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200 cursor-pointer min-w-0"
           >
             <input
                 v-model="form.columns"
                 type="checkbox"
-                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 shrink-0 accent-ext-wf1"
+                class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 text-ext-wf1 focus:ring-ext-wf1 shrink-0 accent-ext-wf1"
                 :value="column.value"
             >
             <span class="truncate">{{ column.label }}</span>
@@ -96,11 +96,11 @@
         </div>
       </div>
 
-      <p v-if="exportError" class="text-sm text-red-600">{{ exportError }}</p>
+      <p v-if="exportError" class="text-sm text-red-600 dark:text-red-400">{{ exportError }}</p>
     </div>
 
     <!-- Footer -->
-    <div class="px-4 sm:px-6 py-4 border-t border-slate-200 flex items-center justify-between gap-3">
+    <div class="px-4 sm:px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between gap-3">
       <button
           type="button"
           class="inline-flex items-center justify-center rounded-md border border-transparent bg-ext-wf1 px-5 py-2 text-sm font-medium text-white shadow-sm hover:bg-ext-wf3 disabled:opacity-50 disabled:cursor-not-allowed"
diff --git a/assets/vue/components/public-pages/PublicPageEditor.vue b/assets/vue/components/public-pages/PublicPageEditor.vue
index 99802fe..52f61be 100644
--- a/assets/vue/components/public-pages/PublicPageEditor.vue
+++ b/assets/vue/components/public-pages/PublicPageEditor.vue
@@ -1,13 +1,13 @@
 <template>
   <section class="space-y-6">
-    <header class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-      <h1 class="text-xl font-bold text-slate-900">
+    <header class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
         {{ isEditMode ? 'Edit Subscribe Page' : 'Create Subscribe Page' }}
       </h1>
       <div class="flex gap-2">
         <button
           type="button"
-          class="px-4 py-2 border border-slate-300 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg transition-colors"
+          class="px-4 py-2 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-medium rounded-lg transition-colors"
           @click="goBack"
         >
           Back
@@ -23,19 +23,19 @@
       </div>
     </header>
 
-    <div v-if="isLoading" class="bg-white rounded-xl border border-slate-200 shadow-sm p-8 text-center text-slate-500">
+    <div v-if="isLoading" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-8 text-center text-slate-500 dark:text-slate-400">
       Loading public page data...
     </div>
 
-    <div v-else class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-      <div class="border-b border-slate-200 px-4 pt-4 sm:px-6 sm:pt-6">
+    <div v-else class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+      <div class="border-b border-slate-200 dark:border-slate-700 px-4 pt-4 sm:px-6 sm:pt-6">
         <div class="grid grid-cols-3 gap-2 sm:grid-cols-5">
           <button
             v-for="step in steps"
             :key="step.id"
             type="button"
             class="rounded-t-lg px-2 py-2 text-center text-xs font-semibold transition-colors"
-            :class="currentStep === step.id ? 'bg-ext-wf1 text-white' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'"
+            :class="currentStep === step.id ? 'bg-ext-wf1 text-white' : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600'"
             @click="goToStep(step.id)"
           >
             <span class="block text-base leading-none">{{ step.id }}</span>
@@ -46,71 +46,71 @@
 
       <div class="p-4 sm:p-6 space-y-5">
         <section v-if="currentStep === 1" class="space-y-4">
-          <h2 class="text-lg font-semibold text-slate-900">General settings</h2>
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">General settings</h2>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <label class="space-y-1 md:col-span-2">
-              <span class="text-sm font-medium text-slate-700">Title</span>
-              <input v-model="form.title" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Title</span>
+              <input v-model="form.title" type="text" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Language file to use</span>
-              <select v-model="form.languageFile" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Language file to use</span>
+              <select v-model="form.languageFile" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
                 <option v-for="option in languageOptions" :key="option" :value="option">{{ option }}</option>
               </select>
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Text for button</span>
-              <input v-model="form.button" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Text for button</span>
+              <input v-model="form.button" type="text" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
             </label>
 
             <label class="space-y-1 md:col-span-2">
-              <span class="text-sm font-medium text-slate-700">Intro text</span>
-              <textarea v-model="form.introText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Intro text</span>
+              <textarea v-model="form.introText" rows="3" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Header text</span>
-              <textarea v-model="form.headerText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Header text</span>
+              <textarea v-model="form.headerText" rows="3" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Footer text</span>
-              <textarea v-model="form.footerText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Footer text</span>
+              <textarea v-model="form.footerText" rows="3" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Thank you page text</span>
-              <textarea v-model="form.thankYouPageText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Thank you page text</span>
+              <textarea v-model="form.thankYouPageText" rows="3" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
             </label>
 
             <label class="space-y-1">
-              <span class="text-sm font-medium text-slate-700">Text for successful AJAX subscription</span>
-              <textarea v-model="form.ajaxSuccessText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Text for successful AJAX subscription</span>
+              <textarea v-model="form.ajaxSuccessText" rows="3" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
             </label>
           </div>
         </section>
 
         <section v-else-if="currentStep === 2" class="space-y-4">
-          <h2 class="text-lg font-semibold text-slate-900">Select the lists to offer</h2>
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Select the lists to offer</h2>
           <fieldset class="space-y-2">
-            <legend class="text-sm font-medium text-slate-700">Display list categories</legend>
-            <label class="flex items-center gap-2 text-sm text-slate-700">
-              <input v-model="form.displayListCategories" type="radio" value="0" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+            <legend class="text-sm font-medium text-slate-700 dark:text-slate-200">Display list categories</legend>
+            <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+              <input v-model="form.displayListCategories" type="radio" value="0" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
               Do not show list categories
             </label>
-            <label class="flex items-center gap-2 text-sm text-slate-700">
-              <input v-model="form.displayListCategories" type="radio" value="1" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+            <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+              <input v-model="form.displayListCategories" type="radio" value="1" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
               Display lists in labelled categories
             </label>
           </fieldset>
 
-          <label class="flex items-center gap-2 text-sm text-slate-700">
+          <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
             <input
               :checked="form.noPreselectAnyList"
               type="checkbox"
-              class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+              class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
               @change="toggleNoPreselectAnyList($event)"
             >
             Do not preselect any list
@@ -120,23 +120,23 @@
             <article
               v-for="list in publicLists"
               :key="list.id"
-              class="rounded-lg border border-slate-200 p-3"
+              class="rounded-lg border border-slate-200 dark:border-slate-700 p-3"
             >
               <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <label class="flex items-center gap-2 text-sm font-medium text-slate-800">
+                <label class="flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-slate-100">
                   <input
                     :checked="form.selectedListIds.includes(list.id)"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
                     @change="toggleListSelection(list.id, $event)"
                   >
                   {{ list.name || `List #${list.id}` }}
                 </label>
-                <label class="flex items-center gap-2 text-sm text-slate-700">
+                <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     :checked="form.preselectedListId === list.id"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
                     :disabled="!form.selectedListIds.includes(list.id)"
                     @change="toggleListPreselection(list.id, $event)"
                   >
@@ -148,62 +148,62 @@
         </section>
 
         <section v-else-if="currentStep === 3" class="space-y-4">
-          <h2 class="text-lg font-semibold text-slate-900">Select the attributes to use</h2>
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Select the attributes to use</h2>
           <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:auto-rows-fr">
             <article
               v-for="attribute in attributes"
               :key="attribute.id"
-              class="h-full rounded-lg border border-slate-200 p-4"
+              class="h-full rounded-lg border border-slate-200 dark:border-slate-700 p-4"
             >
               <div class="flex h-full flex-col gap-3">
                 <div class="flex items-start justify-between gap-3">
-                  <p class="text-sm font-semibold text-slate-800">Attribute: {{ attribute.id }}</p>
+                  <p class="text-sm font-semibold text-slate-800 dark:text-slate-100">Attribute: {{ attribute.id }}</p>
                 </div>
 
                 <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                   <div class="min-w-0">
-                    <p class="text-xs text-slate-500">Name</p>
-                    <p class="truncate text-sm text-slate-800" :title="attribute.name">{{ attribute.name }}</p>
+                    <p class="text-xs text-slate-500 dark:text-slate-400">Name</p>
+                    <p class="truncate text-sm text-slate-800 dark:text-slate-100" :title="attribute.name">{{ attribute.name }}</p>
                   </div>
                   <div class="min-w-0">
-                    <p class="text-xs text-slate-500">Type</p>
-                    <p class="truncate text-sm text-slate-800" :title="attribute.type">{{ attribute.type }}</p>
+                    <p class="text-xs text-slate-500 dark:text-slate-400">Type</p>
+                    <p class="truncate text-sm text-slate-800 dark:text-slate-100" :title="attribute.type">{{ attribute.type }}</p>
                   </div>
                   <label class="space-y-1">
-                    <span class="text-sm font-medium text-slate-700">Default value</span>
+                    <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Default value</span>
                     <input
                       :value="attributeState(attribute.id).defaultValue"
                       type="text"
-                      class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                      class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
                       @input="updateAttributeState(attribute.id, 'defaultValue', $event.target.value)"
                     >
                   </label>
                   <label class="space-y-1">
-                    <span class="text-sm font-medium text-slate-700">Order of listing</span>
+                    <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Order of listing</span>
                     <input
                       :value="attributeState(attribute.id).listOrder"
                       type="number"
                       min="0"
-                      class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                      class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
                       @input="updateAttributeState(attribute.id, 'listOrder', $event.target.value)"
                     >
                   </label>
                 </div>
 
-                <label class="mt-auto flex items-center gap-2 pt-1 text-sm text-slate-700">
+                <label class="mt-auto flex items-center gap-2 pt-1 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     :checked="attributeState(attribute.id).required"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
                     @change="updateAttributeState(attribute.id, 'required', $event.target.checked)"
                   >
                   Is this attribute required?
                 </label>
-                <label class="flex items-center gap-2 text-sm text-slate-700">
+                <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     :checked="attributeState(attribute.id).use"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
                     @change="updateAttributeState(attribute.id, 'use', $event.target.checked)"
                   >
                   Use this attribute in the page
@@ -214,41 +214,41 @@
         </section>
 
         <section v-else-if="currentStep === 4" class="space-y-6">
-          <h2 class="text-lg font-semibold text-slate-900">Transaction messages</h2>
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Transaction messages</h2>
           <div class="grid gap-6 lg:grid-cols-3">
             <div class="space-y-3">
-              <h3 class="text-sm font-semibold text-slate-800">Message subscribers receive when they subscribe</h3>
+              <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Message subscribers receive when they subscribe</h3>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Subject</span>
-                <input v-model="form.subscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Subject</span>
+                <input v-model="form.subscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
               </label>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Message</span>
-                <textarea v-model="form.subscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Message</span>
+                <textarea v-model="form.subscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
               </label>
             </div>
 
             <div class="space-y-3">
-              <h3 class="text-sm font-semibold text-slate-800">Message they receive when they confirm their subscription</h3>
+              <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Message they receive when they confirm their subscription</h3>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Subject</span>
-                <input v-model="form.confirmedSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Subject</span>
+                <input v-model="form.confirmedSubject" type="text" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
               </label>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Message</span>
-                <textarea v-model="form.confirmedMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Message</span>
+                <textarea v-model="form.confirmedMessage" rows="6" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
               </label>
             </div>
 
             <div class="space-y-3">
-              <h3 class="text-sm font-semibold text-slate-800">Content of the message they receive when they unsubscribe</h3>
+              <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Content of the message they receive when they unsubscribe</h3>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Subject</span>
-                <input v-model="form.unsubscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Subject</span>
+                <input v-model="form.unsubscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
               </label>
               <label class="space-y-1">
-                <span class="text-sm font-medium text-slate-700">Message</span>
-                <textarea v-model="form.unsubscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+                <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Message</span>
+                <textarea v-model="form.unsubscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
               </label>
             </div>
           </div>
@@ -257,50 +257,50 @@
         <section v-else class="space-y-4">
           <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <fieldset class="space-y-2">
-              <legend class="text-sm font-medium text-slate-700">HTML email choice</legend>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="textonly" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <legend class="text-sm font-medium text-slate-700 dark:text-slate-200">HTML email choice</legend>
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="textonly" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Don't offer choice, default to text
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="htmlonly" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="htmlonly" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Don't offer choice, default to HTML
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="checkfortext" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="checkfortext" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Offer checkbox for text
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="checkforhtml" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="checkforhtml" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Offer checkbox for HTML
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="radiotext" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="radiotext" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Radio buttons, default to text
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.htmlChoice" type="radio" value="radiohtml" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.htmlChoice" type="radio" value="radiohtml" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Radio buttons, default to HTML
               </label>
             </fieldset>
 
             <fieldset class="space-y-2">
-              <legend class="text-sm font-medium text-slate-700">Display email address confirmation field</legend>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.displayEmailConfirmationField" type="radio" value="1" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <legend class="text-sm font-medium text-slate-700 dark:text-slate-200">Display email address confirmation field</legend>
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.displayEmailConfirmationField" type="radio" value="1" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 Yes
               </label>
-              <label class="flex items-center gap-2 text-sm text-slate-700">
-                <input v-model="form.displayEmailConfirmationField" type="radio" value="0" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
+                <input v-model="form.displayEmailConfirmationField" type="radio" value="0" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
                 No
               </label>
             </fieldset>
           </div>
 
-          <h2 class="text-sm font-medium text-slate-700">Owner</h2>
+          <h2 class="text-sm font-medium text-slate-700 dark:text-slate-200">Owner</h2>
           <label class="space-y-1 block">
-            <span class="text-sm font-medium text-slate-700">Select admin</span>
-            <select v-model="form.ownerId" class="w-full md:max-w-md rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+            <span class="text-sm font-medium text-slate-700 dark:text-slate-200">Select admin</span>
+            <select v-model="form.ownerId" class="w-full md:max-w-md rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
               <option value="">No owner</option>
               <option v-for="admin in admins" :key="admin.id" :value="String(admin.id)">
                 {{ admin.loginName || admin.email || `Admin #${admin.id}` }}
diff --git a/assets/vue/components/public-pages/PublicPagesDirectory.vue b/assets/vue/components/public-pages/PublicPagesDirectory.vue
index 365a6f4..00b4fae 100644
--- a/assets/vue/components/public-pages/PublicPagesDirectory.vue
+++ b/assets/vue/components/public-pages/PublicPagesDirectory.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <header class="p-4 sm:p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
-      <h2 class="text-xl font-bold text-slate-900">Subscribe Pages</h2>
+  <section class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <header class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Subscribe Pages</h2>
       <button
         type="button"
         class="inline-flex shrink-0 items-center gap-2 whitespace-nowrap min-w-max px-4 py-2 bg-ext-wf1 text-white text-xs font-bold rounded-lg hover:bg-ext-wf3 transition-shadow shadow-sm shadow-indigo-500/20 disabled:opacity-60"
@@ -18,7 +18,7 @@
 
     <div class="overflow-x-auto">
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">ID</th>
           <th class="px-6 py-4">Title</th>
@@ -28,17 +28,17 @@
           <th class="px-6 py-4 text-right">Actions</th>
         </tr>
         </thead>
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
         <template v-for="page in subscribePages" :key="page.id">
-          <tr class="hover:bg-slate-50 transition-colors">
-            <td class="px-6 py-4 text-slate-600">{{ page.id }}</td>
-            <td class="px-6 py-4 font-medium text-slate-900">{{ page.title || `Subscribe page #${page.id}` }}</td>
-            <td class="px-6 py-4 text-slate-700">{{ page.owner?.loginName || page.owner?.email || 'No owner' }}</td>
+          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ page.id }}</td>
+            <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">{{ page.title || `Subscribe page #${page.id}` }}</td>
+            <td class="px-6 py-4 text-slate-700 dark:text-slate-200">{{ page.owner?.loginName || page.owner?.email || 'No owner' }}</td>
             <td class="px-6 py-4">
               <label class="inline-flex items-center cursor-pointer">
                 <input
                   type="radio"
-                  class="w-4 h-4 text-ext-wf1 border-slate-300 focus:ring-ext-wf2"
+                  class="w-4 h-4 text-ext-wf1 border-slate-300 dark:border-slate-600 focus:ring-ext-wf2"
                   :checked="page.isDefault"
                   :disabled="isRowBusy(page.id)"
                   @change="handleSetDefault(page)"
@@ -49,7 +49,7 @@
               <label class="inline-flex items-center cursor-pointer">
                 <input
                   type="checkbox"
-                  class="w-4 h-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                  class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
                   :checked="page.active"
                   :disabled="isRowBusy(page.id)"
                   @change="handleToggleActive(page, $event)"
@@ -60,7 +60,7 @@
               <div class="flex flex-wrap items-center justify-end gap-2">
                 <button
                     type="button"
-                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors disabled:opacity-60"
+                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors disabled:opacity-60"
                     :disabled="isRowBusy(page.id)"
                     @click="handlePreview(page)"
                 >
@@ -70,7 +70,7 @@
 
                 <button
                     type="button"
-                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-60"
+                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700 transition-colors disabled:opacity-60"
                     :disabled="isRowBusy(page.id)"
                     @click="handleEdit(page)"
                 >
@@ -80,7 +80,7 @@
 
                 <button
                     type="button"
-                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-60"
+                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors disabled:opacity-60"
                     :disabled="isRowBusy(page.id)"
                     @click="handleDelete(page)"
                 >
@@ -93,26 +93,26 @@
         </template>
 
         <tr v-if="isLoading">
-          <td colspan="6" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             Loading subscribe pages...
           </td>
         </tr>
 
         <tr v-else-if="loadError">
-          <td colspan="6" class="px-6 py-8 text-center text-red-600">
+          <td colspan="6" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
             {{ loadError }}
           </td>
         </tr>
 
         <tr v-else-if="subscribePages.length === 0">
-          <td colspan="6" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             No subscribe pages found.
           </td>
         </tr>
         </tbody>
       </table>
 
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
         <article
           v-for="page in subscribePages"
           :key="`mobile-${page.id}`"
@@ -120,20 +120,20 @@
         >
           <div class="flex items-start justify-between gap-3">
             <div>
-              <p class="text-xs uppercase tracking-wide text-slate-500">#{{ page.id }}</p>
-              <p class="font-semibold text-slate-900">{{ page.title || `Subscribe page #${page.id}` }}</p>
-              <p class="text-xs text-slate-500 mt-1">Owner: {{ page.owner?.loginName || page.owner?.email || 'No owner' }}</p>
+              <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">#{{ page.id }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">{{ page.title || `Subscribe page #${page.id}` }}</p>
+              <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Owner: {{ page.owner?.loginName || page.owner?.email || 'No owner' }}</p>
             </div>
-            <div class="text-xs text-slate-500">
+            <div class="text-xs text-slate-500 dark:text-slate-400">
               {{ isRowBusy(page.id) ? 'Updating...' : '' }}
             </div>
           </div>
 
           <div class="flex items-center justify-between gap-3">
-            <label class="inline-flex items-center gap-2 text-xs text-slate-700">
+            <label class="inline-flex items-center gap-2 text-xs text-slate-700 dark:text-slate-200">
               <input
                 type="radio"
-                class="w-4 h-4 text-ext-wf1 border-slate-300 focus:ring-ext-wf2"
+                class="w-4 h-4 text-ext-wf1 border-slate-300 dark:border-slate-600 focus:ring-ext-wf2"
                 :checked="page.isDefault"
                 :disabled="isRowBusy(page.id)"
                 @change="handleSetDefault(page)"
@@ -141,10 +141,10 @@
               Default
             </label>
 
-            <label class="inline-flex items-center gap-2 text-xs text-slate-700">
+            <label class="inline-flex items-center gap-2 text-xs text-slate-700 dark:text-slate-200">
               <input
                 type="checkbox"
-                class="w-4 h-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
                 :checked="page.active"
                 :disabled="isRowBusy(page.id)"
                 @change="handleToggleActive(page, $event)"
@@ -156,7 +156,7 @@
           <div class="grid grid-cols-2 gap-2">
             <button
               type="button"
-              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors disabled:opacity-60"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors disabled:opacity-60"
               :disabled="isRowBusy(page.id)"
               @click="handlePreview(page)"
             >
@@ -166,7 +166,7 @@
 
             <button
               type="button"
-              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-60"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700 transition-colors disabled:opacity-60"
               :disabled="isRowBusy(page.id)"
               @click="handleEdit(page)"
             >
@@ -176,7 +176,7 @@
 
             <button
               type="button"
-              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-60"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors disabled:opacity-60"
               :disabled="isRowBusy(page.id)"
               @click="handleDelete(page)"
             >
@@ -188,21 +188,21 @@
 
         <div
           v-if="isLoading"
-          class="px-4 py-8 text-center text-slate-500 text-sm"
+          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           Loading subscribe pages...
         </div>
 
         <div
           v-else-if="loadError"
-          class="px-4 py-8 text-center text-red-600 text-sm"
+          class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm"
         >
           {{ loadError }}
         </div>
 
         <div
           v-else-if="subscribePages.length === 0"
-          class="px-4 py-8 text-center text-slate-500 text-sm"
+          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
         >
           No subscribe pages found.
         </div>
diff --git a/assets/vue/components/settings/CreateAdminAttributeModal.vue b/assets/vue/components/settings/CreateAdminAttributeModal.vue
index 74cfb5f..7cc9589 100644
--- a/assets/vue/components/settings/CreateAdminAttributeModal.vue
+++ b/assets/vue/components/settings/CreateAdminAttributeModal.vue
@@ -4,14 +4,14 @@
         v-if="isOpen"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
     >
-      <div class="w-full max-w-lg rounded-xl bg-white shadow-xl">
-        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
-          <h2 class="text-lg font-semibold text-slate-900">
+      <div class="w-full max-w-lg rounded-xl bg-white dark:bg-slate-800 shadow-xl">
+        <div class="border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
             Create Attribute
           </h2>
 
           <button
-              class="text-slate-400 hover:text-slate-700"
+              class="text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
               @click="$emit('close')"
           >
             ✕
@@ -23,25 +23,25 @@
             @submit.prevent="submit"
         >
           <div>
-            <label class="block text-sm font-medium text-slate-700 mb-1">
+            <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1">
               Name
             </label>
 
             <input
                 v-model="form.name"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ext-wf1"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ext-wf1"
                 required
             >
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-slate-700 mb-1">
+            <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1">
               Type
             </label>
 
             <select
                 v-model="form.type"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
               <option value="textline">Text</option>
               <option value="hidden">Hidden</option>
@@ -55,14 +55,14 @@
                 v-model="form.required"
             >
 
-            <span class="text-sm text-slate-700">
+            <span class="text-sm text-slate-700 dark:text-slate-200">
               Required
             </span>
           </label>
 
           <div
               v-if="error"
-              class="text-sm text-red-600"
+              class="text-sm text-red-600 dark:text-red-400"
           >
             {{ error }}
           </div>
@@ -70,7 +70,7 @@
           <div class="flex justify-end gap-3 pt-2">
             <button
                 type="button"
-                class="px-4 py-2 rounded-lg border border-slate-300"
+                class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
                 @click="$emit('close')"
             >
               Cancel
diff --git a/assets/vue/components/settings/CreateAdminModal.vue b/assets/vue/components/settings/CreateAdminModal.vue
index a50f4d2..3ee3138 100644
--- a/assets/vue/components/settings/CreateAdminModal.vue
+++ b/assets/vue/components/settings/CreateAdminModal.vue
@@ -8,20 +8,20 @@
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
     <form class="mt-4 space-y-4" @submit.prevent="submitCreateAdmin">
-      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+      <div class="relative bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 space-y-4">
           <div class="flex justify-between items-center">
-            <h3 id="create-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            <h3 id="create-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
               Create New Administrator
             </h3>
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="close">
               <BaseIcon name="close" class="w-3.5 h-3.5" />
             </button>
           </div>
 
           <!-- Login Name -->
           <div>
-            <label for="admin-login-name" class="block text-sm font-medium text-slate-700">Login Name</label>
+            <label for="admin-login-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Login Name</label>
             <input
               id="admin-login-name"
               v-model.trim="form.login_name"
@@ -30,27 +30,27 @@
               minlength="3"
               maxlength="255"
               placeholder="admin"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-            <p class="mt-1 text-xs text-slate-500">Minimum 3 characters</p>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Minimum 3 characters</p>
           </div>
 
           <!-- Email -->
           <div>
-            <label for="admin-email" class="block text-sm font-medium text-slate-700">Email</label>
+            <label for="admin-email" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Email</label>
             <input
               id="admin-email"
               v-model.trim="form.email"
               type="email"
               required
               placeholder="admin@example.com"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
           </div>
 
           <!-- Password -->
           <div>
-            <label for="admin-password" class="block text-sm font-medium text-slate-700">Password</label>
+            <label for="admin-password" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Password</label>
             <input
               id="admin-password"
               v-model="form.password"
@@ -59,9 +59,9 @@
               minlength="6"
               maxlength="255"
               placeholder="••••••••"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-            <p class="mt-1 text-xs text-slate-500">Minimum 6 characters</p>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Minimum 6 characters</p>
           </div>
 
           <!-- Super User -->
@@ -70,25 +70,25 @@
               id="admin-super-user"
               v-model="form.super_user"
               type="checkbox"
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
             >
-            <label for="admin-super-user" class="ml-2 block text-sm text-slate-900">
+            <label for="admin-super-user" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
               Super User / Full Access
             </label>
           </div>
 
           <!-- Privileges Section -->
-          <div v-if="!form.super_user" class="border-t pt-4">
-            <p class="text-sm font-medium text-slate-700 mb-3">Privileges</p>
+          <div v-if="!form.super_user" class="border-t border-slate-200 dark:border-slate-700 pt-4">
+            <p class="text-sm font-medium text-slate-700 dark:text-slate-200 mb-3">Privileges</p>
             <div class="space-y-2">
               <div class="flex items-center">
                 <input
                   id="priv-subscribers"
                   v-model="form.privileges.subscribers"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="priv-subscribers" class="ml-2 block text-sm text-slate-700">
+                <label for="priv-subscribers" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Subscribers Management
                 </label>
               </div>
@@ -98,9 +98,9 @@
                   id="priv-campaigns"
                   v-model="form.privileges.campaigns"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="priv-campaigns" class="ml-2 block text-sm text-slate-700">
+                <label for="priv-campaigns" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Campaigns Management
                 </label>
               </div>
@@ -110,9 +110,9 @@
                   id="priv-statistics"
                   v-model="form.privileges.statistics"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="priv-statistics" class="ml-2 block text-sm text-slate-700">
+                <label for="priv-statistics" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Statistics Viewing
                 </label>
               </div>
@@ -122,19 +122,19 @@
                   id="priv-settings"
                   v-model="form.privileges.settings"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="priv-settings" class="ml-2 block text-sm text-slate-700">
+                <label for="priv-settings" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Settings Management
                 </label>
               </div>
             </div>
           </div>
 
-          <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+          <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="submit"
             :disabled="isCreating || !isFormValid"
@@ -144,7 +144,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
             @click="close"
           >
             Cancel
diff --git a/assets/vue/components/settings/CreateSubscriberAttributeModal.vue b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
index 4fd744f..3587666 100644
--- a/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
+++ b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
@@ -4,14 +4,14 @@
         v-if="isOpen"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
     >
-      <div class="w-full max-w-2xl rounded-xl bg-white shadow-xl">
-        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
-          <h2 class="text-lg font-semibold">
+      <div class="w-full max-w-2xl rounded-xl bg-white dark:bg-slate-800 shadow-xl">
+        <div class="border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
             Create Subscriber Attribute
           </h2>
 
           <button
-              class="text-slate-500 hover:text-slate-800"
+              class="text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
               @click="close"
           >
             ✕
@@ -23,21 +23,21 @@
             @submit.prevent="submit"
         >
           <div>
-            <label class="block mb-1">Name</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Name</label>
 
             <input
                 v-model="form.name"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
                 required
             >
           </div>
 
           <div>
-            <label class="block mb-1">Type</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Type</label>
 
             <select
                 v-model="form.type"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
               <option
                   v-for="type in attributeTypes"
@@ -50,25 +50,25 @@
           </div>
 
           <div>
-            <label class="block mb-1">Order</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Order</label>
 
             <input
                 v-model.number="form.order"
                 type="number"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
           </div>
 
           <div>
-            <label class="block mb-1">Default value</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Default value</label>
 
             <input
                 v-model="form.default_value"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
           </div>
 
-          <label class="flex items-center gap-2">
+          <label class="flex items-center gap-2 text-slate-700 dark:text-slate-200">
             <input
                 v-model="form.required"
                 type="checkbox"
@@ -79,18 +79,18 @@
 
           <div v-if="supportsOptions">
             <div class="flex justify-between items-center mb-3">
-              <strong>Options</strong>
+              <strong class="text-slate-900 dark:text-slate-100">Options</strong>
 
               <button
                   type="button"
-                  class="rounded bg-slate-200 px-3 py-1"
+                  class="rounded bg-slate-200 dark:bg-slate-700 dark:text-slate-100 px-3 py-1"
                   @click="addOption"
               >
                 Add
               </button>
             </div>
 
-            <div class="max-h-64 overflow-y-auto border rounded p-2 space-y-2 pr-2 border-slate-300">
+            <div class="max-h-64 overflow-y-auto border rounded p-2 space-y-2 pr-2 border-slate-300 dark:border-slate-600">
               <div
                   v-for="(option, index) in form.options"
                   :key="index"
@@ -98,14 +98,14 @@
               >
                 <input
                     v-model="option.name"
-                    class="flex-1 rounded border border-slate-300 px-3 py-2"
+                    class="flex-1 rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
                     placeholder="Option"
                 >
 
                 <input
                     v-model.number="option.list_order"
                     type="number"
-                    class="w-24 rounded border border-slate-300 px-3 py-2"
+                    class="w-24 rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
                 >
 
                 <button
@@ -120,7 +120,7 @@
           </div>
           <div
               v-if="error"
-              class="text-red-600"
+              class="text-red-600 dark:text-red-400"
           >
             {{ error }}
           </div>
@@ -128,7 +128,7 @@
           <div class="flex justify-end gap-3">
             <button
                 type="button"
-                class="rounded border px-4 py-2"
+                class="rounded border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 px-4 py-2"
                 @click="close"
             >
               Cancel
diff --git a/assets/vue/components/settings/EditAdminAttributeModal.vue b/assets/vue/components/settings/EditAdminAttributeModal.vue
index 15f7191..aae1ee0 100644
--- a/assets/vue/components/settings/EditAdminAttributeModal.vue
+++ b/assets/vue/components/settings/EditAdminAttributeModal.vue
@@ -4,14 +4,14 @@
         v-if="isOpen && attribute"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
     >
-      <div class="w-full max-w-lg rounded-xl bg-white shadow-xl">
-        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
-          <h2 class="text-lg font-semibold text-slate-900">
+      <div class="w-full max-w-lg rounded-xl bg-white dark:bg-slate-800 shadow-xl">
+        <div class="border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
             Edit Attribute
           </h2>
 
           <button
-              class="text-slate-400 hover:text-slate-700"
+              class="text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
               @click="$emit('close')"
           >
             ✕
@@ -23,25 +23,25 @@
             @submit.prevent="submit"
         >
           <div>
-            <label class="block text-sm font-medium text-slate-700 mb-1">
+            <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1">
               Name
             </label>
 
             <input
                 v-model="form.name"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
                 required
             >
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-slate-700 mb-1">
+            <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1">
               Type
             </label>
 
             <select
                 v-model="form.type"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
               <option value="textline">String</option>
               <option value="hidden">Hidden</option>
@@ -54,14 +54,14 @@
                 v-model="form.required"
             >
 
-            <span class="text-sm text-slate-700">
+            <span class="text-sm text-slate-700 dark:text-slate-200">
               Required
             </span>
           </label>
 
           <div
               v-if="error"
-              class="text-red-600 text-sm"
+              class="text-red-600 dark:text-red-400 text-sm"
           >
             {{ error }}
           </div>
@@ -69,7 +69,7 @@
           <div class="flex justify-end gap-3 pt-2">
             <button
                 type="button"
-                class="px-4 py-2 rounded-lg border border-slate-300"
+                class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
                 @click="$emit('close')"
             >
               Cancel
diff --git a/assets/vue/components/settings/EditAdminModal.vue b/assets/vue/components/settings/EditAdminModal.vue
index f989f61..badf290 100644
--- a/assets/vue/components/settings/EditAdminModal.vue
+++ b/assets/vue/components/settings/EditAdminModal.vue
@@ -8,26 +8,26 @@
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
     <form class="mt-4 space-y-4" @submit.prevent="submitUpdateAdmin">
-      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+      <div class="relative bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 space-y-4">
           <div class="flex justify-between items-center">
-            <h3 id="edit-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            <h3 id="edit-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
               Edit Administrator
             </h3>
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close" aria-label="Close edit administrator modal">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="close" aria-label="Close edit administrator modal">
               <BaseIcon name="close" class="w-3.5 h-3.5" />
             </button>
           </div>
 
           <!-- ID Display -->
-          <div class="bg-slate-50 p-3 rounded-md">
-            <p class="text-xs text-slate-500">Administrator ID</p>
-            <p class="font-mono font-semibold text-slate-900">{{ admin?.id }}</p>
+          <div class="bg-slate-50 dark:bg-slate-900 p-3 rounded-md">
+            <p class="text-xs text-slate-500 dark:text-slate-400">Administrator ID</p>
+            <p class="font-mono font-semibold text-slate-900 dark:text-slate-100">{{ admin?.id }}</p>
           </div>
 
           <!-- Login Name -->
           <div>
-            <label for="edit-admin-login-name" class="block text-sm font-medium text-slate-700">Login Name</label>
+            <label for="edit-admin-login-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Login Name</label>
             <input
               id="edit-admin-login-name"
               v-model.trim="form.loginName"
@@ -35,27 +35,27 @@
               minlength="3"
               maxlength="255"
               placeholder="admin"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current value. Minimum 3 characters.</p>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Leave empty to keep current value. Minimum 3 characters.</p>
           </div>
 
           <!-- Email -->
           <div>
-            <label for="edit-admin-email" class="block text-sm font-medium text-slate-700">Email</label>
+            <label for="edit-admin-email" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Email</label>
             <input
               id="edit-admin-email"
               v-model.trim="form.email"
               type="email"
               placeholder="admin@example.com"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current value.</p>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Leave empty to keep current value.</p>
           </div>
 
           <!-- Password -->
           <div>
-            <label for="edit-admin-password" class="block text-sm font-medium text-slate-700">Password</label>
+            <label for="edit-admin-password" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Password</label>
             <input
               id="edit-admin-password"
               v-model="form.password"
@@ -63,9 +63,9 @@
               minlength="6"
               maxlength="255"
               placeholder="••••••••"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              class="mt-1 block w-full border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current password. Minimum 6 characters if setting new password.</p>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Leave empty to keep current password. Minimum 6 characters if setting new password.</p>
           </div>
 
           <!-- Super User -->
@@ -74,25 +74,25 @@
               id="edit-admin-super-user"
               v-model="form.superUser"
               type="checkbox"
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
             >
-            <label for="edit-admin-super-user" class="ml-2 block text-sm text-slate-900">
+            <label for="edit-admin-super-user" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
               Super User / Full Access
             </label>
           </div>
 
           <!-- Privileges Section -->
-          <div class="border-t pt-4 border-slate-300">
-            <p class="text-sm font-medium text-slate-700 mb-3">Privileges</p>
+          <div class="border-t pt-4 border-slate-300 dark:border-slate-700">
+            <p class="text-sm font-medium text-slate-700 dark:text-slate-200 mb-3">Privileges</p>
             <div class="space-y-2">
               <div class="flex items-center">
                 <input
                   id="edit-priv-subscribers"
                   v-model="form.privileges.subscribers"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="edit-priv-subscribers" class="ml-2 block text-sm text-slate-700">
+                <label for="edit-priv-subscribers" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Subscribers Management
                 </label>
               </div>
@@ -102,9 +102,9 @@
                   id="edit-priv-campaigns"
                   v-model="form.privileges.campaigns"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="edit-priv-campaigns" class="ml-2 block text-sm text-slate-700">
+                <label for="edit-priv-campaigns" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Campaigns Management
                 </label>
               </div>
@@ -114,9 +114,9 @@
                   id="edit-priv-statistics"
                   v-model="form.privileges.statistics"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="edit-priv-statistics" class="ml-2 block text-sm text-slate-700">
+                <label for="edit-priv-statistics" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Statistics Viewing
                 </label>
               </div>
@@ -126,19 +126,19 @@
                   id="edit-priv-settings"
                   v-model="form.privileges.settings"
                   type="checkbox"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                 >
-                <label for="edit-priv-settings" class="ml-2 block text-sm text-slate-700">
+                <label for="edit-priv-settings" class="ml-2 block text-sm text-slate-700 dark:text-slate-200">
                   Settings Management
                 </label>
               </div>
             </div>
           </div>
 
-          <p v-if="updateError" class="text-sm text-red-600">{{ updateError }}</p>
+          <p v-if="updateError" class="text-sm text-red-600 dark:text-red-400">{{ updateError }}</p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="submit"
             :disabled="isUpdating"
@@ -148,7 +148,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
             @click="close"
           >
             Cancel
diff --git a/assets/vue/components/settings/EditSubscriberAttributeModal.vue b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
index 9ff79c1..59bc84c 100644
--- a/assets/vue/components/settings/EditSubscriberAttributeModal.vue
+++ b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
@@ -4,14 +4,14 @@
         v-if="isOpen"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
     >
-      <div class="w-full max-w-2xl rounded-xl bg-white shadow-xl">
-        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
-          <h2 class="text-lg font-semibold">
+      <div class="w-full max-w-2xl rounded-xl bg-white dark:bg-slate-800 shadow-xl">
+        <div class="border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
             Edit Subscriber Attribute
           </h2>
 
           <button
-              class="text-slate-500 hover:text-slate-800"
+              class="text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
               @click="close"
           >
             ✕
@@ -23,21 +23,21 @@
             @submit.prevent="save"
         >
           <div>
-            <label class="block mb-1">Name</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Name</label>
 
             <input
                 v-model="form.name"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
                 required
             >
           </div>
 
           <div>
-            <label class="block mb-1">Type</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Type</label>
 
             <select
                 v-model="form.type"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
               <option
                   v-for="type in attributeTypes"
@@ -50,25 +50,25 @@
           </div>
 
           <div>
-            <label class="block mb-1">Order</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Order</label>
 
             <input
                 v-model.number="form.order"
                 type="number"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
           </div>
 
           <div>
-            <label class="block mb-1">Default value</label>
+            <label class="block mb-1 text-slate-700 dark:text-slate-200">Default value</label>
 
             <input
                 v-model="form.default_value"
-                class="w-full rounded border border-slate-300 px-3 py-2"
+                class="w-full rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2"
             >
           </div>
 
-          <label class="flex items-center gap-2">
+          <label class="flex items-center gap-2 text-slate-700 dark:text-slate-200">
             <input
                 v-model="form.required"
                 type="checkbox"
@@ -78,22 +78,22 @@
 
           <div v-if="supportsOptions">
             <div class="flex justify-between items-center mb-3">
-              <strong>Options</strong>
+              <strong class="text-slate-900 dark:text-slate-100">Options</strong>
 
               <button
                   type="button"
-                  class="rounded bg-slate-200 px-3 py-1"
+                  class="rounded bg-slate-200 dark:bg-slate-700 dark:text-slate-100 px-3 py-1"
                   @click="addOption"
               >
                 Add
               </button>
             </div>
 
-            <div class="max-h-64 overflow-y-auto space-y-2 pr-2 border rounded p-2 border-slate-300">
+            <div class="max-h-64 overflow-y-auto space-y-2 pr-2 border rounded p-2 border-slate-300 dark:border-slate-600">
               <div v-for="(option, index) in form.options" :key="index" class="flex gap-2">
-                <input v-model="option.name" class="flex-1 rounded border border-slate-300 px-3 py-2" placeholder="Option">
+                <input v-model="option.name" class="flex-1 rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2" placeholder="Option">
 
-                <input v-model.number="option.list_order" type="number" class="w-24 rounded border border-slate-300 px-3 py-2">
+                <input v-model.number="option.list_order" type="number" class="w-24 rounded border border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 px-3 py-2">
 
                 <button type="button" class="rounded px-3 " @click="removeOption(index)">
                   <BaseIcon name="delete" class="w-4 h-4 cursor-pointer"/>
@@ -101,14 +101,14 @@
               </div>
             </div>
           </div>
-          <div v-if="error" class="text-red-600">
+          <div v-if="error" class="text-red-600 dark:text-red-400">
             {{ error }}
           </div>
 
           <div class="flex justify-end gap-3">
             <button
                 type="button"
-                class="rounded border px-4 py-2"
+                class="rounded border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 px-4 py-2"
                 @click="close"
             >
               Cancel
diff --git a/assets/vue/components/settings/SettingsActionsPanel.vue b/assets/vue/components/settings/SettingsActionsPanel.vue
index 9fb8eef..8def83d 100644
--- a/assets/vue/components/settings/SettingsActionsPanel.vue
+++ b/assets/vue/components/settings/SettingsActionsPanel.vue
@@ -2,8 +2,8 @@
   <section class="space-y-6">
     <div class="flex items-center justify-between">
       <div>
-        <h2 class="text-xl font-bold text-slate-900">Settings</h2>
-        <p class="mt-0.5 text-sm text-slate-500">Application configuration and admin management</p>
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Settings</h2>
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">Application configuration and admin management</p>
       </div>
     </div>
 
@@ -14,8 +14,8 @@
         type="button"
         class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap shrink-0"
         :class="activeTab === tab.id
-          ? 'bg-white text-slate-900 shadow-sm border border-slate-300'
-          : 'text-slate-500 hover:text-slate-700 hover:bg-white/60'"
+          ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm border border-slate-300 dark:border-slate-600'
+          : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white/60 dark:hover:bg-slate-800/60'"
         @click="setActiveTab(tab.id)"
       >
         <span>{{ tab.label }}</span>
@@ -39,9 +39,9 @@
     </template>
 
     <template v-else>
-      <div class="bg-white rounded-xl border border-slate-200 p-6">
-        <h3 class="text-base font-semibold text-slate-900">{{ currentTabLabel }}</h3>
-        <p class="mt-1 text-sm text-slate-500">This panel is under construction.</p>
+      <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">{{ currentTabLabel }}</h3>
+        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">This panel is under construction.</p>
       </div>
     </template>
   </section>
diff --git a/assets/vue/components/settings/SettingsAdminAttributes.vue b/assets/vue/components/settings/SettingsAdminAttributes.vue
index ae39f0f..e3fb601 100644
--- a/assets/vue/components/settings/SettingsAdminAttributes.vue
+++ b/assets/vue/components/settings/SettingsAdminAttributes.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
       <div>
-        <h2 class="text-xl font-bold text-slate-900">
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">
           Admin Attributes
         </h2>
 
-        <p class="mt-0.5 text-sm text-slate-500">
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
           Manage administrator attribute definitions
         </p>
       </div>
@@ -40,7 +40,7 @@
       <!-- Desktop -->
 
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">ID</th>
           <th class="px-6 py-4">Name</th>
@@ -50,22 +50,22 @@
         </tr>
         </thead>
 
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
 
         <tr
             v-for="attribute in attributes"
             :key="attribute.id"
-            class="hover:bg-slate-50 transition-colors"
+            class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
         >
-          <td class="px-6 py-4 text-slate-600">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
             {{ attribute.id }}
           </td>
 
-          <td class="px-6 py-4 font-medium text-slate-900">
+          <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">
             {{ attribute.name }}
           </td>
 
-          <td class="px-6 py-4 text-slate-600">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
             {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
           </td>
 
@@ -73,8 +73,8 @@
             <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium"
                 :class="attribute.required
-                ? 'bg-red-100 text-red-700'
-                : 'bg-slate-100 text-slate-600'"
+                ? 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
+                : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ attribute.required ? 'Required' : 'Optional' }}
             </span>
@@ -84,7 +84,7 @@
             <div class="flex justify-end gap-2">
 
               <button
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
                   @click="handleEdit(attribute)"
               >
                 <BaseIcon name="edit" class="w-3.5 h-3.5"/>
@@ -92,7 +92,7 @@
               </button>
 
               <button
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10"
                   @click="handleDelete(attribute)"
               >
                 <BaseIcon name="delete" class="w-3.5 h-3.5"/>
@@ -104,19 +104,19 @@
         </tr>
 
         <tr v-if="!isLoading && !loadError && attributes.length===0">
-          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             No attributes found.
           </td>
         </tr>
 
         <tr v-if="isLoading">
-          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             Loading attributes...
           </td>
         </tr>
 
         <tr v-else-if="loadError">
-          <td colspan="5" class="px-6 py-8 text-center text-red-600">
+          <td colspan="5" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
             {{ loadError }}
           </td>
         </tr>
@@ -126,7 +126,7 @@
 
       <!-- Mobile -->
 
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
 
         <div
             v-for="attribute in attributes"
@@ -136,15 +136,15 @@
           <div class="flex justify-between items-start">
 
             <div>
-              <p class="text-xs text-slate-500">
+              <p class="text-xs text-slate-500 dark:text-slate-400">
                 #{{ attribute.id }}
               </p>
 
-              <p class="font-semibold text-slate-900">
+              <p class="font-semibold text-slate-900 dark:text-slate-100">
                 {{ attribute.name }}
               </p>
 
-              <p class="text-sm text-slate-500">
+              <p class="text-sm text-slate-500 dark:text-slate-400">
                 {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
               </p>
             </div>
@@ -152,8 +152,8 @@
             <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium"
                 :class="attribute.required
-                ? 'bg-red-100 text-red-700'
-                : 'bg-slate-100 text-slate-600'"
+                ? 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
+                : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ attribute.required ? 'Required' : 'Optional' }}
             </span>
@@ -163,7 +163,7 @@
           <div class="grid grid-cols-2 gap-2">
 
             <button
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200"
                 @click="handleEdit(attribute)"
             >
               <BaseIcon name="edit" class="w-3.5 h-3.5"/>
@@ -171,7 +171,7 @@
             </button>
 
             <button
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400"
                 @click="handleDelete(attribute)"
             >
               <BaseIcon name="delete" class="w-3.5 h-3.5"/>
@@ -183,21 +183,21 @@
 
         <div
             v-if="isLoading"
-            class="px-4 py-8 text-center text-slate-500"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
         >
           Loading attributes...
         </div>
 
         <div
             v-else-if="loadError"
-            class="px-4 py-8 text-center text-red-600"
+            class="px-4 py-8 text-center text-red-600 dark:text-red-400"
         >
           {{ loadError }}
         </div>
 
         <div
             v-else-if="attributes.length===0"
-            class="px-4 py-8 text-center text-slate-500"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
         >
           No attributes found.
         </div>
diff --git a/assets/vue/components/settings/SettingsAdmins.vue b/assets/vue/components/settings/SettingsAdmins.vue
index bc02460..33e16aa 100644
--- a/assets/vue/components/settings/SettingsAdmins.vue
+++ b/assets/vue/components/settings/SettingsAdmins.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
       <div>
-        <h2 class="text-xl font-bold text-slate-900">Administrators</h2>
-        <p class="mt-0.5 text-sm text-slate-500">Manage administrator accounts and permissions</p>
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Administrators</h2>
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">Manage administrator accounts and permissions</p>
       </div>
 
       <button
@@ -22,7 +22,7 @@
     <div class="overflow-x-auto">
       <!-- Desktop Table View -->
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
           <tr>
             <th class="px-6 py-4">ID</th>
             <th class="px-6 py-4">Login Name</th>
@@ -32,31 +32,31 @@
             <th class="px-6 py-4 text-right">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
           <tr
             v-for="admin in admins"
             :key="admin.id"
-            class="hover:bg-slate-50 transition-colors"
+            class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
           >
-            <td class="px-6 py-4 text-slate-600">{{ admin.id }}</td>
-            <td class="px-6 py-4 font-medium text-slate-900">{{ admin.loginName }}</td>
-            <td class="px-6 py-4 text-slate-600">{{ admin.email }}</td>
+            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ admin.id }}</td>
+            <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">{{ admin.loginName }}</td>
+            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ admin.email }}</td>
             <td class="px-6 py-4">
               <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="admin.superUser ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'"
+                :class="admin.superUser ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
               >
                 {{ admin.superUser ? 'Yes' : 'No' }}
               </span>
             </td>
-            <td class="px-6 py-4 text-slate-600 text-xs">
+            <td class="px-6 py-4 text-slate-600 dark:text-slate-300 text-xs">
               {{ formatDate(admin.createdAt) }}
             </td>
             <td class="px-6 py-4">
               <div class="flex flex-wrap justify-end gap-2">
                 <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                   @click="handleEdit(admin)"
                 >
                   <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -65,7 +65,7 @@
 
                 <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                   @click="handleDelete(admin)"
                 >
                   <BaseIcon name="delete" class="w-3.5 h-3.5" />
@@ -76,18 +76,18 @@
           </tr>
 
           <tr v-if="!isLoading && !loadError && admins.length === 0">
-            <td colspan="6" class="px-6 py-8 text-center text-slate-500">
+            <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
               No administrators found. Create one to get started.
             </td>
           </tr>
           <tr v-if="isLoading">
-            <td colspan="6" class="px-6 py-8 text-center text-slate-500">
+            <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
               Loading administrators...
             </td>
           </tr>
 
           <tr v-else-if="loadError">
-            <td colspan="6" class="px-6 py-8 text-center text-red-600">
+            <td colspan="6" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
               {{ loadError }}
             </td>
           </tr>
@@ -95,7 +95,7 @@
       </table>
 
       <!-- Mobile Card View -->
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
         <div
           v-for="admin in admins"
           :key="`mobile-${admin.id}`"
@@ -103,27 +103,27 @@
         >
           <div class="flex items-start justify-between gap-3">
             <div>
-              <p class="text-xs uppercase tracking-wide text-slate-500">#{{ admin.id }}</p>
-              <p class="font-semibold text-slate-900">{{ admin.loginName }}</p>
-              <p class="text-sm text-slate-500">{{ admin.email }}</p>
+              <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">#{{ admin.id }}</p>
+              <p class="font-semibold text-slate-900 dark:text-slate-100">{{ admin.loginName }}</p>
+              <p class="text-sm text-slate-500 dark:text-slate-400">{{ admin.email }}</p>
             </div>
 
             <span
               class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
-              :class="admin.superUser ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'"
+              :class="admin.superUser ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ admin.superUser ? 'Super' : 'User' }}
             </span>
           </div>
 
-          <p class="text-xs text-slate-500">
+          <p class="text-xs text-slate-500 dark:text-slate-400">
             Created: {{ formatDate(admin.createdAt) }}
           </p>
 
           <div class="grid grid-cols-2 gap-2">
             <button
               type="button"
-              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
               @click="handleEdit(admin)"
             >
               <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -132,7 +132,7 @@
 
             <button
               type="button"
-              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
               @click="handleDelete(admin)"
             >
               <BaseIcon name="delete" class="w-3.5 h-3.5" />
@@ -141,15 +141,15 @@
           </div>
         </div>
 
-        <div v-if="isLoading" class="px-4 py-8 text-center text-slate-500 text-sm">
+        <div v-if="isLoading" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
           Loading administrators...
         </div>
 
-        <div v-else-if="loadError" class="px-4 py-8 text-center text-red-600 text-sm">
+        <div v-else-if="loadError" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">
           {{ loadError }}
         </div>
 
-        <div v-else-if="admins.length === 0" class="px-4 py-8 text-center text-slate-500 text-sm">
+        <div v-else-if="admins.length === 0" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
           No administrators found. Create one to get started.
         </div>
       </div>
diff --git a/assets/vue/components/settings/SettingsConfigs.vue b/assets/vue/components/settings/SettingsConfigs.vue
index 5b6be46..6bf8a7b 100644
--- a/assets/vue/components/settings/SettingsConfigs.vue
+++ b/assets/vue/components/settings/SettingsConfigs.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-6">
       <div class="flex items-center justify-between">
         <div>
-          <h3 class="text-lg font-semibold text-slate-900">Configs</h3>
+          <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Configs</h3>
         </div>
 
         <div class="flex items-center gap-2">
@@ -11,7 +11,7 @@
             v-model="filter"
             type="search"
             placeholder="Search keys..."
-            class="rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+            class="rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
           />
           <button
             class="px-3 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors"
@@ -24,17 +24,17 @@
       </div>
     </div>
 
-    <section class="bg-white rounded-lg border border-slate-200 shadow-sm p-4 mt-4">
-      <div v-if="isLoading" class="text-sm text-slate-500">Loading configuration keys...</div>
-      <div v-else-if="error" class="text-sm text-red-600">{{ error }}</div>
+    <section class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm p-4 mt-4">
+      <div v-if="isLoading" class="text-sm text-slate-500 dark:text-slate-400">Loading configuration keys...</div>
+      <div v-else-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</div>
       <div v-else-if="filtered.length" class="overflow-x-auto">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div v-for="item in filtered" :key="item.key" class="border border-slate-200 rounded-lg p-3">
+          <div v-for="item in filtered" :key="item.key" class="border border-slate-200 dark:border-slate-700 rounded-lg p-3">
             <div class="mb-2">
-              <div class="text-sm font-semibold text-slate-800">
+              <div class="text-sm font-semibold text-slate-800 dark:text-slate-100">
                 {{ item.key }}
               </div>
-              <div v-if="item.description" class="text-xs text-slate-500">
+              <div v-if="item.description" class="text-xs text-slate-500 dark:text-slate-400">
                 {{ item.description }}
               </div>
             </div>
@@ -43,7 +43,7 @@
                 v-model="edited[item.key]"
                 :aria-label="`Value for ${item.key}`"
                 :readonly="!item.editable"
-                :class="['w-full px-2 py-1.5 text-sm rounded border',item.editable ? 'border-slate-300 focus:ring-1 focus:ring-ext-wf1 focus:border-ext-wf1' : 'border-slate-200 bg-slate-100 text-slate-500 cursor-not-allowed']"
+                :class="['w-full px-2 py-1.5 text-sm rounded border',item.editable ? 'border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 focus:ring-1 focus:ring-ext-wf1 focus:border-ext-wf1' : 'border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-500 cursor-not-allowed']"
             />
 
             <div class="flex gap-2 mt-2">
@@ -55,22 +55,22 @@
                 {{ saving[item.key] ? '...' : 'Save' }}
               </button>
 
-              <button class="px-2 py-1 text-xs rounded border border-slate-300" @click="reset(item.key)">
+              <button class="px-2 py-1 text-xs rounded border border-slate-300 dark:border-slate-600 dark:text-slate-200" @click="reset(item.key)">
                 Reset
               </button>
             </div>
 
-            <p v-if="errors[item.key]" class="text-[11px] text-red-500 mt-1">
+            <p v-if="errors[item.key]" class="text-[11px] text-red-500 dark:text-red-400 mt-1">
               {{ errors[item.key] }}
             </p>
 
-            <p v-if="success[item.key]" class="text-[11px] text-green-500 mt-1">
+            <p v-if="success[item.key]" class="text-[11px] text-green-500 dark:text-green-400 mt-1">
               {{ success[item.key] }}
             </p>
           </div>
         </div>
       </div>
-      <div v-else class="text-sm text-slate-500">No configuration keys found.</div>
+      <div v-else class="text-sm text-slate-500 dark:text-slate-400">No configuration keys found.</div>
     </section>
   </div>
 </template>
diff --git a/assets/vue/components/settings/SettingsSubscriberAttributes.vue b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
index 30a8cfe..506c179 100644
--- a/assets/vue/components/settings/SettingsSubscriberAttributes.vue
+++ b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
       <div>
-        <h2 class="text-xl font-bold text-slate-900">
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">
           Subscriber Attributes
         </h2>
 
-        <p class="mt-0.5 text-sm text-slate-500">
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
           Manage subscriber attribute definitions
         </p>
       </div>
@@ -40,7 +40,7 @@
       <!-- Desktop -->
 
       <table class="w-full text-left text-sm hidden md:table">
-        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">ID</th>
           <th class="px-6 py-4">Name</th>
@@ -50,22 +50,22 @@
         </tr>
         </thead>
 
-        <tbody class="divide-y divide-slate-200">
+        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
 
         <tr
             v-for="attribute in attributes"
             :key="attribute.id"
-            class="hover:bg-slate-50 transition-colors"
+            class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
         >
-          <td class="px-6 py-4 text-slate-600">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
             {{ attribute.id }}
           </td>
 
-          <td class="px-6 py-4 font-medium text-slate-900">
+          <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">
             {{ attribute.name }}
           </td>
 
-          <td class="px-6 py-4 text-slate-600">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
             {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
           </td>
 
@@ -73,8 +73,8 @@
             <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium"
                 :class="attribute.required
-                ? 'bg-red-100 text-red-700'
-                : 'bg-slate-100 text-slate-600'"
+                ? 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
+                : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ attribute.required ? 'Required' : 'Optional' }}
             </span>
@@ -84,7 +84,7 @@
             <div class="flex justify-end gap-2">
 
               <button
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
                   @click="handleEdit(attribute)"
               >
                 <BaseIcon name="edit" class="w-3.5 h-3.5"/>
@@ -92,7 +92,7 @@
               </button>
 
               <button
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10"
                   @click="handleDelete(attribute)"
               >
                 <BaseIcon name="delete" class="w-3.5 h-3.5"/>
@@ -104,19 +104,19 @@
         </tr>
 
         <tr v-if="!isLoading && !loadError && attributes.length===0">
-          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             No attributes found.
           </td>
         </tr>
 
         <tr v-if="isLoading">
-          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
             Loading attributes...
           </td>
         </tr>
 
         <tr v-else-if="loadError">
-          <td colspan="5" class="px-6 py-8 text-center text-red-600">
+          <td colspan="5" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
             {{ loadError }}
           </td>
         </tr>
@@ -126,7 +126,7 @@
 
       <!-- Mobile -->
 
-      <div class="block md:hidden divide-y divide-slate-100">
+      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
 
         <div
             v-for="attribute in attributes"
@@ -136,15 +136,15 @@
           <div class="flex justify-between items-start">
 
             <div>
-              <p class="text-xs text-slate-500">
+              <p class="text-xs text-slate-500 dark:text-slate-400">
                 #{{ attribute.id }}
               </p>
 
-              <p class="font-semibold text-slate-900">
+              <p class="font-semibold text-slate-900 dark:text-slate-100">
                 {{ attribute.name }}
               </p>
 
-              <p class="text-sm text-slate-500">
+              <p class="text-sm text-slate-500 dark:text-slate-400">
                 {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
               </p>
             </div>
@@ -152,8 +152,8 @@
             <span
                 class="px-2.5 py-0.5 rounded-full text-xs font-medium"
                 :class="attribute.required
-                ? 'bg-red-100 text-red-700'
-                : 'bg-slate-100 text-slate-600'"
+                ? 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
+                : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'"
             >
               {{ attribute.required ? 'Required' : 'Optional' }}
             </span>
@@ -163,7 +163,7 @@
           <div class="grid grid-cols-2 gap-2">
 
             <button
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200"
                 @click="handleEdit(attribute)"
             >
               <BaseIcon name="edit" class="w-3.5 h-3.5"/>
@@ -171,7 +171,7 @@
             </button>
 
             <button
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400"
                 @click="handleDelete(attribute)"
             >
               <BaseIcon name="delete" class="w-3.5 h-3.5"/>
@@ -183,21 +183,21 @@
 
         <div
             v-if="isLoading"
-            class="px-4 py-8 text-center text-slate-500"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
         >
           Loading attributes...
         </div>
 
         <div
             v-else-if="loadError"
-            class="px-4 py-8 text-center text-red-600"
+            class="px-4 py-8 text-center text-red-600 dark:text-red-400"
         >
           {{ loadError }}
         </div>
 
         <div
             v-else-if="attributes.length===0"
-            class="px-4 py-8 text-center text-slate-500"
+            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
         >
           No attributes found.
         </div>
diff --git a/assets/vue/components/sidebar/AppSidebar.vue b/assets/vue/components/sidebar/AppSidebar.vue
index ca607e5..57dc69d 100644
--- a/assets/vue/components/sidebar/AppSidebar.vue
+++ b/assets/vue/components/sidebar/AppSidebar.vue
@@ -8,14 +8,14 @@
     ></div>
 
     <aside
-        class="fixed inset-y-0 left-0 bg-white border-r border-slate-200 w-64 z-50 transform transition-transform duration-300 lg:inset-auto lg:sticky lg:top-0 lg:self-start lg:h-screen lg:translate-x-0"
+        class="fixed inset-y-0 left-0 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700 w-64 z-50 transform transition-transform duration-300 lg:inset-auto lg:sticky lg:top-0 lg:self-start lg:h-screen lg:translate-x-0"
         :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full'"
     >
       <div class="flex flex-col h-full">
-        <div class="h-16 flex items-center justify-between px-6 border-b border-slate-100">
+        <div class="h-16 flex items-center justify-between px-6 border-b border-slate-100 dark:border-slate-700">
           <SidebarLogo />
           <button
-              class="lg:hidden p-1.5 hover:bg-slate-100 rounded-lg text-slate-400"
+              class="lg:hidden p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg text-slate-400"
               @click="closeSidebar"
           >
             <BaseIcon name="close" />
diff --git a/assets/vue/components/sidebar/SidebarLogo.vue b/assets/vue/components/sidebar/SidebarLogo.vue
index ef1a1f9..c3a2230 100644
--- a/assets/vue/components/sidebar/SidebarLogo.vue
+++ b/assets/vue/components/sidebar/SidebarLogo.vue
@@ -8,7 +8,7 @@
           style="object-fit: contain;"
       />
     </div>
-    <span class="font-bold text-lg tracking-tight text-slate-900">phpList <span class="text-ext-wf1">4</span></span>
+    <span class="font-bold text-lg tracking-tight text-slate-900 dark:text-slate-100">phpList <span class="text-ext-wf1">4</span></span>
   </RouterLink>
 </template>
 
diff --git a/assets/vue/components/sidebar/SidebarNavItem.vue b/assets/vue/components/sidebar/SidebarNavItem.vue
index 3f26473..5ab58a3 100644
--- a/assets/vue/components/sidebar/SidebarNavItem.vue
+++ b/assets/vue/components/sidebar/SidebarNavItem.vue
@@ -8,7 +8,7 @@
         :href="href"
         @click="(e) => { navigate(e); closeSidebar(); }"
         class="w-full flex items-center justify-between px-4 py-2.5 rounded-lg transition-colors group no-underline"
-        :class="isActive ? 'bg-indigo-50 text-ext-wf3' : 'text-slate-600 hover:bg-slate-50'"
+        :class="isActive ? 'bg-indigo-50 dark:bg-indigo-500/10 text-ext-wf3 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'"
     >
       <div class="flex items-center gap-3">
         <BaseIcon
diff --git a/assets/vue/components/sidebar/SidebarNavSection.vue b/assets/vue/components/sidebar/SidebarNavSection.vue
index e9497f4..54c73a2 100644
--- a/assets/vue/components/sidebar/SidebarNavSection.vue
+++ b/assets/vue/components/sidebar/SidebarNavSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-1">
-    <p class="px-4 mt-8 mb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest first:mt-0">{{ label }}</p>
+    <p class="px-4 mt-8 mb-2 text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest first:mt-0">{{ label }}</p>
 
     <SidebarNavItem
         v-for="item in items"
diff --git a/assets/vue/components/subscribers/ImportResult.vue b/assets/vue/components/subscribers/ImportResult.vue
index f3eb82f..8522af6 100644
--- a/assets/vue/components/subscribers/ImportResult.vue
+++ b/assets/vue/components/subscribers/ImportResult.vue
@@ -4,11 +4,11 @@
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
     @click.self="$emit('close')"
 >
-<div class="w-full max-w-md rounded-xl bg-white shadow-xl border border-slate-200">
-  <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
-    <h3 class="text-base font-semibold text-slate-900">Import Result</h3>
+<div class="w-full max-w-md rounded-xl bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-slate-700">
+  <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Import Result</h3>
     <button
-        class="text-slate-400 hover:text-slate-600 transition-colors"
+        class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
         @click="$emit('close')"
     >
       <BaseIcon name="x" class="w-5 h-5" />
@@ -17,25 +17,25 @@
 
   <div class="p-4 space-y-4">
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg bg-slate-50 border border-slate-200 p-3">
-        <div class="text-xs text-slate-500">Imported</div>
-        <div class="text-lg font-semibold text-slate-900">
+      <div class="rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-3">
+        <div class="text-xs text-slate-500 dark:text-slate-400">Imported</div>
+        <div class="text-lg font-semibold text-slate-900 dark:text-slate-100">
           {{ importResult.imported }}
         </div>
       </div>
 
-      <div class="rounded-lg bg-slate-50 border border-slate-200 p-3">
-        <div class="text-xs text-slate-500">Skipped</div>
-        <div class="text-lg font-semibold text-slate-900">
+      <div class="rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-3">
+        <div class="text-xs text-slate-500 dark:text-slate-400">Skipped</div>
+        <div class="text-lg font-semibold text-slate-900 dark:text-slate-100">
           {{ importResult.skipped }}
         </div>
       </div>
     </div>
 
     <div v-if="importResult.errors && importResult.errors.length">
-      <div class="text-sm font-medium text-slate-900 mb-2">Errors</div>
-      <div class="max-h-48 overflow-y-auto rounded-lg border border-red-200 bg-red-50 p-3">
-        <ul class="space-y-1 text-sm text-red-700">
+      <div class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-2">Errors</div>
+      <div class="max-h-48 overflow-y-auto rounded-lg border border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10 p-3">
+        <ul class="space-y-1 text-sm text-red-700 dark:text-red-400">
           <li v-for="(error, index) in importResult.errors" :key="index">
             {{ error }}
           </li>
@@ -43,12 +43,12 @@
       </div>
     </div>
 
-    <div v-else class="text-sm text-green-700 rounded-lg border border-green-200 bg-green-50 p-3">
+    <div v-else class="text-sm text-green-700 dark:text-green-400 rounded-lg border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10 p-3">
       Import completed without errors.
     </div>
   </div>
 
-  <div class="px-4 py-3 border-t border-slate-200 flex justify-end">
+  <div class="px-4 py-3 border-t border-slate-200 dark:border-slate-700 flex justify-end">
     <button
         class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors"
         @click="$emit('close')"
diff --git a/assets/vue/components/subscribers/SubscriberDirectory.vue b/assets/vue/components/subscribers/SubscriberDirectory.vue
index 1bfe5ef..f1ec0aa 100644
--- a/assets/vue/components/subscribers/SubscriberDirectory.vue
+++ b/assets/vue/components/subscribers/SubscriberDirectory.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="bg-white rounded-xl border border-slate-200  shadow-sm overflow-hidden">
-    <div class="p-4 sm:p-6 border-b border-slate-200 ">
+  <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700  shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 ">
       <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
-        <h2 class="text-xl font-bold text-slate-900 ">Subscribers</h2>
+        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100 ">Subscribers</h2>
         <div class="flex flex-col sm:flex-row gap-2 w-full lg:w-auto">
           <div class="flex gap-2 flex-1 sm:w-[400px]">
             <div class="relative flex-1">
-              <BaseIcon name="search" class="absolute top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+              <BaseIcon name="search" class="absolute top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500" />
               <input
                 v-model="searchQuery"
                 placeholder="Search subscribers..."
-                class="w-full pl-9 pr-4 py-2 text-sm border border-slate-200  rounded-lg bg-slate-50 focus:ring-2 focus:ring-blue-500 outline-none transition-all"
+                class="w-full pl-9 pr-4 py-2 text-sm border border-slate-200 dark:border-slate-600  rounded-lg bg-slate-50 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none transition-all"
                 type="text"
                 @input="handleSearch"
               >
             </div>
             <select
                 v-model="searchColumn"
-                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-slate-50 focus:ring-2 focus:ring-blue-500 outline-none transition-all"
+                class="px-3 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none transition-all"
                 @change="handleSearch"
             >
               <option v-for="col in searchColumns" :key="col.id" :value="col.id">
@@ -46,7 +46,7 @@
         </div>
       </div>
     </div>
-    <div class="px-6 py-4 bg-slate-50/50 border-b border-slate-200">
+    <div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700">
       <SubscriberFilters @filter-change="handleFilterChange" />
     </div>
     <SubscriberTable :subscribers="subscribers" @view="openSubscriberModal" />
@@ -61,20 +61,20 @@
       :import-result="importResult"
       @close="isImportResultOpen = false"
     />
-    <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500">
+    <div class="p-4 sm:p-6 border-t border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
       <div class="text-center sm:text-left">
-        Showing <span class="font-medium text-slate-900">{{ subscribers.length }}</span> of <span class="font-medium text-slate-900">{{ pagination.total }}</span> subscribers
+        Showing <span class="font-medium text-slate-900 dark:text-slate-100">{{ subscribers.length }}</span> of <span class="font-medium text-slate-900 dark:text-slate-100">{{ pagination.total }}</span> subscribers
       </div>
       <div class="flex gap-2 w-full sm:w-auto">
         <button
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-50"
           :disabled="pagination.isFirstPage"
           @click="previousPage"
         >
           Previous
         </button>
         <button
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-50"
           :disabled="!pagination.hasMore"
           @click="nextPage"
         >
diff --git a/assets/vue/components/subscribers/SubscriberFilters.vue b/assets/vue/components/subscribers/SubscriberFilters.vue
index b29293c..7a437bc 100644
--- a/assets/vue/components/subscribers/SubscriberFilters.vue
+++ b/assets/vue/components/subscribers/SubscriberFilters.vue
@@ -7,7 +7,7 @@
         :class="[
         activeFilter === filter.id
           ? 'bg-ext-wf2 text-ext-wf1'
-          : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+          : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
       ]"
         @click="toggleFilter(filter.id)"
     >
diff --git a/assets/vue/components/subscribers/SubscriberModal.vue b/assets/vue/components/subscribers/SubscriberModal.vue
index 8d6c6a7..071cca3 100644
--- a/assets/vue/components/subscribers/SubscriberModal.vue
+++ b/assets/vue/components/subscribers/SubscriberModal.vue
@@ -4,15 +4,15 @@
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
 
     <!-- Modal Content -->
-    <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+    <div class="relative bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
               <div class="flex justify-between items-center">
-                <h3 class="text-lg leading-6 font-medium text-slate-900" id="modal-title">
+                <h3 class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100" id="modal-title">
                   Subscriber Details ID: {{ subscriber?.id ?? '' }}
                 </h3>
-                <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+                <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-300" @click="close">
                   <BaseIcon name="close" class="w-5 h-5" />
                 </button>
               </div>
@@ -20,28 +20,28 @@
                 <div v-if="loading" class="flex justify-center py-8">
                   <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                 </div>
-                <div v-else-if="error" class="text-red-500 text-sm">
+                <div v-else-if="error" class="text-red-500 dark:text-red-400 text-sm">
                   {{ error }}
                 </div>
                 <form v-else @submit.prevent="save" class="space-y-4">
                   <div>
-                    <label class="block text-sm font-medium text-slate-700">Email</label>
+                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200">Email</label>
                     <input
                       v-model="formData.email"
                       type="email"
                       required
-                      class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                      class="mt-1 block w-full border border-slate-300 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                     >
                   </div>
-                  
+
                   <div class="flex items-center">
                     <input
                       id="confirmed"
                       v-model="formData.confirmed"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                     >
-                    <label for="confirmed" class="ml-2 block text-sm text-slate-900">
+                    <label for="confirmed" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                       Confirmed
                     </label>
                   </div>
@@ -51,9 +51,9 @@
                       id="blacklisted"
                       v-model="formData.blacklisted"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                     >
-                    <label for="blacklisted" class="ml-2 block text-sm text-slate-900">
+                    <label for="blacklisted" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                       Blacklisted
                     </label>
                   </div>
@@ -63,9 +63,9 @@
                       id="htmlEmail"
                       v-model="formData.htmlEmail"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                     >
-                    <label for="htmlEmail" class="ml-2 block text-sm text-slate-900">
+                    <label for="htmlEmail" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                       HTML Email
                     </label>
                   </div>
@@ -75,30 +75,30 @@
                       id="disabled"
                       v-model="formData.disabled"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded accent-ext-wf1"
                     >
-                    <label for="disabled" class="ml-2 block text-sm text-slate-900">
+                    <label for="disabled" class="ml-2 block text-sm text-slate-900 dark:text-slate-100">
                       Disabled
                     </label>
                   </div>
-                  
+
                   <div v-if="subscriber && subscriber.subscribedLists" class="mt-4">
-                    <label class="block text-sm font-medium text-slate-700 mb-2">Subscribed Lists</label>
+                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-2">Subscribed Lists</label>
                     <div class="flex flex-wrap gap-2">
                       <span
                         v-for="list in subscriber.subscribedLists"
                         :key="list.id"
-                        class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700"
+                        class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                       >
                         {{ list.name }}
                       </span>
-                      <span v-if="!subscriber.subscribedLists.length" class="text-xs text-slate-500">
+                      <span v-if="!subscriber.subscribedLists.length" class="text-xs text-slate-500 dark:text-slate-400">
                         No lists
                       </span>
                     </div>
                   </div>
 
-                  <div v-if="subscriber" class="text-xs text-slate-400 mt-4 pt-4 border-t border-slate-100">
+                  <div v-if="subscriber" class="text-xs text-slate-400 dark:text-slate-500 mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                     <p>Created: {{ subscriber.createdAt }}</p>
                     <p>Updated: {{ subscriber.updatedAt === '' ? '-' : subscriber.updatedAt }}</p>
                     <p>Bounce Count: {{ subscriber.bounceCount }}</p>
@@ -110,7 +110,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="button"
             :disabled="loading || saving"
@@ -121,7 +121,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
             @click="close"
           >
             Cancel
diff --git a/assets/vue/components/subscribers/SubscriberTable.vue b/assets/vue/components/subscribers/SubscriberTable.vue
index 8899b8a..b4656ef 100644
--- a/assets/vue/components/subscribers/SubscriberTable.vue
+++ b/assets/vue/components/subscribers/SubscriberTable.vue
@@ -2,7 +2,7 @@
   <div class="overflow-x-auto">
     <!-- Desktop Table -->
     <table class="w-full text-left text-sm hidden md:table">
-      <thead class="bg-slate-50 text-slate-500 font-medium">
+      <thead class="bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-medium">
         <tr>
           <th class="px-6 py-4">ID</th>
           <th class="px-6 py-4">Email</th>
@@ -12,16 +12,16 @@
           <th class="px-6 py-4 text-right">Actions</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-slate-200">
+      <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
         <tr
           v-for="subscriber in props.subscribers"
           :key="subscriber.id"
-          class="hover:bg-slate-50  transition-colors group"
+          class="hover:bg-slate-50 dark:hover:bg-slate-800  transition-colors group"
         >
-          <td class="px-6 py-4 text-slate-600 ">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300 ">
             {{ subscriber.id }}
           </td>
-          <td class="px-6 py-4 font-mono text-sm text-slate-900">
+          <td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-slate-100">
             {{ subscriber.email }}
           </td>
           <td class="px-6 py-4">
@@ -34,22 +34,22 @@
               </span>
               <span
                 v-if="subscriber.blacklisted"
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700"
+                class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400"
               >
                 Blacklisted
               </span>
             </div>
           </td>
-          <td class="px-6 py-4 text-right text-slate-600">
+          <td class="px-6 py-4 text-right text-slate-600 dark:text-slate-300">
             {{ subscriber.listCount }}
           </td>
-          <td class="px-6 py-4 text-slate-600">
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
             {{ subscriber.createdAt }}
           </td>
           <td class="px-6 py-4 text-right">
             <button
               type="button"
-              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
               @click="emit('view', subscriber.id)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -61,14 +61,14 @@
     </table>
 
     <!-- Mobile Card View -->
-    <div class="block md:hidden divide-y divide-slate-100">
+    <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
       <div
         v-for="subscriber in props.subscribers"
         :key="subscriber.id"
-        class="p-4 hover:bg-slate-50 transition-colors"
+        class="p-4 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
       >
         <div class="flex justify-between items-center mb-1">
-          <span class="font-medium text-slate-900 truncate max-w-[180px]">
+          <span class="font-medium text-slate-900 dark:text-slate-100 truncate max-w-[180px]">
             {{ subscriber.email.split('@')[0] }}
           </span>
           <div class="flex items-center gap-2">
@@ -80,13 +80,13 @@
             </span>
             <span
               v-if="subscriber.blacklisted"
-              class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700"
+              class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400"
             >
               blacklisted
             </span>
             <button
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                 @click="emit('view', subscriber.id)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -95,8 +95,8 @@
           </div>
         </div>
         <div class="flex flex-col gap-1">
-          <p class="text-xs font-mono text-slate-500 break-all">{{ subscriber.email }}</p>
-          <div class="flex items-center gap-4 mt-2 text-[11px] text-slate-400 uppercase tracking-tight">
+          <p class="text-xs font-mono text-slate-500 dark:text-slate-400 break-all">{{ subscriber.email }}</p>
+          <div class="flex items-center gap-4 mt-2 text-[11px] text-slate-400 dark:text-slate-500 uppercase tracking-tight">
             <span class="flex items-center gap-1">
               <BaseIcon name="list" class="w-3 h-3" />
               {{ subscriber.listCount }} Lists
@@ -116,10 +116,10 @@ import BaseIcon from '../base/BaseIcon.vue'
 import { inject } from 'vue'
 
 const statusClasses = {
-  active: 'bg-emerald-100 text-emerald-700',
-  unconfirmed: 'bg-amber-100 text-amber-700',
-  bounced: 'bg-red-100 text-red-700',
-  unsubscribed: 'bg-slate-100 text-slate-600',
+  active: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
+  unconfirmed: 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
+  bounced: 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400',
+  unsubscribed: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
 }
 
 const props = defineProps({
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index b6e514e..9c303fc 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -1,10 +1,10 @@
 <template>
-  <section class="bg-white rounded-xl border border-slate-200 shadow-sm">
-    <header class="p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
-      <h2 class="text-xl font-bold text-slate-900">Templates</h2>
+  <section class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
+    <header class="p-6 border-b border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Templates</h2>
       <div class="flex gap-2">
         <button
-          class="px-4 py-2 border border-slate-300 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
+          class="px-4 py-2 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
           type="button"
           @click="openDefaultTemplateModal"
         >
@@ -25,15 +25,15 @@
     </header>
 
     <div class="p-6">
-      <div v-if="isLoading" class="py-12 text-center text-slate-500">
+      <div v-if="isLoading" class="py-12 text-center text-slate-500 dark:text-slate-400">
         Loading templates...
       </div>
 
-      <div v-else-if="errorMessage" class="py-12 text-center text-red-600">
+      <div v-else-if="errorMessage" class="py-12 text-center text-red-600 dark:text-red-400">
         {{ errorMessage }}
       </div>
 
-      <div v-else-if="templates.length === 0" class="py-12 text-center text-slate-500">
+      <div v-else-if="templates.length === 0" class="py-12 text-center text-slate-500 dark:text-slate-400">
         No templates found.
       </div>
 
@@ -41,9 +41,9 @@
         <article
           v-for="templateItem in templates"
           :key="templateItem.id"
-          class="border border-slate-200 rounded-lg overflow-hidden hover:shadow-lg transition-all"
+          class="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden hover:shadow-lg transition-all"
         >
-          <div class="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-6xl">
+          <div class="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center text-6xl">
             <img
               :src="getTemplateImage(templateItem)"
               :alt="`T#${templateItem.id}`"
@@ -52,19 +52,19 @@
           </div>
 
           <div class="p-4">
-            <h3 class="font-semibold text-slate-900 mb-1">{{ templateItem.title || `Template #${templateItem.id}` }}</h3>
-            <p class="text-xs text-slate-500 mb-3">
+            <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-1">{{ templateItem.title || `Template #${templateItem.id}` }}</h3>
+            <p class="text-xs text-slate-500 dark:text-slate-400 mb-3">
               {{ getTemplateType(templateItem) }}
             </p>
 
-            <div class="flex justify-between items-center text-xs text-slate-400">
+            <div class="flex justify-between items-center text-xs text-slate-400 dark:text-slate-500">
               <span>ID {{ templateItem.id }}</span>
               <span>Order {{ templateItem.listOrder ?? '-' }}</span>
             </div>
 
             <div class="mt-4 grid grid-cols-2 gap-2">
               <button
-                  class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                   type="button"
                   @click="goToEditTemplate(templateItem.id)"
               >
@@ -73,7 +73,7 @@
               </button>
 
               <button
-                class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                 type="button"
                 aria-label="Delete template"
                 @click="deleteTemplate(templateItem.id)"
@@ -102,27 +102,27 @@
     ></div>
 
     <form class="w-full sm:max-w-lg z-10" @submit.prevent="submitCreateFromDefault">
-      <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+      <div class="bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all">
+        <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 space-y-4">
           <div class="flex justify-between items-center">
-            <h3 id="default-template-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            <h3 id="default-template-modal-title" class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100">
               Add Template From Default
             </h3>
-            <button type="button" class="text-slate-400 hover:text-slate-500" @click="closeDefaultTemplateModal">
+            <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400" @click="closeDefaultTemplateModal">
               <BaseIcon name="close" class="w-5 h-5" />
             </button>
           </div>
 
-          <div v-if="isDefaultTemplatesLoading" class="text-sm text-slate-500">
+          <div v-if="isDefaultTemplatesLoading" class="text-sm text-slate-500 dark:text-slate-400">
             Loading default templates...
           </div>
 
           <div v-else class="space-y-2">
-            <label for="default-template-select" class="block text-sm font-medium text-slate-700">Default template</label>
+            <label for="default-template-select" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Default template</label>
             <select
               id="default-template-select"
               v-model="selectedDefaultTemplateKey"
-              class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+              class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
               :disabled="isCreatingFromDefault || defaultTemplates.length === 0"
             >
               <option value="">Select a default template</option>
@@ -137,21 +137,21 @@
 
             <p
               v-if="selectedDefaultTemplateDescription"
-              class="text-xs text-slate-500"
+              class="text-xs text-slate-500 dark:text-slate-400"
             >
               {{ selectedDefaultTemplateDescription }}
             </p>
           </div>
 
-          <p v-if="defaultTemplatesError" class="text-sm text-red-600">
+          <p v-if="defaultTemplatesError" class="text-sm text-red-600 dark:text-red-400">
             {{ defaultTemplatesError }}
           </p>
-          <p v-if="createFromDefaultError" class="text-sm text-red-600">
+          <p v-if="createFromDefaultError" class="text-sm text-red-600 dark:text-red-400">
             {{ createFromDefaultError }}
           </p>
         </div>
 
-        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
           <button
             type="submit"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none sm:w-auto sm:text-sm disabled:opacity-50"
@@ -161,7 +161,7 @@
           </button>
           <button
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
             :disabled="isCreatingFromDefault"
             @click="closeDefaultTemplateModal"
           >
diff --git a/assets/vue/composables/useDarkMode.js b/assets/vue/composables/useDarkMode.js
new file mode 100644
index 0000000..d2f56d4
--- /dev/null
+++ b/assets/vue/composables/useDarkMode.js
@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+
+const STORAGE_KEY = 'color-scheme'
+
+const isDark = ref(false)
+
+const applyDarkMode = (value) => {
+  isDark.value = value
+  document.documentElement.classList.toggle('dark', value)
+}
+
+const initDarkMode = () => {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  applyDarkMode(stored ? stored === 'dark' : prefersDark)
+}
+
+export function useDarkMode() {
+  const toggleDarkMode = () => {
+    applyDarkMode(!isDark.value)
+    localStorage.setItem(STORAGE_KEY, isDark.value ? 'dark' : 'light')
+  }
+
+  return {
+    isDark,
+    initDarkMode,
+    toggleDarkMode,
+  }
+}
\ No newline at end of file
diff --git a/assets/vue/layouts/AdminLayout.vue b/assets/vue/layouts/AdminLayout.vue
index 7fbacd8..fc4c847 100644
--- a/assets/vue/layouts/AdminLayout.vue
+++ b/assets/vue/layouts/AdminLayout.vue
@@ -2,10 +2,10 @@
 <template>
   <div class="flex flex-col flex-1">
     <!-- Topbar -->
-    <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 shrink-0 sticky top-0 z-30">
+    <header class="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between px-6 shrink-0 sticky top-0 z-30">
       <div class="flex items-center gap-4 flex-1">
         <button
-            class="lg:hidden p-2 -ml-2 text-slate-500 hover:text-slate-600 transition-colors"
+            class="lg:hidden p-2 -ml-2 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
             @click="openSidebar"
         >
           <BaseIcon name="menu" />
@@ -15,44 +15,44 @@
           <input
               v-model.trim="searchQuery"
               placeholder="Search subscribers, campaigns..."
-              class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
+              class="w-full pl-10 pr-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
               type="text"
               @focus="showSearchResults = true"
               @input="handleSearchInput"
           >
           <div
               v-if="showSearchResults && searchQuery"
-              class="absolute top-full mt-2 w-full rounded-lg border border-slate-200 bg-white shadow-lg z-50 overflow-hidden"
+              class="absolute top-full mt-2 w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-lg z-50 overflow-hidden"
           >
-            <div v-if="isSearching" class="px-3 py-2 text-sm text-slate-500">
+            <div v-if="isSearching" class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
               Searching...
             </div>
             <template v-else>
-              <div v-if="searchResults.length" class="px-3 py-1 text-xs font-semibold text-slate-500 bg-slate-50 border-b border-slate-100">
+              <div v-if="searchResults.length" class="px-3 py-1 text-xs font-semibold text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-900 border-b border-slate-100 dark:border-slate-700">
                 Subscribers
               </div>
               <a
                   v-for="subscriber in searchResults"
                   :key="subscriber.id"
                   :href="`/subscribers?findColumn=email&findValue=${encodeURIComponent(subscriber.email)}`"
-                  class="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 border-b last:border-b-0 border-slate-100"
+                  class="block px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 border-b last:border-b-0 border-slate-100 dark:border-slate-700"
               >
                 {{ subscriber.email }}
               </a>
 
-              <div v-if="campaignResults.length" class="px-3 py-1 text-xs font-semibold text-slate-500 bg-slate-50 border-y border-slate-100">
+              <div v-if="campaignResults.length" class="px-3 py-1 text-xs font-semibold text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-900 border-y border-slate-100 dark:border-slate-700">
                 Campaigns
               </div>
               <a
                   v-for="campaign in campaignResults"
                   :key="`campaign-${campaign.id}`"
                   :href="`/campaigns/${campaign.id}/edit`"
-                  class="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 border-b last:border-b-0 border-slate-100"
+                  class="block px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 border-b last:border-b-0 border-slate-100 dark:border-slate-700"
               >
                 {{ campaign.messageContent?.subject || `Campaign #${campaign.id}` }}
               </a>
 
-              <div v-if="!searchResults.length && !campaignResults.length" class="px-3 py-2 text-sm text-slate-500">
+              <div v-if="!searchResults.length && !campaignResults.length" class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                 No results found
               </div>
             </template>
@@ -73,6 +73,15 @@
           Create Campaign
         </RouterLink>
 
+        <button
+            type="button"
+            class="p-2 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+            :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            @click="toggleDarkMode"
+        >
+          <BaseIcon :name="isDark ? 'sun' : 'moon'" />
+        </button>
+
         <!-- User dropdown -->
         <div class="relative">
           <div
@@ -80,10 +89,10 @@
               @click="toggleDropdown"
           >
             <div class="flex flex-col items-end hidden sm:flex">
-              <span class="text-sm font-bold text-slate-800 leading-none">
+              <span class="text-sm font-bold text-slate-800 dark:text-slate-100 leading-none">
                 {{ adminData.login_name || 'Admin User' }}
               </span>
-              <span class="text-[10px] text-slate-500 mt-0.5">
+              <span class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">
                 {{ adminData.super_user ? 'Super Admin' : 'Administrator' }}
               </span>
             </div>
@@ -94,11 +103,11 @@
           <!-- Dropdown -->
           <div
               v-if="dropdownOpen"
-              class="absolute right-0 mt-2 w-40 bg-white border border-slate-200 rounded-lg shadow-lg py-1 z-50"
+              class="absolute right-0 mt-2 w-40 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg py-1 z-50"
           >
             <a
                 href="/logout"
-                class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
+                class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
             >
               Logout
             </a>
@@ -117,12 +126,14 @@
 <script setup>
 import BaseIcon from "../components/base/BaseIcon.vue";
 import { useSidebar } from "../composables/useSidebar";
+import { useDarkMode } from "../composables/useDarkMode";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { RouterLink } from 'vue-router';
 import { Requests } from "@tatevikgr/rest-api-client";
 import { backendFetch, subscribersClient, campaignClient } from "../api";
 
 const { openSidebar } = useSidebar();
+const { isDark, toggleDarkMode } = useDarkMode();
 
 const adminData = ref({});
 const dropdownOpen = ref(false);
diff --git a/assets/vue/views/AnalyticsView.vue b/assets/vue/views/AnalyticsView.vue
index 025c5a7..e7643cc 100644
--- a/assets/vue/views/AnalyticsView.vue
+++ b/assets/vue/views/AnalyticsView.vue
@@ -3,7 +3,7 @@
     <div class="space-y-6 animate-in fade-in duration-300">
       <div
         v-if="errorMessage"
-        class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400"
         role="alert"
       >
         {{ errorMessage }}
@@ -12,17 +12,17 @@
       <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <BaseCard v-for="metric in metrics" :key="metric.id" class="h-full">
           <header class="mb-2 flex items-center gap-3">
-            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600">
+            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300">
               <BaseIcon :name="metric.icon" />
             </span>
-            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
               {{ metric.label }}
             </p>
           </header>
-          <p class="mb-1 text-2xl font-bold text-slate-900">
+          <p class="mb-1 text-2xl font-bold text-slate-900 dark:text-slate-100">
             {{ metric.value }}
           </p>
-          <p class="text-sm text-slate-500">
+          <p class="text-sm text-slate-500 dark:text-slate-400">
             {{ metric.description }}
           </p>
         </BaseCard>
@@ -32,21 +32,21 @@
         <BaseCard class="xl:col-span-2">
           <header class="mb-4 flex items-start justify-between gap-3">
             <div>
-              <h2 class="text-sm font-bold text-slate-900">Campaign performance</h2>
-              <p class="mt-1 text-xs text-slate-500">
+              <h2 class="text-sm font-bold text-slate-900 dark:text-slate-100">Campaign performance</h2>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                 Top campaigns ranked by unique views and click volume.
               </p>
             </div>
-            <p class="text-xs text-slate-400">
+            <p class="text-xs text-slate-400 dark:text-slate-500">
               {{ formatCount(campaignStatistics.length) }} campaigns
             </p>
           </header>
 
-          <div v-if="isLoading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+          <div v-if="isLoading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500 dark:text-slate-400">
             Loading analytics...
           </div>
 
-          <div v-else-if="hasLoaded && campaignChartItems.length === 0" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+          <div v-else-if="hasLoaded && campaignChartItems.length === 0" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500 dark:text-slate-400">
             No campaign statistics found.
           </div>
 
@@ -62,41 +62,41 @@
 
         <BaseCard>
           <header class="mb-4">
-            <h2 class="text-sm font-bold text-slate-900">Domain confirmation</h2>
-            <p class="mt-1 text-xs text-slate-500">
+            <h2 class="text-sm font-bold text-slate-900 dark:text-slate-100">Domain confirmation</h2>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
               Confirmation coverage for the configured sending domain.
             </p>
           </header>
 
           <div v-if="domainConfirmation" class="space-y-4">
             <div>
-              <p class="text-xs uppercase tracking-wide text-slate-500">Domain</p>
-              <p class="mt-1 break-all text-sm font-semibold text-slate-900">
+              <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Domain</p>
+              <p class="mt-1 break-all text-sm font-semibold text-slate-900 dark:text-slate-100">
                 {{ domainConfirmation.domain || 'Unknown domain' }}
               </p>
             </div>
 
             <div class="grid grid-cols-2 gap-3 text-sm">
-              <div class="rounded-lg bg-emerald-50 px-3 py-3">
-                <p class="text-xs uppercase tracking-wide text-emerald-700">Confirmed</p>
-                <p class="mt-1 text-lg font-bold text-emerald-900">
+              <div class="rounded-lg bg-emerald-50 dark:bg-emerald-500/10 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-emerald-700 dark:text-emerald-400">Confirmed</p>
+                <p class="mt-1 text-lg font-bold text-emerald-900 dark:text-emerald-400">
                   {{ formatCount(domainConfirmation.confirmed) }}
                 </p>
               </div>
-              <div class="rounded-lg bg-amber-50 px-3 py-3">
-                <p class="text-xs uppercase tracking-wide text-amber-700">Unconfirmed</p>
-                <p class="mt-1 text-lg font-bold text-amber-900">
+              <div class="rounded-lg bg-amber-50 dark:bg-amber-500/10 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-amber-700 dark:text-amber-400">Unconfirmed</p>
+                <p class="mt-1 text-lg font-bold text-amber-900 dark:text-amber-400">
                   {{ formatCount(domainConfirmation.unconfirmed) }}
                 </p>
               </div>
             </div>
 
             <div>
-              <div class="mb-2 flex items-center justify-between text-xs text-slate-500">
+              <div class="mb-2 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                 <span>Confirmation rate</span>
                 <span>{{ formatPercentage(domainConfirmation.confirmationRate) }}</span>
               </div>
-              <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+              <div class="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-700">
                 <div
                   class="h-full rounded-full bg-emerald-500"
                   :style="{ width: `${clampPercentage(domainConfirmation.confirmationRate)}%` }"
@@ -105,22 +105,22 @@
             </div>
 
             <dl class="grid grid-cols-3 gap-3 text-sm">
-              <div class="rounded-lg bg-slate-50 px-3 py-3">
-                <dt class="text-xs uppercase tracking-wide text-slate-500">Total</dt>
-                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.total) }}</dd>
+              <div class="rounded-lg bg-slate-50 dark:bg-slate-800 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Total</dt>
+                <dd class="mt-1 font-semibold text-slate-900 dark:text-slate-100">{{ formatCount(domainConfirmation.total) }}</dd>
               </div>
-              <div class="rounded-lg bg-slate-50 px-3 py-3">
-                <dt class="text-xs uppercase tracking-wide text-slate-500">Confirmed</dt>
-                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.confirmed) }}</dd>
+              <div class="rounded-lg bg-slate-50 dark:bg-slate-800 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Confirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900 dark:text-slate-100">{{ formatCount(domainConfirmation.confirmed) }}</dd>
               </div>
-              <div class="rounded-lg bg-slate-50 px-3 py-3">
-                <dt class="text-xs uppercase tracking-wide text-slate-500">Unconfirmed</dt>
-                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.unconfirmed) }}</dd>
+              <div class="rounded-lg bg-slate-50 dark:bg-slate-800 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Unconfirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900 dark:text-slate-100">{{ formatCount(domainConfirmation.unconfirmed) }}</dd>
               </div>
             </dl>
           </div>
 
-          <div v-else-if="hasLoaded" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+          <div v-else-if="hasLoaded" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500 dark:text-slate-400">
             No confirmation data found.
           </div>
         </BaseCard>
@@ -130,35 +130,35 @@
         <BaseCard>
           <header class="mb-4 flex items-start justify-between gap-3">
             <div>
-              <h2 class="text-sm font-bold text-slate-900">Top domains</h2>
-              <p class="mt-1 text-xs text-slate-500">
+              <h2 class="text-sm font-bold text-slate-900 dark:text-slate-100">Top domains</h2>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                 Subscriber counts by email domain.
               </p>
             </div>
-            <p class="text-xs text-slate-400">
+            <p class="text-xs text-slate-400 dark:text-slate-500">
               {{ formatCount(topDomains.length) }} domains
             </p>
           </header>
 
           <div class="overflow-x-auto">
             <table class="w-full text-left text-sm">
-              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <thead class="bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                 <tr>
                   <th class="px-4 py-3">Domain</th>
                   <th class="px-4 py-3 text-right">Subscribers</th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-slate-100">
+              <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                 <tr v-if="hasLoaded && topDomains.length === 0">
-                  <td colspan="2" class="px-4 py-6 text-center text-slate-500">
+                  <td colspan="2" class="px-4 py-6 text-center text-slate-500 dark:text-slate-400">
                     No domain statistics found.
                   </td>
                 </tr>
                 <tr v-for="domain in topDomains" :key="domain.domain">
-                  <td class="px-4 py-3 font-medium text-slate-900">
+                  <td class="px-4 py-3 font-medium text-slate-900 dark:text-slate-100">
                     {{ domain.domain || 'Unknown domain' }}
                   </td>
-                  <td class="px-4 py-3 text-right text-slate-700">
+                  <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                     {{ formatCount(domain.subscribers) }}
                   </td>
                 </tr>
@@ -170,39 +170,39 @@
         <BaseCard>
           <header class="mb-4 flex items-start justify-between gap-3">
             <div>
-              <h2 class="text-sm font-bold text-slate-900">Top local parts</h2>
-              <p class="mt-1 text-xs text-slate-500">
+              <h2 class="text-sm font-bold text-slate-900 dark:text-slate-100">Top local parts</h2>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                 Most common subscriber usernames.
               </p>
             </div>
-            <p class="text-xs text-slate-400">
+            <p class="text-xs text-slate-400 dark:text-slate-500">
               {{ formatCount(topLocalParts.length) }} values
             </p>
           </header>
 
           <div class="overflow-x-auto">
             <table class="w-full text-left text-sm">
-              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <thead class="bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                 <tr>
                   <th class="px-4 py-3">Local part</th>
                   <th class="px-4 py-3 text-right">Count</th>
                   <th class="px-4 py-3 text-right">Share</th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-slate-100">
+              <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                 <tr v-if="hasLoaded && topLocalParts.length === 0">
-                  <td colspan="3" class="px-4 py-6 text-center text-slate-500">
+                  <td colspan="3" class="px-4 py-6 text-center text-slate-500 dark:text-slate-400">
                     No local-part statistics found.
                   </td>
                 </tr>
                 <tr v-for="part in topLocalParts" :key="part.localPart">
-                  <td class="px-4 py-3 font-medium text-slate-900">
+                  <td class="px-4 py-3 font-medium text-slate-900 dark:text-slate-100">
                     {{ part.localPart || 'Unknown' }}
                   </td>
-                  <td class="px-4 py-3 text-right text-slate-700">
+                  <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                     {{ formatCount(part.count) }}
                   </td>
-                  <td class="px-4 py-3 text-right text-slate-600">
+                  <td class="px-4 py-3 text-right text-slate-600 dark:text-slate-300">
                     {{ formatPercentage(part.percentage) }}
                   </td>
                 </tr>
@@ -215,19 +215,19 @@
       <BaseCard>
         <header class="mb-4 flex items-start justify-between gap-3">
           <div>
-            <h2 class="text-sm font-bold text-slate-900">Campaign breakdown</h2>
-            <p class="mt-1 text-xs text-slate-500">
+            <h2 class="text-sm font-bold text-slate-900 dark:text-slate-100">Campaign breakdown</h2>
+            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
               Open and click activity by campaign.
             </p>
           </div>
-          <p class="text-xs text-slate-400">
+          <p class="text-xs text-slate-400 dark:text-slate-500">
             {{ formatCount(campaignStatistics.length) }} records
           </p>
         </header>
 
         <div class="overflow-x-auto">
           <table class="w-full text-left text-sm">
-            <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+            <thead class="bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
               <tr>
                 <th class="px-4 py-3">Campaign</th>
                 <th class="px-4 py-3 text-right">Sent</th>
@@ -237,34 +237,34 @@
                 <th class="px-4 py-3 text-right">Bounce</th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-slate-100">
+            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
               <tr v-if="hasLoaded && campaignStatistics.length === 0">
-                <td colspan="6" class="px-4 py-6 text-center text-slate-500">
+                <td colspan="6" class="px-4 py-6 text-center text-slate-500 dark:text-slate-400">
                   No campaign statistics found.
                 </td>
               </tr>
               <tr v-for="campaign in campaignStatistics" :key="campaign.campaignId">
                 <td class="px-4 py-3">
-                  <div class="font-medium text-slate-900">
+                  <div class="font-medium text-slate-900 dark:text-slate-100">
                     {{ campaign.subject || `Campaign #${campaign.campaignId}` }}
                   </div>
-                  <div class="mt-1 text-xs text-slate-500">
+                  <div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                     Sent {{ campaign.dateSent ? formatDate(campaign.dateSent) : 'unknown date' }}
                   </div>
                 </td>
-                <td class="px-4 py-3 text-right text-slate-700">
+                <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                   {{ formatCount(campaign.sent) }}
                 </td>
-                <td class="px-4 py-3 text-right text-slate-700">
+                <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                   {{ formatCount(campaign.uniqueViews) }}
                 </td>
-                <td class="px-4 py-3 text-right text-slate-700">
+                <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                   {{ formatPercentage(calcRate(campaign.uniqueViews, campaign.sent)) }}
                 </td>
-                <td class="px-4 py-3 text-right text-slate-700">
+                <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                   {{ formatCount(campaign.totalClicks) }}
                 </td>
-                <td class="px-4 py-3 text-right text-slate-700">
+                <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">
                   {{ formatCount(campaign.bounces) }}
                 </td>
               </tr>
@@ -283,6 +283,9 @@ import AdminLayout from '../layouts/AdminLayout.vue'
 import BaseCard from '../components/base/BaseCard.vue'
 import BaseIcon from '../components/base/BaseIcon.vue'
 import { statisticsClient } from '../api'
+import { useDarkMode } from '../composables/useDarkMode'
+
+const { isDark } = useDarkMode()
 
 const isLoading = ref(false)
 const hasLoaded = ref(false)
@@ -422,7 +425,7 @@ const campaignChartOptions = computed(() => ({
   },
   colors: ['#2563eb', '#10b981'],
   grid: {
-    borderColor: '#e5e7eb',
+    borderColor: isDark.value ? '#334155' : '#e5e7eb',
     strokeDashArray: 4,
   },
   legend: {
@@ -430,6 +433,9 @@ const campaignChartOptions = computed(() => ({
     position: 'top',
     horizontalAlign: 'right',
     fontSize: '12px',
+    labels: {
+      colors: isDark.value ? '#cbd5e1' : '#374151',
+    },
   },
   xaxis: {
     categories: campaignChartItems.value.map((item) => item.subject || `#${item.campaignId}`),
@@ -454,6 +460,7 @@ const campaignChartOptions = computed(() => ({
   tooltip: {
     shared: true,
     intersect: false,
+    theme: isDark.value ? 'dark' : 'light',
     y: {
       formatter: (value) => new Intl.NumberFormat().format(Number(value) || 0),
     },
diff --git a/assets/vue/views/CampaignEditView.vue b/assets/vue/views/CampaignEditView.vue
index 9f39a4c..fc56c21 100644
--- a/assets/vue/views/CampaignEditView.vue
+++ b/assets/vue/views/CampaignEditView.vue
@@ -1,32 +1,32 @@
 <template>
   <AdminLayout>
     <div class="space-y-6 animate-in fade-in duration-300">
-      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+      <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-6">
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div>
-            <p class="text-xs uppercase tracking-wide text-slate-500">Campaign</p>
-            <h2 class="text-xl font-bold text-slate-900">{{ pageTitle }}</h2>
+            <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Campaign</p>
+            <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">{{ pageTitle }}</h2>
           </div>
 
           <RouterLink
             to="/campaigns"
-            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800"
           >
             Back to Campaigns
           </RouterLink>
         </div>
       </div>
 
-      <div v-if="isLoading" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+      <div v-if="isLoading" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 text-sm text-slate-500 dark:text-slate-400 shadow-sm">
         Loading campaign...
       </div>
 
-      <div v-else-if="loadError" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-red-600 shadow-sm">
+      <div v-else-if="loadError" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 text-sm text-red-600 dark:text-red-400 shadow-sm">
         {{ loadError }}
       </div>
 
-      <div v-else class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-        <div class="border-b border-slate-200 px-4 pt-4 sm:px-6 sm:pt-6">
+      <div v-else class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="border-b border-slate-200 dark:border-slate-700 px-4 pt-4 sm:px-6 sm:pt-6">
           <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
             <button
               v-for="step in steps"
@@ -35,7 +35,7 @@
               class="rounded-t-lg px-2 py-2 text-center text-xs font-semibold transition-colors"
               :class="currentStep === step.id
                 ? 'bg-ext-wf1 text-white'
-                : 'bg-slate-200 text-slate-600 hover:bg-slate-300'"
+                : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600'"
               @click="goToStep(step.id)"
             >
               <span class="block text-base leading-none">{{ step.id }}</span>
@@ -46,53 +46,53 @@
 
         <div class="p-4 sm:p-6 space-y-5">
           <section v-if="currentStep === 1" class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Content</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Content</h3>
 
             <div>
-              <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-subject">Subject</label>
+              <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-subject">Subject</label>
               <input
                 id="campaign-subject"
                 v-model="form.subject"
                 type="text"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 placeholder="Campaign subject"
               >
             </div>
 
-            <div class="space-y-3 rounded-lg border border-slate-200 p-4">
-              <p class="text-sm font-semibold text-slate-900">How do you want to compose content?</p>
+            <div class="space-y-3 rounded-lg border border-slate-200 dark:border-slate-700 p-4">
+              <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">How do you want to compose content?</p>
 
-              <label class="flex items-center gap-2 text-sm text-slate-800">
+              <label class="flex items-center gap-2 text-sm text-slate-800 dark:text-slate-200">
                 <input
                   v-model="form.composeMode"
                   type="radio"
                   value="webpage"
-                  class="h-4 w-4 border-slate-300 text-slate-900"
+                  class="h-4 w-4 border-slate-300 dark:border-slate-600 text-slate-900"
                 >
                 Send a webpage
               </label>
 
-              <label class="flex items-center gap-2 text-sm text-slate-800">
+              <label class="flex items-center gap-2 text-sm text-slate-800 dark:text-slate-200">
                 <input
                   v-model="form.composeMode"
                   type="radio"
                   value="compose"
-                  class="h-4 w-4 border-slate-300 text-slate-900"
+                  class="h-4 w-4 border-slate-300 dark:border-slate-600 text-slate-900"
                 >
                 Compose message
               </label>
             </div>
 
             <div v-if="form.composeMode === 'webpage'" class="space-y-2">
-              <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-webpage-url">Webpage URL</label>
+              <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-webpage-url">Webpage URL</label>
               <input
                 id="campaign-webpage-url"
                 v-model="form.webpageUrl"
                 type="url"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 placeholder="https://example.com/page"
               >
-              <p class="text-xs text-slate-500">Campaign content will be saved as <code>[URL:YOUR_URL]</code>.</p>
+              <p class="text-xs text-slate-500 dark:text-slate-400">Campaign content will be saved as <code>[URL:YOUR_URL]</code>.</p>
             </div>
 
             <div v-else class="space-y-4">
@@ -104,25 +104,25 @@
             </div>
 
             <div>
-              <label for="campaign-footer" class="mb-1 block text-sm font-medium text-slate-700">Footer</label>
+              <label for="campaign-footer" class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Footer</label>
 
               <textarea
                   id="campaign-footer"
                   v-model="form.footer"
                   rows="6"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
               ></textarea>
             </div>
           </section>
 
           <section v-else-if="currentStep === 2" class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Format</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Format</h3>
             <div class="grid grid-cols-1 gap-4 md:grid-cols-[2fr_2fr_1fr]">
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-template">Use template</label>
-                <select id="campaign-template" v-model="form.templateId" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" >
-                  <option value="" class="text-slate-400">No template</option>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-template">Use template</label>
+                <select id="campaign-template" v-model="form.templateId" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" >
+                  <option value="" class="text-slate-400 dark:text-slate-500">No template</option>
                   <option
                       v-for="template in templates"
                       :key="template.id"
@@ -134,34 +134,34 @@
               </div>
 
               <div class="md:justify-self-center justify-self-start">
-                <label class="mb-1 block text-sm font-medium text-slate-700">
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">
                   Send format
                 </label>
 
                 <div class="flex flex-wrap gap-4">
-                  <label class="flex items-center gap-2 text-sm text-slate-900">
-                    <input type="radio" value="html" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 text-blue-600 focus:ring-blue-500"/>
+                  <label class="flex items-center gap-2 text-sm text-slate-900 dark:text-slate-100">
+                    <input type="radio" value="html" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500"/>
                     HTML
                   </label>
 
-                  <label class="flex items-center gap-2 text-sm text-slate-900">
-                    <input type="radio" value="text" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 text-blue-600 focus:ring-blue-500"/>
+                  <label class="flex items-center gap-2 text-sm text-slate-900 dark:text-slate-100">
+                    <input type="radio" value="text" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500"/>
                     Text
                   </label>
 
-                  <label class="flex items-center gap-2 text-sm text-slate-900">
-                    <input type="radio" value="invite" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 text-blue-600 focus:ring-blue-500"/>
+                  <label class="flex items-center gap-2 text-sm text-slate-900 dark:text-slate-100">
+                    <input type="radio" value="invite" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500"/>
                     Invite
                   </label>
                 </div>
               </div>
 
-              <label class="flex items-center gap-2 text-sm text-slate-800 md:mt-2">
+              <label class="flex items-center gap-2 text-sm text-slate-800 dark:text-slate-200 md:mt-2">
                 <input
                   v-model="form.htmlFormated"
                   disabled
                   type="checkbox"
-                  class="h-4 w-4 rounded border-slate-300 text-slate-900 accent-ext-wf1"
+                  class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-slate-900 accent-ext-wf1"
                 >
                 HTML formatted
               </label>
@@ -170,109 +170,109 @@
           </section>
 
           <section v-else-if="currentStep === 3" class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Scheduling</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Scheduling</h3>
 
             <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-embargo">Embargo until</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-embargo">Embargo until</label>
                 <input
                   id="campaign-embargo"
                   v-model="form.embargo"
                   type="datetime-local"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-repeat-interval">Repeat interval (minutes)</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-repeat-interval">Repeat interval (minutes)</label>
                 <input
                   id="campaign-repeat-interval"
                   v-model="form.repeatInterval"
                   type="number"
                   min="0"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-repeat-until">Stop sending after</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-repeat-until">Stop sending after</label>
                 <input
                   id="campaign-repeat-until"
                   v-model="form.repeatUntil"
                   type="datetime-local"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-requeue-interval">Requeue every (minutes)</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-requeue-interval">Requeue every (minutes)</label>
                 <input
                   id="campaign-requeue-interval"
                   v-model="form.requeueInterval"
                   type="number"
                   min="0"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-requeue-until">Requeue until</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-requeue-until">Requeue until</label>
                 <input
                   id="campaign-requeue-until"
                   v-model="form.requeueUntil"
                   type="datetime-local"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 >
               </div>
             </div>
           </section>
 
           <section v-else-if="currentStep === 4" class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Lists</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Lists</h3>
 
-            <p class="text-sm text-slate-600">Please select the lists you want to send this campaign to.</p>
+            <p class="text-sm text-slate-600 dark:text-slate-300">Please select the lists you want to send this campaign to.</p>
 
-            <div class="max-h-96 overflow-auto rounded-lg border border-slate-200 p-3">
+            <div class="max-h-96 overflow-auto rounded-lg border border-slate-200 dark:border-slate-700 p-3">
               <label
                 v-for="list in mailingLists"
                 :key="list.id"
                 :for="`campaign-list-${list.id}`"
-                class="flex items-center gap-2 py-1 text-sm text-slate-800"
+                class="flex items-center gap-2 py-1 text-sm text-slate-800 dark:text-slate-200"
               >
                 <input
                   :id="`campaign-list-${list.id}`"
                   v-model="selectedListIds"
                   type="checkbox"
                   :value="list.id"
-                  class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400 accent-ext-wf1"
+                  class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-slate-900 focus:ring-slate-400 accent-ext-wf1"
                 >
                 <span>{{ list.name || `List #${list.id}` }}</span>
               </label>
 
-              <p v-if="mailingLists.length === 0" class="text-sm text-slate-500">No mailing lists found.</p>
+              <p v-if="mailingLists.length === 0" class="text-sm text-slate-500 dark:text-slate-400">No mailing lists found.</p>
             </div>
           </section>
 
           <section v-else-if="currentStep === 5" class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Send test</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Send test</h3>
 
-            <p class="text-sm text-slate-600">Test send to email address(es).</p>
-            <div class="text-slate-400">
+            <p class="text-sm text-slate-600 dark:text-slate-300">Test send to email address(es).</p>
+            <div class="text-slate-400 dark:text-slate-500">
               (comma separate addresses - all must be existing subscribers)
             </div>
 
-            <div class="rounded-lg border border-slate-200 p-3 space-y-3">
+            <div class="rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-3">
               <textarea
                 id="campaign-test-recipients"
                 v-model="form.testRecipients"
                 rows="5"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                 placeholder="email1@example.com, email2@example.com"
               ></textarea>
 
               <button
                 type="button"
-                class="rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+                class="rounded-md border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50"
                 :disabled="isSendingTest"
                 @click="sendTestCampaign"
               >
@@ -282,71 +282,71 @@
           </section>
 
           <section v-else class="space-y-5">
-            <h3 class="text-2xl font-semibold text-slate-900">Finish</h3>
+            <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Finish</h3>
 
             <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-from">From</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-from">From</label>
                 <input
                   id="campaign-from"
                   v-model="form.fromField"
                   type="text"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                   placeholder="From name or address"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-reply-to">Reply-To</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-reply-to">Reply-To</label>
                 <input
                   id="campaign-reply-to"
                   v-model="form.replyTo"
                   type="text"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                   placeholder="Reply-to email"
                 >
               </div>
 
               <div>
-                <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-to-field">To field</label>
+                <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200" for="campaign-to-field">To field</label>
                 <input
                   id="campaign-to-field"
                   v-model="form.toField"
                   type="text"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
                   placeholder="Recipient field"
                 >
               </div>
             </div>
 
-            <div class="space-y-2 rounded-lg border p-4" :class="warnings.length ? 'border-amber-300 bg-amber-50' : 'border-emerald-300 bg-emerald-50'">
-              <p class="text-sm font-semibold" :class="warnings.length ? 'text-amber-800' : 'text-emerald-800'">
+            <div class="space-y-2 rounded-lg border p-4" :class="warnings.length ? 'border-amber-300 dark:border-amber-500/20 bg-amber-50 dark:bg-amber-500/10' : 'border-emerald-300 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/10'">
+              <p class="text-sm font-semibold" :class="warnings.length ? 'text-amber-800 dark:text-amber-400' : 'text-emerald-800 dark:text-emerald-400'">
                 {{ warnings.length ? 'Please review before saving' : 'Campaign is ready to save' }}
               </p>
-              <p v-for="warning in warnings" :key="warning" class="text-sm text-amber-800">
+              <p v-for="warning in warnings" :key="warning" class="text-sm text-amber-800 dark:text-amber-400">
                 {{ warning }}
               </p>
             </div>
           </section>
         </div>
 
-        <div class="border-t border-slate-200 px-4 py-4 sm:px-6">
+        <div class="border-t border-slate-200 dark:border-slate-700 px-4 py-4 sm:px-6">
           <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
             <div class="text-sm">
-              <div v-if="saveErrors.length" class="text-red-600">
+              <div v-if="saveErrors.length" class="text-red-600 dark:text-red-400">
                 <p class="font-medium">Please fix the following fields:</p>
                 <ul class="mt-1 list-disc pl-5 space-y-1">
                   <li v-for="errorItem in saveErrors" :key="errorItem">{{ errorItem }}</li>
                 </ul>
               </div>
-              <p v-else-if="saveError" class="text-red-600 whitespace-pre-line">{{ saveError }}</p>
-              <p v-else-if="saveSuccess" class="text-emerald-700">{{ saveSuccess }}</p>
+              <p v-else-if="saveError" class="text-red-600 dark:text-red-400 whitespace-pre-line">{{ saveError }}</p>
+              <p v-else-if="saveSuccess" class="text-emerald-700 dark:text-emerald-400">{{ saveSuccess }}</p>
             </div>
 
             <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap lg:justify-end">
               <button
                 type="button"
-                class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+                class="rounded-md border border-slate-300 dark:border-slate-600 px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50"
                 :disabled="currentStep === 1"
                 @click="previousStep"
               >
@@ -356,7 +356,7 @@
               <button
                 v-if="currentStep < steps.length"
                 type="button"
-                class="rounded-md border border-slate-900 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50"
+                class="rounded-md border border-slate-900 dark:border-slate-700 bg-slate-900 dark:bg-slate-700 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:hover:bg-slate-600 disabled:opacity-50"
                 :disabled="isSaving"
                 @click="nextStep"
               >
@@ -365,7 +365,7 @@
 
               <button
                 type="button"
-                class="rounded-md border border-slate-900 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50"
+                class="rounded-md border border-slate-900 dark:border-slate-700 bg-slate-900 dark:bg-slate-700 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:hover:bg-slate-600 disabled:opacity-50"
                 :disabled="isSaving || isQueueing"
                 @click="saveAndContinueEditing"
               >
@@ -375,7 +375,7 @@
               <button
                 v-if="canQueueCampaign"
                 type="button"
-                class="rounded-md border border-emerald-700 bg-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 disabled:opacity-50"
+                class="rounded-md border border-emerald-700 dark:border-emerald-600 bg-emerald-700 dark:bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 dark:hover:bg-emerald-500 disabled:opacity-50"
                 :disabled="isSaving || isQueueing"
                 @click="queueCampaignToSend"
               >
diff --git a/assets/vue/views/DashboardView.vue b/assets/vue/views/DashboardView.vue
index 2ff404c..58172b1 100644
--- a/assets/vue/views/DashboardView.vue
+++ b/assets/vue/views/DashboardView.vue
@@ -6,7 +6,7 @@
     <div class="w-full">
       <div
         v-if="dashboardError"
-        class="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        class="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400"
         role="alert"
       >
         {{ dashboardError }}
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index 8842bd1..c62ea95 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -1,33 +1,33 @@
 <template>
   <AdminLayout>
     <div class="space-y-6 animate-in fade-in duration-300">
-      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+      <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-6">
         <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
           <div>
-            <p class="text-xs uppercase tracking-wide text-slate-500">Mailing List</p>
-            <h2 class="text-xl font-bold text-slate-900">
+            <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Mailing List</p>
+            <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">
               {{ listName || `List #${listId}` }}
             </h2>
           </div>
 
           <RouterLink
               to="/lists"
-              class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50"
+              class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
           >
             Back to Lists
           </RouterLink>
         </div>
       </div>
 
-      <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+      <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
         <div
-            class="p-4 sm:p-6 border-b border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-          <h3 class="text-lg font-semibold text-slate-900">Subscribers</h3>
+            class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Subscribers</h3>
           <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
-            <label class="text-sm text-slate-600">Status</label>
+            <label class="text-sm text-slate-600 dark:text-slate-300">Status</label>
             <select
                 v-model="statusFilter"
-                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                class="px-3 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none"
             >
               <option value="all">All</option>
               <option value="confirmed">Confirmed</option>
@@ -36,13 +36,13 @@
           </div>
         </div>
 
-        <div class="p-4 sm:p-6 border-b border-slate-200 bg-slate-50/50">
+        <div class="p-4 sm:p-6 border-b border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900/50">
           <div class="flex flex-col xl:flex-row xl:items-center gap-3">
             <div class="flex flex-wrap items-center gap-2">
-              <span class="text-sm text-slate-600">Selected: {{ selectedSubscribers.length }}</span>
+              <span class="text-sm text-slate-600 dark:text-slate-300">Selected: {{ selectedSubscribers.length }}</span>
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || actionLoading"
                   @click="deleteSelectedSubscribers"
               >
@@ -54,7 +54,7 @@
             <div class="flex flex-col sm:flex-row sm:items-center gap-2 xl:ml-auto">
               <select
                   v-model="selectedTargetListId"
-                  class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                  class="px-3 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none"
                   :disabled="actionLoading"
               >
                 <option value="">Select target list</option>
@@ -65,7 +65,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || !selectedTargetListId || actionLoading"
                   @click="copySelectedSubscribers"
               >
@@ -75,7 +75,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 dark:border-amber-500/20 dark:text-amber-400 dark:hover:bg-amber-500/10 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || !selectedTargetListId || actionLoading"
                   @click="moveSelectedSubscribers"
               >
@@ -85,19 +85,19 @@
             </div>
           </div>
 
-          <p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
-          <p v-if="actionMessage" class="mt-3 text-sm text-emerald-700">{{ actionMessage }}</p>
+          <p v-if="actionError" class="mt-3 text-sm text-red-600 dark:text-red-400">{{ actionError }}</p>
+          <p v-if="actionMessage" class="mt-3 text-sm text-emerald-700 dark:text-emerald-400">{{ actionMessage }}</p>
         </div>
 
         <div class="overflow-x-auto">
           <table class="w-full text-left text-sm hidden md:table">
-            <thead class="bg-slate-50 text-slate-500 font-medium">
+            <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
             <tr>
               <th class="px-4 py-4 w-10">
                 <input
                     ref="selectAllCheckbox"
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
+                    class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 accent-ext-wf1"
                     :checked="allVisibleSelected"
                     :disabled="filteredSubscribers.length === 0"
                     @change="toggleSelectAllVisible"
@@ -110,44 +110,44 @@
               <th class="px-6 py-4 text-right">Actions</th>
             </tr>
             </thead>
-            <tbody class="divide-y divide-slate-200">
+            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
             <tr v-if="loading">
-              <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading...</td>
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading...</td>
             </tr>
 
             <tr v-else-if="errorMessage">
-              <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+              <td colspan="6" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ errorMessage }}</td>
             </tr>
 
             <tr
                 v-for="subscriber in filteredSubscribers"
                 v-else
                 :key="subscriber.id"
-                class="hover:bg-slate-50 transition-colors"
+                class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
             >
               <td class="px-4 py-4">
                 <input
                     v-model="selectedIds"
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
+                    class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 accent-ext-wf1"
                     :value="subscriber.id"
                 >
               </td>
-              <td class="px-6 py-4 text-slate-600">{{ subscriber.id }}</td>
-              <td class="px-6 py-4 font-mono text-slate-900">{{ subscriber.email }}</td>
+              <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ subscriber.id }}</td>
+              <td class="px-6 py-4 font-mono text-slate-900 dark:text-slate-100">{{ subscriber.email }}</td>
               <td class="px-6 py-4">
                   <span
                       class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'"
                   >
                     {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
                   </span>
               </td>
-              <td class="px-6 py-4 text-slate-600">{{ formatDate(subscriber.createdAt) }}</td>
+              <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ formatDate(subscriber.createdAt) }}</td>
               <td class="px-6 py-4 text-right">
                 <button
                     type="button"
-                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
                     :disabled="actionLoading"
                     @click="deleteSingleSubscriber(subscriber)"
                 >
@@ -158,20 +158,20 @@
             </tr>
 
             <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
-              <td colspan="6" class="px-6 py-8 text-center text-slate-500">No subscribers for this filter.</td>
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No subscribers for this filter.</td>
             </tr>
             </tbody>
           </table>
 
-          <div class="block md:hidden divide-y divide-slate-100">
-            <div v-if="loading" class="px-4 py-8 text-center text-slate-500 text-sm">Loading...</div>
-            <div v-else-if="errorMessage" class="px-4 py-8 text-center text-red-600 text-sm">{{ errorMessage }}</div>
+          <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
+            <div v-if="loading" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">Loading...</div>
+            <div v-else-if="errorMessage" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">{{ errorMessage }}</div>
 
-            <div class="p-4 border-b border-slate-100" v-if="!loading && !errorMessage && filteredSubscribers.length">
-              <label class="inline-flex items-center gap-2 text-sm text-slate-700">
+            <div class="p-4 border-b border-slate-100 dark:border-slate-700" v-if="!loading && !errorMessage && filteredSubscribers.length">
+              <label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                 <input
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
+                    class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 accent-ext-wf1"
                     :checked="allVisibleSelected"
                     @change="toggleSelectAllVisible"
                 >
@@ -188,24 +188,24 @@
                 <input
                     v-model="selectedIds"
                     type="checkbox"
-                    class="mt-1 w-4 h-4 rounded border-slate-300 accent-ext-wf1"
+                    class="mt-1 w-4 h-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800 accent-ext-wf1"
                     :value="subscriber.id"
                 >
 
                 <div class="flex-1 min-w-0">
                   <div class="flex items-center justify-between gap-3">
-                    <p class="text-sm font-medium text-slate-900 truncate">{{ subscriber.email }}</p>
+                    <p class="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{{ subscriber.email }}</p>
                     <span
                         class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
-                        :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                        :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'"
                     >
                       {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
                     </span>
                   </div>
-                  <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
+                  <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
                   <button
                       type="button"
-                      class="mt-3 inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                      class="mt-3 inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors disabled:opacity-50"
                       :disabled="actionLoading"
                       @click="deleteSingleSubscriber(subscriber)"
                   >
@@ -218,7 +218,7 @@
 
             <div
                 v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
-                class="px-4 py-8 text-center text-slate-500 text-sm"
+                class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
             >
               No subscribers for this filter.
             </div>
@@ -226,12 +226,12 @@
         </div>
 
         <div
-            class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
-          <span class="text-slate-500">Showing {{ filteredSubscribers.length }} on page · Total: {{ total }}</span>
+            class="p-4 sm:p-6 border-t border-slate-200 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
+          <span class="text-slate-500 dark:text-slate-400">Showing {{ filteredSubscribers.length }} on page · Total: {{ total }}</span>
           <div class="flex gap-2 w-full sm:w-auto">
             <button
                 type="button"
-                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 dark:text-slate-200 transition-colors disabled:opacity-50"
                 :disabled="!canGoPrevious || loading || actionLoading"
                 @click="previousPage"
             >
@@ -239,7 +239,7 @@
             </button>
             <button
                 type="button"
-                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 dark:text-slate-200 transition-colors disabled:opacity-50"
                 :disabled="!canGoNext || loading || actionLoading"
                 @click="nextPage"
             >
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index 2ccac85..d36ed64 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -1,54 +1,54 @@
 <template>
   <AdminLayout>
     <div class="space-y-6 animate-in fade-in duration-300">
-      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+      <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-6">
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div>
-            <p class="text-xs uppercase tracking-wide text-slate-500">Template</p>
-            <h2 class="text-xl font-bold text-slate-900">{{ pageTitle }}</h2>
+            <p class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Template</p>
+            <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">{{ pageTitle }}</h2>
           </div>
 
           <RouterLink
             to="/templates"
-            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800"
           >
             Back to Templates
           </RouterLink>
         </div>
       </div>
 
-      <div v-if="isLoading" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+      <div v-if="isLoading" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 text-sm text-slate-500 dark:text-slate-400 shadow-sm">
         Loading template...
       </div>
 
-      <div v-else-if="loadError" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-red-600 shadow-sm">
+      <div v-else-if="loadError" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 text-sm text-red-600 dark:text-red-400 shadow-sm">
         {{ loadError }}
       </div>
 
-      <section v-else class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 sm:p-8">
+      <section v-else class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 sm:p-8">
         <form class="space-y-6" @submit.prevent="saveTemplate">
             <div class="grid gap-6 lg:grid-cols-2">
               <div class="space-y-2">
-                <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
+                <label for="template-title" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Title</label>
                 <input
                   id="template-title"
                   v-model.trim="form.title"
                   type="text"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
                   placeholder="Enter template title"
                   required
                 >
               </div>
 
               <div class="space-y-2">
-                <label for="template-list-order" class="block text-sm font-medium text-slate-700">List order</label>
+                <label for="template-list-order" class="block text-sm font-medium text-slate-700 dark:text-slate-200">List order</label>
                 <input
                   id="template-list-order"
                   v-model.trim="form.listOrder"
                   type="number"
                   min="0"
                   step="1"
-                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                  class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
                   placeholder="Optional (e.g. 10)"
                 >
               </div>
@@ -62,10 +62,10 @@
 
             <div class="space-y-2">
               <div class="flex items-center justify-between gap-2">
-                <label for="template-text" class="block text-sm font-medium text-slate-700">Text version</label>
+                <label for="template-text" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Text version</label>
                 <button
                   type="button"
-                  class="px-3 py-1.5 border border-slate-300 rounded-lg hover:bg-slate-50 text-xs text-slate-700 transition-colors"
+                  class="px-3 py-1.5 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 text-xs text-slate-700 dark:text-slate-200 transition-colors"
                   @click="populateTextFromContent"
                 >
                   Use HTML as plain text
@@ -75,63 +75,69 @@
                 id="template-text"
                 v-model="form.text"
                 rows="7"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
                 placeholder="[CONTENT]"
               />
             </div>
 
             <div class="space-y-2">
-              <label for="template-file" class="block text-sm font-medium text-slate-700">Template file</label>
+              <label for="template-file" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Template file</label>
               <input
                 id="template-file"
                 type="file"
                 accept=".html,.htm,.txt"
-                class="block w-full text-sm text-slate-700 file:mr-4 file:rounded-lg file:border-0 file:bg-ext-wf2 file:px-3 file:py-2 file:text-ext-wf3 hover:file:bg-indigo-100"
+                class="block w-full text-sm text-slate-700 dark:text-slate-200 file:mr-4 file:rounded-lg file:border-0 file:bg-ext-wf2 file:px-3 file:py-2 file:text-ext-wf3 hover:file:bg-indigo-100"
                 @change="handleFileChange"
               >
             </div>
 
             <div class="space-y-2">
-              <label class="block text-sm font-medium text-slate-700">Checks</label>
-              <div class="space-y-2 rounded-lg border border-slate-200 p-4">
-                <label class="flex items-center gap-2 text-sm text-slate-700">
+              <label class="block text-sm font-medium text-slate-700 dark:text-slate-200">Checks</label>
+              <div class="space-y-2 rounded-lg border border-slate-200 dark:border-slate-700 p-4">
+                <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     v-model="form.checkLinks"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all links have a full URL
                 </label>
-                <label class="flex items-center gap-2 text-sm text-slate-700">
+                <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     v-model="form.checkImages"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all images have a full URL
                 </label>
-                <label class="flex items-center gap-2 text-sm text-slate-700">
+                <label class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                   <input
                     v-model="form.checkExternalImages"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all external images exist
                 </label>
               </div>
             </div>
 
-            <div v-if="saveError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            <div v-if="saveErrors.length" class="rounded-lg border border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+              <p class="font-medium">Please fix the following fields:</p>
+              <ul class="mt-1 list-disc pl-5 space-y-1">
+                <li v-for="errorItem in saveErrors" :key="errorItem">{{ errorItem }}</li>
+              </ul>
+            </div>
+            <div v-else-if="saveError" class="rounded-lg border border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-400">
               {{ saveError }}
             </div>
-            <div v-if="saveSuccess" class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+            <div v-if="saveSuccess" class="rounded-lg border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10 px-4 py-3 text-sm text-green-700 dark:text-green-400">
               {{ saveSuccess }}
             </div>
 
             <div class="flex items-center justify-end gap-2">
               <RouterLink
                 to="/templates"
-                class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm text-slate-700 transition-colors"
+                class="px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 text-sm text-slate-700 dark:text-slate-200 transition-colors"
               >
                 Cancel
               </RouterLink>
@@ -164,6 +170,7 @@ const isLoading = ref(false)
 const loadError = ref('')
 const isSaving = ref(false)
 const saveError = ref('')
+const saveErrors = ref([])
 const saveSuccess = ref('')
 const form = ref({
   title: '',
@@ -240,19 +247,63 @@ const handleFileChange = (event) => {
   form.value.file = file || null
 }
 
+const validationFieldLabels = {
+  title: 'Title',
+  content: 'Content',
+  text: 'Text version',
+  file: 'Template file',
+  list_order: 'List order',
+  check_links: 'Check links',
+  check_images: 'Check images',
+  check_external_images: 'Check external images'
+}
+
+const normalizeFieldName = (fieldPath = '') => {
+  if (validationFieldLabels[fieldPath]) return validationFieldLabels[fieldPath]
+
+  const fallback = String(fieldPath)
+    .split('.')
+    .pop()
+    ?.replace(/\[\d+]/g, '')
+    ?.replace(/_/g, ' ')
+    ?.replace(/([a-z])([A-Z])/g, '$1 $2')
+    ?.trim()
+
+  if (!fallback) return 'Field'
+  return fallback.charAt(0).toUpperCase() + fallback.slice(1)
+}
+
+const formatValidationErrors = (error) => {
+  const responseData = error?.responseData
+  const messages = []
+
+  if (responseData && typeof responseData === 'object' && !Array.isArray(responseData)) {
+    Object.entries(responseData).forEach(([field, rawMessage]) => {
+      if (!rawMessage) return
+      const text = Array.isArray(rawMessage) ? rawMessage.join(' ') : String(rawMessage)
+      messages.push(`${normalizeFieldName(field)}: ${text}`)
+    })
+  }
+
+  return [...new Set(messages)]
+}
+
 const saveTemplate = async () => {
   if (!isCreateMode.value && (!Number.isFinite(templateId.value) || templateId.value <= 0)) {
     saveError.value = 'Template ID is invalid.'
+    saveErrors.value = []
     return
   }
 
   if (!form.value.title) {
     saveError.value = 'Title is required.'
+    saveErrors.value = []
     return
   }
 
   isSaving.value = true
   saveError.value = ''
+  saveErrors.value = []
   saveSuccess.value = ''
 
   try {
@@ -292,7 +343,14 @@ const saveTemplate = async () => {
     saveSuccess.value = 'Template updated successfully.'
   } catch (error) {
     console.error('Failed to save template:', error)
-    saveError.value = error?.message || 'Failed to save template.'
+    const formattedErrors = formatValidationErrors(error)
+    if (formattedErrors.length > 0) {
+      saveErrors.value = formattedErrors
+      saveError.value = ''
+    } else {
+      saveError.value = error?.message || 'Failed to save template.'
+      saveErrors.value = []
+    }
   } finally {
     isSaving.value = false
   }
diff --git a/composer.json b/composer.json
index f46ae4e..21baad0 100755
--- a/composer.json
+++ b/composer.json
@@ -51,7 +51,7 @@
     },
     "require": {
         "php": "^8.1",
-        "phplist/core": "dev-main",
+        "phplist/core": "dev-dev",
         "symfony/twig-bundle": "^6.4",
         "symfony/webpack-encore-bundle": "^2.2",
         "symfony/security-bundle": "^6.4",
@@ -96,6 +96,7 @@
             "PhpList\\Core\\Composer\\ScriptHandler::createBundleConfiguration",
             "PhpList\\Core\\Composer\\ScriptHandler::createRoutesConfiguration",
             "PhpList\\Core\\Composer\\ScriptHandler::createParametersConfiguration",
+            "PhpList\\Core\\Composer\\ScriptHandler::createDotenvConfiguration",
             "PhpList\\Core\\Composer\\ScriptHandler::clearAllCaches"
         ],
         "publish-phplist-texts": [
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index 0e4fd73..070f0e2 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -3,3 +3,5 @@ twig:
     strict_variables: '%kernel.debug%'
     default_path: '%kernel.application_dir%/templates'
     auto_reload: true
+    globals:
+        api_base_url: '%app.api_base_url%'
diff --git a/config/services.yml b/config/services.yml
index 76325ac..9be8e4c 100755
--- a/config/services.yml
+++ b/config/services.yml
@@ -1,8 +1,4 @@
 # config/services.yaml
-parameters:
-  api_base_url: '%env(API_BASE_URL)%'
-  env(API_BASE_URL): 'http://api.phplist.local/'
-
 services:
   _defaults:
     autowire: true
@@ -27,7 +23,7 @@ services:
   Symfony\Component\HttpFoundation\Session\SessionInterface: '@session'
 
   PhpList\RestApiClient\Client:
-    $baseUrl: '%api_base_url%'
+    $baseUrl: '%app.api_base_url%'
 
   PhpList\WebFrontend\EventListener\ApiSessionListener:
     tags:
diff --git a/openapi.json b/openapi.json
index 11b8f56..27538ce 100644
--- a/openapi.json
+++ b/openapi.json
@@ -8225,8 +8225,7 @@
                             "sent",
                             "prepared",
                             "submitted",
-                            "suspended",
-                            "requeued"
+                            "suspended"
                         ],
                         "example": "draft"
                     }
diff --git a/package.json b/package.json
index 217de08..bdd4973 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
-    "@symfony/webpack-encore": "^5.1.0",
+    "@symfony/webpack-encore": "^5.3.1",
     "@tailwindcss/postcss": "^4.2.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/compiler-sfc": "^3.5.16",
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 4e0d445..692cf4d 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -5,11 +5,11 @@
          xsi:noNamespaceSchemaLocation="http://schema.phpunit.de/6.2/phpunit.xsd"
          backupGlobals="false"
          colors="true"
-         bootstrap="vendor/autoload.php"
+         bootstrap="tests/bootstrap.php"
 >
     <php>
-        <env name="API_BASE_URL" value="http://api.phplist.local/"/>
         <ini name="error_reporting" value="-1"/>
         <server name="KERNEL_CLASS" value="PhpList\Core\Core\ApplicationKernel"/>
+        <server name="APP_ENV" value="test" force="true"/>
     </php>
 </phpunit>
diff --git a/src/Controller/AnalyticsController.php b/src/Controller/AnalyticsController.php
index d8486ff..407f256 100644
--- a/src/Controller/AnalyticsController.php
+++ b/src/Controller/AnalyticsController.php
@@ -17,8 +17,6 @@ public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Analytics',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/src/Controller/BouncesController.php b/src/Controller/BouncesController.php
index 14fb3f2..126db67 100644
--- a/src/Controller/BouncesController.php
+++ b/src/Controller/BouncesController.php
@@ -23,8 +23,6 @@ public function index(Request $request): Response
 
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Bounces',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
             'bounce_actions' => $bounceActions,
         ]);
     }
diff --git a/src/Controller/CampaignsController.php b/src/Controller/CampaignsController.php
index dbf9d6a..7d21668 100644
--- a/src/Controller/CampaignsController.php
+++ b/src/Controller/CampaignsController.php
@@ -17,8 +17,6 @@ public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Campaigns',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -27,8 +25,6 @@ public function create(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Create Campaign',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -37,8 +33,6 @@ public function edit(Request $request, int $campaignId): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => sprintf('Edit Campaign #%d', $campaignId),
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/src/Controller/DashboardController.php b/src/Controller/DashboardController.php
index aea6970..edfb1ef 100755
--- a/src/Controller/DashboardController.php
+++ b/src/Controller/DashboardController.php
@@ -32,8 +32,6 @@ public function index(Request $request): Response
 
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Dashboard',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
             'dashboard_stats' => $dashboardStats,
             'dashboard_error' => $dashboardError,
         ]);
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
index 94e63f7..3dfb1ba 100644
--- a/src/Controller/ListsController.php
+++ b/src/Controller/ListsController.php
@@ -26,8 +26,6 @@ public function index(Request $request): JsonResponse|Response
         if (! $wantsJson) {
             return $this->render('@PhpListFrontend/spa.html.twig', [
                 'page' => 'Lists',
-                'api_token' => $request->getSession()->get('auth_token'),
-                'api_base_url' => $this->getParameter('api_base_url'),
             ]);
         }
         $initialData = $this->listClient->getLists();
@@ -40,8 +38,6 @@ public function view(Request $request, int $listId): JsonResponse|Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'List Subscribers',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/src/Controller/PublicPagesController.php b/src/Controller/PublicPagesController.php
index 1a6d80c..06064d9 100644
--- a/src/Controller/PublicPagesController.php
+++ b/src/Controller/PublicPagesController.php
@@ -17,8 +17,6 @@ public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Subscribe Pages',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -27,8 +25,6 @@ public function create(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Create Subscribe Page',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -37,8 +33,6 @@ public function edit(Request $request, int $pageId): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => sprintf('Edit Subscribe Page #%d', $pageId),
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/src/Controller/SettingsController.php b/src/Controller/SettingsController.php
index 02d8684..a41bfc1 100644
--- a/src/Controller/SettingsController.php
+++ b/src/Controller/SettingsController.php
@@ -17,8 +17,6 @@ public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Settings',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index 8d542ed..331da62 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -37,8 +37,6 @@ public function index(Request $request): JsonResponse|Response
         if (! $wantsJson) {
             return $this->render('@PhpListFrontend/spa.html.twig', [
                 'page' => 'Subscribers',
-                'api_token' => $request->getSession()->get('auth_token'),
-                'api_base_url' => $this->getParameter('api_base_url'),
             ]);
         }
 
diff --git a/src/Controller/TemplatesController.php b/src/Controller/TemplatesController.php
index 5d0cb29..c9a1650 100644
--- a/src/Controller/TemplatesController.php
+++ b/src/Controller/TemplatesController.php
@@ -17,8 +17,6 @@ public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Templates',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -27,8 +25,6 @@ public function create(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => 'Create Template',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 
@@ -37,8 +33,6 @@ public function edit(Request $request, int $templateId): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
             'page' => sprintf('Edit Template #%d', $templateId),
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
         ]);
     }
 }
diff --git a/templates/auth/login.html.twig b/templates/auth/login.html.twig
index 2b5a201..d24e26c 100644
--- a/templates/auth/login.html.twig
+++ b/templates/auth/login.html.twig
@@ -4,26 +4,26 @@
 {% block title %}phpList - Login{% endblock %}
 
 {% block body %}
-    <div class="bg-gray-200">
-        <div class="min-h-screen flex flex-col items-center justify-center">
+    <div class="bg-gray-200 dark:bg-slate-900">
+        <div class="min-h-screen flex flex-col items-center justify-center relative">
             <div class="flex items-center mb-6">
                 <img src="{{ asset('favicon-48.png', 'phplist_web_frontend') }}" alt="phpList icon" width="40" height="40" class="mr-2"/>
-                <h1 class="text-xl font-bold mb-0">
+                <h1 class="text-xl font-bold mb-0 text-gray-900 dark:text-slate-100">
                     phpList <span class="text-ext-wf1">4</span>
                 </h1>
             </div>
             <div class="w-full max-w-md px-4">
-                <div class="bg-white shadow-xl rounded-2xl overflow-hidden">
+                <div class="bg-white dark:bg-slate-800 shadow-xl rounded-2xl overflow-hidden">
                     <div class="p-8 md:p-10">
 
                         <!-- Heading -->
-                        <h4 class="text-lg font-bold mb-1">Sign in to your account</h4>
-                        <p class="text-gray-500 text-sm mb-6">
+                        <h4 class="text-lg font-bold mb-1 text-gray-900 dark:text-slate-100">Sign in to your account</h4>
+                        <p class="text-gray-500 dark:text-slate-400 text-sm mb-6">
                             Enter your credentials to access your dashboard.
                         </p>
 
                         {% if error %}
-                            <div class="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded mb-4 text-sm">{{ error }}</div>
+                            <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 px-4 py-3 rounded mb-4 text-sm">{{ error }}</div>
                         {% endif %}
 
                         <form method="post">
@@ -31,16 +31,16 @@
                                 <input type="hidden" name="redirect" value="{{ redirect }}">
                             {% endif %}
                             <div class="mb-4">
-                                <label for="username" class="block text-sm font-semibold text-gray-700 mb-1">Login</label>
-                                <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" name="username" id="username" required autofocus/>
+                                <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-slate-200 mb-1">Login</label>
+                                <input type="text" class="block w-full border border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" name="username" id="username" required autofocus/>
                             </div>
 
                             <div class="mb-6">
                                 <div class="flex justify-between items-center mb-1">
-                                    <label for="password" class="block text-sm font-semibold text-gray-700">Password</label>
+                                    <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-slate-200">Password</label>
                                     <a href="#" class="text-xs text-ext-wf1 hover:text-ext-wf3 no-underline">Forgot password?</a>
                                 </div>
-                                <input type="password" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" id="password" name="password" required/>
+                                <input type="password" class="block w-full border border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" id="password" name="password" required/>
                             </div>
 
                             <div class="mb-6">
@@ -49,25 +49,23 @@
                                 </button>
                             </div>
 
-                            <p class="text-center text-gray-500 text-xs mb-0">
+                            <p class="text-center text-gray-500 dark:text-slate-400 text-xs mb-0">
                                 Access is restricted to authorised administrators only.
                             </p>
                         </form>
                     </div>
 
-                    <div class="bg-gray-50 border-t border-gray-100 text-center py-4 px-8">
-                        <div class="text-xs text-gray-500">
-                            <a href="#" class="text-gray-500 hover:text-gray-700 no-underline mr-2">Documentation</a>
-                            <span class="text-gray-300">·</span>
-                            <a href="#" class="text-gray-500 hover:text-gray-700 no-underline mx-2">Support Forum</a>
-                            <span class="text-gray-300">·</span>
-                            <span class="ml-2 text-gray-400">phpList v4.0.0-rc1</span>
+                    <div class="bg-gray-50 dark:bg-slate-900 border-t border-gray-100 dark:border-slate-700 text-center py-4 px-8">
+                        <div class="text-xs text-gray-500 dark:text-slate-400">
+                            <a href="#" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 no-underline mr-2">Documentation</a>
+                            <span class="text-gray-300 dark:text-slate-600">·</span>
+                            <a href="#" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 no-underline mx-2">Support Forum</a>
+                            <span class="text-gray-300 dark:text-slate-600">·</span>
+                            <span class="ml-2 text-gray-400 dark:text-slate-500">phpList v4.0.0-rc1</span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-{#    <div id="vue-app"></div>#}
 {% endblock %}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 7274070..a13adaa 100755
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -4,8 +4,18 @@
     <meta charset="UTF-8">
     <title>{% block title %}phpList{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta id="api-config" data-api-base-url="{{ api_base_url }}">
     <link rel="stylesheet" href="{{ asset('build/app.css', 'phplist_web_frontend') }}">
     <link rel="stylesheet" href="{{ asset('build/styles.css', 'phplist_web_frontend') }}">
+    <script>
+        (function () {
+            var stored = localStorage.getItem('color-scheme');
+            var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (stored ? stored === 'dark' : prefersDark) {
+                document.documentElement.classList.add('dark');
+            }
+        })();
+    </script>
 
     {% block javascripts %}
         <script src="{{ asset('build/runtime.js', 'phplist_web_frontend') }}" defer></script>
diff --git a/templates/spa.html.twig b/templates/spa.html.twig
index a0fda5a..244a6d1 100644
--- a/templates/spa.html.twig
+++ b/templates/spa.html.twig
@@ -4,8 +4,7 @@
 
 {% block body %}
     <div id="vue-app"
-         data-api-token="{{ api_token|default('') }}"
-         data-api-base-url="{{ api_base_url|default('') }}"
+         data-api-token="{{ app.session.get('auth_token')|default('') }}"
          data-dashboard-stats="{{ dashboard_stats|default({})|json_encode|e('html_attr') }}"
          data-dashboard-error="{{ dashboard_error|default('')|e('html_attr') }}"
          data-bounce-actions="{{ bounce_actions|default({})|json_encode|e('html_attr') }}">
diff --git a/tests/Integration/Controller/AnalyticsControllerTest.php b/tests/Integration/Controller/AnalyticsControllerTest.php
index 5691010..8cea6ef 100644
--- a/tests/Integration/Controller/AnalyticsControllerTest.php
+++ b/tests/Integration/Controller/AnalyticsControllerTest.php
@@ -7,6 +7,7 @@
 use PhpList\WebFrontend\Controller\AnalyticsController;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
 use Symfony\Component\Routing\RouterInterface;
@@ -27,12 +28,13 @@ public function testAnalyticsPageRendersExpectedSpaPayload(): void
         self::bootKernel();
         /** @var AnalyticsController $controller */
         $controller = static::getContainer()->get(AnalyticsController::class);
-        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+        $apiBaseUrl = (string) static::getContainer()->getParameter('app.api_base_url');
 
         $request = Request::create('/analytics/');
         $session = new Session(new MockArraySessionStorage());
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
+        static::getContainer()->get(RequestStack::class)->push($request);
 
         $response = $controller->index($request);
         $content = (string) $response->getContent();
diff --git a/tests/Integration/Controller/BouncesControllerTest.php b/tests/Integration/Controller/BouncesControllerTest.php
index d832cc0..05d4eb7 100644
--- a/tests/Integration/Controller/BouncesControllerTest.php
+++ b/tests/Integration/Controller/BouncesControllerTest.php
@@ -7,6 +7,7 @@
 use PhpList\WebFrontend\Controller\BouncesController;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
 use Symfony\Component\Routing\RouterInterface;
@@ -27,12 +28,13 @@ public function testBouncesPageRendersExpectedSpaPayload(): void
         self::bootKernel();
         /** @var BouncesController $controller */
         $controller = static::getContainer()->get(BouncesController::class);
-        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+        $apiBaseUrl = (string) static::getContainer()->getParameter('app.api_base_url');
 
         $request = Request::create('/bounces/');
         $session = new Session(new MockArraySessionStorage());
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
+        static::getContainer()->get(RequestStack::class)->push($request);
 
         $response = $controller->index($request);
         $content = (string) $response->getContent();
diff --git a/tests/Integration/Controller/CampaignsControllerTest.php b/tests/Integration/Controller/CampaignsControllerTest.php
index d05fa00..8a66684 100644
--- a/tests/Integration/Controller/CampaignsControllerTest.php
+++ b/tests/Integration/Controller/CampaignsControllerTest.php
@@ -7,6 +7,7 @@
 use PhpList\WebFrontend\Controller\CampaignsController;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
 use Symfony\Component\Routing\RouterInterface;
@@ -41,6 +42,7 @@ public function testCampaignPagesRenderExpectedSpaPayload(
         $session = new Session(new MockArraySessionStorage());
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
+        static::getContainer()->get(RequestStack::class)->push($request);
 
         $response = $controller->{$action}($request, ...$actionArguments);
 
diff --git a/tests/Integration/Controller/DashboardControllerTest.php b/tests/Integration/Controller/DashboardControllerTest.php
index a24a786..872ef5a 100644
--- a/tests/Integration/Controller/DashboardControllerTest.php
+++ b/tests/Integration/Controller/DashboardControllerTest.php
@@ -11,6 +11,7 @@
 use PhpList\WebFrontend\Controller\DashboardController;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
 use Symfony\Component\Routing\RouterInterface;
@@ -29,7 +30,7 @@ public function testDashboardRouteIsRegistered(): void
     public function testDashboardRendersSpaPayloadWithStats(): void
     {
         self::bootKernel();
-        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+        $apiBaseUrl = (string) static::getContainer()->getParameter('app.api_base_url');
 
         $statsClient = $this->createMock(StatisticsClient::class);
         $statsClient->expects(self::once())
@@ -43,6 +44,7 @@ public function testDashboardRendersSpaPayloadWithStats(): void
         $session = new Session(new MockArraySessionStorage());
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
+        static::getContainer()->get(RequestStack::class)->push($request);
 
         $response = $controller->index($request);
         $content = (string) $response->getContent();
diff --git a/tests/Integration/Controller/ListsControllerTest.php b/tests/Integration/Controller/ListsControllerTest.php
index 801453c..72d997a 100644
--- a/tests/Integration/Controller/ListsControllerTest.php
+++ b/tests/Integration/Controller/ListsControllerTest.php
@@ -10,6 +10,7 @@
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
 use Symfony\Component\Routing\RouterInterface;
@@ -31,7 +32,7 @@ public function testListRoutesAreRegistered(string $routeName, array $parameters
     public function testListsIndexRendersSpaForHtmlRequests(): void
     {
         self::bootKernel();
-        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+        $apiBaseUrl = (string) static::getContainer()->getParameter('app.api_base_url');
 
         $listClient = $this->createMock(ListClient::class);
         $listClient->expects(self::never())->method('getLists');
@@ -106,6 +107,7 @@ private function createRequestWithSession(string $path): Request
         $session = new Session(new MockArraySessionStorage());
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
+        static::getContainer()->get(RequestStack::class)->push($request);
 
         return $request;
     }
diff --git a/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
index 081581c..fb92b5a 100644
--- a/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
+++ b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
@@ -248,7 +248,7 @@ describe('campaign normalisation', () => {
     })
 
     it('resolves active statuses to "Active" label', async () => {
-        for (const status of ['submitted', 'inprocess', 'requeued', 'scheduled']) {
+        for (const status of ['submitted', 'inprocess', 'scheduled']) {
             campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
                 makeCampaign({ id: 1, messageMetadata: { ...makeCampaign().messageMetadata, status } }),
             ]))
@@ -375,12 +375,12 @@ describe('action handlers', () => {
         expect(wrapper.text()).toContain('API error')
     })
 
-    it('handleRequeue calls updateCampaignStatus with "requeued"', async () => {
+    it('handleRequeue calls updateCampaignStatus with "submitted"', async () => {
         const { wrapper } = await mountComponent()
         const requeueBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Requeue'))
         await requeueBtn.trigger('click')
         await flushPromises()
-        expect(campaignClient.updateCampaignStatus).toHaveBeenCalledWith(1, 'requeued')
+        expect(campaignClient.updateCampaignStatus).toHaveBeenCalledWith(1, 'submitted')
     })
 
     it('handleRequeue shows error feedback on failure', async () => {
diff --git a/tests/Unit/assets/vue/composables/useDarkMode.spec.js b/tests/Unit/assets/vue/composables/useDarkMode.spec.js
new file mode 100644
index 0000000..4ed8dc3
--- /dev/null
+++ b/tests/Unit/assets/vue/composables/useDarkMode.spec.js
@@ -0,0 +1,103 @@
+// useDarkMode.spec.js
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { useDarkMode } from '../../../../../assets/vue/composables/useDarkMode'
+
+const setMatchMedia = (matches) => {
+    window.matchMedia = vi.fn().mockReturnValue({ matches })
+}
+
+describe('useDarkMode', () => {
+    beforeEach(() => {
+        localStorage.clear()
+        document.documentElement.classList.remove('dark')
+        setMatchMedia(false)
+    })
+
+    afterEach(() => {
+        document.documentElement.classList.remove('dark')
+    })
+
+    it('starts with dark mode disabled and no dark class', () => {
+        const { isDark, initDarkMode } = useDarkMode()
+        initDarkMode()
+
+        expect(isDark.value).toBe(false)
+        expect(document.documentElement.classList.contains('dark')).toBe(false)
+    })
+
+    it('initializes from system preference when nothing is stored', () => {
+        setMatchMedia(true)
+
+        const { isDark, initDarkMode } = useDarkMode()
+        initDarkMode()
+
+        expect(isDark.value).toBe(true)
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+    })
+
+    it('initializes as light when system preference is light and nothing is stored', () => {
+        setMatchMedia(false)
+
+        const { isDark, initDarkMode } = useDarkMode()
+        initDarkMode()
+
+        expect(isDark.value).toBe(false)
+        expect(document.documentElement.classList.contains('dark')).toBe(false)
+    })
+
+    it('prefers the stored value over system preference', () => {
+        localStorage.setItem('color-scheme', 'dark')
+        setMatchMedia(false)
+
+        const { isDark, initDarkMode } = useDarkMode()
+        initDarkMode()
+
+        expect(isDark.value).toBe(true)
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+    })
+
+    it('restores light mode from storage even if system prefers dark', () => {
+        localStorage.setItem('color-scheme', 'light')
+        setMatchMedia(true)
+
+        const { isDark, initDarkMode } = useDarkMode()
+        initDarkMode()
+
+        expect(isDark.value).toBe(false)
+        expect(document.documentElement.classList.contains('dark')).toBe(false)
+    })
+
+    it('toggles dark mode on and persists the choice', () => {
+        const { isDark, initDarkMode, toggleDarkMode } = useDarkMode()
+        initDarkMode()
+
+        toggleDarkMode()
+
+        expect(isDark.value).toBe(true)
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+        expect(localStorage.getItem('color-scheme')).toBe('dark')
+    })
+
+    it('toggles dark mode off and persists the choice', () => {
+        localStorage.setItem('color-scheme', 'dark')
+
+        const { isDark, initDarkMode, toggleDarkMode } = useDarkMode()
+        initDarkMode()
+
+        toggleDarkMode()
+
+        expect(isDark.value).toBe(false)
+        expect(document.documentElement.classList.contains('dark')).toBe(false)
+        expect(localStorage.getItem('color-scheme')).toBe('light')
+    })
+
+    it('shares state across multiple useDarkMode() calls', () => {
+        const first = useDarkMode()
+        const second = useDarkMode()
+
+        first.toggleDarkMode()
+
+        expect(second.isDark.value).toBe(first.isDark.value)
+    })
+})
\ No newline at end of file
diff --git a/tests/Unit/assets/vue/layouts/AdminLayout.spec.js b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
index 4f1806c..469d347 100644
--- a/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
+++ b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
@@ -1,11 +1,14 @@
 // AdminLayout.spec.js
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { ref } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
 import AdminLayout from '../../../../../assets/vue/layouts/AdminLayout.vue'
 import { backendFetch, subscribersClient, campaignClient } from '../../../../../assets/vue/api'
 
 const openSidebar = vi.fn()
+const toggleDarkMode = vi.fn()
+const isDark = ref(false)
 
 vi.mock('../../../../../assets/vue/composables/useSidebar', () => ({
     useSidebar: () => ({
@@ -13,6 +16,13 @@ vi.mock('../../../../../assets/vue/composables/useSidebar', () => ({
     }),
 }))
 
+vi.mock('../../../../../assets/vue/composables/useDarkMode', () => ({
+    useDarkMode: () => ({
+        isDark,
+        toggleDarkMode,
+    }),
+}))
+
 vi.mock('../../../../../assets/vue/api', () => ({
     backendFetch: vi.fn(),
     subscribersClient: {
@@ -43,6 +53,7 @@ describe('AdminLayout', () => {
     beforeEach(() => {
         vi.clearAllMocks()
         vi.useFakeTimers()
+        isDark.value = false
 
         backendFetch.mockResolvedValue({
             ok: true,
@@ -115,6 +126,30 @@ describe('AdminLayout', () => {
         expect(openSidebar).toHaveBeenCalled()
     })
 
+    it('shows moon icon and toggles dark mode on click', async () => {
+        const wrapper = createWrapper()
+
+        const toggleButton = wrapper.find('[aria-label="Switch to dark mode"]')
+
+        expect(toggleButton.exists()).toBe(true)
+        expect(toggleButton.text()).toContain('moon')
+
+        await toggleButton.trigger('click')
+
+        expect(toggleDarkMode).toHaveBeenCalled()
+    })
+
+    it('shows sun icon and switch-to-light label when dark mode is active', () => {
+        isDark.value = true
+
+        const wrapper = createWrapper()
+
+        const toggleButton = wrapper.find('[aria-label="Switch to light mode"]')
+
+        expect(toggleButton.exists()).toBe(true)
+        expect(toggleButton.text()).toContain('sun')
+    })
+
     it('toggles dropdown', async () => {
         const wrapper = createWrapper()
 
diff --git a/tests/Unit/assets/vue/views/TemplateEditorView.spec.js b/tests/Unit/assets/vue/views/TemplateEditorView.spec.js
index 4df6feb..444033c 100644
--- a/tests/Unit/assets/vue/views/TemplateEditorView.spec.js
+++ b/tests/Unit/assets/vue/views/TemplateEditorView.spec.js
@@ -97,6 +97,27 @@ describe('TemplateEditView', () => {
         )
     })
 
+    it('shows field-specific errors returned by the API', async () => {
+        vi.spyOn(api.templateClient, 'updateTemplate').mockRejectedValue({
+            name: 'ValidationException',
+            message: 'Validation failed',
+            responseData: {
+                title: ['This value is too long.'],
+                list_order: ['This value should be a valid number.'],
+            },
+        })
+
+        const wrapper = await mountComponent()
+
+        await wrapper.find('#template-title').setValue('Updated Template')
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Title: This value is too long.')
+        expect(wrapper.text()).toContain('List order: This value should be a valid number.')
+        expect(wrapper.text()).not.toContain('Validation failed')
+    })
+
     it('creates a template in create mode', async () => {
         mockRoute.name = 'template-create'
         mockRoute.params.templateId = ''
diff --git a/tests/bootstrap.php b/tests/bootstrap.php
new file mode 100644
index 0000000..8a148f7
--- /dev/null
+++ b/tests/bootstrap.php
@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+use Symfony\Component\Dotenv\Dotenv;
+
+require dirname(__DIR__) . '/vendor/autoload.php';
+
+if (method_exists(Dotenv::class, 'bootEnv')) {
+    (new Dotenv())->bootEnv(dirname(__DIR__) . '/.env');
+}
diff --git a/yarn.lock b/yarn.lock
index af05d36..e77bc2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1989,13 +1989,13 @@
   resolved "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz"
   integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
-"@symfony/webpack-encore@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-5.1.0.tgz"
-  integrity sha512-uSaRnssJj+ZHH9UcHRGI8kQzFb5hfCiPtBwP15vuKH5hTPGeJjQouDDo4UaPB3LuSYJXudKFiSDAnj/4d2z4aQ==
+"@symfony/webpack-encore@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@symfony/webpack-encore/-/webpack-encore-5.3.1.tgz#a8b183bb8ba9f8ce0aa47be5f520ae194ffa1412"
+  integrity sha512-fNevCvcFMWrY63b901F2mvuECFUqwrQUUEJ9TZkO42lc81F0D6yiTMCFpzTKNrUIO7JSoD8aQxAWJbI5Kly4yg==
   dependencies:
     "@nuxt/friendly-errors-webpack-plugin" "^2.5.1"
-    babel-loader "^9.1.3"
+    babel-loader "^9.1.3 || ^10.0.0"
     css-loader "^7.1.0"
     css-minimizer-webpack-plugin "^7.0.0"
     fastest-levenshtein "^1.0.16"
@@ -2004,10 +2004,11 @@
     pretty-error "^4.0.0"
     resolve-url-loader "^5.0.0"
     semver "^7.3.2"
-    style-loader "^3.3.0"
+    style-loader "^3.3.0 || ^4.0.0"
     tapable "^2.2.1"
     terser-webpack-plugin "^5.3.0"
-    tmp "^0.2.1"
+    tmp "^0.2.5"
+    webpack-manifest-plugin "^5.0.1"
     yargs-parser "^21.0.0"
 
 "@tailwindcss/node@4.2.1":
@@ -2743,13 +2744,12 @@ babel-loader@^10.0.0:
   dependencies:
     find-up "^5.0.0"
 
-babel-loader@^9.1.3:
-  version "9.2.1"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz"
-  integrity sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==
+"babel-loader@^9.1.3 || ^10.0.0":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-10.1.1.tgz#ce9748e85b7071eb88006e3cfa9e6cf14eeb97c5"
+  integrity sha512-JwKSzk2kjIe7mgPK+/lyZ2QAaJcpahNAdM+hgR2HI8D0OJVkdj8Rl6J3kaLYki9pwF7P2iWnD8qVv80Lq1ABtg==
   dependencies:
-    find-cache-dir "^4.0.0"
-    schema-utils "^4.0.0"
+    find-up "^5.0.0"
 
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.13"
@@ -3091,11 +3091,6 @@ commander@^7.2.0:
   resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-common-path-prefix@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz"
-  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
-
 config-chain@^1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
@@ -3728,14 +3723,6 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-find-cache-dir@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz"
-  integrity sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==
-  dependencies:
-    common-path-prefix "^3.0.0"
-    pkg-dir "^7.0.0"
-
 find-up@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
@@ -3752,14 +3739,6 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-find-up@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz"
-  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
-  dependencies:
-    locate-path "^7.1.0"
-    path-exists "^5.0.0"
-
 flat@^5.0.2:
   version "5.0.2"
   resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz"
@@ -4481,13 +4460,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-locate-path@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz"
-  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
-  dependencies:
-    p-locate "^6.0.0"
-
 lodash-es@^4.17.22:
   version "4.18.1"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.18.1.tgz#b962eeb80d9d983a900bf342961fb7418ca10b1d"
@@ -5108,13 +5080,6 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-limit@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz"
-  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
-  dependencies:
-    yocto-queue "^1.0.0"
-
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
@@ -5129,13 +5094,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-locate@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz"
-  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
-  dependencies:
-    p-limit "^4.0.0"
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
@@ -5175,11 +5133,6 @@ path-exists@^4.0.0:
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-exists@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz"
-  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
-
 path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
@@ -5230,13 +5183,6 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pkg-dir@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz"
-  integrity sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==
-  dependencies:
-    find-up "^6.3.0"
-
 postcss-calc@^10.1.1:
   version "10.1.1"
   resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.1.1.tgz"
@@ -5891,6 +5837,11 @@ slash@^5.1.0:
   resolved "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz"
   integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
 
+source-list-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
 source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
@@ -5904,7 +5855,7 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@0.6.1, source-map@^0.6.0:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -5985,10 +5936,10 @@ strip-ansi@^7.0.1:
   dependencies:
     ansi-regex "^6.2.2"
 
-style-loader@^3.3.0:
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz"
-  integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
+"style-loader@^3.3.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
+  integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
 stylehacks@^7.0.5:
   version "7.0.5"
@@ -6047,6 +5998,11 @@ tailwindcss@4.2.1, tailwindcss@^4.2.1:
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz"
   integrity sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==
 
+tapable@^2.0.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.3.tgz#5da7c9992c46038221267985ab28421a8879f160"
+  integrity sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==
+
 tapable@^2.2.1:
   version "2.2.2"
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz"
@@ -6125,10 +6081,10 @@ tldts@^6.1.32:
   dependencies:
     tldts-core "^6.1.86"
 
-tmp@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz"
-  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
+tmp@^0.2.5:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.7.tgz#26f4db11d1601ce8012dcb8a798ece1c06a99059"
+  integrity sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==
 
 to-regex-range@^5.0.1:
   version "5.0.1"
@@ -6460,6 +6416,14 @@ webpack-cli@^5.1.4:
     rechoir "^0.8.0"
     webpack-merge "^5.7.3"
 
+webpack-manifest-plugin@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.1.tgz#8d401fec7fa587cba5af561eb60e39d6a8050e8a"
+  integrity sha512-xTlX7dC3hrASixA2inuWFMz6qHsNi6MT3Uiqw621sJjRTShtpMjbDYhPPZBwWUKdIYKIjSq9em6+uzWayf38aQ==
+  dependencies:
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
+
 webpack-merge@^5.7.3:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
@@ -6477,6 +6441,14 @@ webpack-notifier@^1.15.0:
     node-notifier "^9.0.0"
     strip-ansi "^6.0.0"
 
+webpack-sources@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
+  integrity sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==
+  dependencies:
+    source-list-map "^2.0.1"
+    source-map "^0.6.1"
+
 webpack-sources@^3.3.3:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.3.4.tgz#a338b95eb484ecc75fbb196cbe8a2890618b4891"
@@ -6601,11 +6573,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yocto-queue@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz"
-  integrity sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==
-
 zwitch@^2.0.0, zwitch@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"