diff --git a/.gitignore b/.gitignore
index 4f648764..caa8269a 100755
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@
 /node_modules
 /drivers/
 .codex
+.claude/
diff --git a/assets/router/index.js b/assets/router/index.js
index fa9fab49..d65e1dae 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -1,39 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import DashboardView from '../vue/views/DashboardView.vue'
-import SubscribersView from '../vue/views/SubscribersView.vue'
-import ListsView from '../vue/views/ListsView.vue'
-import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
-import CampaignsView from '../vue/views/CampaignsView.vue'
-import CampaignEditView from '../vue/views/CampaignEditView.vue'
-import StuckCampaignsView from '../vue/views/StuckCampaignsView.vue'
-import TemplatesView from '../vue/views/TemplatesView.vue'
-import TemplateEditView from '../vue/views/TemplateEditView.vue'
-import BouncesView from '../vue/views/BouncesView.vue'
-import AnalyticsView from '../vue/views/AnalyticsView.vue'
-import PublicPagesView from '../vue/views/PublicPagesView.vue'
-import PublicPageEditView from '../vue/views/PublicPageEditView.vue'
-import SettingsView from '../vue/views/SettingsView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
     routes: [
-        { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
-        { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
-        { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
-        { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
-        { path: '/campaigns/stuck', name: 'stuck-campaigns', component: StuckCampaignsView, meta: { title: 'Stuck Campaigns' } },
-        { path: '/templates', name: 'templates', component: TemplatesView, meta: { title: 'Templates' } },
-        { path: '/templates/create', name: 'template-create', component: TemplateEditView, meta: { title: 'Create Template' } },
-        { path: '/templates/:templateId/edit', name: 'template-edit', component: TemplateEditView, meta: { title: 'Edit Template' } },
-        { path: '/campaigns/create', name: 'campaign-create', component: CampaignEditView, meta: { title: 'Create Campaign' } },
-        { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
-        { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
-        { path: '/bounces', name: 'bounces', component: BouncesView, meta: { title: 'Bounces' } },
-        { path: '/analytics', name: 'analytics', component: AnalyticsView, meta: { title: 'Analytics' } },
-        { path: '/public', name: 'public-pages', component: PublicPagesView, meta: { title: 'Public Pages' } },
-        { path: '/public/create', name: 'public-page-create', component: PublicPageEditView, meta: { title: 'Create Public Page' } },
-        { path: '/public/:pageId/edit', name: 'public-page-edit', component: PublicPageEditView, meta: { title: 'Edit Public Page' } },
-        { path: '/settings', name: 'settings', component: SettingsView, meta: { title: 'Settings' } },
+        { path: '/', name: 'dashboard', component: () => import('../vue/views/DashboardView.vue'), meta: { title: 'Dashboard' } },
+        { path: '/subscribers', name: 'subscribers', component: () => import('../vue/views/SubscribersView.vue'), meta: { title: 'Subscribers' } },
+        { path: '/lists', name: 'lists', component: () => import('../vue/views/ListsView.vue'), meta: { title: 'Lists' } },
+        { path: '/campaigns', name: 'campaigns', component: () => import('../vue/views/CampaignsView.vue'), meta: { title: 'Campaigns' } },
+        { path: '/campaigns/stuck', name: 'stuck-campaigns', component: () => import('../vue/views/StuckCampaignsView.vue'), meta: { title: 'Stuck Campaigns' } },
+        { path: '/templates', name: 'templates', component: () => import('../vue/views/TemplatesView.vue'), meta: { title: 'Templates' } },
+        { path: '/templates/create', name: 'template-create', component: () => import('../vue/views/TemplateEditView.vue'), meta: { title: 'Create Template' } },
+        { path: '/templates/:templateId/edit', name: 'template-edit', component: () => import('../vue/views/TemplateEditView.vue'), meta: { title: 'Edit Template' } },
+        { path: '/campaigns/create', name: 'campaign-create', component: () => import('../vue/views/CampaignEditView.vue'), meta: { title: 'Create Campaign' } },
+        { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: () => import('../vue/views/CampaignEditView.vue'), meta: { title: 'Edit Campaign' } },
+        { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: () => import('../vue/views/ListSubscribersView.vue'), meta: { title: 'List Subscribers' } },
+        { path: '/bounces', name: 'bounces', component: () => import('../vue/views/BouncesView.vue'), meta: { title: 'Bounces' } },
+        { path: '/analytics', name: 'analytics', component: () => import('../vue/views/AnalyticsView.vue'), meta: { title: 'Analytics' } },
+        { path: '/public', name: 'public-pages', component: () => import('../vue/views/PublicPagesView.vue'), meta: { title: 'Public Pages' } },
+        { path: '/public/create', name: 'public-page-create', component: () => import('../vue/views/PublicPageEditView.vue'), meta: { title: 'Create Public Page' } },
+        { path: '/public/:pageId/edit', name: 'public-page-edit', component: () => import('../vue/views/PublicPageEditView.vue'), meta: { title: 'Edit Public Page' } },
+        { path: '/settings', name: 'settings', component: () => import('../vue/views/SettingsView.vue'), meta: { title: 'Settings' } },
         { path: '/:pathMatch(.*)*', redirect: '/' },
     ],
 });
diff --git a/assets/vue/components/base/ActionButton.vue b/assets/vue/components/base/ActionButton.vue
new file mode 100644
index 00000000..7c145a61
--- /dev/null
+++ b/assets/vue/components/base/ActionButton.vue
@@ -0,0 +1,47 @@
+<!-- assets/vue/components/base/ActionButton.vue -->
+<template>
+  <button
+      type="button"
+      :class="buttonClass"
+      v-bind="$attrs"
+  >
+    <BaseIcon v-if="icon" :name="icon" class="w-3.5 h-3.5" />
+    <slot />
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BaseIcon from './BaseIcon.vue'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'neutral' // neutral | danger | success | info | warning
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  block: {
+    type: Boolean,
+    default: false // centers content, for full-width mobile buttons
+  }
+})
+
+const variantClassMap = {
+  neutral: 'border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700',
+  danger: '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',
+  success: 'border-emerald-200 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10',
+  info: 'border-blue-200 dark:border-blue-500/20 text-blue-700 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10',
+  warning: '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'
+}
+
+const buttonClass = computed(() => {
+  const base = 'inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-colors disabled:opacity-60'
+  const justify = props.block ? 'justify-center' : ''
+  const variant = variantClassMap[props.variant] || variantClassMap.neutral
+
+  return [base, justify, variant].filter(Boolean).join(' ')
+})
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/base/BaseBadge.vue b/assets/vue/components/base/BaseBadge.vue
index 53f2fec4..2ac0796b 100644
--- a/assets/vue/components/base/BaseBadge.vue
+++ b/assets/vue/components/base/BaseBadge.vue
@@ -11,7 +11,7 @@ import { computed } from 'vue'
 const props = defineProps({
   variant: {
     type: String,
-    default: 'neutral', // neutral | counter
+    default: 'neutral', // neutral | counter | success | danger | info | warning | purple
   },
 })
 
@@ -20,6 +20,16 @@ const badgeClass = computed(() => {
   switch (props.variant) {
     case 'counter':
       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 'success':
+      return `${base} bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400`;
+    case 'danger':
+      return `${base} bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400`;
+    case 'info':
+      return `${base} bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400`;
+    case 'warning':
+      return `${base} bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400`;
+    case 'purple':
+      return `${base} bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400`;
     case 'neutral':
     default:
       return `${base} bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-200`;
diff --git a/assets/vue/components/base/BaseButton.vue b/assets/vue/components/base/BaseButton.vue
index 10e50561..c840b22b 100644
--- a/assets/vue/components/base/BaseButton.vue
+++ b/assets/vue/components/base/BaseButton.vue
@@ -5,27 +5,35 @@
       type="button"
       v-bind="$attrs"
   >
+    <BaseIcon v-if="icon" :name="icon" class="w-3.5 h-3.5" inherit-color />
     <slot />
   </button>
 </template>
 
 <script setup>
 import { computed } from 'vue'
+import BaseIcon from './BaseIcon.vue'
 
 const props = defineProps({
   variant: {
     type: String,
-    default: 'primary', // primary | secondary | ghost
+    default: 'primary', // primary | secondary | ghost | accent
+  },
+  icon: {
+    type: String,
+    default: '',
   },
 })
 
 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';
+  const base = 'inline-flex items-center gap-2 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 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 dark:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-500/10 focus:outline-none';
+      return 'inline-flex items-center gap-2 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 'accent':
+      return 'inline-flex shrink-0 items-center gap-2 whitespace-nowrap min-w-max px-4 py-2 border border-transparent text-xs font-bold rounded-lg shadow-sm bg-ext-wf1 text-white hover:bg-ext-wf3 shadow-indigo-500/20 transition-shadow disabled:opacity-60 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/BaseDataTable.vue b/assets/vue/components/base/BaseDataTable.vue
new file mode 100644
index 00000000..bbdc7329
--- /dev/null
+++ b/assets/vue/components/base/BaseDataTable.vue
@@ -0,0 +1,79 @@
+<!--
+  Shared desktop-table / mobile-card layout with built-in loading, error
+  and empty states. Consumers supply column headers, row cells and the
+  mobile card body via scoped slots; everything else (wrapper markup,
+  state rows/cards, colspan handling) lives here once.
+-->
+<template>
+  <div class="overflow-x-auto">
+    <table class="w-full text-left text-sm hidden md:table">
+      <thead class="bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
+        <tr>
+          <slot name="head" />
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
+        <tr
+            v-for="item in items"
+            :key="rowKey(item)"
+            class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+        >
+          <slot name="row" :item="item" />
+        </tr>
+
+        <tr v-if="isLoading">
+          <td :colspan="colspan" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
+            {{ loadingMessage }}
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td :colspan="colspan" class="px-6 py-8 text-center text-red-600 dark:text-red-400">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        <tr v-else-if="items.length === 0">
+          <td :colspan="colspan" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
+            {{ emptyMessage }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
+      <div
+          v-for="item in items"
+          :key="`mobile-${rowKey(item)}`"
+          class="p-4 space-y-3"
+      >
+        <slot name="card" :item="item" />
+      </div>
+
+      <div v-if="isLoading" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
+        {{ loadingMessage }}
+      </div>
+
+      <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="items.length === 0" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
+        {{ emptyMessage }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  isLoading: { type: Boolean, default: false },
+  loadError: { type: String, default: '' },
+  emptyMessage: { type: String, default: 'No items found.' },
+  loadingMessage: { type: String, default: 'Loading...' },
+  colspan: { type: Number, default: 1 },
+  rowKey: { type: Function, default: (item) => item.id }
+})
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/base/BaseIcon.vue b/assets/vue/components/base/BaseIcon.vue
index 573d2f84..dc11ff50 100644
--- a/assets/vue/components/base/BaseIcon.vue
+++ b/assets/vue/components/base/BaseIcon.vue
@@ -18,6 +18,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  // when true, skips the default slate/indigo color so the icon inherits
+  // currentColor from its parent (e.g. white text on a solid button)
+  inheritColor: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // Simple internal SVG registry
@@ -99,6 +106,8 @@ const icons = {
   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>`,
+
+  plus: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>`,
 };
 
 const svg = computed(() => icons[props.name] || "");
@@ -111,7 +120,9 @@ const wrapperClass = computed(() => {
     "transition-colors",
   ];
 
-  if (props.active) {
+  if (props.inheritColor) {
+    // no color class: SVG's stroke="currentColor" picks up the parent's text color
+  } else if (props.active) {
     classes.push("text-ext-wf3 dark:text-indigo-400");
   } else {
     classes.push("text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300");
diff --git a/assets/vue/components/base/BaseModal.vue b/assets/vue/components/base/BaseModal.vue
new file mode 100644
index 00000000..2de8cd75
--- /dev/null
+++ b/assets/vue/components/base/BaseModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      @click.self="handleBackdropClick"
+  >
+    <div :class="['w-full rounded-xl bg-white dark:bg-slate-800 shadow-xl max-h-[90vh] overflow-y-auto', maxWidthClass]">
+      <div class="border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-between items-center">
+        <slot name="title">
+          <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">{{ title }}</h2>
+        </slot>
+
+        <button
+            v-if="showClose"
+            type="button"
+            aria-label="Close"
+            class="text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
+            @click="$emit('close')"
+        >
+          ✕
+        </button>
+      </div>
+
+      <slot />
+
+      <div
+          v-if="$slots.footer"
+          class="bg-slate-50 dark:bg-slate-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2 rounded-b-xl"
+      >
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  isOpen: Boolean,
+  title: { type: String, default: '' },
+  maxWidth: { type: String, default: 'lg' }, // sm | md | lg | xl | 2xl
+  showClose: { type: Boolean, default: true },
+  closeOnBackdrop: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close'])
+
+const maxWidthMap = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl'
+}
+
+const maxWidthClass = computed(() => maxWidthMap[props.maxWidth] || maxWidthMap.lg)
+
+const handleBackdropClick = () => {
+  if (props.closeOnBackdrop) {
+    emit('close')
+  }
+}
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/bounces/BounceOverview.vue b/assets/vue/components/bounces/BounceOverview.vue
index c368bf77..9e00691b 100644
--- a/assets/vue/components/bounces/BounceOverview.vue
+++ b/assets/vue/components/bounces/BounceOverview.vue
@@ -17,84 +17,49 @@
         </div>
       </div>
 
-      <div class="overflow-x-auto">
-        <table class="w-full text-left text-sm hidden md:table">
-          <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>
-              <th class="px-6 py-4">Subscriber</th>
-              <th class="px-6 py-4">Campaign</th>
-              <th class="px-6 py-4">Status</th>
-              <th class="px-6 py-4">Comment</th>
-            </tr>
-          </thead>
-          <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 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 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 dark:text-slate-400">No bounces found.</td>
-            </tr>
-            <tr
-              v-for="bounce in paginatedBounces"
-              :key="bounce.id"
-              class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
-            >
-              <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 dark:text-slate-300">{{ bounce.comment }}</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <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 dark:text-slate-400 text-sm"
-          >
-            Loading bounces...
-          </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
-            v-else-if="paginatedBounces.length === 0"
-            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-          >
-            No bounces found.
-          </div>
-          <div
-            v-for="bounce in paginatedBounces"
-            :key="`mobile-${bounce.id}`"
-            class="p-4 space-y-2.5"
-          >
-            <div class="flex items-center justify-between gap-2">
-              <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 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>
+      <BaseDataTable
+          :items="paginatedBounces"
+          :is-loading="isLoading"
+          :load-error="errorMessage"
+          loading-message="Loading bounces..."
+          empty-message="No bounces found."
+          :colspan="6"
+      >
+        <template #head>
+          <th class="px-6 py-4">ID</th>
+          <th class="px-6 py-4">Date</th>
+          <th class="px-6 py-4">Subscriber</th>
+          <th class="px-6 py-4">Campaign</th>
+          <th class="px-6 py-4">Status</th>
+          <th class="px-6 py-4">Comment</th>
+        </template>
+
+        <template #row="{ item: bounce }">
+          <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">
+            <BaseBadge class="capitalize" :variant="bounce.statusVariant">
+              {{ bounce.status }}
+            </BaseBadge>
+          </td>
+          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ bounce.comment }}</td>
+        </template>
+
+        <template #card="{ item: bounce }">
+          <div class="flex items-center justify-between gap-2">
+            <p class="font-semibold text-slate-900 dark:text-slate-100">#{{ bounce.id }}</p>
+            <BaseBadge class="capitalize" :variant="bounce.statusVariant">
+              {{ bounce.status }}
+            </BaseBadge>
           </div>
-        </div>
-      </div>
+          <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>
+        </template>
+      </BaseDataTable>
 
       <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">
@@ -126,6 +91,8 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { bouncesClient } from '../../api'
+import BaseBadge from '../base/BaseBadge.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
 
 const pageSize = 5
 const currentPage = ref(1)
@@ -153,22 +120,22 @@ const formatDate = (dateValue) => {
   }).format(date)
 }
 
-const getStatusClass = (status) => {
+const getStatusVariant = (status) => {
   const normalized = String(status ?? '').toLowerCase()
 
   if (normalized.includes('blacklist')) {
-    return 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400'
+    return 'purple'
   }
 
   if (normalized.includes('retry') || normalized.includes('soft')) {
-    return 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
+    return 'warning'
   }
 
   if (normalized.includes('process')) {
-    return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
+    return 'success'
   }
 
-  return 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300'
+  return 'neutral'
 }
 
 const normalizedBounces = computed(() =>
@@ -179,7 +146,7 @@ const normalizedBounces = computed(() =>
       subject: item.message_subject ?? 'No subject',
       comment: item.comment ?? 'No comment',
       status: item.status ?? 'unknown',
-      statusClass: getStatusClass(item.status),
+      statusVariant: getStatusVariant(item.status),
     }))
 )
 
diff --git a/assets/vue/components/bounces/BouncePer.vue b/assets/vue/components/bounces/BouncePer.vue
index 68941f4d..c508d654 100644
--- a/assets/vue/components/bounces/BouncePer.vue
+++ b/assets/vue/components/bounces/BouncePer.vue
@@ -5,92 +5,55 @@
         <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 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>
-              <th class="px-6 py-4">Confirmed</th>
-              <th class="px-6 py-4">Blacklisted</th>
-              <th class="px-6 py-4 text-right">Total Bounces</th>
-            </tr>
-          </thead>
-          <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 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 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 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 dark:hover:bg-slate-700 transition-colors"
-            >
-              <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 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>
-              </td>
-              <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 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 dark:text-slate-100 font-semibold">{{ subscriber.totalBounces }}</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <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 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 dark:text-slate-400 text-sm">
-            No subscriber bounce data found.
+      <BaseDataTable
+          :items="normalizedSubscriberBounces"
+          :is-loading="isLoadingSubscribers"
+          :load-error="subscriberErrorMessage"
+          loading-message="Loading subscriber bounce data..."
+          empty-message="No subscriber bounce data found."
+          :colspan="5"
+          :row-key="(item) => item.subscriberId"
+      >
+        <template #head>
+          <th class="px-6 py-4">Subscriber</th>
+          <th class="px-6 py-4">Email</th>
+          <th class="px-6 py-4">Confirmed</th>
+          <th class="px-6 py-4">Blacklisted</th>
+          <th class="px-6 py-4 text-right">Total Bounces</th>
+        </template>
+
+        <template #row="{ item: subscriber }">
+          <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">
+            <BaseBadge :variant="subscriber.confirmed ? 'success' : 'neutral'">
+              {{ subscriber.confirmed ? 'Yes' : 'No' }}
+            </BaseBadge>
+          </td>
+          <td class="px-6 py-4">
+            <BaseBadge :variant="subscriber.blacklisted ? 'danger' : 'neutral'">
+              {{ subscriber.blacklisted ? 'Yes' : 'No' }}
+            </BaseBadge>
+          </td>
+          <td class="px-6 py-4 text-right text-slate-900 dark:text-slate-100 font-semibold">{{ subscriber.totalBounces }}</td>
+        </template>
+
+        <template #card="{ item: subscriber }">
+          <div class="flex items-center justify-between gap-2">
+            <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>
-          <div
-            v-for="subscriber in normalizedSubscriberBounces"
-            :key="`mobile-subscriber-${subscriber.subscriberId}`"
-            class="p-4 space-y-2"
-          >
-            <div class="flex items-center justify-between gap-2">
-              <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 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 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 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>
-            </div>
+          <p class="text-sm text-slate-800 dark:text-slate-100">{{ subscriber.email }}</p>
+          <div class="flex items-center gap-2 text-xs">
+            <BaseBadge :variant="subscriber.confirmed ? 'success' : 'neutral'">
+              Confirmed: {{ subscriber.confirmed ? 'Yes' : 'No' }}
+            </BaseBadge>
+            <BaseBadge :variant="subscriber.blacklisted ? 'danger' : 'neutral'">
+              Blacklisted: {{ subscriber.blacklisted ? 'Yes' : 'No' }}
+            </BaseBadge>
           </div>
-        </div>
-      </div>
+        </template>
+      </BaseDataTable>
     </div>
 
     <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
@@ -98,60 +61,35 @@
         <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 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 dark:divide-slate-700">
-            <tr v-if="isLoadingCampaigns">
-              <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 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 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 dark:hover:bg-slate-700 transition-colors"
-            >
-              <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 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 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 dark:text-slate-400 text-sm">
-            No campaign bounce data found.
-          </div>
-          <div
-            v-for="campaign in normalizedCampaignBounces"
-            :key="`mobile-campaign-${campaign.messageId}`"
-            class="p-4 space-y-2"
-          >
-            <div class="flex items-center justify-between gap-2">
-              <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 dark:text-slate-100">{{ campaign.subject }}</p>
+      <BaseDataTable
+          :items="normalizedCampaignBounces"
+          :is-loading="isLoadingCampaigns"
+          :load-error="campaignErrorMessage"
+          loading-message="Loading campaign bounce data..."
+          empty-message="No campaign bounce data found."
+          :colspan="3"
+          :row-key="(item) => item.messageId"
+      >
+        <template #head>
+          <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>
+        </template>
+
+        <template #row="{ item: campaign }">
+          <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>
+        </template>
+
+        <template #card="{ item: campaign }">
+          <div class="flex items-center justify-between gap-2">
+            <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>
-        </div>
-      </div>
+          <p class="text-sm text-slate-800 dark:text-slate-100">{{ campaign.subject }}</p>
+        </template>
+      </BaseDataTable>
     </div>
   </div>
 </template>
@@ -159,6 +97,8 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import { bouncesClient } from '../../api'
+import BaseBadge from '../base/BaseBadge.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
 
 const bouncesPerCampaign = ref([])
 const bouncesPerSubscriber = ref([])
diff --git a/assets/vue/components/bounces/BounceRules.vue b/assets/vue/components/bounces/BounceRules.vue
index 18561a32..f134e1c2 100644
--- a/assets/vue/components/bounces/BounceRules.vue
+++ b/assets/vue/components/bounces/BounceRules.vue
@@ -67,27 +67,13 @@
 <!--      </div>-->
     </div>
 
-    <div
-      v-if="isCreateModalOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-      aria-labelledby="create-bounce-rule-modal-title"
-      role="dialog"
-      aria-modal="true"
+    <BaseModal
+        :is-open="isCreateModalOpen"
+        title="New Bounce Rule"
+        max-width="lg"
+        @close="closeCreateModal"
     >
-      <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 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 dark:text-slate-100">
-                New Bounce Rule
-              </h3>
-              <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>
-
+      <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitCreateRule">
             <div>
               <label for="bounce-rule-regex" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Regex</label>
               <input
@@ -207,35 +193,35 @@
             </div>
 
             <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
-          </div>
-
-          <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"
-              :disabled="isCreatingRule"
-              data-testid="modal-submit"
-            >
-              {{ isCreatingRule ? 'Creating...' : 'Create Rule' }}
-            </button>
-            <button
-              type="button"
-              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"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
       </form>
-    </div>
+
+      <template #footer>
+        <button
+            type="button"
+            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"
+            :disabled="isCreatingRule"
+            data-testid="modal-submit"
+            @click="submitCreateRule"
+        >
+          {{ isCreatingRule ? 'Creating...' : 'Create Rule' }}
+        </button>
+        <button
+            type="button"
+            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"
+            data-testid="modal-cancel"
+            @click="closeCreateModal"
+        >
+          Cancel
+        </button>
+      </template>
+    </BaseModal>
   </div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
+import BaseModal from '../base/BaseModal.vue'
 import { bouncesClient} from "../../api";
 
 const allBounceRules = ref([])
diff --git a/assets/vue/components/campaigns/CampaignDirectory.vue b/assets/vue/components/campaigns/CampaignDirectory.vue
index fc8a4338..5104efd7 100644
--- a/assets/vue/components/campaigns/CampaignDirectory.vue
+++ b/assets/vue/components/campaigns/CampaignDirectory.vue
@@ -17,306 +17,139 @@
       </div>
     </div>
 
-    <div class="overflow-x-auto">
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Lists</th>
-          <th class="px-6 py-4">Processed</th>
-          <th class="px-6 py-4" v-if="showStatistics">Statistics</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-
-        <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 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 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 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 dark:hover:bg-slate-700 transition-colors"
-        >
-          <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"
-              :class="statusClasses[campaign.statusKey] || statusClasses.unknown"
+    <BaseDataTable
+        :items="paginatedCampaigns"
+        :is-loading="loading"
+        :load-error="error"
+        loading-message="Loading campaigns..."
+        empty-message="No campaigns for this filter."
+        :colspan="showStatistics ? 6 : 5"
+    >
+      <template #head>
+        <th class="px-6 py-4">Subject</th>
+        <th class="px-6 py-4">Status</th>
+        <th class="px-6 py-4">Lists</th>
+        <th class="px-6 py-4">Processed</th>
+        <th class="px-6 py-4" v-if="showStatistics">Statistics</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: campaign }">
+        <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">{{ campaign.subject }}</td>
+        <td class="px-6 py-4">
+          <BaseBadge :variant="statusVariants[campaign.statusKey] || statusVariants.unknown">
+            {{ campaign.statusLabel }}
+          </BaseBadge>
+        </td>
+        <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>
+          <template v-else-if="campaign.lists.length <= 3">
+            <p
+                v-for="list in campaign.lists"
+                :key="`${campaign.id}-${list.id}`"
+                class="text-xs leading-5"
             >
-              {{ campaign.statusLabel }}
-            </span>
-          </td>
-          <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>
-            <template v-else-if="campaign.lists.length <= 3">
-              <p
-                  v-for="list in campaign.lists"
-                  :key="`${campaign.id}-${list.id}`"
-                  class="text-xs leading-5"
-              >
-                <router-link
-                    :to="`/lists/${list.id}/subscribers`"
-                    class="text-blue-600 dark:text-blue-400 hover:underline"
-                >
-                  {{ list.name }}
-                </router-link>
-              </p>
-            </template>
-            <template v-else>
-              <button
-                  type="button"
-                  class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
-                  @click="toggleListsExpanded(campaign.id)"
+              <router-link
+                  :to="`/lists/${list.id}/subscribers`"
+                  class="text-blue-600 dark:text-blue-400 hover:underline"
               >
-                {{ isListsExpanded(campaign.id) ? '▼' : '▶' }} {{ campaign.lists.length }} lists
-              </button>
-              <p
-                  v-if="isListsExpanded(campaign.id)"
-                  v-for="list in campaign.lists"
-                  :key="`${campaign.id}-${list.id}`"
-                  class="text-xs leading-5"
+                {{ list.name }}
+              </router-link>
+            </p>
+          </template>
+          <template v-else>
+            <button
+                type="button"
+                class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                @click="toggleListsExpanded(campaign.id)"
+            >
+              {{ isListsExpanded(campaign.id) ? '▼' : '▶' }} {{ campaign.lists.length }} lists
+            </button>
+            <p
+                v-if="isListsExpanded(campaign.id)"
+                v-for="list in campaign.lists"
+                :key="`${campaign.id}-${list.id}`"
+                class="text-xs leading-5"
+            >
+              - <router-link
+                  :to="`/lists/${list.id}/subscribers`"
+                  class="text-blue-600 dark:text-blue-400 hover:underline"
               >
-                - <router-link
-                    :to="`/lists/${list.id}/subscribers`"
-                    class="text-blue-600 dark:text-blue-400 hover:underline"
-                >
-                  {{ list.name }}
-                </router-link>
-              </p>
-            </template>
-          </td>
-          <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 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
+                {{ list.name }}
+              </router-link>
+            </p>
+          </template>
+        </td>
+        <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 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">
+            <ActionButton
                 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 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"
+                variant="danger"
+                icon="delete"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleDelete(campaign)"
-              >
-                <BaseIcon name="delete" class="w-3.5 h-3.5" />
-                Delete
-              </button>
-              <button
+            >
+              Delete
+            </ActionButton>
+            <ActionButton
                 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 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"
+                variant="danger"
+                icon="pause"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleSuspend(campaign.id)"
-              >
-                <BaseIcon name="pause" class="w-3.5 h-3.5" />
-                Suspend
-              </button>
-              <button
+            >
+              Suspend
+            </ActionButton>
+            <ActionButton
                 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 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"
+                variant="warning"
+                icon="start"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleRequeue(campaign.id)"
-              >
-                <BaseIcon name="start" class="w-3.5 h-3.5" />
-                Requeue
-              </button>
-              <button
+            >
+              Requeue
+            </ActionButton>
+            <ActionButton
                 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 dark:border-green-500/20 text-green-700 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors"
+                variant="success"
+                icon="copy"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleCopyToDraft(campaign.id)"
-              >
-                <BaseIcon name="copy" class="w-3.5 h-3.5" />
-                Copy to draft
-              </button>
-              <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 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)"
-              >
-                <BaseIcon name="edit" class="w-3.5 h-3.5" />
-                Edit
-              </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 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)"
-              >
-                <BaseIcon name="eye" class="w-3.5 h-3.5" />
-                View
-              </button>
-            </div>
-            <p
-              v-if="getActionFeedback(campaign.id)"
-              class="mt-2 text-xs"
-              :class="{
-                '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 }}
-            </p>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-
-      <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 dark:text-slate-400 text-sm"
-        >
-          Loading campaigns...
-        </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
-          v-else-if="paginatedCampaigns.length === 0"
-          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-        >
-          No campaigns for this filter.
-        </div>
-
-        <div
-          v-for="campaign in paginatedCampaigns"
-          :key="`mobile-${campaign.id}`"
-          class="p-4 space-y-3"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <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"
-              :class="statusClasses[campaign.statusKey] || statusClasses.unknown"
-            >
-              {{ campaign.statusLabel }}
-            </span>
-          </div>
-
-          <div class="text-xs text-slate-600 dark:text-slate-300 space-y-1">
-            <p>
-              <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"
-                    :key="list.id"
-                >
-                  <router-link
-                      :to="`/lists/${list.id}/subscribers`"
-                      class="text-blue-600 dark:text-blue-400 hover:underline"
-                  >
-                    {{ list.name }}
-                  </router-link>
-                  <span v-if="index < campaign.lists.length - 1">, </span>
-                </span>
-              </template>
-            </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 dark:text-slate-200">Statistics:</span>
-              Total views {{ campaign.totalViews }}, Unique views {{ campaign.uniqueViews }}, Bounced {{ campaign.bounced }}
-            </p>
-          </div>
-
-          <div class="pt-2 flex flex-wrap 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 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)"
-            >
-              <BaseIcon name="delete" class="w-3.5 h-3.5" />
-              Delete
-            </button>
-            <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 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)"
-            >
-              <BaseIcon name="pause" class="w-3.5 h-3.5" />
-              Suspend
-            </button>
-            <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 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)"
-            >
-              <BaseIcon name="start" class="w-3.5 h-3.5" />
-              Requeue
-            </button>
-            <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 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)"
             >
-              <BaseIcon name="copy" class="w-3.5 h-3.5" />
               Copy to draft
-            </button>
-            <button
+            </ActionButton>
+            <ActionButton
                 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 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"
+                icon="edit"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleEdit(campaign.id)"
             >
-              <BaseIcon name="edit" class="w-3.5 h-3.5" />
               Edit
-            </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 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+            </ActionButton>
+            <ActionButton
+                icon="eye"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleView(campaign.id)"
             >
-              <BaseIcon name="eye" class="w-3.5 h-3.5" />
               View
-            </button>
+            </ActionButton>
           </div>
           <p
             v-if="getActionFeedback(campaign.id)"
-            class="text-xs"
+            class="mt-2 text-xs"
             :class="{
               'text-emerald-700 dark:text-emerald-400': getActionFeedback(campaign.id)?.type === 'success',
               'text-red-700 dark:text-red-400': getActionFeedback(campaign.id)?.type === 'error',
@@ -325,9 +158,112 @@
           >
             {{ getActionFeedback(campaign.id)?.message }}
           </p>
+        </td>
+      </template>
+
+      <template #card="{ item: campaign }">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <p class="font-semibold text-slate-900 dark:text-slate-100">{{ campaign.subject }}</p>
+          </div>
+          <BaseBadge class="whitespace-nowrap" :variant="statusVariants[campaign.statusKey] || statusVariants.unknown">
+            {{ campaign.statusLabel }}
+          </BaseBadge>
         </div>
-      </div>
-    </div>
+
+        <div class="text-xs text-slate-600 dark:text-slate-300 space-y-1">
+          <p>
+            <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"
+                  :key="list.id"
+              >
+                <router-link
+                    :to="`/lists/${list.id}/subscribers`"
+                    class="text-blue-600 dark:text-blue-400 hover:underline"
+                >
+                  {{ list.name }}
+                </router-link>
+                <span v-if="index < campaign.lists.length - 1">, </span>
+              </span>
+            </template>
+          </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 dark:text-slate-200">Statistics:</span>
+            Total views {{ campaign.totalViews }}, Unique views {{ campaign.uniqueViews }}, Bounced {{ campaign.bounced }}
+          </p>
+        </div>
+
+        <div class="pt-2 flex flex-wrap gap-2">
+          <ActionButton
+              v-if="campaign.statusKey === 'draft'"
+              variant="danger"
+              icon="delete"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleDelete(campaign)"
+          >
+            Delete
+          </ActionButton>
+          <ActionButton
+              v-else-if="campaign.statusKey === 'active'"
+              variant="danger"
+              icon="pause"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleSuspend(campaign.id)"
+          >
+            Suspend
+          </ActionButton>
+          <ActionButton
+              v-else
+              variant="warning"
+              icon="start"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleRequeue(campaign.id)"
+          >
+            Requeue
+          </ActionButton>
+          <ActionButton
+              v-if="campaign.statusKey === 'sent'"
+              variant="success"
+              icon="copy"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleCopyToDraft(campaign.id)"
+          >
+            Copy to draft
+          </ActionButton>
+          <ActionButton
+              v-if="campaign.statusKey === 'draft'"
+              icon="edit"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleEdit(campaign.id)"
+          >
+            Edit
+          </ActionButton>
+          <ActionButton
+              icon="eye"
+              :disabled="isActionLoading(campaign.id)"
+              @click="handleView(campaign.id)"
+          >
+            View
+          </ActionButton>
+        </div>
+        <p
+          v-if="getActionFeedback(campaign.id)"
+          class="text-xs"
+          :class="{
+            '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 }}
+        </p>
+      </template>
+    </BaseDataTable>
 
     <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">
@@ -372,65 +308,77 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { campaignClient, fetchAllLists, listMessagesClient, statisticsClient } from '../../api'
 import ViewCampaignModal from "./ViewCampaignModal.vue";
-import BaseIcon from '../base/BaseIcon.vue'
+import ActionButton from '../base/ActionButton.vue'
+import BaseBadge from '../base/BaseBadge.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
+import { useCampaignPagination } from '../../composables/useCampaignPagination'
+import { useCampaignStatistics } from '../../composables/useCampaignStatistics'
+import { useCampaignLists } from '../../composables/useCampaignLists'
 
 const pageSize = 5
 const route = useRoute()
 const router = useRouter()
-const rawCampaignsByPage = ref(new Map())
-const cursorsByPage = ref(new Map([[1, null]]))
-const totalForFilter = ref(0)
-const listsByCampaignId = ref({})
-const expandedListsByCampaignId = ref({})
-const statisticsByCampaignId = ref({})
-const loadingListsByCampaignId = ref({})
-const actionLoadingByCampaignId = ref({})
-const actionFeedbackByCampaignId = ref({})
-const isLoading = ref(false)
-const errorMessage = ref('')
-const mailingLists = ref([])
 
 const allowedStatuses = ['all', 'sent', 'active', 'draft']
+const activeStatuses = new Set(['submitted', 'prepared', 'inprocess'])
 
-const parseStatusQuery = (statusQuery) => {
-  const value = Array.isArray(statusQuery) ? statusQuery[0] : statusQuery
-  return allowedStatuses.includes(value) ? value : 'all'
-}
-
-const parsePageQuery = (pageQuery) => {
-  const queryValue = Array.isArray(pageQuery) ? pageQuery[0] : pageQuery
-  const page = Number.parseInt(String(queryValue ?? ''), 10)
-  return Number.isNaN(page) || page < 1 ? 1 : page
-}
+// Maps a UI filter tab to the server-side `status` query param. 'active' groups several
+// raw statuses, sent as a comma-separated list the backend matches via IN(...).
+const statusParamForFilter = (filterId) => ({
+  sent: 'sent',
+  draft: 'draft',
+  active: Array.from(activeStatuses).join(','),
+}[filterId] ?? null)
 
-const statusFilter = computed({
-  get() {
-    return parseStatusQuery(route.query.status)
-  },
-  async set(value) {
-    const normalized = allowedStatuses.includes(value) ? value : 'all'
-    const nextQuery = { ...route.query }
+const {
+  statusFilter,
+  currentPage,
+  rawItems: rawCampaigns,
+  total: totalForFilter,
+  loading,
+  error,
+  canGoPrevious,
+  canGoNext,
+  rangeStart,
+  rangeEnd,
+  setFilter,
+  previousPage,
+  nextPage,
+  loadUpToPage,
+  refreshCurrentPage,
+} = useCampaignPagination({
+  route,
+  router,
+  pageSize,
+  allowedStatuses,
+  fetchPage: (afterId, limit, status) =>
+      campaignClient.getCampaigns(afterId, limit, null, statusParamForFilter(status), 'desc'),
+})
 
-    if (normalized === 'all') {
-      delete nextQuery.status
-    } else {
-      nextQuery.status = normalized
-    }
+const {
+  showStatistics,
+  getCampaignStatistics,
+  fetchCampaignStatistics,
+} = useCampaignStatistics(statisticsClient)
 
-    delete nextQuery.page
+const {
+  getCampaignLists,
+  isListsLoading,
+  isListsExpanded,
+  toggleListsExpanded,
+  fetchListsForVisibleCampaigns,
+} = useCampaignLists(listMessagesClient)
 
-    await router.replace({ query: nextQuery })
-  }
-})
+const mailingLists = ref([])
+const actionLoadingByCampaignId = ref({})
+const actionFeedbackByCampaignId = ref({})
 
-const currentPage = ref(parsePageQuery(route.query.page))
 const isViewModalOpen = ref(false)
 const isViewLoading = ref(false)
 const selectedCampaign = ref(null)
 const viewErrorMessage = ref('')
 const isResending = ref(false)
 const resendErrorMessage = ref('')
-const showStatistics = ref(true)
 
 const filterOptions = [
   { id: 'all', label: 'All' },
@@ -439,15 +387,13 @@ const filterOptions = [
   { id: 'draft', label: 'Draft' }
 ]
 
-const statusClasses = {
-  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 statusVariants = {
+  sent: 'success',
+  active: 'info',
+  draft: 'neutral',
+  unknown: 'warning'
 }
 
-const activeStatuses = new Set(['submitted', 'prepared', 'inprocess'])
-
 const resolveStatusKey = (statusRaw) => {
   if (statusRaw === 'sent') return 'sent'
   if (statusRaw === 'draft') return 'draft'
@@ -502,13 +448,6 @@ const formatDuration = (fromValue, toValue) => {
   return `${hours}h ${minutes}m`
 }
 
-const getCampaignLists = (campaignId) => listsByCampaignId.value[campaignId] || []
-const getCampaignStatistics = (campaignId) => statisticsByCampaignId.value[campaignId] || {
-  bounces: 0,
-  sent: 0,
-  uniqueViews: 0,
-}
-
 const fetchMailingLists = async () => {
   try {
     mailingLists.value = await fetchAllLists()
@@ -518,14 +457,6 @@ const fetchMailingLists = async () => {
   }
 }
 
-const isListsLoading = (campaignId) => loadingListsByCampaignId.value[campaignId] === true
-const isListsExpanded = (campaignId) => expandedListsByCampaignId.value[campaignId] === true
-const toggleListsExpanded = (campaignId) => {
-  expandedListsByCampaignId.value = {
-    ...expandedListsByCampaignId.value,
-    [campaignId]: !isListsExpanded(campaignId)
-  }
-}
 const isActionLoading = (campaignId) => actionLoadingByCampaignId.value[campaignId] === true
 const getActionFeedback = (campaignId) => actionFeedbackByCampaignId.value[campaignId] || null
 
@@ -666,103 +597,6 @@ const handleCopyToDraft = async (campaignId) => {
   }
 }
 
-// Maps a UI filter tab to the server-side `status` query param. 'active' groups several
-// raw statuses, sent as a comma-separated list the backend matches via IN(...).
-const statusParamForFilter = (filterId) => ({
-  sent: 'sent',
-  draft: 'draft',
-  active: Array.from(activeStatuses).join(','),
-}[filterId] ?? null)
-
-// Bumped whenever the filter resets pagination, so a slow response from a since-abandoned
-// filter can never overwrite the current view after a newer request has already landed.
-let paginationGeneration = 0
-const pageRequestsInFlight = new Map()
-
-const resetPagination = () => {
-  paginationGeneration += 1
-  pageRequestsInFlight.clear()
-  rawCampaignsByPage.value = new Map()
-  cursorsByPage.value = new Map([[1, null]])
-}
-
-// Fetches and caches one page (5 campaigns) at a time, newest-first, filtered server-side by the
-// active status tab - no more draining the entire campaign list into memory up front. This only
-// fetches/caches; it never touches `currentPage` itself, so walking through intermediate pages
-// (see loadUpToPage) can't leak a transient wrong page number out to the URL-syncing watchers.
-const loadPage = (page) => {
-  if (rawCampaignsByPage.value.has(page)) {
-    return Promise.resolve()
-  }
-
-  const inFlight = pageRequestsInFlight.get(page)
-  if (inFlight) return inFlight
-
-  const generation = paginationGeneration
-  const request = (async () => {
-    isLoading.value = true
-    errorMessage.value = ''
-
-    try {
-      const afterId = cursorsByPage.value.get(page) ?? null
-      const response = await campaignClient.getCampaigns(
-        afterId,
-        pageSize,
-        null,
-        statusParamForFilter(statusFilter.value),
-        'desc'
-      )
-      if (generation !== paginationGeneration) return
-
-      const items = Array.isArray(response?.items) ? response.items : []
-
-      rawCampaignsByPage.value.set(page, items)
-      totalForFilter.value = Number(response?.pagination?.total ?? 0)
-
-      if (response?.pagination?.hasMore) {
-        cursorsByPage.value.set(page + 1, response?.pagination?.nextCursor ?? null)
-      }
-    } catch (error) {
-      if (generation === paginationGeneration) {
-        console.error(`Failed to load campaigns page ${page}:`, error)
-        errorMessage.value = 'Failed to load campaigns.'
-      }
-    } finally {
-      isLoading.value = false
-      pageRequestsInFlight.delete(page)
-    }
-  })()
-
-  pageRequestsInFlight.set(page, request)
-  return request
-}
-
-// Navigates to a page, fetching/caching every page from 1 up to it along the way (cursors for
-// unvisited pages aren't known ahead of time), then commits currentPage exactly once at the end.
-const loadUpToPage = async (targetPage) => {
-  for (let page = 1; page <= targetPage; page += 1) {
-    await loadPage(page)
-  }
-  currentPage.value = targetPage
-}
-
-// A mutation can shift which campaigns fall on the current page and every page after it
-// (but never on earlier pages), so drop those from the cache and refetch just the current one.
-const invalidateFromCurrentPage = () => {
-  const page = currentPage.value
-  for (const key of [...rawCampaignsByPage.value.keys()]) {
-    if (key >= page) rawCampaignsByPage.value.delete(key)
-  }
-  for (const key of [...cursorsByPage.value.keys()]) {
-    if (key > page) cursorsByPage.value.delete(key)
-  }
-}
-
-const refreshCurrentPage = async () => {
-  invalidateFromCurrentPage()
-  await loadPage(currentPage.value)
-}
-
 // Expensive (date formatting, statistics/lists lookups) — run only for the page being rendered.
 const normalizeCampaign = (campaign) => {
   const statusRaw = (campaign?.messageMetadata?.status || '').toLowerCase()
@@ -796,161 +630,7 @@ const normalizeCampaign = (campaign) => {
   }
 }
 
-const paginatedCampaigns = computed(() => (rawCampaignsByPage.value.get(currentPage.value) ?? []).map(normalizeCampaign))
-
-const totalPages = computed(() => Math.max(1, Math.ceil(totalForFilter.value / pageSize)))
-const canGoPrevious = computed(() => currentPage.value > 1)
-const canGoNext = computed(() => currentPage.value < totalPages.value)
-
-const rangeStart = computed(() => {
-  if (totalForFilter.value === 0) return 0
-  return (currentPage.value - 1) * pageSize + 1
-})
-
-const rangeEnd = computed(() => {
-  if (totalForFilter.value === 0) return 0
-  return Math.min(currentPage.value * pageSize, totalForFilter.value)
-})
-
-const setFilter = (filterId) => {
-  statusFilter.value = filterId
-}
-
-const previousPage = async () => {
-  if (canGoPrevious.value) {
-    const target = currentPage.value - 1
-    await loadPage(target)
-    currentPage.value = target
-  }
-}
-
-const nextPage = async () => {
-  if (canGoNext.value) {
-    const target = currentPage.value + 1
-    await loadPage(target)
-    currentPage.value = target
-  }
-}
-
-// maxPages is a safety net against runaway loops, not a functional cap - it's far above any
-// realistic dataset size, and hitting it logs a warning instead of silently truncating results.
-const drainPaginated = async (fetchPage, onItems, { limit = 100, maxPages = 500 } = {}) => {
-  let cursor = null
-  let pages = 0
-
-  while (pages < maxPages) {
-    const response = await fetchPage(cursor, limit)
-    const items = Array.isArray(response?.items) ? response.items : []
-    onItems(items)
-
-    const hasMore = Boolean(response?.pagination?.hasMore)
-    const nextCursor = response?.pagination?.nextCursor ?? null
-    // A cursor that doesn't advance (server pagination bug) would otherwise spin until maxPages,
-    // hammering the API with identical requests - bail out the moment it stops moving forward.
-    if (!hasMore || nextCursor === null || nextCursor === cursor) break
-
-    cursor = nextCursor
-    pages += 1
-  }
-
-  if (pages >= maxPages) {
-    console.warn('Pagination guard reached; results may be incomplete.')
-  }
-}
-
-const fetchCampaignStatistics = async () => {
-  try {
-    // Independent endpoints - written into separate maps so they can be fetched concurrently
-    // without one drain's pagination racing the other's, then merged once both are done.
-    const campaignStatsMap = {}
-    const viewOpensSentByCampaignId = {}
-
-    await Promise.all([
-      drainPaginated(
-        (cursor, limit) => statisticsClient.getCampaignStatistics(cursor, limit),
-        (items) => {
-          items.forEach((item) => {
-            campaignStatsMap[item.campaignId] = {
-              bounces: Number(item.bounces ?? 0),
-              sent: Number(item.sent ?? 0),
-              uniqueViews: Number(item.uniqueViews ?? 0),
-            }
-          })
-        },
-        { limit: 100 }
-      ),
-      drainPaginated(
-        (cursor, limit) => statisticsClient.getStatisticsOfViewOpens(cursor, limit),
-        (items) => {
-          items.forEach((item) => {
-            viewOpensSentByCampaignId[item.campaignId] = Number(item.sent ?? 0)
-          })
-        },
-        { limit: 100 }
-      )
-    ])
-
-    const statisticsMap = { ...campaignStatsMap }
-    Object.entries(viewOpensSentByCampaignId).forEach(([campaignId, sent]) => {
-      const existing = statisticsMap[campaignId] ?? { bounces: 0, sent: 0, uniqueViews: 0 }
-      statisticsMap[campaignId] = { ...existing, sent }
-    })
-
-    statisticsByCampaignId.value = statisticsMap
-    showStatistics.value = true
-  } catch (error) {
-    if (
-        error?.name === 'AuthorizationException' ||
-        error?.code === 'AuthorizationException' ||
-        error?.status === 403
-    ) {
-      showStatistics.value = false
-      statisticsByCampaignId.value = {}
-      return
-    }
-
-    throw error
-  }
-}
-
-const fetchListsForVisibleCampaigns = async () => {
-  const pending = paginatedCampaigns.value
-    .map((campaign) => campaign.id)
-    .filter((campaignId) => !(campaignId in listsByCampaignId.value) && !loadingListsByCampaignId.value[campaignId])
-
-  if (pending.length === 0) return
-
-  pending.forEach((campaignId) => {
-    loadingListsByCampaignId.value = { ...loadingListsByCampaignId.value, [campaignId]: true }
-  })
-
-  const results = await Promise.allSettled(
-    pending.map(async (campaignId) => {
-      const response = await listMessagesClient.getListsByMessage(campaignId)
-      return {
-        campaignId,
-        lists: Array.isArray(response?.items) ? response.items : []
-      }
-    })
-  )
-
-  const nextLists = { ...listsByCampaignId.value }
-  const nextLoading = { ...loadingListsByCampaignId.value }
-
-  results.forEach((result, index) => {
-    const campaignId = pending[index]
-    if (result.status === 'fulfilled') {
-      nextLists[campaignId] = result.value.lists
-    } else {
-      nextLists[campaignId] = []
-      console.error(`Failed to load lists for campaign ${campaignId}:`, result.reason)
-    }
-    nextLoading[campaignId] = false
-  })
-
-  listsByCampaignId.value = nextLists
-  loadingListsByCampaignId.value = nextLoading
-}
+const paginatedCampaigns = computed(() => rawCampaigns.value.map(normalizeCampaign))
 
 onMounted(() => {
   loadUpToPage(currentPage.value)
@@ -958,57 +638,7 @@ onMounted(() => {
   fetchMailingLists()
 })
 
-watch(statusFilter, () => {
-  resetPagination()
-  loadPage(1).then(() => {
-    currentPage.value = 1
-  })
-})
-
-watch(totalPages, (pages) => {
-  if (isLoading.value) return
-  if (currentPage.value > pages) {
-    loadPage(pages).then(() => {
-      currentPage.value = pages
-    })
-  }
-})
-
-watch(() => route.query.page, (pageQuery) => {
-  const nextPage = parsePageQuery(pageQuery)
-  if (nextPage !== currentPage.value) {
-    loadUpToPage(nextPage)
-  }
-})
-
-watch(currentPage, async (page) => {
-  const normalizedPage = isLoading.value
-    ? Math.max(1, page)
-    : Math.min(Math.max(1, page), totalPages.value)
-  if (normalizedPage !== page) {
-    currentPage.value = normalizedPage
-    return
-  }
-
-  const currentQueryPage = Array.isArray(route.query.page) ? route.query.page[0] : route.query.page
-  const desiredQueryPage = normalizedPage > 1 ? String(normalizedPage) : undefined
-  if (currentQueryPage === desiredQueryPage) {
-    return
-  }
-
-  const nextQuery = { ...route.query }
-  if (desiredQueryPage !== undefined) {
-    nextQuery.page = desiredQueryPage
-  } else {
-    delete nextQuery.page
-  }
-
-  await router.replace({
-    query: nextQuery
-  })
-})
-
 watch(paginatedCampaigns, () => {
-  fetchListsForVisibleCampaigns()
+  fetchListsForVisibleCampaigns(paginatedCampaigns.value.map((campaign) => campaign.id))
 }, { immediate: true })
 </script>
diff --git a/assets/vue/components/campaigns/StuckCampaignsList.vue b/assets/vue/components/campaigns/StuckCampaignsList.vue
index 0f37bc37..39996886 100644
--- a/assets/vue/components/campaigns/StuckCampaignsList.vue
+++ b/assets/vue/components/campaigns/StuckCampaignsList.vue
@@ -20,134 +20,50 @@
       </button>
     </div>
 
-    <div class="overflow-x-auto">
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Stuck for</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-
-        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
-        <tr v-if="isLoading">
-          <td colspan="4" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">Loading stuck campaigns...</td>
-        </tr>
-
-        <tr v-else-if="errorMessage">
-          <td colspan="4" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ errorMessage }}</td>
-        </tr>
-
-        <tr v-else-if="campaigns.length === 0">
-          <td colspan="4" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">No stuck campaigns right now.</td>
-        </tr>
-
-        <tr
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          class="hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
-        >
-          <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">
-            <router-link
-              :to="`/campaigns/${campaign.id}/edit`"
-              class="hover:underline"
-            >
-              {{ campaign.subject || `Campaign #${campaign.id}` }}
-            </router-link>
-          </td>
-          <td class="px-6 py-4">
-            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400">
-              {{ campaign.statusLabel }}
-            </span>
-          </td>
-          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ campaign.stuckFor }}</td>
-          <td class="px-6 py-4 text-right">
-            <div class="inline-flex justify-end">
-              <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 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="handleResume(campaign.id)"
-              >
-                <BaseIcon name="start" class="w-3.5 h-3.5" />
-                Resume
-              </button>
-            </div>
-            <p
-              v-if="getActionFeedback(campaign.id)"
-              class="mt-2 text-xs"
-              :class="{
-                '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 }}
-            </p>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-
-      <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 dark:text-slate-400 text-sm"
-        >
-          Loading stuck campaigns...
-        </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
-          v-else-if="campaigns.length === 0"
-          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-        >
-          No stuck campaigns right now.
-        </div>
-
-        <div
-          v-for="campaign in campaigns"
-          :key="`mobile-${campaign.id}`"
-          class="p-4 space-y-3"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <router-link
-              :to="`/campaigns/${campaign.id}/edit`"
-              class="font-semibold text-slate-900 dark:text-slate-100 hover:underline"
-            >
-              {{ campaign.subject || `Campaign #${campaign.id}` }}
-            </router-link>
-            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400">
-              {{ campaign.statusLabel }}
-            </span>
-          </div>
-
-          <p class="text-xs text-slate-600 dark:text-slate-300">
-            <span class="font-medium text-slate-700 dark:text-slate-200">Stuck for:</span> {{ campaign.stuckFor }}
-          </p>
-
-          <div class="pt-2 flex flex-wrap 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-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"
+    <BaseDataTable
+        :items="campaigns"
+        :is-loading="isLoading"
+        :load-error="errorMessage"
+        loading-message="Loading stuck campaigns..."
+        empty-message="No stuck campaigns right now."
+        :colspan="4"
+    >
+      <template #head>
+        <th class="px-6 py-4">Subject</th>
+        <th class="px-6 py-4">Status</th>
+        <th class="px-6 py-4">Stuck for</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: campaign }">
+        <td class="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">
+          <router-link
+            :to="`/campaigns/${campaign.id}/edit`"
+            class="hover:underline"
+          >
+            {{ campaign.subject || `Campaign #${campaign.id}` }}
+          </router-link>
+        </td>
+        <td class="px-6 py-4">
+          <BaseBadge variant="warning">
+            {{ campaign.statusLabel }}
+          </BaseBadge>
+        </td>
+        <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ campaign.stuckFor }}</td>
+        <td class="px-6 py-4 text-right">
+          <div class="inline-flex justify-end">
+            <ActionButton
+              variant="warning"
+              icon="start"
               :disabled="isActionLoading(campaign.id)"
               @click="handleResume(campaign.id)"
             >
-              <BaseIcon name="start" class="w-3.5 h-3.5" />
               Resume
-            </button>
+            </ActionButton>
           </div>
           <p
             v-if="getActionFeedback(campaign.id)"
-            class="text-xs"
+            class="mt-2 text-xs"
             :class="{
               'text-emerald-700 dark:text-emerald-400': getActionFeedback(campaign.id)?.type === 'success',
               'text-red-700 dark:text-red-400': getActionFeedback(campaign.id)?.type === 'error',
@@ -156,9 +72,49 @@
           >
             {{ getActionFeedback(campaign.id)?.message }}
           </p>
+        </td>
+      </template>
+
+      <template #card="{ item: campaign }">
+        <div class="flex items-start justify-between gap-3">
+          <router-link
+            :to="`/campaigns/${campaign.id}/edit`"
+            class="font-semibold text-slate-900 dark:text-slate-100 hover:underline"
+          >
+            {{ campaign.subject || `Campaign #${campaign.id}` }}
+          </router-link>
+          <BaseBadge class="whitespace-nowrap" variant="warning">
+            {{ campaign.statusLabel }}
+          </BaseBadge>
         </div>
-      </div>
-    </div>
+
+        <p class="text-xs text-slate-600 dark:text-slate-300">
+          <span class="font-medium text-slate-700 dark:text-slate-200">Stuck for:</span> {{ campaign.stuckFor }}
+        </p>
+
+        <div class="pt-2 flex flex-wrap gap-2">
+          <ActionButton
+            variant="warning"
+            icon="start"
+            :disabled="isActionLoading(campaign.id)"
+            @click="handleResume(campaign.id)"
+          >
+            Resume
+          </ActionButton>
+        </div>
+        <p
+          v-if="getActionFeedback(campaign.id)"
+          class="text-xs"
+          :class="{
+            '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 }}
+        </p>
+      </template>
+    </BaseDataTable>
   </div>
 </template>
 
@@ -166,6 +122,9 @@
 import { onMounted, ref } from 'vue'
 import { campaignClient } from '../../api'
 import BaseIcon from '../base/BaseIcon.vue'
+import BaseBadge from '../base/BaseBadge.vue'
+import ActionButton from '../base/ActionButton.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
 
 const campaigns = ref([])
 const isLoading = ref(false)
diff --git a/assets/vue/components/campaigns/ViewCampaignModal.vue b/assets/vue/components/campaigns/ViewCampaignModal.vue
index 4ec1e200..59791f1e 100644
--- a/assets/vue/components/campaigns/ViewCampaignModal.vue
+++ b/assets/vue/components/campaigns/ViewCampaignModal.vue
@@ -1,22 +1,10 @@
 <template>
-  <div
-      v-if="isViewModalOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
-      @click.self="emit('close')"
+  <BaseModal
+      :is-open="isViewModalOpen"
+      :title="`Campaign details: ${campaign?.id || '-'}`"
+      max-width="2xl"
+      @close="emit('close')"
   >
-    <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 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-            @click="emit('close')"
-            data-testid="close-btn"
-        >
-          Close
-        </button>
-      </div>
-
       <div class="p-5">
         <p v-if="isViewLoading" class="text-sm text-slate-500 dark:text-slate-400">
           Loading campaign...
@@ -123,12 +111,12 @@
           No campaign selected.
         </p>
       </div>
-    </div>
-  </div>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
+import BaseModal from '../base/BaseModal.vue'
 
 const props = defineProps({
   isViewModalOpen: {
diff --git a/assets/vue/components/dashboard/CampaignsTable.vue b/assets/vue/components/dashboard/CampaignsTable.vue
index a7fbd5ce..a5755063 100644
--- a/assets/vue/components/dashboard/CampaignsTable.vue
+++ b/assets/vue/components/dashboard/CampaignsTable.vue
@@ -21,12 +21,9 @@
       </td>
 
       <td class="py-3 px-4">
-          <span
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
-              :class="statusClass(row.status)"
-          >
-            {{ row.status }}
-          </span>
+        <BaseBadge :variant="statusVariant(row.status)">
+          {{ row.status }}
+        </BaseBadge>
       </td>
 
       <td class="py-3 px-4 text-sm text-gray-500 dark:text-slate-400">{{ row.date }}</td>
@@ -45,6 +42,8 @@
 </template>
 
 <script setup>
+import BaseBadge from '../base/BaseBadge.vue'
+
 const props = defineProps({
   rows: {
     type: Array,
@@ -52,13 +51,13 @@ const props = defineProps({
   },
 })
 
-const statusClass = (status) => {
+const statusVariant = (status) => {
   const s = status.toLowerCase()
 
   return {
-    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'
+    sent: 'success',
+    scheduled: 'info',
+    draft: 'neutral',
+  }[s] || 'neutral'
 }
 </script>
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
index 2cf7d0b1..6bafb337 100644
--- a/assets/vue/components/lists/AddSubscribersModal.vue
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -1,26 +1,11 @@
 <template>
-  <div
-      v-if="isOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-      aria-labelledby="add-subscribers-modal-title"
-      role="dialog"
-      aria-modal="true"
+  <BaseModal
+      :is-open="isOpen"
+      title="Add subscribers"
+      max-width="lg"
+      @close="close"
   >
-    <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 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 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 dark:text-slate-100">
-              Add subscribers
-            </h3>
-
-            <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>
-
+      <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitAddSubscribers">
             <div>
               <label for="subscriber-emails" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                 Email addresses
@@ -49,33 +34,32 @@
             <p v-if="addSubsError" class="text-sm text-red-600 dark:text-red-400">
               {{ addSubsError }}
             </p>
-        </div>
-
-        <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()"
-            class="w-full inline-flex justify-center rounded-md border border-transparent bg-ext-wf1 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto sm:text-sm disabled:opacity-50"
-        >
-          {{ addingSubscribers ? 'Adding...' : 'Add subscribers' }}
-        </button>
-
-        <button
-            type="button"
-            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
-        </button>
-      </div>
       </form>
-    </div>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="addingSubscribers || !addSubsForm.emails.trim()"
+          class="w-full inline-flex justify-center rounded-md border border-transparent bg-ext-wf1 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto sm:text-sm disabled:opacity-50"
+          @click="submitAddSubscribers"
+      >
+        {{ addingSubscribers ? 'Adding...' : 'Add subscribers' }}
+      </button>
+
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
 import { subscriptionClient } from '../../api'
 
 const props = defineProps({
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
index 1d8c30f9..49f223d6 100644
--- a/assets/vue/components/lists/CreateListModal.vue
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -1,24 +1,11 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-    aria-labelledby="create-list-modal-title"
-    role="dialog"
-    aria-modal="true"
+  <BaseModal
+      :is-open="isOpen"
+      title="Create New List"
+      max-width="xl"
+      @close="close"
   >
-    <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 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 dark:text-slate-100">
-              Create New List
-            </h3>
-            <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>
-
+    <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitCreateList">
             <div>
               <label for="list-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Name</label>
               <input
@@ -65,33 +52,32 @@
             </div>
 
             <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
-        </div>
-
-        <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()"
-            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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
-        >
-            {{ creatingList ? 'Creating...' : 'Create' }}
-          </button>
-          <button
-            type="button"
-            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
-          </button>
-        </div>
-      </div>
     </form>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="creatingList || !createForm.name.trim()"
+          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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+          @click="submitCreateList"
+      >
+        {{ creatingList ? 'Creating...' : 'Create' }}
+      </button>
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import { Requests } from '@tatevikgr/rest-api-client'
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
 import { listClient } from '../../api'
 
 const props = defineProps({
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
index a168221f..7fe7ba19 100644
--- a/assets/vue/components/lists/EditListModal.vue
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -1,24 +1,11 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-    aria-labelledby="edit-list-modal-title"
-    role="dialog"
-    aria-modal="true"
+  <BaseModal
+      :is-open="isOpen"
+      title="Edit List"
+      max-width="xl"
+      @close="close"
   >
-    <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 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 dark:text-slate-100">
-              Edit List
-            </h3>
-            <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>
-
+    <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitEditList">
             <div>
               <label for="list-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Name</label>
               <input
@@ -99,33 +86,32 @@
             </div>
 
             <p v-if="editError" class="text-sm text-red-600 dark:text-red-400">{{ editError }}</p>
-        </div>
-
-        <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()"
-            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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
-          >
-            {{ updatingList ? 'Saving...' : 'Save' }}
-          </button>
-          <button
-            type="button"
-            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
-          </button>
-        </div>
-      </div>
     </form>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="updatingList || !editForm.name.trim()"
+          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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+          @click="submitEditList"
+      >
+        {{ updatingList ? 'Saving...' : 'Save' }}
+      </button>
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import { Requests } from '@tatevikgr/rest-api-client'
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
 import { listClient } from '../../api'
 
 const props = defineProps({
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index ec12c51f..93802756 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -3,210 +3,94 @@
     <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"
-        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"
-        @click="openCreateModal"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14"></path>
-          <path d="M12 5v14"></path>
-        </svg>
+      <BaseButton variant="accent" icon="plus" @click="openCreateModal">
         Add new list
-      </button>
+      </BaseButton>
     </div>
 
-    <div class="overflow-x-auto">
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Public/Active</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-        <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 dark:hover:bg-slate-700 transition-colors"
-        >
-          <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 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>
-          </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-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" />
-                Delete
-              </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-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" />
-                Add Subscribers
-              </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 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" />
-                Edit
-              </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-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" />
-                Start Campaign
-              </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 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" />
-                View Members
-              </button>
-            </div>
-          </td>
-        </tr>
-
-        <tr v-if="!isLoading && !loadError && mailingLists.length === 0">
-          <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 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 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 dark:text-slate-400">
-            No mailing lists found.
-          </td>
-        </tr>
-        </tbody>
-      </table>
-
-      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
-        <div
-            v-for="list in mailingLists"
-            :key="`mobile-${list.id}`"
-            class="p-4 space-y-3"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <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 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>
-          </div>
-
-          <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 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" />
+    <BaseDataTable
+        :items="mailingLists"
+        :is-loading="isLoading"
+        :load-error="loadError"
+        loading-message="Loading mailing lists..."
+        empty-message="No mailing lists found."
+        :colspan="4"
+    >
+      <template #head>
+        <th class="px-6 py-4">ID</th>
+        <th class="px-6 py-4">Name</th>
+        <th class="px-6 py-4">Public/Active</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: list }">
+        <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">
+          <BaseBadge :variant="isPublic(list) ? 'success' : 'neutral'">
+            {{ isPublic(list) ? 'Yes' : 'No' }}
+          </BaseBadge>
+        </td>
+        <td class="px-6 py-4">
+          <div class="flex flex-wrap justify-end gap-2">
+            <ActionButton variant="danger" icon="delete" @click="handleDelete(list)">
               Delete
-            </button>
-
-            <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 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" />
-              Add Subscriber
-            </button>
-
-            <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 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" />
+            </ActionButton>
+
+            <ActionButton variant="success" icon="addUser" @click="handleAddSubscriber(list)">
+              Add Subscribers
+            </ActionButton>
+
+            <ActionButton icon="edit" @click="handleEdit(list)">
               Edit
-            </button>
-
-            <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 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" />
+            </ActionButton>
+
+            <ActionButton variant="info" icon="plane" @click="handleStartCampaign(list)">
               Start Campaign
-            </button>
-
-            <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 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" />
+            </ActionButton>
+
+            <ActionButton icon="eye" @click="handleViewMembers(list)">
               View Members
-            </button>
+            </ActionButton>
+          </div>
+        </td>
+      </template>
+
+      <template #card="{ item: list }">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <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>
-        </div>
 
-        <div
-            v-if="isLoading"
-            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-        >
-          Loading mailing lists...
+          <BaseBadge class="whitespace-nowrap" :variant="isPublic(list) ? 'success' : 'neutral'">
+            {{ isPublic(list) ? 'Public' : 'Private' }}
+          </BaseBadge>
         </div>
 
-        <div
-            v-else-if="loadError"
-            class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm"
-        >
-          {{ loadError }}
-        </div>
+        <div class="grid grid-cols-2 gap-2">
+          <ActionButton block variant="danger" icon="delete" @click="handleDelete(list)">
+            Delete
+          </ActionButton>
+
+          <ActionButton block variant="success" icon="addUser" @click="handleAddSubscriber(list)">
+            Add Subscriber
+          </ActionButton>
 
-        <div
-            v-else-if="mailingLists.length === 0"
-            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-        >
-          No mailing lists found.
+          <ActionButton block icon="edit" @click="handleEdit(list)">
+            Edit
+          </ActionButton>
+
+          <ActionButton block variant="info" icon="plane" @click="handleStartCampaign(list)">
+            Start Campaign
+          </ActionButton>
+
+          <ActionButton block class="col-span-2" icon="eye" @click="handleViewMembers(list)">
+            View Members
+          </ActionButton>
         </div>
-      </div>
-    </div>
+      </template>
+    </BaseDataTable>
   </div>
 
   <CreateListModal
@@ -233,7 +117,10 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseButton from '../base/BaseButton.vue'
+import BaseBadge from '../base/BaseBadge.vue'
+import ActionButton from '../base/ActionButton.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
 import CreateListModal from './CreateListModal.vue'
 import EditListModal from './EditListModal.vue'
 import AddSubscribersModal from './AddSubscribersModal.vue'
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
index c647dc63..ec1be027 100644
--- a/assets/vue/components/lists/ListSubscribersExportPanel.vue
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -114,18 +114,17 @@
 
 <script setup>
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
-// todo: check why subscriberAttributesClient was not working
-import client, { subscriberAttributesClient } from '../../api'
+import { subscriberAttributesClient } from '../../api'
 
 onMounted(async () => {
-  try {
-    const allAttributes = []
-    let offset = 0
-    const limit = 100
-    let hasMore = true
+  const allAttributes = []
+  let offset = 0
+  const limit = 100
+  let hasMore = true
 
+  try {
     while (hasMore) {
-      const data = await client.get('attributes', { limit, offset })
+      const data = await subscriberAttributesClient.getAttributeDefinitions(offset, limit)
       const items = Array.isArray(data?.items) ? data.items : []
 
       allAttributes.push(...items)
diff --git a/assets/vue/components/public-pages/PublicPagesDirectory.vue b/assets/vue/components/public-pages/PublicPagesDirectory.vue
index 00b4fae4..d3b43cf9 100644
--- a/assets/vue/components/public-pages/PublicPagesDirectory.vue
+++ b/assets/vue/components/public-pages/PublicPagesDirectory.vue
@@ -2,212 +2,122 @@
   <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"
-        :disabled="isLoading"
-        @click="handleCreatePage"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14"></path>
-          <path d="M12 5v14"></path>
-        </svg>
+      <BaseButton variant="accent" icon="plus" :disabled="isLoading" @click="handleCreatePage">
         Add New Subscribe Page
-      </button>
+      </BaseButton>
     </header>
 
-    <div class="overflow-x-auto">
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Owner</th>
-          <th class="px-6 py-4">Default</th>
-          <th class="px-6 py-4">Active</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-        <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 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 dark:border-slate-600 focus:ring-ext-wf2"
-                  :checked="page.isDefault"
-                  :disabled="isRowBusy(page.id)"
-                  @change="handleSetDefault(page)"
-                >
-              </label>
-            </td>
-            <td class="px-6 py-4">
-              <label class="inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  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)"
-                >
-              </label>
-            </td>
-            <td colspan="5" class="px-6 py-3">
-              <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 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)"
-                >
-                  <BaseIcon name="eye" class="w-3.5 h-3.5" />
-                  Preview
-                </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 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)"
-                >
-                  <BaseIcon name="edit" class="w-3.5 h-3.5" />
-                  Edit
-                </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-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)"
-                >
-                  <BaseIcon name="delete" class="w-3.5 h-3.5" />
-                  Delete
-                </button>
-              </div>
-            </td>
-          </tr>
-        </template>
-
-        <tr v-if="isLoading">
-          <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 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 dark:text-slate-400">
-            No subscribe pages found.
-          </td>
-        </tr>
-        </tbody>
-      </table>
-
-      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
-        <article
-          v-for="page in subscribePages"
-          :key="`mobile-${page.id}`"
-          class="p-4 space-y-3"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <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 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 dark:text-slate-200">
-              <input
-                type="radio"
-                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)"
-              >
-              Default
-            </label>
-
-            <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 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)"
-              >
-              Active
-            </label>
-          </div>
-
-          <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 dark:border-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors disabled:opacity-60"
+    <BaseDataTable
+        :items="subscribePages"
+        :is-loading="isLoading"
+        :load-error="loadError"
+        loading-message="Loading subscribe pages..."
+        empty-message="No subscribe pages found."
+        :colspan="6"
+    >
+      <template #head>
+        <th class="px-6 py-4">ID</th>
+        <th class="px-6 py-4">Title</th>
+        <th class="px-6 py-4">Owner</th>
+        <th class="px-6 py-4">Default</th>
+        <th class="px-6 py-4">Active</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: page }">
+        <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 dark:border-slate-600 focus:ring-ext-wf2"
+              :checked="page.isDefault"
               :disabled="isRowBusy(page.id)"
-              @click="handlePreview(page)"
+              @change="handleSetDefault(page)"
             >
-              <BaseIcon name="eye" class="w-3.5 h-3.5" />
-              Preview
-            </button>
-
-            <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 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700 transition-colors disabled:opacity-60"
+          </label>
+        </td>
+        <td class="px-6 py-4">
+          <label class="inline-flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              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)"
-              @click="handleEdit(page)"
+              @change="handleToggleActive(page, $event)"
             >
-              <BaseIcon name="edit" class="w-3.5 h-3.5" />
+          </label>
+        </td>
+        <td colspan="5" class="px-6 py-3">
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            <ActionButton variant="info" icon="eye" :disabled="isRowBusy(page.id)" @click="handlePreview(page)">
+              Preview
+            </ActionButton>
+
+            <ActionButton icon="edit" :disabled="isRowBusy(page.id)" @click="handleEdit(page)">
               Edit
-            </button>
+            </ActionButton>
 
-            <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 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)"
-            >
-              <BaseIcon name="delete" class="w-3.5 h-3.5" />
+            <ActionButton variant="danger" icon="delete" :disabled="isRowBusy(page.id)" @click="handleDelete(page)">
               Delete
-            </button>
+            </ActionButton>
+          </div>
+        </td>
+      </template>
+
+      <template #card="{ item: page }">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <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 dark:text-slate-400">
+            {{ isRowBusy(page.id) ? 'Updating...' : '' }}
           </div>
-        </article>
-
-        <div
-          v-if="isLoading"
-          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 dark:text-red-400 text-sm"
-        >
-          {{ loadError }}
+        <div class="flex items-center justify-between gap-3">
+          <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 dark:border-slate-600 focus:ring-ext-wf2"
+              :checked="page.isDefault"
+              :disabled="isRowBusy(page.id)"
+              @change="handleSetDefault(page)"
+            >
+            Default
+          </label>
+
+          <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 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)"
+            >
+            Active
+          </label>
         </div>
 
-        <div
-          v-else-if="subscribePages.length === 0"
-          class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
-        >
-          No subscribe pages found.
+        <div class="grid grid-cols-2 gap-2">
+          <ActionButton block variant="info" icon="eye" :disabled="isRowBusy(page.id)" @click="handlePreview(page)">
+            Preview
+          </ActionButton>
+
+          <ActionButton block icon="edit" :disabled="isRowBusy(page.id)" @click="handleEdit(page)">
+            Edit
+          </ActionButton>
+
+          <ActionButton block variant="danger" icon="delete" :disabled="isRowBusy(page.id)" @click="handleDelete(page)">
+            Delete
+          </ActionButton>
         </div>
-      </div>
-    </div>
+      </template>
+    </BaseDataTable>
   </section>
 </template>
 
@@ -215,7 +125,9 @@
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Requests } from '@tatevikgr/rest-api-client'
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseButton from '../base/BaseButton.vue'
+import ActionButton from '../base/ActionButton.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
 import { subscribePagesClient } from '../../api'
 
 const router = useRouter()
diff --git a/assets/vue/components/settings/AttributeDirectory.vue b/assets/vue/components/settings/AttributeDirectory.vue
new file mode 100644
index 00000000..e66383e2
--- /dev/null
+++ b/assets/vue/components/settings/AttributeDirectory.vue
@@ -0,0 +1,201 @@
+<template>
+  <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 dark:text-slate-100">
+          {{ title }}
+        </h2>
+
+        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
+          {{ description }}
+        </p>
+      </div>
+
+      <BaseButton variant="accent" icon="plus" @click="openCreateModal">
+        Add Attribute
+      </BaseButton>
+    </div>
+
+    <BaseDataTable
+        :items="attributes"
+        :is-loading="isLoading"
+        :load-error="loadError"
+        loading-message="Loading attributes..."
+        empty-message="No attributes found."
+        :colspan="5"
+    >
+      <template #head>
+        <th class="px-6 py-4">ID</th>
+        <th class="px-6 py-4">Name</th>
+        <th class="px-6 py-4">Type</th>
+        <th class="px-6 py-4">Required</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: attribute }">
+        <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 dark:text-slate-100">
+          {{ attribute.name }}
+        </td>
+
+        <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
+          {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
+        </td>
+
+        <td class="px-6 py-4">
+          <BaseBadge :variant="attribute.required ? 'danger' : 'neutral'">
+            {{ attribute.required ? 'Required' : 'Optional' }}
+          </BaseBadge>
+        </td>
+
+        <td class="px-6 py-4">
+          <div class="flex justify-end gap-2">
+            <ActionButton icon="edit" @click="handleEdit(attribute)">
+              Edit
+            </ActionButton>
+
+            <ActionButton variant="danger" icon="delete" @click="handleDelete(attribute)">
+              Delete
+            </ActionButton>
+          </div>
+        </td>
+      </template>
+
+      <template #card="{ item: attribute }">
+        <div class="flex justify-between items-start">
+          <div>
+            <p class="text-xs text-slate-500 dark:text-slate-400">
+              #{{ attribute.id }}
+            </p>
+
+            <p class="font-semibold text-slate-900 dark:text-slate-100">
+              {{ attribute.name }}
+            </p>
+
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
+            </p>
+          </div>
+
+          <BaseBadge :variant="attribute.required ? 'danger' : 'neutral'">
+            {{ attribute.required ? 'Required' : 'Optional' }}
+          </BaseBadge>
+        </div>
+
+        <div class="grid grid-cols-2 gap-2">
+          <ActionButton block icon="edit" @click="handleEdit(attribute)">
+            Edit
+          </ActionButton>
+
+          <ActionButton block variant="danger" icon="delete" @click="handleDelete(attribute)">
+            Delete
+          </ActionButton>
+        </div>
+      </template>
+    </BaseDataTable>
+  </div>
+
+  <slot
+      name="create-modal"
+      :is-open="isCreateModalOpen"
+      :close="closeCreateModal"
+      :created="handleCreated"
+  />
+
+  <slot
+      name="edit-modal"
+      :is-open="isEditModalOpen"
+      :attribute="selectedAttribute"
+      :close="closeEditModal"
+      :updated="handleUpdated"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import BaseButton from '../base/BaseButton.vue'
+import BaseBadge from '../base/BaseBadge.vue'
+import ActionButton from '../base/ActionButton.vue'
+import BaseDataTable from '../base/BaseDataTable.vue'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  client: { type: Object, required: true }
+})
+
+const attributes = ref([])
+
+const isLoading = ref(false)
+const loadError = ref('')
+
+const isCreateModalOpen = ref(false)
+const isEditModalOpen = ref(false)
+
+const selectedAttribute = ref(null)
+
+const fetchAttributes = async () => {
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    const result = await props.client.getAttributeDefinitions()
+    attributes.value = result.items ?? result.data ?? []
+  } catch (e) {
+    console.error(e)
+    loadError.value = e?.message || 'Failed to load attributes.'
+    attributes.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(fetchAttributes)
+
+const openCreateModal = () => {
+  isCreateModalOpen.value = true
+}
+
+const closeCreateModal = () => {
+  isCreateModalOpen.value = false
+}
+
+const handleCreated = async () => {
+  closeCreateModal()
+  await fetchAttributes()
+}
+
+const handleEdit = (attribute) => {
+  selectedAttribute.value = attribute
+  isEditModalOpen.value = true
+}
+
+const closeEditModal = () => {
+  selectedAttribute.value = null
+  isEditModalOpen.value = false
+}
+
+const handleUpdated = async () => {
+  closeEditModal()
+  await fetchAttributes()
+}
+
+const handleDelete = async (attribute) => {
+  const confirmed = window.confirm(
+      `Delete attribute "${attribute.name}"?\n\nThis action cannot be undone.`
+  )
+
+  if (!confirmed) return
+
+  try {
+    await props.client.deleteAttributeDefinition(attribute.id)
+    await fetchAttributes()
+  } catch (e) {
+    console.error(e)
+    alert(e?.message || 'Failed to delete attribute.')
+  }
+}
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/settings/CreateAdminAttributeModal.vue b/assets/vue/components/settings/CreateAdminAttributeModal.vue
index 7cc95891..96303552 100644
--- a/assets/vue/components/settings/CreateAdminAttributeModal.vue
+++ b/assets/vue/components/settings/CreateAdminAttributeModal.vue
@@ -1,23 +1,10 @@
 <template>
-  <Teleport to="body">
-    <div
-        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 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 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
-              @click="$emit('close')"
-          >
-            ✕
-          </button>
-        </div>
-
+  <BaseModal
+      :is-open="isOpen"
+      title="Create Attribute"
+      max-width="lg"
+      @close="$emit('close')"
+  >
         <form
             class="p-6 space-y-5"
             @submit.prevent="submit"
@@ -84,13 +71,12 @@
             </button>
           </div>
         </form>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup>
 import { reactive, ref, watch } from 'vue'
+import BaseModal from '../base/BaseModal.vue'
 import { adminAttributeClient } from '../../api'
 
 const props = defineProps({
diff --git a/assets/vue/components/settings/CreateAdminModal.vue b/assets/vue/components/settings/CreateAdminModal.vue
index 3ee31381..f84588fa 100644
--- a/assets/vue/components/settings/CreateAdminModal.vue
+++ b/assets/vue/components/settings/CreateAdminModal.vue
@@ -1,24 +1,11 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-    aria-labelledby="create-admin-modal-title"
-    role="dialog"
-    aria-modal="true"
+  <BaseModal
+      :is-open="isOpen"
+      title="Create New Administrator"
+      max-width="xl"
+      @close="close"
   >
-    <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 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 dark:text-slate-100">
-              Create New Administrator
-            </h3>
-            <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>
-
+    <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitCreateAdmin">
           <!-- Login Name -->
           <div>
             <label for="admin-login-name" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Login Name</label>
@@ -132,34 +119,33 @@
           </div>
 
           <p v-if="createError" class="text-sm text-red-600 dark:text-red-400">{{ createError }}</p>
-        </div>
-
-        <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"
-            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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50 transition-colors"
-          >
-            {{ isCreating ? 'Creating...' : 'Create' }}
-          </button>
-          <button
-            type="button"
-            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
-          </button>
-        </div>
-      </div>
     </form>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="isCreating || !isFormValid"
+          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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50 transition-colors"
+          @click="submitCreateAdmin"
+      >
+        {{ isCreating ? 'Creating...' : 'Create' }}
+      </button>
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch, computed } from 'vue'
 import { Requests } from '@tatevikgr/rest-api-client'
 import { adminClient } from '../../api'
-import BaseIcon from "../base/BaseIcon.vue";
+import BaseModal from '../base/BaseModal.vue'
 
 const props = defineProps({
   isOpen: Boolean
diff --git a/assets/vue/components/settings/CreateSubscriberAttributeModal.vue b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
index 35876662..0d54b40c 100644
--- a/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
+++ b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
@@ -1,23 +1,10 @@
 <template>
-  <Teleport to="body">
-    <div
-        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 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 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
-              @click="close"
-          >
-            ✕
-          </button>
-        </div>
-
+  <BaseModal
+      :is-open="isOpen"
+      title="Create Subscriber Attribute"
+      max-width="2xl"
+      @close="close"
+  >
         <form
             class="p-6 space-y-5"
             @submit.prevent="submit"
@@ -142,13 +129,12 @@
             </button>
           </div>
         </form>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup>
 import { computed, reactive, ref, watch } from 'vue';
+import BaseModal from '../base/BaseModal.vue';
 import { subscriberAttributesClient } from '../../api';
 import BaseIcon from "../base/BaseIcon.vue";
 
diff --git a/assets/vue/components/settings/EditAdminAttributeModal.vue b/assets/vue/components/settings/EditAdminAttributeModal.vue
index aae1ee06..5ab5e7c7 100644
--- a/assets/vue/components/settings/EditAdminAttributeModal.vue
+++ b/assets/vue/components/settings/EditAdminAttributeModal.vue
@@ -1,23 +1,10 @@
 <template>
-  <Teleport to="body">
-    <div
-        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 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 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
-              @click="$emit('close')"
-          >
-            ✕
-          </button>
-        </div>
-
+  <BaseModal
+      :is-open="isOpen && !!attribute"
+      title="Edit Attribute"
+      max-width="lg"
+      @close="$emit('close')"
+  >
         <form
             class="p-6 space-y-5"
             @submit.prevent="submit"
@@ -83,13 +70,12 @@
             </button>
           </div>
         </form>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup>
 import { reactive, ref, watch } from 'vue'
+import BaseModal from '../base/BaseModal.vue'
 import { adminAttributeClient } from '../../api'
 
 const props = defineProps({
diff --git a/assets/vue/components/settings/EditAdminModal.vue b/assets/vue/components/settings/EditAdminModal.vue
index badf2903..69f307ff 100644
--- a/assets/vue/components/settings/EditAdminModal.vue
+++ b/assets/vue/components/settings/EditAdminModal.vue
@@ -1,24 +1,11 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-    aria-labelledby="edit-admin-modal-title"
-    role="dialog"
-    aria-modal="true"
+  <BaseModal
+      :is-open="isOpen"
+      title="Edit Administrator"
+      max-width="xl"
+      @close="close"
   >
-    <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 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 dark:text-slate-100">
-              Edit Administrator
-            </h3>
-            <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>
-
+    <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitUpdateAdmin">
           <!-- ID Display -->
           <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>
@@ -136,34 +123,33 @@
           </div>
 
           <p v-if="updateError" class="text-sm text-red-600 dark:text-red-400">{{ updateError }}</p>
-        </div>
-
-        <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"
-            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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50 transition-colors"
-          >
-            {{ isUpdating ? 'Updating...' : 'Update' }}
-          </button>
-          <button
-            type="button"
-            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
-          </button>
-        </div>
-      </div>
     </form>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="isUpdating"
+          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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50 transition-colors"
+          @click="submitUpdateAdmin"
+      >
+        {{ isUpdating ? 'Updating...' : 'Update' }}
+      </button>
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import { Requests } from '@tatevikgr/rest-api-client'
 import { adminClient } from '../../api'
-import BaseIcon from "../base/BaseIcon.vue";
+import BaseModal from '../base/BaseModal.vue'
 
 const props = defineProps({
   isOpen: Boolean,
diff --git a/assets/vue/components/settings/EditSubscriberAttributeModal.vue b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
index 59bc84cd..55d2f0f9 100644
--- a/assets/vue/components/settings/EditSubscriberAttributeModal.vue
+++ b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
@@ -1,23 +1,10 @@
 <template>
-  <Teleport to="body">
-    <div
-        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 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 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
-              @click="close"
-          >
-            ✕
-          </button>
-        </div>
-
+  <BaseModal
+      :is-open="isOpen"
+      title="Edit Subscriber Attribute"
+      max-width="2xl"
+      @close="close"
+  >
         <form
             class="p-6 space-y-5"
             @submit.prevent="save"
@@ -122,13 +109,12 @@
             </button>
           </div>
         </form>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup>
 import { computed, reactive, ref, watch } from 'vue';
+import BaseModal from '../base/BaseModal.vue';
 import { subscriberAttributesClient } from '../../api';
 import BaseIcon from "../base/BaseIcon.vue";
 
diff --git a/assets/vue/components/settings/SettingsAdminAttributes.vue b/assets/vue/components/settings/SettingsAdminAttributes.vue
index e3fb601c..5db9b02d 100644
--- a/assets/vue/components/settings/SettingsAdminAttributes.vue
+++ b/assets/vue/components/settings/SettingsAdminAttributes.vue
@@ -1,304 +1,32 @@
 <template>
-  <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 dark:text-slate-100">
-          Admin Attributes
-        </h2>
-
-        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
-          Manage administrator attribute definitions
-        </p>
-      </div>
-
-      <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"
-          @click="openCreateModal"
-      >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-          <path d="M5 12h14"/>
-          <path d="M12 5v14"/>
-        </svg>
-
-        Add Attribute
-      </button>
-    </div>
-
-    <div class="overflow-x-auto">
-
-      <!-- Desktop -->
-
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Type</th>
-          <th class="px-6 py-4">Required</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-
-        <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 dark:hover:bg-slate-700 transition-colors"
-        >
-          <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 dark:text-slate-100">
-            {{ attribute.name }}
-          </td>
-
-          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
-            {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
-          </td>
-
-          <td class="px-6 py-4">
-            <span
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="attribute.required
-                ? '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>
-          </td>
-
-          <td class="px-6 py-4">
-            <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 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"/>
-                Edit
-              </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 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"/>
-                Delete
-              </button>
-
-            </div>
-          </td>
-        </tr>
-
-        <tr v-if="!isLoading && !loadError && attributes.length===0">
-          <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 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 dark:text-red-400">
-            {{ loadError }}
-          </td>
-        </tr>
-
-        </tbody>
-      </table>
-
-      <!-- Mobile -->
-
-      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
-
-        <div
-            v-for="attribute in attributes"
-            :key="attribute.id"
-            class="p-4 space-y-3"
-        >
-          <div class="flex justify-between items-start">
-
-            <div>
-              <p class="text-xs text-slate-500 dark:text-slate-400">
-                #{{ attribute.id }}
-              </p>
-
-              <p class="font-semibold text-slate-900 dark:text-slate-100">
-                {{ attribute.name }}
-              </p>
-
-              <p class="text-sm text-slate-500 dark:text-slate-400">
-                {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
-              </p>
-            </div>
-
-            <span
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="attribute.required
-                ? '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>
-
-          </div>
-
-          <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 dark:border-slate-600 text-slate-700 dark:text-slate-200"
-                @click="handleEdit(attribute)"
-            >
-              <BaseIcon name="edit" class="w-3.5 h-3.5"/>
-              Edit
-            </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 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"/>
-              Delete
-            </button>
-
-          </div>
-        </div>
-
-        <div
-            v-if="isLoading"
-            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 dark:text-red-400"
-        >
-          {{ loadError }}
-        </div>
-
-        <div
-            v-else-if="attributes.length===0"
-            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
-        >
-          No attributes found.
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-
-  <CreateAdminAttributeModal
-      :is-open="isCreateModalOpen"
-      @close="closeCreateModal"
-      @created="handleCreated"
-  />
-
-  <EditAdminAttributeModal
-      :is-open="isEditModalOpen"
-      :attribute="selectedAttribute"
-      @close="closeEditModal"
-      @updated="handleUpdated"
-  />
+  <AttributeDirectory
+      title="Admin Attributes"
+      description="Manage administrator attribute definitions"
+      :client="adminAttributeClient"
+  >
+    <template #create-modal="{ isOpen, close, created }">
+      <CreateAdminAttributeModal
+          :is-open="isOpen"
+          @close="close"
+          @created="created"
+      />
+    </template>
+
+    <template #edit-modal="{ isOpen, attribute, close, updated }">
+      <EditAdminAttributeModal
+          :is-open="isOpen"
+          :attribute="attribute"
+          @close="close"
+          @updated="updated"
+      />
+    </template>
+  </AttributeDirectory>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import BaseIcon from '../base/BaseIcon.vue'
-
+import AttributeDirectory from './AttributeDirectory.vue'
 import CreateAdminAttributeModal from './CreateAdminAttributeModal.vue'
 import EditAdminAttributeModal from './EditAdminAttributeModal.vue'
 
 import { adminAttributeClient } from '../../api'
-
-const attributes = ref([])
-
-const isLoading = ref(false)
-const loadError = ref('')
-
-const isCreateModalOpen = ref(false)
-const isEditModalOpen = ref(false)
-
-const selectedAttribute = ref(null)
-
-const fetchAttributes = async () => {
-  isLoading.value = true
-  loadError.value = ''
-
-  try {
-    const result = await adminAttributeClient.getAttributeDefinitions()
-    attributes.value = result.items ?? result.data ?? []
-  } catch (e) {
-    console.error(e)
-    loadError.value = e?.message || 'Failed to load attributes.'
-    attributes.value = []
-  } finally {
-    isLoading.value = false
-  }
-}
-
-onMounted(fetchAttributes)
-
-const openCreateModal = () => {
-  isCreateModalOpen.value = true
-}
-
-const closeCreateModal = () => {
-  isCreateModalOpen.value = false
-}
-
-const handleCreated = async () => {
-  closeCreateModal()
-  await fetchAttributes()
-}
-
-const handleEdit = (attribute) => {
-  selectedAttribute.value = attribute
-  isEditModalOpen.value = true
-}
-
-const closeEditModal = () => {
-  selectedAttribute.value = null
-  isEditModalOpen.value = false
-}
-
-const handleUpdated = async () => {
-  closeEditModal()
-  await fetchAttributes()
-}
-
-const handleDelete = async (attribute) => {
-  const confirmed = window.confirm(
-      `Delete attribute "${attribute.name}"?\n\nThis action cannot be undone.`
-  )
-
-  if (!confirmed) return
-
-  try {
-    await adminAttributeClient.deleteAttributeDefinition(attribute.id)
-    await fetchAttributes()
-  } catch (e) {
-    console.error(e)
-    alert(e?.message || 'Failed to delete attribute.')
-  }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/settings/SettingsAdmins.vue b/assets/vue/components/settings/SettingsAdmins.vue
index 33e16aae..54ec0c60 100644
--- a/assets/vue/components/settings/SettingsAdmins.vue
+++ b/assets/vue/components/settings/SettingsAdmins.vue
@@ -6,154 +6,81 @@
         <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">Manage administrator accounts and permissions</p>
       </div>
 
-      <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"
-        @click="openCreateModal"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14"></path>
-          <path d="M12 5v14"></path>
-        </svg>
+      <BaseButton variant="accent" icon="plus" @click="openCreateModal">
         Add Admin
-      </button>
+      </BaseButton>
     </div>
 
-    <div class="overflow-x-auto">
-      <!-- Desktop Table View -->
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-            <th class="px-6 py-4">Email</th>
-            <th class="px-6 py-4">Super User</th>
-            <th class="px-6 py-4">Created</th>
-            <th class="px-6 py-4 text-right">Actions</th>
-          </tr>
-        </thead>
-        <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 dark:hover:bg-slate-700 transition-colors"
-          >
-            <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 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 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 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" />
-                  Edit
-                </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-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" />
-                  Delete
-                </button>
-              </div>
-            </td>
-          </tr>
-
-          <tr v-if="!isLoading && !loadError && admins.length === 0">
-            <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 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 dark:text-red-400">
-              {{ loadError }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Mobile Card View -->
-      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
-        <div
-          v-for="admin in admins"
-          :key="`mobile-${admin.id}`"
-          class="p-4 space-y-3"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <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 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 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 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" />
+    <BaseDataTable
+        :items="admins"
+        :is-loading="isLoading"
+        :load-error="loadError"
+        loading-message="Loading administrators..."
+        empty-message="No administrators found. Create one to get started."
+        :colspan="6"
+    >
+      <template #head>
+        <th class="px-6 py-4">ID</th>
+        <th class="px-6 py-4">Login Name</th>
+        <th class="px-6 py-4">Email</th>
+        <th class="px-6 py-4">Super User</th>
+        <th class="px-6 py-4">Created</th>
+        <th class="px-6 py-4 text-right">Actions</th>
+      </template>
+
+      <template #row="{ item: admin }">
+        <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">
+          <BaseBadge :variant="admin.superUser ? 'info' : 'neutral'">
+            {{ admin.superUser ? 'Yes' : 'No' }}
+          </BaseBadge>
+        </td>
+        <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">
+            <ActionButton icon="edit" @click="handleEdit(admin)">
               Edit
-            </button>
+            </ActionButton>
 
-            <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 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" />
+            <ActionButton variant="danger" icon="delete" @click="handleDelete(admin)">
               Delete
-            </button>
+            </ActionButton>
+          </div>
+        </td>
+      </template>
+
+      <template #card="{ item: admin }">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <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>
-        </div>
 
-        <div v-if="isLoading" class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
-          Loading administrators...
+          <BaseBadge class="whitespace-nowrap" :variant="admin.superUser ? 'info' : 'neutral'">
+            {{ admin.superUser ? 'Super' : 'User' }}
+          </BaseBadge>
         </div>
 
-        <div v-else-if="loadError" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">
-          {{ loadError }}
-        </div>
+        <p class="text-xs text-slate-500 dark:text-slate-400">
+          Created: {{ formatDate(admin.createdAt) }}
+        </p>
 
-        <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 class="grid grid-cols-2 gap-2">
+          <ActionButton block icon="edit" @click="handleEdit(admin)">
+            Edit
+          </ActionButton>
+
+          <ActionButton block variant="danger" icon="delete" @click="handleDelete(admin)">
+            Delete
+          </ActionButton>
         </div>
-      </div>
-    </div>
+      </template>
+    </BaseDataTable>
   </div>
 
   <!-- Create Admin Modal -->
@@ -177,7 +104,10 @@ import { onMounted, ref } from 'vue'
 import CreateAdminModal from './CreateAdminModal.vue'
 import EditAdminModal from './EditAdminModal.vue'
 import { fetchAllAdmins, adminClient } from '../../api'
-import BaseIcon from "../base/BaseIcon.vue";
+import BaseButton from "../base/BaseButton.vue";
+import BaseBadge from "../base/BaseBadge.vue";
+import ActionButton from "../base/ActionButton.vue";
+import BaseDataTable from "../base/BaseDataTable.vue";
 
 const admins = ref([])
 const isLoading = ref(false)
diff --git a/assets/vue/components/settings/SettingsSubscriberAttributes.vue b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
index 506c179b..24e969c2 100644
--- a/assets/vue/components/settings/SettingsSubscriberAttributes.vue
+++ b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
@@ -1,304 +1,32 @@
 <template>
-  <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 dark:text-slate-100">
-          Subscriber Attributes
-        </h2>
-
-        <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
-          Manage subscriber attribute definitions
-        </p>
-      </div>
-
-      <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"
-          @click="openCreateModal"
-      >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-          <path d="M5 12h14"/>
-          <path d="M12 5v14"/>
-        </svg>
-
-        Add Attribute
-      </button>
-    </div>
-
-    <div class="overflow-x-auto">
-
-      <!-- Desktop -->
-
-      <table class="w-full text-left text-sm hidden md:table">
-        <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>
-          <th class="px-6 py-4">Type</th>
-          <th class="px-6 py-4">Required</th>
-          <th class="px-6 py-4 text-right">Actions</th>
-        </tr>
-        </thead>
-
-        <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 dark:hover:bg-slate-700 transition-colors"
-        >
-          <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 dark:text-slate-100">
-            {{ attribute.name }}
-          </td>
-
-          <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
-            {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
-          </td>
-
-          <td class="px-6 py-4">
-            <span
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="attribute.required
-                ? '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>
-          </td>
-
-          <td class="px-6 py-4">
-            <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 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"/>
-                Edit
-              </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 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"/>
-                Delete
-              </button>
-
-            </div>
-          </td>
-        </tr>
-
-        <tr v-if="!isLoading && !loadError && attributes.length===0">
-          <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 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 dark:text-red-400">
-            {{ loadError }}
-          </td>
-        </tr>
-
-        </tbody>
-      </table>
-
-      <!-- Mobile -->
-
-      <div class="block md:hidden divide-y divide-slate-100 dark:divide-slate-700">
-
-        <div
-            v-for="attribute in attributes"
-            :key="attribute.id"
-            class="p-4 space-y-3"
-        >
-          <div class="flex justify-between items-start">
-
-            <div>
-              <p class="text-xs text-slate-500 dark:text-slate-400">
-                #{{ attribute.id }}
-              </p>
-
-              <p class="font-semibold text-slate-900 dark:text-slate-100">
-                {{ attribute.name }}
-              </p>
-
-              <p class="text-sm text-slate-500 dark:text-slate-400">
-                {{ attribute.type === 'textline' ? 'Text' : attribute.type === 'hidden' ? 'Hidden' : attribute.type }}
-              </p>
-            </div>
-
-            <span
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="attribute.required
-                ? '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>
-
-          </div>
-
-          <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 dark:border-slate-600 text-slate-700 dark:text-slate-200"
-                @click="handleEdit(attribute)"
-            >
-              <BaseIcon name="edit" class="w-3.5 h-3.5"/>
-              Edit
-            </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 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"/>
-              Delete
-            </button>
-
-          </div>
-        </div>
-
-        <div
-            v-if="isLoading"
-            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 dark:text-red-400"
-        >
-          {{ loadError }}
-        </div>
-
-        <div
-            v-else-if="attributes.length===0"
-            class="px-4 py-8 text-center text-slate-500 dark:text-slate-400"
-        >
-          No attributes found.
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-
-  <CreateSubscriberAttributeModal
-      :is-open="isCreateSAModalOpen"
-      @close="closeCreateModal"
-      @created="handleCreated"
-  />
-
-  <EditSubscriberAttributeModal
-      :is-open="isEditSAModalOpen"
-      :attribute="selectedAttribute"
-      @close="closeEditModal"
-      @updated="handleUpdated"
-  />
+  <AttributeDirectory
+      title="Subscriber Attributes"
+      description="Manage subscriber attribute definitions"
+      :client="subscriberAttributesClient"
+  >
+    <template #create-modal="{ isOpen, close, created }">
+      <CreateSubscriberAttributeModal
+          :is-open="isOpen"
+          @close="close"
+          @created="created"
+      />
+    </template>
+
+    <template #edit-modal="{ isOpen, attribute, close, updated }">
+      <EditSubscriberAttributeModal
+          :is-open="isOpen"
+          :attribute="attribute"
+          @close="close"
+          @updated="updated"
+      />
+    </template>
+  </AttributeDirectory>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import BaseIcon from '../base/BaseIcon.vue'
-
+import AttributeDirectory from './AttributeDirectory.vue'
 import CreateSubscriberAttributeModal from './CreateSubscriberAttributeModal.vue'
 import EditSubscriberAttributeModal from './EditSubscriberAttributeModal.vue'
 
 import { subscriberAttributesClient } from '../../api'
-
-const attributes = ref([])
-
-const isLoading = ref(false)
-const loadError = ref('')
-
-const isCreateSAModalOpen = ref(false)
-const isEditSAModalOpen = ref(false)
-
-const selectedAttribute = ref(null)
-
-const fetchAttributes = async () => {
-  isLoading.value = true
-  loadError.value = ''
-
-  try {
-    const result = await subscriberAttributesClient.getAttributeDefinitions()
-    attributes.value = result.items ?? []
-  } catch (e) {
-    console.error(e)
-    loadError.value = e?.message || 'Failed to load attributes.'
-    attributes.value = []
-  } finally {
-    isLoading.value = false
-  }
-}
-
-onMounted(fetchAttributes)
-
-const openCreateModal = () => {
-  isCreateSAModalOpen.value = true
-}
-
-const closeCreateModal = () => {
-  isCreateSAModalOpen.value = false
-}
-
-const handleCreated = async () => {
-  closeCreateModal()
-  await fetchAttributes()
-}
-
-const handleEdit = (attribute) => {
-  selectedAttribute.value = attribute
-  isEditSAModalOpen.value = true
-}
-
-const closeEditModal = () => {
-  selectedAttribute.value = null
-  isEditSAModalOpen.value = false
-}
-
-const handleUpdated = async () => {
-  closeEditModal()
-  await fetchAttributes()
-}
-
-const handleDelete = async (attribute) => {
-  const confirmed = window.confirm(
-      `Delete attribute "${attribute.name}"?\n\nThis action cannot be undone.`
-  )
-
-  if (!confirmed) return
-
-  try {
-    await subscriberAttributesClient.deleteAttributeDefinition(attribute.id)
-    await fetchAttributes()
-  } catch (e) {
-    console.error(e)
-    alert(e?.message || 'Failed to delete attribute.')
-  }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/assets/vue/components/subscribers/ImportResult.vue b/assets/vue/components/subscribers/ImportResult.vue
index 8522af67..6cf20eec 100644
--- a/assets/vue/components/subscribers/ImportResult.vue
+++ b/assets/vue/components/subscribers/ImportResult.vue
@@ -1,20 +1,10 @@
 <template>
-<div
-    v-if="isImportResultOpen"
-    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 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 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" />
-    </button>
-  </div>
-
+  <BaseModal
+      :is-open="isImportResultOpen"
+      title="Import Result"
+      max-width="md"
+      @close="$emit('close')"
+  >
   <div class="p-4 space-y-4">
     <div class="grid grid-cols-2 gap-3">
       <div class="rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-3">
@@ -48,20 +38,19 @@
     </div>
   </div>
 
-  <div class="px-4 py-3 border-t border-slate-200 dark:border-slate-700 flex justify-end">
+  <template #footer>
     <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')"
     >
       Close
     </button>
-  </div>
-</div>
-</div>
+  </template>
+  </BaseModal>
 </template>
 
 <script setup>
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
 
 defineProps({
   isImportResultOpen: {
diff --git a/assets/vue/components/subscribers/SubscriberModal.vue b/assets/vue/components/subscribers/SubscriberModal.vue
index 071cca30..9f96857d 100644
--- a/assets/vue/components/subscribers/SubscriberModal.vue
+++ b/assets/vue/components/subscribers/SubscriberModal.vue
@@ -1,22 +1,11 @@
 <template>
-  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-    <!-- Backdrop -->
-    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
-
-    <!-- Modal Content -->
-    <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 dark:text-slate-100" id="modal-title">
-                  Subscriber Details ID: {{ subscriber?.id ?? '' }}
-                </h3>
-                <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>
-              <div class="mt-4 space-y-4">
+  <BaseModal
+      :is-open="isOpen"
+      :title="`Subscriber Details ID: ${subscriber?.id ?? ''}`"
+      max-width="lg"
+      @close="close"
+  >
+        <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 space-y-4">
                 <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>
@@ -85,13 +74,13 @@
                   <div v-if="subscriber && subscriber.subscribedLists" class="mt-4">
                     <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
+                      <BaseBadge
                         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 dark:bg-blue-500/10 dark:text-blue-400"
+                        variant="info"
                       >
                         {{ list.name }}
-                      </span>
+                      </BaseBadge>
                       <span v-if="!subscriber.subscribedLists.length" class="text-xs text-slate-500 dark:text-slate-400">
                         No lists
                       </span>
@@ -106,33 +95,31 @@
                     <p>UUID: {{ subscriber.uuid === '' ? '-' : subscriber.uuid }}</p>
                   </div>
                 </form>
-              </div>
-            </div>
-          </div>
         </div>
-        <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"
-            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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
-            @click="save"
-          >
-            {{ saving ? 'Saving...' : 'Save' }}
-          </button>
-          <button
-            type="button"
-            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
-          </button>
-        </div>
-      </div>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          :disabled="loading || saving"
+          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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+          @click="save"
+      >
+        {{ saving ? 'Saving...' : 'Save' }}
+      </button>
+      <button
+          type="button"
+          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
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
-import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
+import BaseBadge from '../base/BaseBadge.vue'
 import { ref, watch } from 'vue'
 import { subscribersClient } from '../../api'
 
diff --git a/assets/vue/components/subscribers/SubscriberTable.vue b/assets/vue/components/subscribers/SubscriberTable.vue
index b4656ef4..5a3edc92 100644
--- a/assets/vue/components/subscribers/SubscriberTable.vue
+++ b/assets/vue/components/subscribers/SubscriberTable.vue
@@ -26,18 +26,12 @@
           </td>
           <td class="px-6 py-4">
             <div class="flex flex-wrap gap-2">
-              <span
-                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                :class="subscriber.confirmed ? statusClasses.active : statusClasses.unconfirmed"
-              >
+              <BaseBadge :variant="subscriber.confirmed ? 'success' : 'warning'">
                 {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
-              </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 dark:bg-red-500/10 dark:text-red-400"
-              >
+              </BaseBadge>
+              <BaseBadge v-if="subscriber.blacklisted" variant="danger">
                 Blacklisted
-              </span>
+              </BaseBadge>
             </div>
           </td>
           <td class="px-6 py-4 text-right text-slate-600 dark:text-slate-300">
@@ -47,14 +41,9 @@
             {{ 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 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" />
+            <ActionButton icon="eye" @click="emit('view', subscriber.id)">
               View
-            </button>
+            </ActionButton>
           </td>
         </tr>
       </tbody>
@@ -72,26 +61,15 @@
             {{ subscriber.email.split('@')[0] }}
           </span>
           <div class="flex items-center gap-2">
-            <span
-              class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-              :class="subscriber.confirmed ? statusClasses.active : statusClasses.unconfirmed"
-            >
+            <BaseBadge :variant="subscriber.confirmed ? 'success' : 'warning'">
               {{ subscriber.confirmed ? 'active' : 'unconfirmed' }}
-            </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 dark:bg-red-500/10 dark:text-red-400"
-            >
+            </BaseBadge>
+            <BaseBadge v-if="subscriber.blacklisted" variant="danger">
               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 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" />
+            </BaseBadge>
+            <ActionButton icon="eye" @click="emit('view', subscriber.id)">
               View
-            </button>
+            </ActionButton>
           </div>
         </div>
         <div class="flex flex-col gap-1">
@@ -113,14 +91,8 @@
 
 <script setup>
 import BaseIcon from '../base/BaseIcon.vue'
-import { inject } from 'vue'
-
-const statusClasses = {
-  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',
-}
+import BaseBadge from '../base/BaseBadge.vue'
+import ActionButton from '../base/ActionButton.vue'
 
 const props = defineProps({
   subscribers: {
@@ -130,15 +102,4 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['view'])
-
-const formatDate = (dateString, isIso = false) => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  if (isNaN(date.getTime())) return '-'
-  
-  if (isIso) {
-    return date.toISOString().split('T')[0]
-  }
-  return date.toLocaleDateString()
-}
 </script>
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index 9c303fc9..d746a68f 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -15,10 +15,7 @@
           type="button"
           @click="goToCreateTemplate"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M5 12h14"></path>
-            <path d="M12 5v14"></path>
-          </svg>
+          <BaseIcon name="plus" class="w-4 h-4" inherit-color />
           New Template
         </button>
       </div>
@@ -63,24 +60,13 @@
             </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 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)"
-              >
-                <BaseIcon name="edit" class="w-3.5 h-3.5" />
+              <ActionButton block icon="edit" @click="goToEditTemplate(templateItem.id)">
                 Edit
-              </button>
+              </ActionButton>
 
-              <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 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)"
-              >
-                <BaseIcon name="delete" class="w-3.5 h-3.5" />
+              <ActionButton block variant="danger" icon="delete" aria-label="Delete template" @click="deleteTemplate(templateItem.id)">
                 Delete
-              </button>
+              </ActionButton>
             </div>
           </div>
         </article>
@@ -88,31 +74,13 @@
     </div>
   </section>
 
-  <div
-    v-if="isDefaultTemplateModalOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-    aria-labelledby="default-template-modal-title"
-    role="dialog"
-    aria-modal="true"
+  <BaseModal
+      :is-open="isDefaultTemplateModalOpen"
+      title="Add Template From Default"
+      max-width="lg"
+      @close="closeDefaultTemplateModal"
   >
-    <div
-      class="fixed inset-0 bg-slate-900/50 transition-opacity"
-      aria-hidden="true"
-      @click="closeDefaultTemplateModal"
-    ></div>
-
-    <form class="w-full sm:max-w-lg z-10" @submit.prevent="submitCreateFromDefault">
-      <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 dark:text-slate-100">
-              Add Template From Default
-            </h3>
-            <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>
-
+    <form class="px-4 pt-5 pb-4 sm:p-6 space-y-4" @submit.prevent="submitCreateFromDefault">
           <div v-if="isDefaultTemplatesLoading" class="text-sm text-slate-500 dark:text-slate-400">
             Loading default templates...
           </div>
@@ -149,34 +117,35 @@
           <p v-if="createFromDefaultError" class="text-sm text-red-600 dark:text-red-400">
             {{ createFromDefaultError }}
           </p>
-        </div>
-
-        <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"
-            :disabled="isCreatingFromDefault || isDefaultTemplatesLoading || !selectedDefaultTemplateKey"
-          >
-            {{ isCreatingFromDefault ? 'Adding...' : 'Add' }}
-          </button>
-          <button
-            type="button"
-            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"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
     </form>
-  </div>
+
+    <template #footer>
+      <button
+          type="button"
+          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"
+          :disabled="isCreatingFromDefault || isDefaultTemplatesLoading || !selectedDefaultTemplateKey"
+          @click="submitCreateFromDefault"
+      >
+        {{ isCreatingFromDefault ? 'Adding...' : 'Add' }}
+      </button>
+      <button
+          type="button"
+          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"
+      >
+        Cancel
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import BaseIcon from '../base/BaseIcon.vue'
+import BaseModal from '../base/BaseModal.vue'
+import ActionButton from '../base/ActionButton.vue'
 import { templateClient } from '../../api'
 
 const router = useRouter()
diff --git a/assets/vue/composables/useAnalyticsData.js b/assets/vue/composables/useAnalyticsData.js
index 738e6a70..3b177b89 100644
--- a/assets/vue/composables/useAnalyticsData.js
+++ b/assets/vue/composables/useAnalyticsData.js
@@ -1,25 +1,15 @@
 import { ref } from 'vue'
 import { statisticsClient } from '../api'
+import { useAsyncAction } from './useAsyncAction'
 
-const isLoading = ref(true)
-const hasLoaded = ref(false)
-const errorMessage = ref('')
 const campaignStatistics = ref([])
 const viewOpens = ref([])
 const topDomains = ref([])
 const domainConfirmation = ref(null)
 const topLocalParts = ref([])
-const loaded = ref(false)
 
-const loadAnalytics = async () => {
-  if (loaded.value) {
-    return
-  }
-
-  isLoading.value = true
-  errorMessage.value = ''
-
-  try {
+const analyticsAction = useAsyncAction(
+  async () => {
     const [
       campaignResponse,
       viewOpensResponse,
@@ -39,26 +29,31 @@ const loadAnalytics = async () => {
     topDomains.value = topDomainsResponse?.items ?? []
     domainConfirmation.value = domainConfirmationResponse ?? null
     topLocalParts.value = topLocalPartsResponse?.items ?? []
-    loaded.value = true
-  } catch (error) {
-    errorMessage.value = 'Failed to load analytics.'
-    console.error('Failed to load analytics:', error)
-  } finally {
-    isLoading.value = false
-    hasLoaded.value = true
+  },
+  {
+    once: true,
+    // Starts true: AnalyticsView only mounts its <VueApexCharts> once `loading` is false, and
+    // vue3-apexcharts' own mount is async (awaits a tick before calling ApexCharts.render()).
+    // If `loading` started false, the chart would mount on first paint, then immediately
+    // unmount when this run() flips loading to true on the view's onMounted - tearing down its
+    // DOM element while vue3-apexcharts' deferred render() is still in flight, which throws
+    // "Element not found" as an unhandled rejection (same bug fixed for the dashboard chart).
+    initialLoading: true,
+    errorMessage: 'Failed to load analytics.',
+    logLabel: 'Failed to load analytics:',
   }
-}
+)
 
 export function useAnalyticsData() {
   return {
-    isLoading,
-    hasLoaded,
-    errorMessage,
+    loading: analyticsAction.loading,
+    hasLoaded: analyticsAction.settled,
+    error: analyticsAction.error,
     campaignStatistics,
     viewOpens,
     topDomains,
     domainConfirmation,
     topLocalParts,
-    loadAnalytics,
+    loadAnalytics: analyticsAction.run,
   }
 }
\ No newline at end of file
diff --git a/assets/vue/composables/useApiValidationErrors.js b/assets/vue/composables/useApiValidationErrors.js
new file mode 100644
index 00000000..16b7ffd3
--- /dev/null
+++ b/assets/vue/composables/useApiValidationErrors.js
@@ -0,0 +1,36 @@
+export function useApiValidationErrors(fieldLabels = {}) {
+  const normalizeFieldName = (fieldPath = '') => {
+    if (fieldLabels[fieldPath]) return fieldLabels[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)]
+  }
+
+  return {
+    normalizeFieldName,
+    formatValidationErrors,
+  }
+}
\ No newline at end of file
diff --git a/assets/vue/composables/useAsyncAction.js b/assets/vue/composables/useAsyncAction.js
new file mode 100644
index 00000000..f1f31886
--- /dev/null
+++ b/assets/vue/composables/useAsyncAction.js
@@ -0,0 +1,48 @@
+import { ref } from 'vue'
+
+export function useAsyncAction(action, options = {}) {
+  const {
+    once = false,
+    errorMessage = 'Something went wrong.',
+    logLabel,
+    onError,
+    initialLoading = false,
+  } = options
+
+  const loading = ref(initialLoading)
+  const error = ref('')
+  const loaded = ref(false)
+  const settled = ref(false)
+  // Plain (non-reactive) re-entry guard, deliberately separate from `loading` - `loading`'s
+  // initial value is caller-configurable display state, not "a run is already in flight".
+  let inFlight = false
+
+  const run = async (...args) => {
+    if (inFlight || (once && loaded.value)) {
+      return undefined
+    }
+
+    inFlight = true
+    loading.value = true
+    error.value = ''
+
+    try {
+      const result = await action(...args)
+      loaded.value = true
+      return result
+    } catch (err) {
+      if (logLabel) {
+        console.error(logLabel, err)
+      }
+      error.value = typeof errorMessage === 'function' ? errorMessage(err) : errorMessage
+      onError?.(err)
+      return undefined
+    } finally {
+      inFlight = false
+      loading.value = false
+      settled.value = true
+    }
+  }
+
+  return { loading, error, loaded, settled, run }
+}
diff --git a/assets/vue/composables/useCampaignLists.js b/assets/vue/composables/useCampaignLists.js
new file mode 100644
index 00000000..fb183534
--- /dev/null
+++ b/assets/vue/composables/useCampaignLists.js
@@ -0,0 +1,64 @@
+import { ref } from 'vue'
+
+export function useCampaignLists(listMessagesClient) {
+  const listsByCampaignId = ref({})
+  const loadingListsByCampaignId = ref({})
+  const expandedListsByCampaignId = ref({})
+
+  const getCampaignLists = (campaignId) => listsByCampaignId.value[campaignId] || []
+  const isListsLoading = (campaignId) => loadingListsByCampaignId.value[campaignId] === true
+  const isListsExpanded = (campaignId) => expandedListsByCampaignId.value[campaignId] === true
+
+  const toggleListsExpanded = (campaignId) => {
+    expandedListsByCampaignId.value = {
+      ...expandedListsByCampaignId.value,
+      [campaignId]: !isListsExpanded(campaignId)
+    }
+  }
+
+  const fetchListsForVisibleCampaigns = async (campaignIds) => {
+    const pending = campaignIds
+      .filter((campaignId) => !(campaignId in listsByCampaignId.value) && !loadingListsByCampaignId.value[campaignId])
+
+    if (pending.length === 0) return
+
+    pending.forEach((campaignId) => {
+      loadingListsByCampaignId.value = { ...loadingListsByCampaignId.value, [campaignId]: true }
+    })
+
+    const results = await Promise.allSettled(
+      pending.map(async (campaignId) => {
+        const response = await listMessagesClient.getListsByMessage(campaignId)
+        return {
+          campaignId,
+          lists: Array.isArray(response?.items) ? response.items : []
+        }
+      })
+    )
+
+    const nextLists = { ...listsByCampaignId.value }
+    const nextLoading = { ...loadingListsByCampaignId.value }
+
+    results.forEach((result, index) => {
+      const campaignId = pending[index]
+      if (result.status === 'fulfilled') {
+        nextLists[campaignId] = result.value.lists
+      } else {
+        nextLists[campaignId] = []
+        console.error(`Failed to load lists for campaign ${campaignId}:`, result.reason)
+      }
+      nextLoading[campaignId] = false
+    })
+
+    listsByCampaignId.value = nextLists
+    loadingListsByCampaignId.value = nextLoading
+  }
+
+  return {
+    getCampaignLists,
+    isListsLoading,
+    isListsExpanded,
+    toggleListsExpanded,
+    fetchListsForVisibleCampaigns,
+  }
+}
\ No newline at end of file
diff --git a/assets/vue/composables/useCampaignPagination.js b/assets/vue/composables/useCampaignPagination.js
new file mode 100644
index 00000000..5d76edd3
--- /dev/null
+++ b/assets/vue/composables/useCampaignPagination.js
@@ -0,0 +1,223 @@
+import { computed, ref, watch } from 'vue'
+
+const parseStatusQuery = (statusQuery, allowedStatuses) => {
+  const value = Array.isArray(statusQuery) ? statusQuery[0] : statusQuery
+  return allowedStatuses.includes(value) ? value : 'all'
+}
+
+const parsePageQuery = (pageQuery) => {
+  const queryValue = Array.isArray(pageQuery) ? pageQuery[0] : pageQuery
+  const page = Number.parseInt(String(queryValue ?? ''), 10)
+  return Number.isNaN(page) || page < 1 ? 1 : page
+}
+
+// Cursor-based pagination synced with the route's `status`/`page` query params. Encapsulates the
+// per-page cache, cursor bookkeeping, and the generation/in-flight-request guards needed so a slow
+// response from a since-abandoned filter can never overwrite the current view.
+export function useCampaignPagination({ route, router, pageSize, allowedStatuses, fetchPage }) {
+  const rawItemsByPage = ref(new Map())
+  const cursorsByPage = ref(new Map([[1, null]]))
+  const total = ref(0)
+  const loading = ref(false)
+  const error = ref('')
+
+  const statusFilter = computed({
+    get() {
+      return parseStatusQuery(route.query.status, allowedStatuses)
+    },
+    async set(value) {
+      const normalized = allowedStatuses.includes(value) ? value : 'all'
+      const nextQuery = { ...route.query }
+
+      if (normalized === 'all') {
+        delete nextQuery.status
+      } else {
+        nextQuery.status = normalized
+      }
+
+      delete nextQuery.page
+
+      await router.replace({ query: nextQuery })
+    }
+  })
+
+  const currentPage = ref(parsePageQuery(route.query.page))
+
+  let generation = 0
+  const requestsInFlight = new Map()
+
+  const resetPagination = () => {
+    generation += 1
+    requestsInFlight.clear()
+    rawItemsByPage.value = new Map()
+    cursorsByPage.value = new Map([[1, null]])
+  }
+
+  // Fetches and caches one page at a time. This only fetches/caches; it never touches
+  // `currentPage` itself, so walking through intermediate pages (see loadUpToPage) can't leak a
+  // transient wrong page number out to the URL-syncing watchers.
+  const loadPage = (page) => {
+    if (rawItemsByPage.value.has(page)) {
+      return Promise.resolve()
+    }
+
+    const inFlight = requestsInFlight.get(page)
+    if (inFlight) return inFlight
+
+    const thisGeneration = generation
+    const request = (async () => {
+      loading.value = true
+      error.value = ''
+
+      try {
+        const afterId = cursorsByPage.value.get(page) ?? null
+        const response = await fetchPage(afterId, pageSize, statusFilter.value)
+        if (thisGeneration !== generation) return
+
+        const items = Array.isArray(response?.items) ? response.items : []
+
+        rawItemsByPage.value.set(page, items)
+        total.value = Number(response?.pagination?.total ?? 0)
+
+        if (response?.pagination?.hasMore) {
+          cursorsByPage.value.set(page + 1, response?.pagination?.nextCursor ?? null)
+        }
+      } catch (err) {
+        if (thisGeneration === generation) {
+          console.error(`Failed to load campaigns page ${page}:`, err)
+          error.value = 'Failed to load campaigns.'
+        }
+      } finally {
+        loading.value = false
+        requestsInFlight.delete(page)
+      }
+    })()
+
+    requestsInFlight.set(page, request)
+    return request
+  }
+
+  // Navigates to a page, fetching/caching every page from 1 up to it along the way (cursors for
+  // unvisited pages aren't known ahead of time), then commits currentPage exactly once at the end.
+  const loadUpToPage = async (targetPage) => {
+    for (let page = 1; page <= targetPage; page += 1) {
+      await loadPage(page)
+    }
+    currentPage.value = targetPage
+  }
+
+  // A mutation can shift which items fall on the current page and every page after it (but never
+  // on earlier pages), so drop those from the cache and refetch just the current one.
+  const invalidateFromCurrentPage = () => {
+    const page = currentPage.value
+    for (const key of [...rawItemsByPage.value.keys()]) {
+      if (key >= page) rawItemsByPage.value.delete(key)
+    }
+    for (const key of [...cursorsByPage.value.keys()]) {
+      if (key > page) cursorsByPage.value.delete(key)
+    }
+  }
+
+  const refreshCurrentPage = async () => {
+    invalidateFromCurrentPage()
+    await loadPage(currentPage.value)
+  }
+
+  const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+  const canGoPrevious = computed(() => currentPage.value > 1)
+  const canGoNext = computed(() => currentPage.value < totalPages.value)
+
+  const rangeStart = computed(() => (total.value === 0 ? 0 : (currentPage.value - 1) * pageSize + 1))
+  const rangeEnd = computed(() => (total.value === 0 ? 0 : Math.min(currentPage.value * pageSize, total.value)))
+
+  const setFilter = (filterId) => {
+    statusFilter.value = filterId
+  }
+
+  const previousPage = async () => {
+    if (canGoPrevious.value) {
+      const target = currentPage.value - 1
+      await loadPage(target)
+      currentPage.value = target
+    }
+  }
+
+  const nextPage = async () => {
+    if (canGoNext.value) {
+      const target = currentPage.value + 1
+      await loadPage(target)
+      currentPage.value = target
+    }
+  }
+
+  watch(statusFilter, () => {
+    resetPagination()
+    loadPage(1).then(() => {
+      currentPage.value = 1
+    })
+  })
+
+  watch(totalPages, (pages) => {
+    if (loading.value) return
+    if (currentPage.value > pages) {
+      loadPage(pages).then(() => {
+        currentPage.value = pages
+      })
+    }
+  })
+
+  watch(() => route.query.page, (pageQuery) => {
+    const nextPage = parsePageQuery(pageQuery)
+    if (nextPage !== currentPage.value) {
+      loadUpToPage(nextPage)
+    }
+  })
+
+  watch(currentPage, async (page) => {
+    const normalizedPage = loading.value
+      ? Math.max(1, page)
+      : Math.min(Math.max(1, page), totalPages.value)
+    if (normalizedPage !== page) {
+      currentPage.value = normalizedPage
+      return
+    }
+
+    const currentQueryPage = Array.isArray(route.query.page) ? route.query.page[0] : route.query.page
+    const desiredQueryPage = normalizedPage > 1 ? String(normalizedPage) : undefined
+    if (currentQueryPage === desiredQueryPage) {
+      return
+    }
+
+    const nextQuery = { ...route.query }
+    if (desiredQueryPage !== undefined) {
+      nextQuery.page = desiredQueryPage
+    } else {
+      delete nextQuery.page
+    }
+
+    await router.replace({
+      query: nextQuery
+    })
+  })
+
+  const rawItems = computed(() => rawItemsByPage.value.get(currentPage.value) ?? [])
+
+  return {
+    statusFilter,
+    currentPage,
+    rawItems,
+    total,
+    loading,
+    error,
+    totalPages,
+    canGoPrevious,
+    canGoNext,
+    rangeStart,
+    rangeEnd,
+    setFilter,
+    previousPage,
+    nextPage,
+    loadUpToPage,
+    refreshCurrentPage,
+  }
+}
\ No newline at end of file
diff --git a/assets/vue/composables/useCampaignStatistics.js b/assets/vue/composables/useCampaignStatistics.js
new file mode 100644
index 00000000..b477ac98
--- /dev/null
+++ b/assets/vue/composables/useCampaignStatistics.js
@@ -0,0 +1,100 @@
+import { ref } from 'vue'
+
+// maxPages is a safety net against runaway loops, not a functional cap - it's far above any
+// realistic dataset size, and hitting it logs a warning instead of silently truncating results.
+const drainPaginated = async (fetchPage, onItems, { limit = 100, maxPages = 500 } = {}) => {
+  let cursor = null
+  let pages = 0
+
+  while (pages < maxPages) {
+    const response = await fetchPage(cursor, limit)
+    const items = Array.isArray(response?.items) ? response.items : []
+    onItems(items)
+
+    const hasMore = Boolean(response?.pagination?.hasMore)
+    const nextCursor = response?.pagination?.nextCursor ?? null
+    // A cursor that doesn't advance (server pagination bug) would otherwise spin until maxPages,
+    // hammering the API with identical requests - bail out the moment it stops moving forward.
+    if (!hasMore || nextCursor === null || nextCursor === cursor) break
+
+    cursor = nextCursor
+    pages += 1
+  }
+
+  if (pages >= maxPages) {
+    console.warn('Pagination guard reached; results may be incomplete.')
+  }
+}
+
+export function useCampaignStatistics(statisticsClient) {
+  const statisticsByCampaignId = ref({})
+  const showStatistics = ref(true)
+
+  const getCampaignStatistics = (campaignId) => statisticsByCampaignId.value[campaignId] || {
+    bounces: 0,
+    sent: 0,
+    uniqueViews: 0,
+  }
+
+  const fetchCampaignStatistics = async () => {
+    try {
+      // Independent endpoints - written into separate maps so they can be fetched concurrently
+      // without one drain's pagination racing the other's, then merged once both are done.
+      const campaignStatsMap = {}
+      const viewOpensSentByCampaignId = {}
+
+      await Promise.all([
+        drainPaginated(
+          (cursor, limit) => statisticsClient.getCampaignStatistics(cursor, limit),
+          (items) => {
+            items.forEach((item) => {
+              campaignStatsMap[item.campaignId] = {
+                bounces: Number(item.bounces ?? 0),
+                sent: Number(item.sent ?? 0),
+                uniqueViews: Number(item.uniqueViews ?? 0),
+              }
+            })
+          },
+          { limit: 100 }
+        ),
+        drainPaginated(
+          (cursor, limit) => statisticsClient.getStatisticsOfViewOpens(cursor, limit),
+          (items) => {
+            items.forEach((item) => {
+              viewOpensSentByCampaignId[item.campaignId] = Number(item.sent ?? 0)
+            })
+          },
+          { limit: 100 }
+        )
+      ])
+
+      const statisticsMap = { ...campaignStatsMap }
+      Object.entries(viewOpensSentByCampaignId).forEach(([campaignId, sent]) => {
+        const existing = statisticsMap[campaignId] ?? { bounces: 0, sent: 0, uniqueViews: 0 }
+        statisticsMap[campaignId] = { ...existing, sent }
+      })
+
+      statisticsByCampaignId.value = statisticsMap
+      showStatistics.value = true
+    } catch (error) {
+      if (
+          error?.name === 'AuthorizationException' ||
+          error?.code === 'AuthorizationException' ||
+          error?.status === 403
+      ) {
+        showStatistics.value = false
+        statisticsByCampaignId.value = {}
+        return
+      }
+
+      throw error
+    }
+  }
+
+  return {
+    statisticsByCampaignId,
+    showStatistics,
+    getCampaignStatistics,
+    fetchCampaignStatistics,
+  }
+}
\ No newline at end of file
diff --git a/assets/vue/composables/useDashboardData.js b/assets/vue/composables/useDashboardData.js
index 3a5159b0..539ff799 100644
--- a/assets/vue/composables/useDashboardData.js
+++ b/assets/vue/composables/useDashboardData.js
@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { statisticsClient } from '../api'
+import { useAsyncAction } from './useAsyncAction'
 
 const defaultChart = () => ({
   labels: [],
@@ -10,19 +11,8 @@ const defaultChart = () => ({
 })
 
 const summary = ref(null)
-const summaryLoading = ref(false)
-const summaryError = ref('')
-const summaryLoaded = ref(false)
-
 const recentCampaigns = ref([])
-const recentCampaignsLoading = ref(false)
-const recentCampaignsError = ref('')
-const recentCampaignsLoaded = ref(false)
-
 const chart = ref(defaultChart())
-const chartLoading = ref(false)
-const chartError = ref('')
-const chartLoaded = ref(false)
 
 const formatChartLabel = (dateValue) => {
   if (!dateValue) {
@@ -40,54 +30,23 @@ const formatChartLabel = (dateValue) => {
   return new Intl.DateTimeFormat('en-US', { month: 'short', day: '2-digit' }).format(date)
 }
 
-const loadSummary = async () => {
-  if (summaryLoaded.value || summaryLoading.value) {
-    return
-  }
-
-  summaryLoading.value = true
-  summaryError.value = ''
-
-  try {
+const summaryAction = useAsyncAction(
+  async () => {
     summary.value = await statisticsClient.getDashboardSummary()
-    summaryLoaded.value = true
-  } catch (err) {
-    summaryError.value = 'Unable to load dashboard summary.'
-    console.error('Failed to load dashboard summary:', err)
-  } finally {
-    summaryLoading.value = false
-  }
-}
-
-const loadRecentCampaigns = async () => {
-  if (recentCampaignsLoaded.value || recentCampaignsLoading.value) {
-    return
-  }
-
-  recentCampaignsLoading.value = true
-  recentCampaignsError.value = ''
+  },
+  { once: true, errorMessage: 'Unable to load dashboard summary.', logLabel: 'Failed to load dashboard summary:' }
+)
 
-  try {
+const recentCampaignsAction = useAsyncAction(
+  async () => {
     const response = await statisticsClient.getRecentCampaigns()
     recentCampaigns.value = response?.campaigns ?? []
-    recentCampaignsLoaded.value = true
-  } catch (err) {
-    recentCampaignsError.value = 'Unable to load recent campaigns.'
-    console.error('Failed to load recent campaigns:', err)
-  } finally {
-    recentCampaignsLoading.value = false
-  }
-}
+  },
+  { once: true, errorMessage: 'Unable to load recent campaigns.', logLabel: 'Failed to load recent campaigns:' }
+)
 
-const loadChart = async () => {
-  if (chartLoaded.value || chartLoading.value) {
-    return
-  }
-
-  chartLoading.value = true
-  chartError.value = ''
-
-  try {
+const chartAction = useAsyncAction(
+  async () => {
     const response = await statisticsClient.getCampaignPerformance()
     const points = response?.points ?? []
     chart.value = {
@@ -97,32 +56,40 @@ const loadChart = async () => {
         { name: 'Clicks', data: points.map((point) => point.clicks) },
       ],
     }
-    chartLoaded.value = true
-  } catch (err) {
-    chartError.value = 'Unable to load campaign performance.'
-    console.error('Failed to load campaign performance:', err)
-  } finally {
-    chartLoading.value = false
+  },
+  {
+    once: true,
+    // Starts true (unlike the other two actions): PerformanceChartCard only mounts the
+    // <apexchart> child once `loading` is false, and vue3-apexcharts' own mount is async
+    // (awaits a tick before calling ApexCharts.render()). If `loading` started false, the
+    // chart would mount on first paint, then immediately unmount when this run() flips
+    // loading to true on DashboardView's onMounted - tearing down its DOM element while
+    // vue3-apexcharts' deferred render() is still in flight, which throws "Element not
+    // found" as an unhandled rejection. Starting true means <apexchart> is never created
+    // until data has actually loaded, so there is no mount/unmount race.
+    initialLoading: true,
+    errorMessage: 'Unable to load campaign performance.',
+    logLabel: 'Failed to load campaign performance:',
   }
-}
+)
 
 const load = () => {
-  loadSummary()
-  loadRecentCampaigns()
-  loadChart()
+  summaryAction.run()
+  recentCampaignsAction.run()
+  chartAction.run()
 }
 
 export function useDashboardData() {
   return {
     summary,
-    summaryLoading,
-    summaryError,
+    summaryLoading: summaryAction.loading,
+    summaryError: summaryAction.error,
     recentCampaigns,
-    recentCampaignsLoading,
-    recentCampaignsError,
+    recentCampaignsLoading: recentCampaignsAction.loading,
+    recentCampaignsError: recentCampaignsAction.error,
     chart,
-    chartLoading,
-    chartError,
+    chartLoading: chartAction.loading,
+    chartError: chartAction.error,
     load,
   }
 }
\ No newline at end of file
diff --git a/assets/vue/layouts/AdminLayout.vue b/assets/vue/layouts/AdminLayout.vue
index f33fa191..6cb71495 100644
--- a/assets/vue/layouts/AdminLayout.vue
+++ b/assets/vue/layouts/AdminLayout.vue
@@ -1,4 +1,4 @@
-<!-- assets/vue/layouts/DashboardLayout.vue -->
+<!-- assets/vue/layouts/AdminLayout.vue -->
 <template>
   <div class="flex flex-col flex-1">
     <!-- Topbar -->
@@ -65,11 +65,7 @@
           to="/campaigns/create"
           class="hidden sm:flex items-center gap-2 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"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M5 12h14"></path>
-            <path d="M12 5v14"></path>
-          </svg>
+          <BaseIcon name="plus" class="w-3.5 h-3.5" inherit-color />
           Create Campaign
         </RouterLink>
 
@@ -213,20 +209,20 @@ const closeSearchResultsOnOutsideClick = (event) => {
 onMounted(async () => {
   document.addEventListener('click', closeSearchResultsOnOutsideClick);
 
-  // try {
-  //   const response = await backendFetch('/admin-about', {
-  //     headers: {
-  //       Accept: 'application/json',
-  //       'X-Requested-With': 'XMLHttpRequest'
-  //     }
-  //   });
-  //
-  //   if (response.ok) {
-  //     adminData.value = await response.json();
-  //   }
-  // } catch (error) {
-  //   console.error('Failed to fetch admin data:', error);
-  // }
+  try {
+    const response = await backendFetch('/admin-about', {
+      headers: {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    });
+
+    if (response.ok) {
+      adminData.value = await response.json();
+    }
+  } catch (error) {
+    console.error('Failed to fetch admin data:', error);
+  }
 });
 
 onBeforeUnmount(() => {
diff --git a/assets/vue/views/AnalyticsView.vue b/assets/vue/views/AnalyticsView.vue
index fefde414..7f0aacb4 100644
--- a/assets/vue/views/AnalyticsView.vue
+++ b/assets/vue/views/AnalyticsView.vue
@@ -2,11 +2,11 @@
   <AdminLayout>
     <div class="space-y-6 animate-in fade-in duration-300">
       <div
-        v-if="errorMessage"
+        v-if="error"
         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 }}
+        {{ error }}
       </div>
 
       <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -42,7 +42,7 @@
             </p>
           </header>
 
-          <div v-if="isLoading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500 dark:text-slate-400">
+          <div v-if="loading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500 dark:text-slate-400">
             Loading analytics...
           </div>
 
@@ -288,9 +288,9 @@ import { useAnalyticsData } from '../composables/useAnalyticsData'
 const { isDark } = useDarkMode()
 
 const {
-  isLoading,
+  loading,
   hasLoaded,
-  errorMessage,
+  error,
   campaignStatistics,
   viewOpens,
   topDomains,
diff --git a/assets/vue/views/CampaignEditView.vue b/assets/vue/views/CampaignEditView.vue
index fc56c218..18265f64 100644
--- a/assets/vue/views/CampaignEditView.vue
+++ b/assets/vue/views/CampaignEditView.vue
@@ -17,12 +17,12 @@
         </div>
       </div>
 
-      <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">
+      <div v-if="loading" 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 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 v-else-if="error" 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">
+        {{ error }}
       </div>
 
       <div v-else class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
@@ -395,6 +395,8 @@ import {RouterLink, useRoute, useRouter} from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import CkEditorField from '../components/base/CkEditorField.vue'
 import {campaignClient, fetchAllLists, listMessagesClient, templateClient} from '../api'
+import {useApiValidationErrors} from '../composables/useApiValidationErrors'
+import {useAsyncAction} from '../composables/useAsyncAction'
 
 const route = useRoute()
 const router = useRouter()
@@ -413,8 +415,6 @@ const isCreateMode = computed(() => route.name === 'campaign-create')
 const activeCampaignId = computed(() => Number(campaign.value?.id) || campaignIdFromRoute.value)
 const pageTitle = computed(() => isCreateMode.value ? 'Create Campaign' : `Edit Campaign #${campaignIdFromRoute.value}`)
 const currentStep = ref(1)
-const isLoading = ref(true)
-const loadError = ref('')
 const isSaving = ref(false)
 const isSendingTest = ref(false)
 const isQueueing = ref(false)
@@ -498,37 +498,7 @@ const validationFieldLabels = {
   'schedule.embargo': 'Embargo until'
 }
 
-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 fromObject = []
-
-  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)
-      fromObject.push(`${normalizeFieldName(field)}: ${text}`)
-    })
-  }
-
-  if (fromObject.length > 0) return [...new Set(fromObject)]
-  console.log('Failed to format validation errors:', error)
-  return []
-}
+const {formatValidationErrors} = useApiValidationErrors(validationFieldLabels)
 
 const normalizeListIds = (values) =>
   values
@@ -616,11 +586,8 @@ const fillForm = (campaignValue) => {
   }
 }
 
-const loadCampaignData = async () => {
-  isLoading.value = true
-  loadError.value = ''
-
-  try {
+const loadCampaignDataAction = useAsyncAction(
+  async () => {
     if (isCreateMode.value) {
       const mailingListsResponse = await fetchAllLists()
 
@@ -640,7 +607,7 @@ const loadCampaignData = async () => {
     }
 
     if (!Number.isFinite(campaignIdFromRoute.value) || campaignIdFromRoute.value <= 0) {
-      loadError.value = 'Invalid campaign ID.'
+      error.value = 'Invalid campaign ID.'
       return
     }
 
@@ -661,13 +628,17 @@ const loadCampaignData = async () => {
 
     associatedListIds.value = linkedIds
     selectedListIds.value = [...linkedIds]
-  } catch (error) {
-    console.error('Failed to load campaign data for editing:', error)
-    loadError.value = error?.message || 'Failed to load campaign data.'
-  } finally {
-    isLoading.value = false
+  },
+  {
+    errorMessage: (error) => error?.message || 'Failed to load campaign data.',
+    logLabel: 'Failed to load campaign data for editing:',
   }
-}
+)
+
+const loading = loadCampaignDataAction.loading
+const error = loadCampaignDataAction.error
+
+const loadCampaignData = () => loadCampaignDataAction.run()
 
 const buildCampaignPayload = () => {
   const currentCampaign = campaign.value
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index c62ea950..e62f3aa6 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -115,8 +115,8 @@
               <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 dark:text-red-400">{{ errorMessage }}</td>
+            <tr v-else-if="error">
+              <td colspan="6" class="px-6 py-8 text-center text-red-600 dark:text-red-400">{{ error }}</td>
             </tr>
 
             <tr
@@ -136,12 +136,9 @@
               <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 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'"
-                  >
+                  <BaseBadge :variant="subscriber.confirmed ? 'success' : 'warning'">
                     {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
-                  </span>
+                  </BaseBadge>
               </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">
@@ -157,7 +154,7 @@
               </td>
             </tr>
 
-            <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
+            <tr v-if="!loading && !error && filteredSubscribers.length === 0">
               <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>
@@ -165,9 +162,9 @@
 
           <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 v-else-if="error" class="px-4 py-8 text-center text-red-600 dark:text-red-400 text-sm">{{ error }}</div>
 
-            <div class="p-4 border-b border-slate-100 dark:border-slate-700" v-if="!loading && !errorMessage && filteredSubscribers.length">
+            <div class="p-4 border-b border-slate-100 dark:border-slate-700" v-if="!loading && !error && filteredSubscribers.length">
               <label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                 <input
                     type="checkbox"
@@ -195,12 +192,9 @@
                 <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 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 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'"
-                    >
+                    <BaseBadge class="whitespace-nowrap" :variant="subscriber.confirmed ? 'success' : 'warning'">
                       {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
-                    </span>
+                    </BaseBadge>
                   </div>
                   <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
                   <button
@@ -217,7 +211,7 @@
             </div>
 
             <div
-                v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
+                v-if="!loading && !error && filteredSubscribers.length === 0"
                 class="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm"
             >
               No subscribers for this filter.
@@ -261,7 +255,9 @@ import {useRoute} from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import ListSubscribersExportPanel from '../components/lists/ListSubscribersExportPanel.vue'
 import BaseIcon from '../components/base/BaseIcon.vue'
+import BaseBadge from '../components/base/BaseBadge.vue'
 import client, {subscriptionClient} from '../api'
+import {useAsyncAction} from '../composables/useAsyncAction'
 
 const route = useRoute()
 const listId = computed(() => Number(route.params.listId))
@@ -270,9 +266,7 @@ const listName = ref(typeof route.query.listName === 'string' ? route.query.list
 const subscribers = ref([])
 const total = ref(0)
 const pageSize = ref(10)
-const loading = ref(false)
 const actionLoading = ref(false)
-const errorMessage = ref('')
 const actionError = ref('')
 const actionMessage = ref('')
 const nextCursor = ref(null)
@@ -392,33 +386,37 @@ const loadAvailableLists = async () => {
   availableLists.value = lists
 }
 
-const fetchSubscribers = async (cursor = null) => {
-  if (!Number.isInteger(listId.value) || listId.value <= 0) {
-    errorMessage.value = 'Invalid list ID.'
-    subscribers.value = []
-    return
-  }
-
-  loading.value = true
-  errorMessage.value = ''
-
-  try {
+const fetchSubscribersAction = useAsyncAction(
+  async (cursor = null) => {
     const response = await subscriptionClient.getSubscribersOfList(listId.value, cursor, pageSize.value)
     subscribers.value = Array.isArray(response.items) ? response.items : []
     total.value = response.pagination?.total ?? subscribers.value.length
     nextCursor.value = response.pagination?.nextCursor ?? null
     clearSelection()
     return true
-  } catch (error) {
-    console.error('Failed to load list subscribers:', error)
-    errorMessage.value = 'Failed to load subscribers for this list.'
+  },
+  {
+    errorMessage: 'Failed to load subscribers for this list.',
+    logLabel: 'Failed to load list subscribers:',
+    onError: () => {
+      subscribers.value = []
+      nextCursor.value = null
+      clearSelection()
+    },
+  }
+)
+
+const loading = fetchSubscribersAction.loading
+const error = fetchSubscribersAction.error
+
+const fetchSubscribers = async (cursor = null) => {
+  if (!Number.isInteger(listId.value) || listId.value <= 0) {
+    error.value = 'Invalid list ID.'
     subscribers.value = []
-    nextCursor.value = null
-    clearSelection()
-    return false
-  } finally {
-    loading.value = false
+    return
   }
+
+  return fetchSubscribersAction.run(cursor)
 }
 
 const refreshCurrentPage = async () => {
@@ -427,8 +425,8 @@ const refreshCurrentPage = async () => {
 
 const deleteEmailsFromCurrentList = async (emails) => {
   if (emails.length === 0) return
-  // todo: check why subscription client delete is not working
-  await client.delete(`lists/${listId.value}/subscribers`, {emails})
+
+  await subscriptionClient.deleteSubscription(emails, listId.value)
 }
 
 const deleteSingleSubscriber = async (subscriber) => {
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index d36ed649..84911c43 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -17,12 +17,12 @@
         </div>
       </div>
 
-      <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">
+      <div v-if="loading" 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 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 v-else-if="error" 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">
+        {{ error }}
       </div>
 
       <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">
@@ -162,12 +162,12 @@ import AdminLayout from '../layouts/AdminLayout.vue'
 import CkEditorField from '../components/base/CkEditorField.vue'
 import { templateClient } from '../api'
 import { Requests } from "@tatevikgr/rest-api-client";
+import { useApiValidationErrors } from '../composables/useApiValidationErrors'
+import { useAsyncAction } from '../composables/useAsyncAction'
 
 const route = useRoute()
 const router = useRouter()
 
-const isLoading = ref(false)
-const loadError = ref('')
 const isSaving = ref(false)
 const saveError = ref('')
 const saveErrors = ref([])
@@ -194,6 +194,23 @@ const saveButtonLabel = computed(() => {
   return isCreateMode.value ? 'Create' : 'Save'
 })
 
+const loadTemplateAction = useAsyncAction(
+  async () => {
+    const template = await templateClient.getTemplate(templateId.value)
+    form.value.title = template?.title || ''
+    form.value.listOrder = template?.listOrder !== null && template?.listOrder !== undefined
+      ? String(template.listOrder)
+      : ''
+    form.value.content = template?.content || ''
+    form.value.text = template?.text || ''
+    form.value.file = null
+  },
+  { errorMessage: 'Failed to load template.', logLabel: 'Failed to load template:' }
+)
+
+const loading = loadTemplateAction.loading
+const error = loadTemplateAction.error
+
 const loadTemplate = async () => {
   if (isCreateMode.value) {
     form.value.title = ''
@@ -201,33 +218,16 @@ const loadTemplate = async () => {
     form.value.content = ''
     form.value.text = ''
     form.value.file = null
-    loadError.value = ''
+    error.value = ''
     return
   }
 
   if (!Number.isFinite(templateId.value) || templateId.value <= 0) {
-    loadError.value = 'Template ID is invalid.'
+    error.value = 'Template ID is invalid.'
     return
   }
 
-  isLoading.value = true
-  loadError.value = ''
-
-  try {
-    const template = await templateClient.getTemplate(templateId.value)
-    form.value.title = template?.title || ''
-    form.value.listOrder = template?.listOrder !== null && template?.listOrder !== undefined
-      ? String(template.listOrder)
-      : ''
-    form.value.content = template?.content || ''
-    form.value.text = template?.text || ''
-    form.value.file = null
-  } catch (error) {
-    console.error('Failed to load template:', error)
-    loadError.value = 'Failed to load template.'
-  } finally {
-    isLoading.value = false
-  }
+  await loadTemplateAction.run()
 }
 
 const populateTextFromContent = () => {
@@ -258,35 +258,7 @@ const validationFieldLabels = {
   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 {formatValidationErrors} = useApiValidationErrors(validationFieldLabels)
 
 const saveTemplate = async () => {
   if (!isCreateMode.value && (!Number.isFinite(templateId.value) || templateId.value <= 0)) {
diff --git a/package.json b/package.json
index dd4e25ef..665ce06d 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.2.1",
+    "@tatevikgr/rest-api-client": "^2.2.3",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/src/Controller/AuthController.php b/src/Controller/AuthController.php
index 00182f59..6603468a 100755
--- a/src/Controller/AuthController.php
+++ b/src/Controller/AuthController.php
@@ -6,6 +6,7 @@
 
 use Exception;
 use GuzzleHttp\Exception\GuzzleException;
+use PhpList\RestApiClient\Client;
 use PhpList\RestApiClient\Endpoint\AuthClient;
 use PhpList\RestApiClient\Exception\ApiException;
 use PhpList\RestApiClient\Exception\AuthenticationException;
@@ -23,6 +24,7 @@ class AuthController extends AbstractController
 
     public function __construct(
         private readonly AuthClient $authClient,
+        private readonly Client $apiClient,
         private readonly LoggerInterface $logger
     ) {
     }
@@ -62,10 +64,10 @@ public function login(Request $request): Response
                 $request->getSession()->save();
 
                 return $this->redirectAfterLogin($redirectTarget);
-            } catch (Exception $e) {
-                $error = $e->getCode() === 401 ? 'Invalid credentials: ' . $e->getMessage() : $e->getMessage();
             } catch (GuzzleException $e) {
                 $error = 'Invalid credentials or server error: ' . $e->getMessage();
+            } catch (Exception $e) {
+                $error = $e->getCode() === 401 ? 'Invalid credentials: ' . $e->getMessage() : $e->getMessage();
             }
         }
 
@@ -86,8 +88,16 @@ public function logout(Request $request): Response
     }
 
     #[Route('/admin-about', name: 'admin_about')]
-    public function about(): JsonResponse
+    public function about(Request $request): JsonResponse
     {
+        // ApiSessionListener sets this on the shared Client for every request, but on
+        // concurrent XHR requests sharing one PHP session it can race - re-set it here from
+        // this request's own session so getSessionUser() never fails purely on a timing gap.
+        $authToken = $request->getSession()->get('auth_token');
+        if ($authToken) {
+            $this->apiClient->setSessionId((string) $authToken);
+        }
+
         try {
             $user = $this->authClient->getSessionUser();
         } catch (AuthenticationException) {
diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php
index 142ad6fc..f50e9b70 100644
--- a/src/Controller/BaseController.php
+++ b/src/Controller/BaseController.php
@@ -11,7 +11,7 @@
 use PhpList\RestApiClient\Exception\AuthorizationException;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 
-class BaseController extends AbstractController
+abstract class BaseController extends AbstractController
 {
     public function __construct(
         protected AuthClient $authClient,
diff --git a/src/Controller/EditorUploadController.php b/src/Controller/EditorUploadController.php
index 743d9d75..dd14515d 100644
--- a/src/Controller/EditorUploadController.php
+++ b/src/Controller/EditorUploadController.php
@@ -6,7 +6,6 @@
 
 use PhpList\WebFrontend\Exception\UpstreamServiceException;
 use PhpList\WebFrontend\Service\EditorUploadService;
-use RuntimeException;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -26,21 +25,13 @@ public function upload(Request $request): JsonResponse
         $uploadedFile = $request->files->get('upload');
 
         if (!$uploadedFile) {
-            return new JsonResponse([
-                'error' => [
-                    'message' => 'No file was provided.',
-                ],
-            ], Response::HTTP_BAD_REQUEST);
+            return $this->jsonError('No file was provided.', Response::HTTP_BAD_REQUEST);
         }
 
         try {
             $result = $this->editorUploadService->storeImage($uploadedFile);
         } catch (UpstreamServiceException $exception) {
-            return new JsonResponse([
-                'error' => [
-                    'message' => $exception->getMessage(),
-                ],
-            ], Response::HTTP_BAD_GATEWAY);
+            return $this->jsonError($exception->getMessage(), Response::HTTP_BAD_GATEWAY);
         }
 
         return new JsonResponse([
@@ -55,11 +46,7 @@ public function assets(): JsonResponse
         try {
             $assets = $this->editorUploadService->listAssets();
         } catch (UpstreamServiceException $exception) {
-            return new JsonResponse([
-                'error' => [
-                    'message' => $exception->getMessage(),
-                ],
-            ], Response::HTTP_BAD_GATEWAY);
+            return $this->jsonError($exception->getMessage(), Response::HTTP_BAD_GATEWAY);
         }
 
         return new JsonResponse([
@@ -69,4 +56,13 @@ public function assets(): JsonResponse
             ),
         ]);
     }
+
+    private function jsonError(string $message, int $statusCode): JsonResponse
+    {
+        return new JsonResponse([
+            'error' => [
+                'message' => $message,
+            ],
+        ], $statusCode);
+    }
 }
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
index 3dfb1baa..f895e05f 100644
--- a/src/Controller/ListsController.php
+++ b/src/Controller/ListsController.php
@@ -5,6 +5,7 @@
 namespace PhpList\WebFrontend\Controller;
 
 use PhpList\RestApiClient\Endpoint\ListClient;
+use PhpList\WebFrontend\Trait\WantsJsonTrait;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
@@ -14,6 +15,8 @@
 #[Route('/lists', name: 'list_')]
 class ListsController extends AbstractController
 {
+    use WantsJsonTrait;
+
     public function __construct(private readonly ListClient $listClient)
     {
     }
@@ -21,9 +24,7 @@ public function __construct(private readonly ListClient $listClient)
     #[Route('/', name: 'list', methods: ['GET'])]
     public function index(Request $request): JsonResponse|Response
     {
-        $accept = (string) $request->headers->get('Accept', '');
-        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
-        if (! $wantsJson) {
+        if (! $this->wantsJson($request)) {
             return $this->render('@PhpListFrontend/spa.html.twig', [
                 'page' => 'Lists',
             ]);
diff --git a/src/Controller/PublicSubscribeController.php b/src/Controller/PublicSubscribeController.php
index 2bab7276..a3d7b4f2 100644
--- a/src/Controller/PublicSubscribeController.php
+++ b/src/Controller/PublicSubscribeController.php
@@ -24,8 +24,8 @@
 class PublicSubscribeController extends BaseController
 {
     public function __construct(
-        private readonly SubscribePagesClient $subscribePagesClient,
         protected AuthClient $authClient,
+        private readonly SubscribePagesClient $subscribePagesClient,
         private readonly LanguageService $languageService,
         private readonly PublicSubscribeFormBuilder $formBuilder,
         private readonly PublicSubscribeFormValidator $formValidator,
diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index 331da623..89d7a75d 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -8,6 +8,7 @@
 use PhpList\RestApiClient\Request\Subscriber\SubscribersFilterRequest;
 use PhpList\WebFrontend\Service\SubscriberCollectionNormalizer;
 use PhpList\WebFrontend\Service\SubscriberExportRequestFactory;
+use PhpList\WebFrontend\Trait\WantsJsonTrait;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
@@ -18,6 +19,8 @@
 #[Route('/subscribers', name: 'subscriber_')]
 class SubscribersController extends AbstractController
 {
+    use WantsJsonTrait;
+
     public function __construct(
         private readonly SubscribersClient $subscribersClient,
         private readonly SubscriberCollectionNormalizer $subscriberCollectionNormalizer,
@@ -32,9 +35,7 @@ public function __construct(
     #[Route('/', name: 'list', methods: ['GET'])]
     public function index(Request $request): JsonResponse|Response
     {
-        $accept = (string) $request->headers->get('Accept', '');
-        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
-        if (! $wantsJson) {
+        if (! $this->wantsJson($request)) {
             return $this->render('@PhpListFrontend/spa.html.twig', [
                 'page' => 'Subscribers',
             ]);
diff --git a/src/EventSubscriber/AuthGateSubscriber.php b/src/EventSubscriber/AuthGateSubscriber.php
deleted file mode 100644
index eb77fefb..00000000
--- a/src/EventSubscriber/AuthGateSubscriber.php
+++ /dev/null
@@ -1,113 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace PhpList\WebFrontend\EventSubscriber;
-
-use PhpList\WebFrontend\Trait\RedirectValidationTrait;
-use Symfony\Component\EventDispatcher\EventSubscriberInterface;
-use Symfony\Component\HttpFoundation\RedirectResponse;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpKernel\Event\RequestEvent;
-use Symfony\Component\HttpKernel\KernelEvents;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
-
-/**
- * Temporary auth gate until Symfony SecurityBundle is active at runtime.
- *
- * Redirects all anonymous requests to the login page, except explicitly public paths.
- */
-class AuthGateSubscriber implements EventSubscriberInterface
-{
-    use RedirectValidationTrait;
-
-    private const ALLOW_LIST = [
-        '/api/v2',
-        '/subscribe/',
-        '/unsubscribe/',
-        '/build/',
-        '/assets/',
-        '/css/',
-        '/js/',
-        '/images/',
-        '/img/',
-        '/favicon',
-        '/robots.txt',
-    ];
-
-    public function __construct(private readonly UrlGeneratorInterface $urlGenerator)
-    {
-    }
-
-    public static function getSubscribedEvents(): array
-    {
-        // Run early in the request, after routing is available is not required here
-        return [
-            KernelEvents::REQUEST => ['onKernelRequest', 8],
-        ];
-    }
-
-    public function onKernelRequest(RequestEvent $event): void
-    {
-        if (!$event->isMainRequest()) {
-            return;
-        }
-
-        $request = $event->getRequest();
-        if ($this->isPublicPath($request)) {
-            return;
-        }
-
-        $session = $request->getSession();
-        if (!$session->has('auth_token')) {
-            $loginUrl = $this->buildLoginUrl($request);
-            $event->setResponse(new RedirectResponse($loginUrl));
-        }
-    }
-
-    private function isPublicPath(Request $request): bool
-    {
-        $path = $this->normalizePath($request->getPathInfo());
-
-        // Public login route
-        if ($path === '/login' || str_starts_with($path, '/login')) {
-            return true;
-        }
-
-        // Allow Symfony debug/profiler and WDT if present
-        if (str_starts_with($path, '/_profiler') || str_starts_with($path, '/_wdt')) {
-            return true;
-        }
-
-        // Allow static assets commonly served under these prefixes
-        foreach (self::ALLOW_LIST as $prefix) {
-            if ($this->matchesPrefix($path, $prefix)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    private function buildLoginUrl(Request $request): string
-    {
-        $loginUrl = $this->urlGenerator->generate('login');
-        $redirectTarget = $request->getRequestUri();
-
-        if (!$this->isSafeRedirectTarget($redirectTarget)) {
-            return $loginUrl;
-        }
-
-        return $loginUrl . '?' . http_build_query(['redirect' => $redirectTarget]);
-    }
-
-    private function matchesPrefix(string $path, string $prefix): bool
-    {
-        if (str_ends_with($prefix, '/')) {
-            $exactPath = rtrim($prefix, '/');
-            return $path === $exactPath || str_starts_with($path, $prefix);
-        }
-
-        return str_starts_with($path, $prefix);
-    }
-}
diff --git a/src/EventSubscriber/UnauthorizedSubscriber.php b/src/EventSubscriber/UnauthorizedSubscriber.php
index d80c8ccc..3daae445 100755
--- a/src/EventSubscriber/UnauthorizedSubscriber.php
+++ b/src/EventSubscriber/UnauthorizedSubscriber.php
@@ -4,7 +4,9 @@
 
 namespace PhpList\WebFrontend\EventSubscriber;
 
+use PhpList\WebFrontend\Trait\LoginUrlBuilderTrait;
 use PhpList\WebFrontend\Trait\RedirectValidationTrait;
+use PhpList\WebFrontend\Trait\SessionExpiredResponseTrait;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\RedirectResponse;
@@ -17,7 +19,9 @@
 
 class UnauthorizedSubscriber implements EventSubscriberInterface
 {
+    use LoginUrlBuilderTrait;
     use RedirectValidationTrait;
+    use SessionExpiredResponseTrait;
 
     public function __construct(
         private readonly UrlGeneratorInterface $urlGenerator,
@@ -65,11 +69,7 @@ public function onKernelException(ExceptionEvent $event): void
             $loginUrl = $this->buildLoginUrl($request->getRequestUri());
 
             if ($request->isXmlHttpRequest()) {
-                $event->setResponse(new JsonResponse([
-                    'error' => 'session_expired',
-                    'message' => 'Your session has expired. Please log in again.',
-                    'redirect' => $loginUrl,
-                ], 401));
+                $event->setResponse($this->sessionExpiredJsonResponse($loginUrl));
 
                 return;
             }
@@ -85,15 +85,4 @@ public function onKernelException(ExceptionEvent $event): void
             $event->setResponse(new RedirectResponse($loginUrl));
         }
     }
-
-    private function buildLoginUrl(string $redirectTarget): string
-    {
-        $loginUrl = $this->urlGenerator->generate('login');
-
-        if (!$this->isSafeRedirectTarget($redirectTarget)) {
-            return $loginUrl;
-        }
-
-        return $loginUrl . '?' . http_build_query(['redirect' => $redirectTarget]);
-    }
 }
diff --git a/src/Security/SessionAuthenticator.php b/src/Security/SessionAuthenticator.php
index 212c0efd..882e5cfd 100644
--- a/src/Security/SessionAuthenticator.php
+++ b/src/Security/SessionAuthenticator.php
@@ -4,8 +4,9 @@
 
 namespace PhpList\WebFrontend\Security;
 
+use PhpList\WebFrontend\Trait\LoginUrlBuilderTrait;
 use PhpList\WebFrontend\Trait\RedirectValidationTrait;
-use Symfony\Component\HttpFoundation\JsonResponse;
+use PhpList\WebFrontend\Trait\SessionExpiredResponseTrait;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -21,7 +22,9 @@
 
 class SessionAuthenticator extends AbstractAuthenticator implements AuthenticationEntryPointInterface
 {
+    use LoginUrlBuilderTrait;
     use RedirectValidationTrait;
+    use SessionExpiredResponseTrait;
 
     private const NOT_SUPPORTED_PATHS = [
         '/login',
@@ -94,27 +97,12 @@ public function start(Request $request, AuthenticationException $authException =
         $loginUrl = $this->buildLoginUrl($request->getRequestUri());
 
         if ($request->isXmlHttpRequest()) {
-            return new JsonResponse([
-                'error' => 'session_expired',
-                'message' => 'Your session has expired. Please log in again.',
-                'redirect' => $loginUrl,
-            ], 401);
+            return $this->sessionExpiredJsonResponse($loginUrl);
         }
 
         return new RedirectResponse($loginUrl);
     }
 
-    private function buildLoginUrl(string $redirectTarget): string
-    {
-        $loginUrl = $this->urlGenerator->generate('login');
-
-        if (!$this->isSafeRedirectTarget($redirectTarget)) {
-            return $loginUrl;
-        }
-
-        return $loginUrl . '?' . http_build_query(['redirect' => $redirectTarget]);
-    }
-
     private function matchesPrefix(string $path, string $prefix): bool
     {
         if (str_ends_with($prefix, '/')) {
diff --git a/src/Trait/LoginUrlBuilderTrait.php b/src/Trait/LoginUrlBuilderTrait.php
new file mode 100644
index 00000000..19778888
--- /dev/null
+++ b/src/Trait/LoginUrlBuilderTrait.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Trait;
+
+trait LoginUrlBuilderTrait
+{
+    private function buildLoginUrl(string $redirectTarget): string
+    {
+        $loginUrl = $this->urlGenerator->generate('login');
+
+        if (!$this->isSafeRedirectTarget($redirectTarget)) {
+            return $loginUrl;
+        }
+
+        return $loginUrl . '?' . http_build_query(['redirect' => $redirectTarget]);
+    }
+}
diff --git a/src/Trait/SessionExpiredResponseTrait.php b/src/Trait/SessionExpiredResponseTrait.php
new file mode 100644
index 00000000..3201360b
--- /dev/null
+++ b/src/Trait/SessionExpiredResponseTrait.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Trait;
+
+use Symfony\Component\HttpFoundation\JsonResponse;
+
+trait SessionExpiredResponseTrait
+{
+    private function sessionExpiredJsonResponse(string $loginUrl): JsonResponse
+    {
+        return new JsonResponse([
+            'error' => 'session_expired',
+            'message' => 'Your session has expired. Please log in again.',
+            'redirect' => $loginUrl,
+        ], 401);
+    }
+}
diff --git a/src/Trait/WantsJsonTrait.php b/src/Trait/WantsJsonTrait.php
new file mode 100644
index 00000000..f3becbb2
--- /dev/null
+++ b/src/Trait/WantsJsonTrait.php
@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Trait;
+
+use Symfony\Component\HttpFoundation\Request;
+
+trait WantsJsonTrait
+{
+    private function wantsJson(Request $request): bool
+    {
+        $accept = (string) $request->headers->get('Accept', '');
+
+        return $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
+    }
+}
diff --git a/tests/Integration/Controller/EditorUploadControllerTest.php b/tests/Integration/Controller/EditorUploadControllerTest.php
index 33d3d3b9..4561972d 100644
--- a/tests/Integration/Controller/EditorUploadControllerTest.php
+++ b/tests/Integration/Controller/EditorUploadControllerTest.php
@@ -64,7 +64,6 @@ public function testUploadReturnsBadRequestWhenNoFileProvided(): void
         $uploadsClient->expects(self::never())->method('upload');
 
         $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
-
         $response = $controller->upload(Request::create('/editor/upload', 'POST'));
 
         self::assertSame(400, $response->getStatusCode());
@@ -79,7 +78,6 @@ public function testUploadReturnsBadGatewayWhenApiFails(): void
             ->willThrowException(new ApiException('boom', 500));
 
         $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
-
         $response = $controller->upload($this->createUploadRequest());
 
         self::assertSame(502, $response->getStatusCode());
@@ -106,7 +104,6 @@ public function testAssetsReturnsMappedItems(): void
             ]);
 
         $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
-
         $response = $controller->assets();
         self::assertSame(200, $response->getStatusCode());
 
@@ -123,7 +120,6 @@ public function testAssetsReturnsBadGatewayWhenApiFails(): void
             ->willThrowException(new ApiException('unavailable', 500));
 
         $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
-
         $response = $controller->assets();
 
         self::assertSame(502, $response->getStatusCode());
diff --git a/tests/Integration/Controller/PublicSubscribeControllerTest.php b/tests/Integration/Controller/PublicSubscribeControllerTest.php
index 65b717e6..546c8eb2 100644
--- a/tests/Integration/Controller/PublicSubscribeControllerTest.php
+++ b/tests/Integration/Controller/PublicSubscribeControllerTest.php
@@ -61,8 +61,8 @@ public function testSubscribePageRendersForAnonymousUserWhenAdminLookupApiFails(
             ]);
 
         $controller = new PublicSubscribeController(
-            $subscribePagesClient,
             $authClient,
+            $subscribePagesClient,
             new LanguageService(),
             $formBuilder,
             $this->createMock(PublicSubscribeFormValidator::class),
diff --git a/tests/Unit/Controller/AuthControllerTest.php b/tests/Unit/Controller/AuthControllerTest.php
index 261d9bff..0b93d9ba 100644
--- a/tests/Unit/Controller/AuthControllerTest.php
+++ b/tests/Unit/Controller/AuthControllerTest.php
@@ -4,6 +4,7 @@
 
 namespace PhpList\WebFrontend\Tests\Unit\Controller;
 
+use PhpList\RestApiClient\Client;
 use PhpList\RestApiClient\Entity\Administrator;
 use PhpList\RestApiClient\Exception\ApiException;
 use PhpList\WebFrontend\Controller\AuthController;
@@ -22,14 +23,16 @@
 class AuthControllerTest extends TestCase
 {
     private AuthClient&MockObject $authClient;
+    private Client&MockObject $apiClient;
     private AuthController $controller;
 
     protected function setUp(): void
     {
         $this->authClient = $this->createMock(AuthClient::class);
+        $this->apiClient = $this->createMock(Client::class);
 
         $this->controller = $this->getMockBuilder(AuthController::class)
-            ->setConstructorArgs([$this->authClient, $this->createMock(LoggerInterface::class)])
+            ->setConstructorArgs([$this->authClient, $this->apiClient, $this->createMock(LoggerInterface::class)])
             ->onlyMethods(['render', 'redirectToRoute', 'generateUrl'])
             ->getMock();
 
@@ -309,7 +312,20 @@ public function testAbout(): void
             ->method('getSessionUser')
             ->willReturn($adminMock);
 
-        $response = $this->controller->about();
+        $this->apiClient->expects($this->once())
+            ->method('setSessionId')
+            ->with('session-token');
+
+        $session = $this->createMock(SessionInterface::class);
+        $session->method('get')
+            ->with('auth_token')
+            ->willReturn('session-token');
+
+        $request = $this->createMock(Request::class);
+        $request->method('getSession')
+            ->willReturn($session);
+
+        $response = $this->controller->about($request);
 
         $this->assertInstanceOf(JsonResponse::class, $response);
         $this->assertEquals(200, $response->getStatusCode());
@@ -325,7 +341,16 @@ public function testAboutReturnsBadGatewayWhenUpstreamFails(): void
             ->method('getSessionUser')
             ->willThrowException(new ApiException('upstream down', 500));
 
-        $response = $this->controller->about();
+        $session = $this->createMock(SessionInterface::class);
+        $session->method('get')
+            ->with('auth_token')
+            ->willReturn('session-token');
+
+        $request = $this->createMock(Request::class);
+        $request->method('getSession')
+            ->willReturn($session);
+
+        $response = $this->controller->about($request);
 
         $this->assertInstanceOf(JsonResponse::class, $response);
         $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
diff --git a/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php b/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php
deleted file mode 100644
index 6096a2cc..00000000
--- a/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace PhpList\WebFrontend\Tests\Unit\EventSubscriber;
-
-use PhpList\WebFrontend\EventSubscriber\AuthGateSubscriber;
-use PHPUnit\Framework\MockObject\MockObject;
-use PHPUnit\Framework\TestCase;
-use Symfony\Component\HttpFoundation\RedirectResponse;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Session\SessionInterface;
-use Symfony\Component\HttpKernel\Event\RequestEvent;
-use Symfony\Component\HttpKernel\HttpKernelInterface;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
-
-class AuthGateSubscriberTest extends TestCase
-{
-    private UrlGeneratorInterface&MockObject $urlGenerator;
-    private AuthGateSubscriber $subscriber;
-
-    protected function setUp(): void
-    {
-        $this->urlGenerator = $this->createMock(UrlGeneratorInterface::class);
-        $this->subscriber = new AuthGateSubscriber($this->urlGenerator);
-    }
-
-    public function testRedirectsAnonymousUserToLoginWithOriginalPath(): void
-    {
-        $this->urlGenerator->method('generate')->with('login')->willReturn('/login');
-
-        $session = $this->createMock(SessionInterface::class);
-        $session->method('has')->with('auth_token')->willReturn(false);
-
-        $request = Request::create('/lists/12/subscribers?page=2');
-        $request->setSession($session);
-
-        $event = new RequestEvent(
-            $this->createMock(HttpKernelInterface::class),
-            $request,
-            HttpKernelInterface::MAIN_REQUEST
-        );
-
-        $this->subscriber->onKernelRequest($event);
-
-        $response = $event->getResponse();
-        $this->assertInstanceOf(RedirectResponse::class, $response);
-        $this->assertSame('/login?redirect=%2Flists%2F12%2Fsubscribers%3Fpage%3D2', $response->getTargetUrl());
-    }
-
-    public function testSkipsRedirectForLoginPage(): void
-    {
-        $session = $this->createMock(SessionInterface::class);
-
-        $request = Request::create('/login');
-        $request->setSession($session);
-
-        $event = new RequestEvent(
-            $this->createMock(HttpKernelInterface::class),
-            $request,
-            HttpKernelInterface::MAIN_REQUEST
-        );
-
-        $this->subscriber->onKernelRequest($event);
-
-        $this->assertNull($event->getResponse());
-    }
-
-    public function testSkipsRedirectForPublicSubscribePage(): void
-    {
-        $session = $this->createMock(SessionInterface::class);
-
-        $request = Request::create('/subscribe/7');
-        $request->setSession($session);
-
-        $event = new RequestEvent(
-            $this->createMock(HttpKernelInterface::class),
-            $request,
-            HttpKernelInterface::MAIN_REQUEST
-        );
-
-        $this->subscriber->onKernelRequest($event);
-
-        $this->assertNull($event->getResponse());
-    }
-
-    public function testSkipsRedirectForPublicUnsubscribePaths(): void
-    {
-        $session = $this->createMock(SessionInterface::class);
-
-        $request = Request::create('/unsubscribe');
-        $request->setSession($session);
-
-        $event = new RequestEvent(
-            $this->createMock(HttpKernelInterface::class),
-            $request,
-            HttpKernelInterface::MAIN_REQUEST
-        );
-
-        $this->subscriber->onKernelRequest($event);
-        $this->assertNull($event->getResponse());
-
-        $requestWithId = Request::create('/unsubscribe/7');
-        $requestWithId->setSession($session);
-
-        $eventWithId = new RequestEvent(
-            $this->createMock(HttpKernelInterface::class),
-            $requestWithId,
-            HttpKernelInterface::MAIN_REQUEST
-        );
-
-        $this->subscriber->onKernelRequest($eventWithId);
-        $this->assertNull($eventWithId->getResponse());
-    }
-}
diff --git a/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js b/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js
index d7072d64..93ac758d 100644
--- a/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js
+++ b/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js
@@ -111,7 +111,7 @@ describe('BounceOverview.vue', () => {
         })
     })
 
-    describe('getStatusClass', () => {
+    describe('getStatusVariant', () => {
         const mountWithStatus = async (status) => {
             bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ status })]))
             const wrapper = mount(BounceOverview)
@@ -134,9 +134,9 @@ describe('BounceOverview.vue', () => {
             expect(wrapper.find('span.bg-emerald-100').exists()).toBe(true)
         })
 
-        it('applies slate classes for an unrecognised status', async () => {
+        it('applies neutral classes for an unrecognised status', async () => {
             const wrapper = await mountWithStatus('something-else')
-            expect(wrapper.find('span.bg-slate-100').exists()).toBe(true)
+            expect(wrapper.find('span.bg-gray-100').exists()).toBe(true)
         })
     })
 
diff --git a/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js b/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js
index 24c0a48d..cda7f3a2 100644
--- a/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js
+++ b/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js
@@ -212,34 +212,34 @@ describe('normalizeBoolean', () => {
             expect(wrapper.findAll('span.bg-emerald-100').length).toBeGreaterThan(0)
         })
 
-        it('shows slate badge for confirmed=false', async () => {
+        it('shows neutral badge for confirmed=false', async () => {
             const wrapper = await mountWithSubscriber({ confirmed: false, blacklisted: false })
-            // both badges are slate when both are false
-            const slateBadges = wrapper.findAll('span.bg-slate-100')
-            expect(slateBadges.length).toBeGreaterThanOrEqual(2)
+            // both badges are neutral when both are false
+            const neutralBadges = wrapper.findAll('span.bg-gray-100')
+            expect(neutralBadges.length).toBeGreaterThanOrEqual(2)
         })
     })
 
     describe('blacklisted badge', () => {
-        it('shows rose badge for blacklisted=true', async () => {
+        it('shows danger badge for blacklisted=true', async () => {
             const wrapper = await mountWithSubscriber({ blacklisted: true })
-            expect(wrapper.findAll('span.bg-rose-100').length).toBeGreaterThan(0)
+            expect(wrapper.findAll('span.bg-red-100').length).toBeGreaterThan(0)
         })
 
         it('treats blacklisted=1 as truthy', async () => {
             const wrapper = await mountWithSubscriber({ blacklisted: 1 })
-            expect(wrapper.findAll('span.bg-rose-100').length).toBeGreaterThan(0)
+            expect(wrapper.findAll('span.bg-red-100').length).toBeGreaterThan(0)
         })
 
         it('treats blacklisted="1" as truthy', async () => {
             const wrapper = await mountWithSubscriber({ blacklisted: '1' })
-            expect(wrapper.findAll('span.bg-rose-100').length).toBeGreaterThan(0)
+            expect(wrapper.findAll('span.bg-red-100').length).toBeGreaterThan(0)
         })
 
-        it('shows slate badge for blacklisted=false', async () => {
+        it('shows neutral badge for blacklisted=false', async () => {
             const wrapper = await mountWithSubscriber({ confirmed: false, blacklisted: false })
-            const slateBadges = wrapper.findAll('span.bg-slate-100')
-            expect(slateBadges.length).toBeGreaterThanOrEqual(2)
+            const neutralBadges = wrapper.findAll('span.bg-gray-100')
+            expect(neutralBadges.length).toBeGreaterThanOrEqual(2)
         })
     })
 })
diff --git a/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js b/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js
index 691d3895..573e3de5 100644
--- a/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js
+++ b/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js
@@ -122,7 +122,7 @@ describe('create modal', () => {
         const wrapper = mountComponent()
         await flushPromises()
         await openModal(wrapper)
-        await wrapper.find('[aria-hidden="true"]').trigger('click')
+        await wrapper.find('[role="dialog"]').trigger('click')
         expect(wrapper.find('[role="dialog"]').exists()).toBe(false)
     })
 
@@ -295,7 +295,7 @@ describe('successful submission', () => {
         await openModal(wrapper)
         await fillRegex(wrapper, 'test.*')
         await submitForm(wrapper)
-        expect(wrapper.find('button[type="submit"]').text()).toBe('Creating...')
+        expect(wrapper.find('[data-testid="modal-submit"]').text()).toBe('Creating...')
         resolve({})
     })
 
@@ -322,7 +322,7 @@ describe('successful submission', () => {
         await fillRegex(wrapper, 'test.*')
         await submitForm(wrapper)
         // attempt to close via backdrop
-        await wrapper.find('[aria-hidden="true"]').trigger('click')
+        await wrapper.find('[role="dialog"]').trigger('click')
         expect(wrapper.find('[role="dialog"]').exists()).toBe(true)
         resolve({})
     })
@@ -396,7 +396,7 @@ describe('failed submission', () => {
         await fillRegex(wrapper, 'test.*')
         await submitForm(wrapper)
         await flushPromises()
-        expect(wrapper.find('button[type="submit"]').element.disabled).toBe(false)
+        expect(wrapper.find('[data-testid="modal-submit"]').element.disabled).toBe(false)
     })
 })
 
diff --git a/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
index ed617034..3baf0170 100644
--- a/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
+++ b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
@@ -319,9 +319,9 @@ describe('status badge classes', () => {
         expect(wrapper.find('span.bg-blue-100').exists()).toBe(true)
     })
 
-    it('applies slate classes for draft', async () => {
+    it('applies neutral classes for draft', async () => {
         const { wrapper } = await mountWithStatus('draft')
-        expect(wrapper.find('span.bg-slate-100').exists()).toBe(true)
+        expect(wrapper.find('span.bg-gray-100').exists()).toBe(true)
     })
 
     it('applies amber classes for unknown status', async () => {
diff --git a/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js b/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js
index a1c3f2e2..90859fc8 100644
--- a/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js
+++ b/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js
@@ -85,46 +85,46 @@ describe('row rendering', () => {
     })
 })
 
-describe('statusClass', () => {
+describe('status badge', () => {
     const mountWithStatus = (status) =>
         mount(CampaignsTable, { props: { rows: [makeRow({ status })] } })
 
-    it('applies green classes for "sent"', () => {
+    it('applies the success (emerald) variant for "sent"', () => {
         const wrapper = mountWithStatus('sent')
-        expect(wrapper.find('span.bg-green-100').exists()).toBe(true)
-        expect(wrapper.find('span.text-green-800').exists()).toBe(true)
+        expect(wrapper.find('span.bg-emerald-100').exists()).toBe(true)
+        expect(wrapper.find('span.text-emerald-700').exists()).toBe(true)
     })
 
-    it('applies blue classes for "scheduled"', () => {
+    it('applies the info (blue) variant for "scheduled"', () => {
         const wrapper = mountWithStatus('scheduled')
         expect(wrapper.find('span.bg-blue-100').exists()).toBe(true)
-        expect(wrapper.find('span.text-blue-800').exists()).toBe(true)
+        expect(wrapper.find('span.text-blue-700').exists()).toBe(true)
     })
 
-    it('applies gray classes for "draft"', () => {
+    it('applies the neutral (gray) variant for "draft"', () => {
         const wrapper = mountWithStatus('draft')
         expect(wrapper.find('span.bg-gray-100').exists()).toBe(true)
         expect(wrapper.find('span.text-gray-800').exists()).toBe(true)
     })
 
-    it('applies gray fallback classes for an unknown status', () => {
+    it('applies the neutral (gray) fallback variant for an unknown status', () => {
         const wrapper = mountWithStatus('paused')
         expect(wrapper.find('span.bg-gray-100').exists()).toBe(true)
         expect(wrapper.find('span.text-gray-800').exists()).toBe(true)
     })
 
-    it('is case-insensitive — "Sent" resolves to green', () => {
+    it('is case-insensitive — "Sent" resolves to the success variant', () => {
         const wrapper = mountWithStatus('Sent')
-        expect(wrapper.find('span.bg-green-100').exists()).toBe(true)
+        expect(wrapper.find('span.bg-emerald-100').exists()).toBe(true)
     })
 
-    it('is case-insensitive — "SCHEDULED" resolves to blue', () => {
+    it('is case-insensitive — "SCHEDULED" resolves to the info variant', () => {
         const wrapper = mountWithStatus('SCHEDULED')
         expect(wrapper.find('span.bg-blue-100').exists()).toBe(true)
     })
 
     it('renders the status label inside the badge', () => {
         const wrapper = mountWithStatus('sent')
-        expect(wrapper.find('span.bg-green-100').text()).toBe('sent')
+        expect(wrapper.find('span.bg-emerald-100').text()).toBe('sent')
     })
 })
diff --git a/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js b/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
index 6b98d7ea..4bd48747 100644
--- a/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
+++ b/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
@@ -3,13 +3,15 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import ListSubscribersExportPanel from '../../../../../../assets/vue/components/lists/ListSubscribersExportPanel.vue'
-import client from '../../../../../../assets/vue/api'
+import { subscriberAttributesClient } from '../../../../../../assets/vue/api'
 
 vi.mock('../../../../../../assets/vue/api', () => ({
     default: {
         get: vi.fn(),
     },
-    subscriberAttributesClient: {},
+    subscriberAttributesClient: {
+        getAttributeDefinitions: vi.fn(),
+    },
 }))
 
 describe('ListSubscribersExportPanel', () => {
@@ -21,7 +23,7 @@ describe('ListSubscribersExportPanel', () => {
     beforeEach(() => {
         vi.clearAllMocks()
 
-        client.get.mockResolvedValue({
+        subscriberAttributesClient.getAttributeDefinitions.mockResolvedValue({
             items: [],
         })
 
@@ -32,7 +34,7 @@ describe('ListSubscribersExportPanel', () => {
     })
 
     it('loads attribute definitions on mount', async () => {
-        client.get.mockResolvedValue({
+        subscriberAttributesClient.getAttributeDefinitions.mockResolvedValue({
             items: [
                 { name: 'firstName' },
                 { name: 'lastName' },
@@ -43,13 +45,8 @@ describe('ListSubscribersExportPanel', () => {
 
         await flushPromises()
 
-        expect(client.get).toHaveBeenCalledWith(
-            'attributes',
-            {
-                limit: 100,
-                offset: 0,
-            }
-        )
+        expect(subscriberAttributesClient.getAttributeDefinitions)
+            .toHaveBeenCalledWith(0, 100)
 
         expect(wrapper.text()).toContain('FirstName')
         expect(wrapper.text()).toContain('LastName')
@@ -261,7 +258,7 @@ describe('ListSubscribersExportPanel', () => {
     })
 
     it('loads multiple attribute pages', async () => {
-        client.get
+        subscriberAttributesClient.getAttributeDefinitions
             .mockResolvedValueOnce({
                 items: Array.from({ length: 100 }, (_, i) => ({
                     name: `field${i}`,
@@ -277,6 +274,7 @@ describe('ListSubscribersExportPanel', () => {
 
         await flushPromises()
 
-        expect(client.get).toHaveBeenCalledTimes(2)
+        expect(subscriberAttributesClient.getAttributeDefinitions)
+            .toHaveBeenCalledTimes(2)
     })
 })
diff --git a/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js b/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js
index 698ac081..5d48e71d 100644
--- a/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js
+++ b/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js
@@ -189,7 +189,7 @@ describe('EditAdminModal', () => {
     it('emits close when the close button is clicked', async () => {
         const wrapper = mountComponent()
 
-        await wrapper.find('button[aria-label="Close edit administrator modal"]').trigger('click')
+        await wrapper.find('button[aria-label="Close"]').trigger('click')
 
         expect(wrapper.emitted('close')).toHaveLength(1)
     })
diff --git a/tests/Unit/assets/vue/layouts/AdminLayout.spec.js b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
index af251487..469d3472 100644
--- a/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
+++ b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
@@ -96,6 +96,20 @@ describe('AdminLayout', () => {
         expect(wrapper.text()).toContain('Page Content')
     })
 
+    it('loads admin data on mount', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(backendFetch).toHaveBeenCalledWith(
+            '/admin-about',
+            expect.any(Object)
+        )
+
+        expect(wrapper.text()).toContain('admin')
+        expect(wrapper.text()).toContain('Super Admin')
+    })
+
     it('shows fallback admin name', () => {
         const wrapper = createWrapper()
 
diff --git a/yarn.lock b/yarn.lock
index 5b61cf5e..8e537a2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2122,10 +2122,10 @@
     postcss "^8.5.16"
     tailwindcss "4.3.3"
 
-"@tatevikgr/rest-api-client@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.2.1.tgz#a9e3805e64d2c1ddddbd20bec238c2cd48c80d0a"
-  integrity sha512-ZLSHbxIXYCOpMO99UtpCrStbh6RNeVHcASsM2Hla9ypTr0ax8NGQFTnaxfvC4GJPCKJL0L7m6tZZy9QpRgDX/g==
+"@tatevikgr/rest-api-client@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.2.3.tgz#2f7f7824c25941a6db0b0210ee8c461e7618dd36"
+  integrity sha512-dwV4/2WnSxFi3lguanJidRXwHUgTGGv+c2dGuNM/zsKZE82Q2ueDMnBaEecK/MkbS8PQgAF4E+SGQZwGbPCnRg==
   dependencies:
     axios "^1.6.0"