diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 77bcc3b..41c1152 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -56,7 +56,7 @@ jobs:
         run: |
           curl -sSL https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor | sudo tee /usr/share/keyrings/google.gpg > /dev/null
           echo "deb [arch=amd64 signed-by=/usr/share/keyrings/google.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
-          sudo apt-get update
+          sudo apt-get update --allow-releaseinfo-change-label
           sudo apt-get install -y google-chrome-stable
           sudo apt install socat
 
@@ -87,7 +87,7 @@ jobs:
       - name: Run PHPMD
         run: vendor/bin/phpmd src/ text vendor/phplist/core/config/PHPMD/rules.xml
       - name: Run PHP_CodeSniffer
-        run: vendor/bin/phpcs --standard=vendor/phplist/core/config/PhpCodeSniffer/ src/ tests/
+        run: vendor/bin/phpcs --ignore=tests/Unit/assets --standard=vendor/phplist/core/config/PhpCodeSniffer/ src/ tests/
 
       - name: Install Prism
         run: npm install -g @stoplight/prism-cli
@@ -145,6 +145,9 @@ jobs:
       - name: Run tests with phpunit
         run: vendor/bin/phpunit tests
 
+      - name: Run tests with vitest
+        run: node node_modules/vitest/vitest.mjs --run
+
       - name: Upload Panther screenshots
         if: failure()
         uses: actions/upload-artifact@v4
diff --git a/.husky/pre-commit b/.husky/pre-commit
index bb5f8a8..989fba2 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -8,4 +8,7 @@ echo "📏 Running PHPMD..."
 php vendor/bin/phpmd src/ text vendor/phplist/core/config/PHPMD/rules.xml || exit 1
 
 echo "🧹 Running PHPCS..."
-php vendor/bin/phpcs --standard=vendor/phplist/core/config/PhpCodeSniffer/ src/ tests/ || exit 1
+php vendor/bin/phpcs \
+  --standard=vendor/phplist/core/config/PhpCodeSniffer/ \
+  --ignore=tests/Unit/assets \
+  src/ tests/ || exit 1
diff --git a/README.md b/README.md
index 185b65d..0971e85 100644
--- a/README.md
+++ b/README.md
@@ -67,3 +67,56 @@ To add new Vue components:
 1. Create the component in the `assets/vue/` directory
 2. Import and mount it in `assets/app.js`
 3. Add a mount point in the appropriate template
+
+## CKEditor 5 Integration
+
+The rich text editor lives in `assets/editor/` and is exposed to the existing forms through `assets/vue/components/base/CkEditorField.vue`.
+
+### Architecture
+
+- `assets/editor/CkEditor.vue` is the reusable Vue 3 editor component.
+- `assets/editor/uploadAdapter.ts` provides CKEditor upload support against a Symfony endpoint.
+- `assets/editor/assetBrowserPlugin.js` adds a toolbar button that opens the native asset browser.
+- `assets/editor/EditorAssetPicker.vue` shows existing uploaded files and inserts them as images or links.
+- `assets/editor/plugins.ts` and `assets/editor/toolbar.ts` keep the editor configuration isolated and reusable.
+- `src/Service/EditorUploadService.php` stores uploads in the public filesystem and returns a browser URL.
+- `src/Controller/EditorUploadController.php` accepts authenticated uploads and lists existing assets.
+
+### Reused from the legacy plugin
+
+- upload path conventions
+- image validation rules
+- public-file URL generation strategy
+- file storage separation for editor content
+- asset browsing behavior, expressed as a native Vue modal instead of a popup window
+
+### New behavior
+
+- Vue component with `v-model`
+- configurable toolbar and CKEditor options
+- upload adapter with progress support
+- cleanup on unmount
+- read-only mode support
+- existing file browser for reusing uploaded content
+
+### Build and test
+
+```bash
+yarn encore dev
+yarn test:vue
+vendor/bin/phpunit
+```
+
+### Configuration
+
+The backend uses the existing phpList upload directory parameters:
+
+- `phplist.upload_images_dir`
+
+Uploads are stored below `public/<phplist.upload_images_dir>/ckeditor5/`.
+
+### Limitations
+
+- This integration only covers image uploads from CKEditor.
+- elFinder is not embedded in the frontend UI; the frontend now provides a native asset browser instead.
+- Existing legacy HTML content is preserved as-is, but custom HTML support still depends on CKEditor 5 output rules.
diff --git a/assets/editor/CkEditor.vue b/assets/editor/CkEditor.vue
new file mode 100644
index 0000000..1439afb
--- /dev/null
+++ b/assets/editor/CkEditor.vue
@@ -0,0 +1,278 @@
+<template>
+  <ckeditor
+    :id="fieldId"
+    v-model="localValue"
+    :editor="ClassicEditor"
+    :config="editorConfig"
+    :disabled="isDisabled"
+    :style="editorStyle"
+    @ready="handleReady"
+  />
+
+  <EditorAssetPicker
+    :open="assetPickerOpen"
+    :items="assetItems"
+    :query="assetQuery"
+    :loading="assetLoading"
+    :error="assetError"
+    @close="closeAssetPicker"
+    @refresh="loadAssets"
+    @select="insertAsset"
+    @update:query="assetQuery = $event"
+  />
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, shallowRef, useId, watch } from 'vue';
+import { Ckeditor } from '@ckeditor/ckeditor5-vue';
+import { ClassicEditor } from 'ckeditor5';
+
+import { DEFAULT_PLUGINS } from './plugins.ts';
+import { DEFAULT_IMAGE_TOOLBAR, DEFAULT_TOOLBAR } from './toolbar.ts';
+import EditorUploadAdapter from './uploadAdapter.ts';
+import EditorAssetPicker from './EditorAssetPicker.vue';
+
+import 'ckeditor5/ckeditor5.css';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  minHeight: {
+    type: [Number, String],
+    default: 300,
+  },
+  uploadEndpoint: {
+    type: String,
+    default: '/editor/upload',
+  },
+  assetsEndpoint: {
+    type: String,
+    default: '/editor/assets',
+  },
+  uploadHeaders: {
+    type: Object,
+    default: () => ({}),
+  },
+  withCredentials: {
+    type: Boolean,
+    default: true,
+  },
+  toolbar: {
+    type: Array,
+    default: null,
+  },
+  plugins: {
+    type: Array,
+    default: () => [],
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'ready', 'error']);
+
+const generatedId = useId();
+const fieldId = computed(() => props.id || `ckeditor-${generatedId}`);
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+const editorRef = shallowRef(null);
+const assetPickerOpen = ref(false);
+const assetLoading = ref(false);
+const assetError = ref('');
+const assetItems = ref([]);
+const assetQuery = ref('');
+
+const isDisabled = computed(() => props.disabled || props.readonly);
+const editorStyle = computed(() => ({
+  '--editor-min-height': typeof props.minHeight === 'number'
+    ? `${props.minHeight}px`
+    : String(props.minHeight),
+}));
+
+const editorConfig = computed(() => {
+  const config = props.config || {};
+  const extraPlugins = Array.isArray(config.plugins) ? config.plugins : [];
+  const toolbar = Array.isArray(props.toolbar) && props.toolbar.length > 0
+    ? props.toolbar
+    : Array.isArray(config.toolbar) && config.toolbar.length > 0
+      ? config.toolbar
+      : DEFAULT_TOOLBAR;
+
+  const imageConfig = {
+    toolbar: DEFAULT_IMAGE_TOOLBAR,
+    ...(config.image || {}),
+  };
+  const htmlSupportConfig = config.htmlSupport || {};
+  const htmlSupport = {
+    allow: htmlSupportConfig.allow || [
+      {
+        name: /.*/,
+        attributes: true,
+        classes: true,
+        styles: true,
+      },
+    ],
+    disallow: [
+      { name: 'script' },
+      { name: 'iframe' },
+      { name: /.*/, attributes: { key: /^on.*/ } },
+      ...(Array.isArray(htmlSupportConfig.disallow) ? htmlSupportConfig.disallow : []),
+    ],
+  };
+
+  return {
+    ...config,
+    licenseKey: config.licenseKey || 'GPL',
+    plugins: [
+      ...DEFAULT_PLUGINS,
+      ...(Array.isArray(props.plugins) ? props.plugins : []),
+      ...extraPlugins,
+    ],
+    toolbar,
+    image: imageConfig,
+    htmlSupport,
+    openAssetPicker: openAssetPicker,
+  };
+});
+
+const installUploadAdapter = (editor) => {
+  const fileRepository = editor.plugins.get('FileRepository');
+
+  fileRepository.createUploadAdapter = (loader) => new EditorUploadAdapter(loader, {
+    endpoint: props.uploadEndpoint,
+    headers: props.uploadHeaders,
+    withCredentials: props.withCredentials,
+  });
+};
+
+const syncReadOnlyState = (editor) => {
+  if (props.readonly) {
+    editor.enableReadOnlyMode('ckeditor-field');
+    return;
+  }
+
+  editor.disableReadOnlyMode('ckeditor-field');
+};
+
+const loadAssets = async () => {
+  assetLoading.value = true;
+  assetError.value = '';
+
+  try {
+    const response = await fetch(props.assetsEndpoint, {
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      credentials: props.withCredentials ? 'include' : 'same-origin',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to load assets (${response.status})`);
+    }
+
+    const payload = await response.json();
+    assetItems.value = Array.isArray(payload?.items) ? payload.items : [];
+  } catch (error) {
+    assetError.value = error?.message || 'Failed to load assets.';
+  } finally {
+    assetLoading.value = false;
+  }
+};
+
+const openAssetPicker = async () => {
+  assetPickerOpen.value = true;
+
+  if (assetItems.value.length === 0 && !assetLoading.value) {
+    await loadAssets();
+  }
+};
+
+const closeAssetPicker = () => {
+  assetPickerOpen.value = false;
+};
+
+const getSelectedEditor = () => editorRef.value;
+
+const insertAsset = (asset) => {
+  if (!asset) {
+    return;
+  }
+
+  const editor = getSelectedEditor();
+  if (!editor) {
+    return;
+  }
+
+  editor.model.change((writer) => {
+    if (asset.isImage) {
+      const imageElement = writer.createElement('imageBlock', {
+        src: asset.url,
+        alt: asset.fileName,
+      });
+      editor.model.insertContent(imageElement, editor.model.document.selection);
+      return;
+    }
+
+    const linkText = asset.fileName || asset.url;
+    const textNode = writer.createText(linkText, { linkHref: asset.url });
+    editor.model.insertContent(textNode, editor.model.document.selection);
+  });
+
+  closeAssetPicker();
+};
+
+const handleReady = (editor) => {
+  editorRef.value = editor;
+  installUploadAdapter(editor);
+  syncReadOnlyState(editor);
+  emit('ready', editor);
+};
+
+watch(
+  () => props.readonly,
+  () => {
+    if (!editorRef.value) {
+      return;
+    }
+
+    syncReadOnlyState(editorRef.value);
+  }
+);
+
+onBeforeUnmount(() => {
+  if (!editorRef.value) {
+    return;
+  }
+
+  const editor = editorRef.value;
+  editorRef.value = null;
+  editor.destroy();
+});
+</script>
+
+<style scoped>
+:deep(.ck-editor__editable_inline) {
+  min-height: var(--editor-min-height, 300px);
+  overflow-y: auto;
+}
+</style>
diff --git a/assets/editor/EditorAssetPicker.vue b/assets/editor/EditorAssetPicker.vue
new file mode 100644
index 0000000..ba16dc2
--- /dev/null
+++ b/assets/editor/EditorAssetPicker.vue
@@ -0,0 +1,218 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="editor-asset-picker-title"
+      @keydown.esc="$emit('close')"
+    >
+      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl">
+        <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
+          <div class="min-w-0">
+            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900">
+              Choose an existing asset
+            </h3>
+            <p class="text-xs text-slate-500">Pick a file to insert it at the cursor position.</p>
+          </div>
+
+          <button
+            type="button"
+            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            @click="$emit('close')"
+          >
+            Close
+          </button>
+        </div>
+
+        <div class="flex flex-col gap-3 border-b border-slate-200 px-4 py-3 sm:flex-row sm:items-center">
+          <input
+            ref="searchInput"
+            :value="query"
+            type="search"
+            class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+            placeholder="Search by file name"
+            @input="$emit('update:query', $event.target.value)"
+          >
+
+          <button
+            type="button"
+            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            @click="$emit('refresh')"
+          >
+            Refresh
+          </button>
+        </div>
+
+        <div class="max-h-[60vh] overflow-auto">
+          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500">
+            Loading assets...
+          </div>
+
+          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600">
+            {{ error }}
+          </div>
+
+          <table v-else class="w-full table-fixed border-separate border-spacing-0">
+            <thead class="sticky top-0 bg-slate-50">
+              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <th class="w-24 border-b border-slate-200 px-4 py-3">Preview</th>
+                <th class="border-b border-slate-200 px-4 py-3">Name</th>
+                <th class="w-32 border-b border-slate-200 px-4 py-3">Type</th>
+                <th class="w-28 border-b border-slate-200 px-4 py-3">Size</th>
+                <th class="w-40 border-b border-slate-200 px-4 py-3">Updated</th>
+                <th class="w-28 border-b border-slate-200 px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="!filteredItems.length">
+                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
+                  No assets found.
+                </td>
+              </tr>
+
+              <tr
+                v-for="item in filteredItems"
+                :key="item.url"
+                class="border-b border-slate-100 text-sm text-slate-700 hover:bg-slate-50"
+              >
+                <td class="px-4 py-3 align-top">
+                  <img
+                    v-if="item.isImage"
+                    :src="item.url"
+                    :alt="item.fileName.slice(0, 5) + '...'"
+                    class="h-14 w-14 rounded border border-slate-200 object-cover"
+                  >
+                  <div
+                    v-else
+                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-500"
+                  >
+                    {{ extensionLabel(item.fileName) }}
+                  </div>
+                </td>
+                <td class="px-4 py-3 align-top">
+                  <p class="break-all font-medium text-slate-900">{{ item.fileName }}</p>
+                  <p class="break-all text-xs text-slate-500">{{ item.url }}</p>
+                </td>
+                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500">
+                  {{ item.mimeType }}
+                </td>
+                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                  {{ formatBytes(item.size) }}
+                </td>
+                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                  {{ formatDate(item.modifiedAt) }}
+                </td>
+                <td class="px-4 py-3 align-top text-right">
+                  <button
+                    type="button"
+                    class="rounded-lg bg-ext-wf1 px-3 py-2 text-sm font-medium text-white hover:bg-ext-wf3"
+                    @click="$emit('select', item)"
+                  >
+                    Insert
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
+          <span>{{ filteredItems.length }} asset{{ filteredItems.length === 1 ? '' : 's' }}</span>
+          <span class="text-xs text-slate-500">Choose a row to insert it immediately.</span>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+})
+
+defineEmits(['close', 'refresh', 'select', 'update:query'])
+
+const searchInput = ref(null)
+let previouslyFocused = null
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      previouslyFocused = document.activeElement
+      nextTick(() => {
+        searchInput.value?.focus()
+      })
+    } else if (previouslyFocused instanceof HTMLElement) {
+      previouslyFocused.focus()
+      previouslyFocused = null
+    }
+  },
+)
+
+const filteredItems = computed(() => {
+  const needle = props.query.trim().toLowerCase()
+
+  if (!needle) {
+    return props.items
+  }
+
+  return props.items.filter((item) => {
+    const haystack = `${item.fileName} ${item.mimeType}`.toLowerCase()
+    return haystack.includes(needle)
+  })
+})
+
+const formatBytes = (size) => {
+  if (!Number.isFinite(size) || size <= 0) {
+    return '0 B'
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB']
+  let value = size
+  let unitIndex = 0
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024
+    unitIndex += 1
+  }
+
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
+}
+
+const formatDate = (timestamp) => {
+  if (!Number.isFinite(timestamp) || timestamp <= 0) {
+    return 'Unknown'
+  }
+
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+const extensionLabel = (fileName) => {
+  const parts = String(fileName).split('.')
+  return parts.length > 1 ? parts.pop().toUpperCase() : 'FILE'
+}
+</script>
diff --git a/assets/editor/assetBrowserPlugin.js b/assets/editor/assetBrowserPlugin.js
new file mode 100644
index 0000000..1bf752e
--- /dev/null
+++ b/assets/editor/assetBrowserPlugin.js
@@ -0,0 +1,26 @@
+import { ButtonView, Plugin } from 'ckeditor5';
+
+export default class AssetBrowserPlugin extends Plugin {
+  init() {
+    const editor = this.editor;
+
+    editor.ui.componentFactory.add('assetBrowser', (locale) => {
+      const view = new ButtonView(locale);
+      const openAssetPicker = editor.config.get('openAssetPicker');
+
+      view.set({
+        label: 'Browse files',
+        tooltip: true,
+        withText: true,
+      });
+
+      view.on('execute', () => {
+        if (typeof openAssetPicker === 'function') {
+          openAssetPicker(editor);
+        }
+      });
+
+      return view;
+    });
+  }
+}
diff --git a/assets/editor/index.ts b/assets/editor/index.ts
new file mode 100644
index 0000000..a5c67cf
--- /dev/null
+++ b/assets/editor/index.ts
@@ -0,0 +1,6 @@
+export { default as CkEditor } from './CkEditor.vue';
+export { default as EditorUploadAdapter } from './uploadAdapter.ts';
+export { DEFAULT_TOOLBAR, DEFAULT_IMAGE_TOOLBAR } from './toolbar.ts';
+export { DEFAULT_PLUGINS } from './plugins.ts';
+export { default as EditorAssetPicker } from './EditorAssetPicker.vue';
+export { default as AssetBrowserPlugin } from './assetBrowserPlugin.js';
diff --git a/assets/editor/plugins.ts b/assets/editor/plugins.ts
new file mode 100644
index 0000000..8809fcf
--- /dev/null
+++ b/assets/editor/plugins.ts
@@ -0,0 +1,118 @@
+import {
+  Alignment,
+  AutoImage,
+  AutoLink,
+  Autosave,
+  BlockQuote,
+  Bold,
+  Code,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Essentials,
+  FileRepository,
+  GeneralHtmlSupport,
+  Heading,
+  Highlight,
+  HorizontalLine,
+  HtmlEmbed,
+  Indent,
+  IndentBlock,
+  Image,
+  ImageCaption,
+  ImageBlock,
+  ImageInsert,
+  ImageInsertUI,
+  ImageInsertViaUrl,
+  ImageInline,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Italic,
+  Link,
+  LinkImage,
+  List,
+  ListProperties,
+  MediaEmbed,
+  Paragraph,
+  PictureEditing,
+  PlainTableOutput,
+  RemoveFormat,
+  SourceEditing,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableLayout,
+  TableProperties,
+  TableToolbar,
+  TextTransformation,
+  TodoList,
+  Underline,
+} from 'ckeditor5';
+
+import AssetBrowserPlugin from './assetBrowserPlugin.js';
+
+export const DEFAULT_PLUGINS = [
+  Essentials,
+  Alignment,
+  AutoLink,
+  Autosave,
+  Paragraph,
+  Bold,
+  Italic,
+  Code,
+  Heading,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Link,
+  List,
+  ListProperties,
+  BlockQuote,
+  Highlight,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableLayout,
+  TableProperties,
+  TableToolbar,
+  HorizontalLine,
+  HtmlEmbed,
+  SourceEditing,
+  RemoveFormat,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  TextTransformation,
+  TodoList,
+  Indent,
+  IndentBlock,
+  MediaEmbed,
+  Image,
+  ImageToolbar,
+  ImageCaption,
+  ImageStyle,
+  ImageResize,
+  ImageUpload,
+  ImageInsert,
+  ImageInsertUI,
+  ImageInsertViaUrl,
+  ImageInline,
+  ImageBlock,
+  LinkImage,
+  AutoImage,
+  PictureEditing,
+  PlainTableOutput,
+  FileRepository,
+  GeneralHtmlSupport,
+  AssetBrowserPlugin,
+];
diff --git a/assets/editor/toolbar.ts b/assets/editor/toolbar.ts
new file mode 100644
index 0000000..b711b54
--- /dev/null
+++ b/assets/editor/toolbar.ts
@@ -0,0 +1,50 @@
+export const DEFAULT_TOOLBAR = [
+  'undo',
+  'redo',
+  '|',
+  'heading',
+  '|',
+  'fontSize',
+  'fontFamily',
+  'fontColor',
+  'fontBackgroundColor',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'subscript',
+  'superscript',
+  'code',
+  'removeFormat',
+  '|',
+  'link',
+  'highlight',
+  'alignment',
+  '|',
+  'bulletedList',
+  'numberedList',
+  'todoList',
+  '|',
+  'blockQuote',
+  'insertTable',
+  'insertTableLayout',
+  'insertImage',
+  'sourceEditing',
+  'htmlEmbed',
+  'mediaEmbed',
+  'assetBrowser',
+  '|',
+  'horizontalLine',
+  'outdent',
+  'indent',
+];
+
+export const DEFAULT_IMAGE_TOOLBAR = [
+  'imageStyle:inline',
+  'imageStyle:wrapText',
+  'imageStyle:breakText',
+  '|',
+  'toggleImageCaption',
+  'imageTextAlternative',
+];
diff --git a/assets/editor/uploadAdapter.ts b/assets/editor/uploadAdapter.ts
new file mode 100644
index 0000000..f54c273
--- /dev/null
+++ b/assets/editor/uploadAdapter.ts
@@ -0,0 +1,88 @@
+export default class EditorUploadAdapter {
+  constructor(loader, options = {}) {
+    this.loader = loader;
+    this.endpoint = options.endpoint || '/editor/upload';
+    this.headers = options.headers || {};
+    this.withCredentials = options.withCredentials !== false;
+    this.xhr = null;
+  }
+
+  upload() {
+    return this.loader.file.then((file) => new Promise((resolve, reject) => {
+      const xhr = this.xhr = new XMLHttpRequest();
+      const formData = new FormData();
+
+      xhr.open('POST', this.endpoint, true);
+      xhr.responseType = 'json';
+      xhr.withCredentials = this.withCredentials;
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
+      Object.entries(this.headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+
+      xhr.upload.addEventListener('progress', (event) => {
+        if (!event.lengthComputable) {
+          return;
+        }
+
+        this.loader.uploadTotal = event.total;
+        this.loader.uploaded = event.loaded;
+      });
+
+      xhr.addEventListener('error', () => {
+        reject('The file could not be uploaded.');
+      });
+
+      xhr.addEventListener('abort', () => {
+        reject('The upload was aborted.');
+      });
+
+      xhr.addEventListener('load', () => {
+        const response = xhr.response || parseResponse(xhr.responseText);
+
+        if (!response) {
+          reject('The upload response was empty.');
+          return;
+        }
+
+        if (response.error?.message) {
+          reject(response.error.message);
+          return;
+        }
+
+        if (typeof response.url === 'string' && response.url.length > 0) {
+          resolve({
+            default: response.url,
+          });
+          return;
+        }
+
+        reject('The upload response did not include a file URL.');
+      });
+
+      formData.append('upload', file);
+      formData.append('fileName', file.name);
+
+      xhr.send(formData);
+    }));
+  }
+
+  abort() {
+    if (this.xhr) {
+      this.xhr.abort();
+    }
+  }
+}
+
+function parseResponse(responseText) {
+  if (typeof responseText !== 'string' || responseText.trim() === '') {
+    return null;
+  }
+
+  try {
+    return JSON.parse(responseText);
+  } catch (_error) {
+    return null;
+  }
+}
diff --git a/assets/router/index.js b/assets/router/index.js
index f1d66d3..702e426 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -8,6 +8,10 @@ import CampaignEditView from '../vue/views/CampaignEditView.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(),
@@ -23,6 +27,11 @@ export const router = createRouter({
         { 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: '/:pathMatch(.*)*', redirect: '/' },
     ],
 });
diff --git a/assets/styles/color.css b/assets/styles/color.css
new file mode 100644
index 0000000..accbd53
--- /dev/null
+++ b/assets/styles/color.css
@@ -0,0 +1,33 @@
+:root {
+    --page-bg: #e5e7eb;
+    --primary-text: #374151;
+
+    --header-bg: #1e1b4b;
+    --logo-color: #c7d2fe;
+
+    --topbar-gradient-start: #312e81;
+    --topbar-gradient-middle: #3730a3;
+    --topbar-gradient-end: #4338ca;
+    --topbar-border: #4f46e5;
+
+    --card-bg: #ffffff;
+    --card-border: #e5e7eb;
+
+    --input-bg: #ffffff;
+    --input-border: #d1d5db;
+
+    --field-frame-bg: #f9fafb;
+    --field-frame-border: #e5e7eb;
+
+    --required-color: #dc2626;
+
+    --error-bg: #fef2f2;
+    --error-border: #fca5a5;
+    --error-text: #dc2626;
+
+    --success-bg: #f0fdf4;
+    --success-border: #86efac;
+    --success-text: #16a34a;
+
+    --footer-border: #e5e7eb;
+}
diff --git a/assets/styles/subscribe.css b/assets/styles/subscribe.css
new file mode 100644
index 0000000..2ca756f
--- /dev/null
+++ b/assets/styles/subscribe.css
@@ -0,0 +1,354 @@
+body {
+    margin: 0;
+    background: var(--page-bg);
+    color: var(--primary-text);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+}
+
+#container {
+    min-width: 300px;
+    margin: 0 auto;
+}
+
+#header {
+    background: var(--primary-text);
+    box-sizing: border-box;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100vw;
+}
+
+#logo {
+    color: var(--logo-color);
+    margin-top: 0px;
+    font-size: 48px;
+    text-align: center;
+    padding-bottom: 20px;
+}
+
+#logo a {
+    color: var(--logo-color);
+    text-decoration: none;
+    font-size: 2rem;
+}
+
+#wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+#mainContent {
+    min-height: 500px;
+}
+
+#footer {
+    padding: 20px;
+    border-top: 1px solid var(--footer-border);
+}
+
+.inline-field {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.inline-field .legacy-label {
+    margin: 0;
+    white-space: nowrap;
+    min-width: 80px; /* adjust as needed */
+}
+
+.inline-field .legacy-input {
+    flex: 1;
+}
+
+.checkbox-inline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkbox-inline .legacy-label {
+    margin: 0;
+}
+
+.checkbox-inline input[type="checkbox"] {
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.checkbox-field label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-right: 15px;
+    margin-bottom: 0;
+}
+
+.checkbox-field input[type="checkbox"] {
+    margin: 0;
+}
+
+.legacy-topbar {
+    background: linear-gradient(90deg, var(--topbar-gradient-start) 0%, var(--topbar-gradient-middle) 55%, var(--topbar-gradient-end) 100%);
+    border-bottom: 1px solid var(--topbar-border);
+    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
+    margin: 10px 0 0;
+    min-height: 68px;
+}
+
+.legacy-topbar-inner {
+    box-sizing: border-box;
+    color: #e0e7ff;
+    font-size: 33px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 auto;
+    max-width: 930px;
+    padding: 6px 18px;
+}
+
+.legacy-page-shell {
+    padding: 40px 16px 60px;
+}
+
+.legacy-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 16px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
+    margin: 0 auto;
+    max-width: 900px;
+    padding: 52px 30px 36px;
+}
+
+.legacy-form {
+    margin: 0;
+}
+
+.legacy-html-text {
+    color: var(--primary-text);
+    font-size: 13px;
+    line-height: 1.5;
+    margin-bottom: 18px;
+}
+
+.legacy-required-note {
+    color: var(--required-color);
+    font-size: 12px;
+    font-weight: 400;
+    margin: 10px 0 14px;
+    text-transform: uppercase;
+}
+
+.legacy-field-group {
+    margin-bottom: 18px;
+}
+
+.legacy-label {
+    color: var(--primary-text);
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+.legacy-input {
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 6px;
+    box-sizing: border-box;
+    color: var(--primary-text);
+    font-size: 13px;
+    max-width: none;
+    padding: 7px 10px;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    width: 100%;
+}
+
+.legacy-input:focus {
+    outline: none;
+    border-color: #543ff6;
+    box-shadow: 0 0 0 3px rgba(84, 63, 246, 0.12);
+}
+
+.legacy-field-frame {
+    background: var(--field-frame-bg);
+    border: 1px solid var(--field-frame-border);
+    border-radius: 8px;
+    margin: 14px 0 12px;
+    padding: 10px;
+}
+
+.legacy-field-row {
+    align-items: center;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 220px minmax(0, 1fr);
+    margin-bottom: 12px;
+}
+
+.legacy-field-row .legacy-label {
+    margin: 0;
+}
+
+.legacy-option-label,
+.legacy-list-option,
+.legacy-check-label {
+    color: var(--primary-text);
+    font-size: 13px;
+}
+
+.legacy-lists {
+    border: 0;
+    margin: 16px 0;
+    padding: 0;
+}
+
+.legacy-lists legend {
+    color: var(--primary-text);
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    padding: 0;
+}
+
+.legacy-list-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.legacy-list-option {
+    align-items: flex-start;
+    display: flex;
+    gap: 8px;
+}
+
+.legacy-actions {
+    align-items: center;
+    display: flex;
+    gap: 14px;
+    margin-top: 10px;
+}
+
+.legacy-button {
+    background: #543ff6;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 8px 16px;
+    transition: background-color 0.15s;
+}
+
+.legacy-button:hover {
+    background: #303F9F;
+}
+
+.adminmessage {
+    background: var(--page-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    color: var(--primary-text);
+    font-size: 12px;
+    margin-bottom: 14px;
+    padding: 14px 14px 12px;
+}
+
+.adminmessage p {
+    margin: 0 0 8px;
+}
+
+.adminmessage p:last-child {
+    margin-bottom: 0;
+}
+
+.adminmessage .button {
+    background: #543ff6;
+    border: 1px solid #fff;
+    border-radius: 6px;
+    color: #fff;
+    display: inline-block;
+    padding: 4px 8px;
+    text-decoration: none;
+}
+
+.legacy-confirmation {
+    color: var(--primary-text);
+    font-size: 13px;
+    margin: 10px 0 16px;
+}
+
+.legacy-powered-by {
+    margin-top: 26px;
+    text-align: center;
+}
+
+.legacy-powered-by img {
+    display: inline-block;
+}
+
+.legacy-error-box {
+    background: var(--error-bg);
+    border: 1px solid var(--error-border);
+    border-radius: 6px;
+    color: var(--error-text);
+    font-size: 13px;
+    margin-bottom: 12px;
+    padding: 10px;
+}
+
+.legacy-error-box p {
+    margin: 0 0 6px;
+}
+
+.legacy-error-box p:last-child {
+    margin-bottom: 0;
+}
+
+.legacy-success {
+    background: var(--success-bg);
+    border: 1px solid var(--success-border);
+    border-radius: 6px;
+    color: var(--success-text);
+    font-size: 13px;
+    margin-bottom: 12px;
+    padding: 10px;
+}
+
+.legacy-hidden {
+    display: none;
+}
+
+input[type="checkbox"] {
+    accent-color: var(--topbar-gradient-end);
+}
+
+.poweredby {
+    position: fixed;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+}
+
+@media (max-width: 720px) {
+    .legacy-topbar-inner {
+        font-size: 34px;
+    }
+
+    .legacy-card {
+        padding: 28px 16px;
+    }
+
+    .legacy-field-row {
+        gap: 6px;
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/assets/vue/App.vue b/assets/vue/App.vue
index e38be10..dacfe52 100644
--- a/assets/vue/App.vue
+++ b/assets/vue/App.vue
@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
     <AppSidebar />
 
-    <div class="flex flex-col flex-1 min-h-screen">
+    <div class="flex flex-col flex-1 min-h-screen min-w-0">
       <RouterView />
     </div>
   </div>
diff --git a/assets/vue/api.js b/assets/vue/api.js
index 43e2e12..f4e44ba 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -1,14 +1,18 @@
 import {
+    AdminClient,
     CampaignClient,
     Client,
     ListMessagesClient,
     ListClient,
     StatisticsClient,
+    SubscribePagesClient,
     SubscribersClient,
     SubscriptionClient,
     SubscriberAttributesClient,
     TemplatesClient,
     BouncesClient,
+    ConfigClient,
+    AdminAttributeClient,
 } from '@tatevikgr/rest-api-client';
 
 const AUTHENTICATION_REDIRECT_PATH = '/login';
@@ -27,7 +31,9 @@ const redirectToLogin = () => {
         return;
     }
     isAuthenticationRedirectInProgress = true;
-    window.location.href = AUTHENTICATION_REDIRECT_PATH;
+    const redirectTarget = `${window.location.pathname}${window.location.search}`;
+    const search = new URLSearchParams({ redirect: redirectTarget }).toString();
+    window.location.href = `${AUTHENTICATION_REDIRECT_PATH}?${search}`;
 };
 
 const appElement = document.getElementById('vue-app');
@@ -40,7 +46,6 @@ if (!apiBaseUrl) {
 
 const client = new Client(apiBaseUrl || '', {
     onAuthenticationError: redirectToLogin,
-    onAuthorizationError: redirectToLogin,
 });
 
 if (apiToken) {
@@ -59,14 +64,19 @@ client.axiosInstance?.interceptors?.response?.use(
 );
 
 export const subscribersClient = new SubscribersClient(client);
+export const adminClient = new AdminClient(client);
+export const adminAttributeClient = new AdminAttributeClient(client);
 export const listClient = new ListClient(client);
 export const campaignClient = new CampaignClient(client);
 export const listMessagesClient = new ListMessagesClient(client);
 export const statisticsClient = new StatisticsClient(client);
 export const subscriptionClient = new SubscriptionClient(client);
+export const subscribePagesClient = new SubscribePagesClient(client);
 export const subscriberAttributesClient = new SubscriberAttributesClient(client);
 export const templateClient = new TemplatesClient(client);
 export const bouncesClient = new BouncesClient(client);
+export const configClient = new ConfigClient(client);
+
 
 export const backendFetch = async (input, init = undefined) => {
     const response = await fetch(input, init);
@@ -100,4 +110,48 @@ export const fetchAllLists = async ({ limit = 100, maxPages = 100 } = {}) => {
     return lists;
 };
 
+export const fetchAllAdmins = async ({ limit = 100, maxPages = 100 } = {}) => {
+    const admins = [];
+    let afterId = null;
+
+    for (let pageIndex = 0; pageIndex < maxPages; pageIndex += 1) {
+        const response = await adminClient.getAdministrators(afterId, limit);
+        const items = Array.isArray(response?.items) ? response.items : [];
+        admins.push(...items);
+
+        const hasMore = response?.pagination?.hasMore === true;
+        const nextCursor = response?.pagination?.nextCursor;
+
+        if (!hasMore || !Number.isFinite(nextCursor) || nextCursor === afterId) {
+            break;
+        }
+
+        afterId = nextCursor;
+    }
+
+    return admins;
+};
+
+export const fetchAllAttributeDefinitions = async ({ limit = 100, maxPages = 100 } = {}) => {
+    const attributes = [];
+    let afterId = null;
+
+    for (let pageIndex = 0; pageIndex < maxPages; pageIndex += 1) {
+        const response = await subscriberAttributesClient.getAttributeDefinitions(afterId, limit);
+        const items = Array.isArray(response?.items) ? response.items : [];
+        attributes.push(...items);
+
+        const hasMore = response?.pagination?.hasMore === true;
+        const nextCursor = response?.pagination?.nextCursor;
+
+        if (!hasMore || !Number.isFinite(nextCursor) || nextCursor === afterId) {
+            break;
+        }
+
+        afterId = nextCursor;
+    }
+
+    return attributes;
+};
+
 export default client;
diff --git a/assets/vue/components/base/BaseBadge.spec.js b/assets/vue/components/base/BaseBadge.spec.js
deleted file mode 100644
index df0507a..0000000
--- a/assets/vue/components/base/BaseBadge.spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mount } from '@vue/test-utils'
-import BaseBadge from './BaseBadge.vue'
-
-describe('BaseBadge', () => {
-  it('renders neutral variant by default', () => {
-    const wrapper = mount(BaseBadge, {
-      slots: {
-        default: 'All',
-      },
-    })
-
-    const classes = wrapper.get('span').classes()
-    expect(wrapper.text()).toContain('All')
-    expect(classes).toContain('bg-gray-100')
-    expect(classes).toContain('text-gray-800')
-  })
-
-  it('renders counter variant styles', () => {
-    const wrapper = mount(BaseBadge, {
-      props: {
-        variant: 'counter',
-      },
-      slots: {
-        default: '10',
-      },
-    })
-
-    const classes = wrapper.get('span').classes()
-    expect(classes).toContain('bg-indigo-50')
-    expect(classes).toContain('text-ext-wf3')
-    expect(wrapper.text()).toContain('10')
-  })
-})
diff --git a/assets/vue/components/base/BaseCard.vue b/assets/vue/components/base/BaseCard.vue
index 2278c74..5a15a04 100644
--- a/assets/vue/components/base/BaseCard.vue
+++ b/assets/vue/components/base/BaseCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="cardClasses">
-    <div :class="bodyClasses">
+    <div :class="bodyClasses" data-testid="card-body">
       <slot />
     </div>
   </div>
diff --git a/assets/vue/components/base/CkEditorField.vue b/assets/vue/components/base/CkEditorField.vue
index 9a56ad6..2f8e3b3 100644
--- a/assets/vue/components/base/CkEditorField.vue
+++ b/assets/vue/components/base/CkEditorField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="editor-field" :style="{ '--editor-min-height': `300px` }">
+  <div class="editor-field" :style="editorFieldStyle">
     <label
         v-if="label"
         :for="fieldId"
@@ -8,49 +8,28 @@
       {{ label }}
     </label>
 
-    <ckeditor
+    <CkEditor
         :id="fieldId"
         v-model="localValue"
-        :editor="ClassicEditor"
-        :config="editorConfig"
+        :min-height="minHeight"
+        :readonly="readonly"
+        :disabled="disabled"
+        :upload-endpoint="uploadEndpoint"
+        :upload-headers="uploadHeaders"
+        :with-credentials="withCredentials"
+        :toolbar="toolbar"
+        :plugins="plugins"
+        :config="config"
     />
+
+    <p v-if="helperText" class="mt-1 text-xs text-slate-500">{{ helperText }}</p>
+    <p v-if="errorMessage" class="mt-1 text-xs text-red-600">{{ errorMessage }}</p>
   </div>
 </template>
 
 <script setup>
 import { computed, useId } from 'vue'
-import { Ckeditor } from '@ckeditor/ckeditor5-vue'
-
-import {
-  ClassicEditor,
-  Essentials,
-  Paragraph,
-  Bold,
-  Italic,
-  Heading,
-  Link,
-  List,
-  BlockQuote,
-  Table,
-  TableToolbar,
-  HorizontalLine,
-
-  Image,
-  ImageToolbar,
-  ImageCaption,
-  ImageStyle,
-  ImageResize,
-  AutoImage,
-  PictureEditing
-} from 'ckeditor5'
-
-import 'ckeditor5/ckeditor5.css'
-
-defineOptions({
-  components: {
-    ckeditor: Ckeditor
-  }
-})
+import { CkEditor } from '../../../editor/index.ts'
 
 const props = defineProps({
   modelValue: {
@@ -64,6 +43,50 @@ const props = defineProps({
   id: {
     type: String,
     default: ''
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  helperText: {
+    type: String,
+    default: ''
+  },
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+  minHeight: {
+    type: [Number, String],
+    default: 300
+  },
+  uploadEndpoint: {
+    type: String,
+    default: '/editor/upload'
+  },
+  uploadHeaders: {
+    type: Object,
+    default: () => ({})
+  },
+  withCredentials: {
+    type: Boolean,
+    default: true
+  },
+  toolbar: {
+    type: Array,
+    default: null
+  },
+  plugins: {
+    type: Array,
+    default: () => []
+  },
+  config: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -76,63 +99,16 @@ const localValue = computed({
 
 const generatedId = useId()
 const fieldId = computed(() => props.id || `ckeditor-${generatedId}`)
-
-const editorConfig = {
-  licenseKey: 'GPL',
-  plugins: [
-    Essentials,
-    Paragraph,
-    Bold,
-    Italic,
-    Heading,
-    Link,
-    List,
-    BlockQuote,
-    Table,
-    TableToolbar,
-    HorizontalLine,
-    Image,
-    ImageToolbar,
-    ImageCaption,
-    ImageStyle,
-    ImageResize,
-    AutoImage,
-    PictureEditing
-  ],
-  toolbar: [
-    'undo',
-    'redo',
-    '|',
-    'heading',
-    '|',
-    'bold',
-    'italic',
-    'link',
-    '|',
-    'bulletedList',
-    'numberedList',
-    '|',
-    'blockQuote',
-    'insertTable',
-    '|',
-    'horizontalLine'
-  ],
-  image: {
-    toolbar: [
-      'imageStyle:inline',
-      'imageStyle:block',
-      'imageStyle:side',
-      '|',
-      'toggleImageCaption',
-      'imageTextAlternative'
-    ]
-  }
-}
+const editorFieldStyle = computed(() => ({
+  '--editor-min-height': typeof props.minHeight === 'number'
+    ? `${props.minHeight}px`
+    : String(props.minHeight)
+}))
 </script>
 
 <style scoped>
 :deep(.ck-editor__editable_inline) {
-  min-height: var(--editor-min-height) !important;
+  min-height: var(--editor-min-height, 300px) !important;
   overflow-y: auto;
 }
 </style>
diff --git a/assets/vue/components/bounces/BounceOverview.vue b/assets/vue/components/bounces/BounceOverview.vue
index c7fa353..02cf479 100644
--- a/assets/vue/components/bounces/BounceOverview.vue
+++ b/assets/vue/components/bounces/BounceOverview.vue
@@ -103,7 +103,7 @@
         <div class="flex gap-2 w-full sm:w-auto">
           <button
             type="button"
-            class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
             :disabled="!canGoPrevious"
             @click="previousPage"
           >
@@ -111,7 +111,7 @@
           </button>
           <button
             type="button"
-            class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+            class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
             :disabled="!canGoNext"
             @click="nextPage"
           >
diff --git a/assets/vue/components/bounces/BounceRules.vue b/assets/vue/components/bounces/BounceRules.vue
index 6889f6a..9a1d58f 100644
--- a/assets/vue/components/bounces/BounceRules.vue
+++ b/assets/vue/components/bounces/BounceRules.vue
@@ -83,7 +83,7 @@
               <h3 id="create-bounce-rule-modal-title" class="text-lg leading-6 font-medium text-slate-900">
                 New Bounce Rule
               </h3>
-              <button type="button" class="text-slate-400 hover:text-slate-500" :disabled="isCreatingRule" @click="closeCreateModal">
+              <button type="button" class="text-slate-400 hover:text-slate-500" :disabled="isCreatingRule" @click="closeCreateModal" data-testid="modal-close">
                 <span aria-hidden="true">×</span>
               </button>
             </div>
@@ -214,6 +214,7 @@
               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>
@@ -222,6 +223,7 @@
               class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
               :disabled="isCreatingRule"
               @click="closeCreateModal"
+              data-testid="modal-cancel"
             >
               Cancel
             </button>
diff --git a/assets/vue/components/bounces/BouncesActionsPanel.vue b/assets/vue/components/bounces/BouncesActionsPanel.vue
index 46ffba8..ad05614 100644
--- a/assets/vue/components/bounces/BouncesActionsPanel.vue
+++ b/assets/vue/components/bounces/BouncesActionsPanel.vue
@@ -18,9 +18,9 @@
         v-for="tab in tabs"
         :key="tab.id"
         type="button"
-        class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap flex-shrink-0"
+        class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap shrink-0"
         :class="activeTab === tab.id
-          ? 'bg-white text-slate-900 shadow-sm border border-slate-200'
+          ? 'bg-white text-slate-900 shadow-sm border border-slate-300'
           : 'text-slate-500 hover:text-slate-700 hover:bg-white/60'"
         @click="setActiveTab(tab.id)"
       >
diff --git a/assets/vue/components/campaigns/CampaignDirectory.vue b/assets/vue/components/campaigns/CampaignDirectory.vue
index 43ad4aa..af6c92c 100644
--- a/assets/vue/components/campaigns/CampaignDirectory.vue
+++ b/assets/vue/components/campaigns/CampaignDirectory.vue
@@ -25,22 +25,22 @@
           <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">Statistics</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">
         <tr v-if="isLoading">
-          <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading campaigns...</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500">Loading campaigns...</td>
         </tr>
 
         <tr v-else-if="errorMessage">
-          <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
         </tr>
 
         <tr v-else-if="paginatedCampaigns.length === 0">
-          <td colspan="6" class="px-6 py-8 text-center text-slate-500">No campaigns for this filter.</td>
+          <td :colspan="showStatistics ? 6 : 5" class="px-6 py-8 text-center text-slate-500">No campaigns for this filter.</td>
         </tr>
 
         <tr
@@ -80,7 +80,7 @@
             <p class="text-xs leading-5"><span class="font-medium text-slate-700">Text:</span> {{ campaign.processedText }}</p>
             <p class="text-xs leading-5"><span class="font-medium text-slate-700">HTML:</span> {{ campaign.processedHtml }}</p>
           </td>
-          <td class="px-6 py-4 text-slate-600 align-top">
+          <td class="px-6 py-4 text-slate-600 align-top" v-if="showStatistics">
             <p class="text-xs leading-5"><span class="font-medium text-slate-700">Total views:</span> {{ campaign.totalViews }}</p>
             <p class="text-xs leading-5"><span class="font-medium text-slate-700">Unique views:</span> {{ campaign.uniqueViews }}</p>
             <p class="text-xs leading-5"><span class="font-medium text-slate-700">Bounced:</span> {{ campaign.bounced }}</p>
@@ -130,7 +130,7 @@
               <button
                   v-if="campaign.statusKey === 'draft'"
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleEdit(campaign.id)"
               >
@@ -139,7 +139,7 @@
               </button>
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleView(campaign.id)"
               >
@@ -223,7 +223,10 @@
             <p><span class="font-medium text-slate-700">Started:</span> {{ campaign.startedAt }}</p>
             <p><span class="font-medium text-slate-700">Time to send:</span> {{ campaign.timeToSend }}</p>
             <p><span class="font-medium text-slate-700">Processed:</span> {{ campaign.processedTotal }} (Text: {{ campaign.processedText }}, HTML: {{ campaign.processedHtml }})</p>
-            <p><span class="font-medium text-slate-700">Statistics:</span> Total views {{ campaign.totalViews }}, Unique views {{ campaign.uniqueViews }}, Bounced {{ campaign.bounced }}</p>
+            <p v-if="showStatistics">
+              <span class="font-medium text-slate-700">Statistics:</span>
+              Total views {{ campaign.totalViews }}, Unique views {{ campaign.uniqueViews }}, Bounced {{ campaign.bounced }}
+            </p>
           </div>
 
           <div class="pt-2 flex flex-wrap gap-2">
@@ -270,7 +273,7 @@
             <button
                 v-if="campaign.statusKey === 'draft'"
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleEdit(campaign.id)"
             >
@@ -279,7 +282,7 @@
             </button>
             <button
                 type="button"
-                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleView(campaign.id)"
             >
@@ -309,7 +312,7 @@
       <div class="flex gap-2 w-full sm:w-auto">
         <button
           type="button"
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
           :disabled="!canGoPrevious"
           @click="previousPage"
         >
@@ -317,7 +320,7 @@
         </button>
         <button
           type="button"
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
           :disabled="!canGoNext"
           @click="nextPage"
         >
@@ -400,6 +403,7 @@ const selectedCampaign = ref(null)
 const viewErrorMessage = ref('')
 const isResending = ref(false)
 const resendErrorMessage = ref('')
+const showStatistics = ref(true)
 
 const filterOptions = [
   { id: 'all', label: 'All' },
@@ -732,62 +736,77 @@ const fetchAllCampaigns = async () => {
 const fetchCampaignStatistics = async () => {
   const statisticsMap = {}
 
-  let cursor = null
-  let guard = 0
+  try {
+    let cursor = null
+    let guard = 0
 
-  // Base campaign statistics
-  while (guard < 200) {
-    const response = await statisticsClient.getCampaignStatistics(cursor, 100)
-    const items = Array.isArray(response?.items) ? response.items : []
+    while (guard < 200) {
+      const response = await statisticsClient.getCampaignStatistics(cursor, 100)
+      const items = Array.isArray(response?.items) ? response.items : []
 
-    items.forEach((item) => {
-      statisticsMap[item.campaignId] = {
-        bounces: Number(item.bounces ?? 0),
-        sent: Number(item.sent ?? 0),
-        uniqueViews: Number(item.uniqueViews ?? 0),
-      }
-    })
+      items.forEach((item) => {
+        statisticsMap[item.campaignId] = {
+          bounces: Number(item.bounces ?? 0),
+          sent: Number(item.sent ?? 0),
+          uniqueViews: Number(item.uniqueViews ?? 0),
+        }
+      })
 
-    const hasMore = Boolean(response?.pagination?.hasMore)
-    const nextCursor = response?.pagination?.nextCursor ?? null
-    if (!hasMore || nextCursor === null) break
+      const hasMore = Boolean(response?.pagination?.hasMore)
+      const nextCursor = response?.pagination?.nextCursor ?? null
 
-    cursor = nextCursor
-    guard += 1
-  }
+      if (!hasMore || nextCursor === null) break
 
-  cursor = null
-  guard = 0
+      cursor = nextCursor
+      guard++
+    }
 
-  // View-open statistics
-  while (guard < 200) {
-    const response = await statisticsClient.getStatisticsOfViewOpens(cursor, 100)
-    const items = Array.isArray(response?.items) ? response.items : []
+    cursor = null
+    guard = 0
 
-    items.forEach((item) => {
-      const existing = statisticsMap[item.campaignId] || {
-        bounces: 0,
-        sent: 0,
-        uniqueViews: 0,
-      }
+    while (guard < 200) {
+      const response = await statisticsClient.getStatisticsOfViewOpens(cursor, 100)
+      const items = Array.isArray(response?.items) ? response.items : []
 
-      statisticsMap[item.campaignId] = {
-        ...existing,
-        // only merge fields that really belong here
-        sent: Number(item.sent ?? existing.sent),
-      }
-    })
+      items.forEach((item) => {
+        const existing = statisticsMap[item.campaignId] ?? {
+          bounces: 0,
+          sent: 0,
+          uniqueViews: 0,
+        }
 
-    const hasMore = Boolean(response?.pagination?.hasMore)
-    const nextCursor = response?.pagination?.nextCursor ?? null
-    if (!hasMore || nextCursor === null) break
+        statisticsMap[item.campaignId] = {
+          ...existing,
+          sent: Number(item.sent ?? existing.sent),
+        }
+      })
 
-    cursor = nextCursor
-    guard += 1
-  }
+      const hasMore = Boolean(response?.pagination?.hasMore)
+      const nextCursor = response?.pagination?.nextCursor ?? null
 
-  statisticsByCampaignId.value = statisticsMap
+      if (!hasMore || nextCursor === null) break
+
+      cursor = nextCursor
+      guard++
+    }
+
+    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)
diff --git a/assets/vue/components/campaigns/ViewCampaignModal.vue b/assets/vue/components/campaigns/ViewCampaignModal.vue
index f74cfb2..80b73de 100644
--- a/assets/vue/components/campaigns/ViewCampaignModal.vue
+++ b/assets/vue/components/campaigns/ViewCampaignModal.vue
@@ -11,6 +11,7 @@
             type="button"
             class="text-sm text-slate-500 hover:text-slate-700"
             @click="emit('close')"
+            data-testid="close-btn"
         >
           Close
         </button>
@@ -62,7 +63,7 @@
               }}</pre>
           </div>
 
-          <p v-if="campaign?.messageSchedule?.requeueInterval">
+          <p v-if="campaign?.messageSchedule?.requeueInterval || campaign?.messageSchedule?.repeatInterval">
             <span class="font-medium text-slate-900">Requeueing:</span>
             {{ getMessage(campaign?.messageSchedule) }}
           </p>
@@ -91,7 +92,7 @@
                         v-model="selectedMailingListIds"
                         type="checkbox"
                         :value="list.id"
-                        class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400"
+                        class="h-4 w-4 rounded border-slate-300 text-slate-900 accent-ext-wf1"
                     >
                     <span>{{ list.name }}</span>
                   </label>
diff --git a/assets/vue/components/dashboard/KpiCard.vue b/assets/vue/components/dashboard/KpiCard.vue
index 57df775..f90e008 100644
--- a/assets/vue/components/dashboard/KpiCard.vue
+++ b/assets/vue/components/dashboard/KpiCard.vue
@@ -25,6 +25,7 @@ import BaseCard from '../../components/base/BaseCard.vue'
 import BaseIcon from '../../components/base/BaseIcon.vue'
 
 const props = defineProps({
+  id: String,
   label: String,
   value: [String, Number],
   change: String,         // "+12.5%" etc.
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
index b54f3f8..421e261 100644
--- a/assets/vue/components/lists/AddSubscribersModal.vue
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -41,7 +41,7 @@
               <input
                   v-model="addSubsForm.autoConfirm"
                   type="checkbox"
-                  class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-blue-500"
+                  class="h-4 w-4 rounded border-slate-300 text-ext-wf1 accent-ext-wf1"
               />
               Auto confirm subscribers
             </label>
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
index dcd58ca..e7199b7 100644
--- a/assets/vue/components/lists/CreateListModal.vue
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -35,7 +35,7 @@
                 id="list-public"
                 v-model="createForm.public"
                 type="checkbox"
-                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
               >
               <label for="list-public" class="ml-2 block text-sm text-slate-900">
                 Public
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
index 41d5981..5e3dc01 100644
--- a/assets/vue/components/lists/EditListModal.vue
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -35,7 +35,7 @@
                 id="list-public"
                 v-model="editForm.public"
                 type="checkbox"
-                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
               >
               <label for="list-public" class="ml-2 block text-sm text-slate-900">
                 Public
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index 082f47b..eb939cc 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -64,7 +64,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                   @click="handleEdit(list)"
               >
                 <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -82,7 +82,7 @@
 
               <button
                   type="button"
-                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                   @click="handleViewMembers(list)"
               >
                 <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -158,7 +158,7 @@
 
             <button
                 type="button"
-                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                 @click="handleEdit(list)"
             >
               <BaseIcon name="edit" class="w-3.5 h-3.5" />
@@ -176,7 +176,7 @@
 
             <button
                 type="button"
-                class="col-span-2 inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="col-span-2 inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                 @click="handleViewMembers(list)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
index bcc03ee..cf63d1f 100644
--- a/assets/vue/components/lists/ListSubscribersExportPanel.vue
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -71,7 +71,7 @@
             <input
                 ref="selectAllColumnsCheckbox"
                 type="checkbox"
-                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                 :checked="allColumnsSelected"
                 @change="toggleAllColumns"
             >
@@ -88,7 +88,7 @@
             <input
                 v-model="form.columns"
                 type="checkbox"
-                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 shrink-0"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 shrink-0 accent-ext-wf1"
                 :value="column.value"
             >
             <span class="truncate">{{ column.label }}</span>
diff --git a/assets/vue/components/public-pages/PublicPageEditor.vue b/assets/vue/components/public-pages/PublicPageEditor.vue
new file mode 100644
index 0000000..99802fe
--- /dev/null
+++ b/assets/vue/components/public-pages/PublicPageEditor.vue
@@ -0,0 +1,762 @@
+<template>
+  <section class="space-y-6">
+    <header class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <h1 class="text-xl font-bold text-slate-900">
+        {{ isEditMode ? 'Edit Subscribe Page' : 'Create Subscribe Page' }}
+      </h1>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="px-4 py-2 border border-slate-300 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg transition-colors"
+          @click="goBack"
+        >
+          Back
+        </button>
+        <button
+          type="button"
+          class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-60"
+          :disabled="isSaving || isLoading"
+          @click="savePage"
+        >
+          {{ isSaving ? 'Saving...' : 'Save' }}
+        </button>
+      </div>
+    </header>
+
+    <div v-if="isLoading" class="bg-white rounded-xl border border-slate-200 shadow-sm p-8 text-center text-slate-500">
+      Loading public page data...
+    </div>
+
+    <div v-else class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+      <div class="border-b border-slate-200 px-4 pt-4 sm:px-6 sm:pt-6">
+        <div class="grid grid-cols-3 gap-2 sm:grid-cols-5">
+          <button
+            v-for="step in steps"
+            :key="step.id"
+            type="button"
+            class="rounded-t-lg px-2 py-2 text-center text-xs font-semibold transition-colors"
+            :class="currentStep === step.id ? 'bg-ext-wf1 text-white' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'"
+            @click="goToStep(step.id)"
+          >
+            <span class="block text-base leading-none">{{ step.id }}</span>
+            <span class="block mt-1">{{ step.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="p-4 sm:p-6 space-y-5">
+        <section v-if="currentStep === 1" class="space-y-4">
+          <h2 class="text-lg font-semibold text-slate-900">General settings</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <label class="space-y-1 md:col-span-2">
+              <span class="text-sm font-medium text-slate-700">Title</span>
+              <input v-model="form.title" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Language file to use</span>
+              <select v-model="form.languageFile" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+                <option v-for="option in languageOptions" :key="option" :value="option">{{ option }}</option>
+              </select>
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Text for button</span>
+              <input v-model="form.button" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+            </label>
+
+            <label class="space-y-1 md:col-span-2">
+              <span class="text-sm font-medium text-slate-700">Intro text</span>
+              <textarea v-model="form.introText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Header text</span>
+              <textarea v-model="form.headerText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Footer text</span>
+              <textarea v-model="form.footerText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Thank you page text</span>
+              <textarea v-model="form.thankYouPageText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+            </label>
+
+            <label class="space-y-1">
+              <span class="text-sm font-medium text-slate-700">Text for successful AJAX subscription</span>
+              <textarea v-model="form.ajaxSuccessText" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+            </label>
+          </div>
+        </section>
+
+        <section v-else-if="currentStep === 2" class="space-y-4">
+          <h2 class="text-lg font-semibold text-slate-900">Select the lists to offer</h2>
+          <fieldset class="space-y-2">
+            <legend class="text-sm font-medium text-slate-700">Display list categories</legend>
+            <label class="flex items-center gap-2 text-sm text-slate-700">
+              <input v-model="form.displayListCategories" type="radio" value="0" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              Do not show list categories
+            </label>
+            <label class="flex items-center gap-2 text-sm text-slate-700">
+              <input v-model="form.displayListCategories" type="radio" value="1" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+              Display lists in labelled categories
+            </label>
+          </fieldset>
+
+          <label class="flex items-center gap-2 text-sm text-slate-700">
+            <input
+              :checked="form.noPreselectAnyList"
+              type="checkbox"
+              class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+              @change="toggleNoPreselectAnyList($event)"
+            >
+            Do not preselect any list
+          </label>
+
+          <div class="space-y-3">
+            <article
+              v-for="list in publicLists"
+              :key="list.id"
+              class="rounded-lg border border-slate-200 p-3"
+            >
+              <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                <label class="flex items-center gap-2 text-sm font-medium text-slate-800">
+                  <input
+                    :checked="form.selectedListIds.includes(list.id)"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                    @change="toggleListSelection(list.id, $event)"
+                  >
+                  {{ list.name || `List #${list.id}` }}
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    :checked="form.preselectedListId === list.id"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1"
+                    :disabled="!form.selectedListIds.includes(list.id)"
+                    @change="toggleListPreselection(list.id, $event)"
+                  >
+                  Preselect
+                </label>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        <section v-else-if="currentStep === 3" class="space-y-4">
+          <h2 class="text-lg font-semibold text-slate-900">Select the attributes to use</h2>
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:auto-rows-fr">
+            <article
+              v-for="attribute in attributes"
+              :key="attribute.id"
+              class="h-full rounded-lg border border-slate-200 p-4"
+            >
+              <div class="flex h-full flex-col gap-3">
+                <div class="flex items-start justify-between gap-3">
+                  <p class="text-sm font-semibold text-slate-800">Attribute: {{ attribute.id }}</p>
+                </div>
+
+                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div class="min-w-0">
+                    <p class="text-xs text-slate-500">Name</p>
+                    <p class="truncate text-sm text-slate-800" :title="attribute.name">{{ attribute.name }}</p>
+                  </div>
+                  <div class="min-w-0">
+                    <p class="text-xs text-slate-500">Type</p>
+                    <p class="truncate text-sm text-slate-800" :title="attribute.type">{{ attribute.type }}</p>
+                  </div>
+                  <label class="space-y-1">
+                    <span class="text-sm font-medium text-slate-700">Default value</span>
+                    <input
+                      :value="attributeState(attribute.id).defaultValue"
+                      type="text"
+                      class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                      @input="updateAttributeState(attribute.id, 'defaultValue', $event.target.value)"
+                    >
+                  </label>
+                  <label class="space-y-1">
+                    <span class="text-sm font-medium text-slate-700">Order of listing</span>
+                    <input
+                      :value="attributeState(attribute.id).listOrder"
+                      type="number"
+                      min="0"
+                      class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                      @input="updateAttributeState(attribute.id, 'listOrder', $event.target.value)"
+                    >
+                  </label>
+                </div>
+
+                <label class="mt-auto flex items-center gap-2 pt-1 text-sm text-slate-700">
+                  <input
+                    :checked="attributeState(attribute.id).required"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
+                    @change="updateAttributeState(attribute.id, 'required', $event.target.checked)"
+                  >
+                  Is this attribute required?
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    :checked="attributeState(attribute.id).use"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 focus:ring-2 focus:ring-ext-wf1 accent-ext-wf1"
+                    @change="updateAttributeState(attribute.id, 'use', $event.target.checked)"
+                  >
+                  Use this attribute in the page
+                </label>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        <section v-else-if="currentStep === 4" class="space-y-6">
+          <h2 class="text-lg font-semibold text-slate-900">Transaction messages</h2>
+          <div class="grid gap-6 lg:grid-cols-3">
+            <div class="space-y-3">
+              <h3 class="text-sm font-semibold text-slate-800">Message subscribers receive when they subscribe</h3>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Subject</span>
+                <input v-model="form.subscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              </label>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Message</span>
+                <textarea v-model="form.subscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              </label>
+            </div>
+
+            <div class="space-y-3">
+              <h3 class="text-sm font-semibold text-slate-800">Message they receive when they confirm their subscription</h3>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Subject</span>
+                <input v-model="form.confirmedSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              </label>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Message</span>
+                <textarea v-model="form.confirmedMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              </label>
+            </div>
+
+            <div class="space-y-3">
+              <h3 class="text-sm font-semibold text-slate-800">Content of the message they receive when they unsubscribe</h3>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Subject</span>
+                <input v-model="form.unsubscribeSubject" type="text" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              </label>
+              <label class="space-y-1">
+                <span class="text-sm font-medium text-slate-700">Message</span>
+                <textarea v-model="form.unsubscribeMessage" rows="6" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"></textarea>
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <section v-else class="space-y-4">
+          <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <fieldset class="space-y-2">
+              <legend class="text-sm font-medium text-slate-700">HTML email choice</legend>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="textonly" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Don't offer choice, default to text
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="htmlonly" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Don't offer choice, default to HTML
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="checkfortext" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Offer checkbox for text
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="checkforhtml" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Offer checkbox for HTML
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="radiotext" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Radio buttons, default to text
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.htmlChoice" type="radio" value="radiohtml" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Radio buttons, default to HTML
+              </label>
+            </fieldset>
+
+            <fieldset class="space-y-2">
+              <legend class="text-sm font-medium text-slate-700">Display email address confirmation field</legend>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.displayEmailConfirmationField" type="radio" value="1" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                Yes
+              </label>
+              <label class="flex items-center gap-2 text-sm text-slate-700">
+                <input v-model="form.displayEmailConfirmationField" type="radio" value="0" class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf2 accent-ext-wf1">
+                No
+              </label>
+            </fieldset>
+          </div>
+
+          <h2 class="text-sm font-medium text-slate-700">Owner</h2>
+          <label class="space-y-1 block">
+            <span class="text-sm font-medium text-slate-700">Select admin</span>
+            <select v-model="form.ownerId" class="w-full md:max-w-md rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2">
+              <option value="">No owner</option>
+              <option v-for="admin in admins" :key="admin.id" :value="String(admin.id)">
+                {{ admin.loginName || admin.email || `Admin #${admin.id}` }}
+              </option>
+            </select>
+          </label>
+        </section>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import {computed, onMounted, ref, watch} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {
+  backendFetch,
+  fetchAllAdmins,
+  fetchAllAttributeDefinitions,
+  fetchAllLists,
+  subscribePagesClient
+} from '../../api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEditMode = computed(() => Number.isFinite(Number(route.params.pageId)))
+const pageId = computed(() => Number(route.params.pageId))
+
+const isLoading = ref(true)
+const isSaving = ref(false)
+const admins = ref([])
+const lists = ref([])
+const attributes = ref([])
+const currentStep = ref(1)
+const steps = [
+  { id: 1, label: 'General' },
+  { id: 2, label: 'Lists' },
+  { id: 3, label: 'Attributes' },
+  { id: 4, label: 'Messages' },
+  { id: 5, label: 'Email Settings' }
+]
+const attributeConfig = ref({})
+const dataMap = ref({})
+const legacyHtmlChoiceOptions = new Set(['textonly', 'htmlonly', 'checkfortext', 'checkforhtml', 'radiotext', 'radiohtml'])
+
+const form = ref({
+  title: '',
+  languageFile: 'english.inc',
+  introText: '',
+  headerText: '',
+  footerText: '',
+  thankYouPageText: '',
+  ajaxSuccessText: '',
+  button: '',
+  htmlChoice: 'checkforhtml',
+  displayEmailConfirmationField: '0',
+  displayListCategories: '1',
+  noPreselectAnyList: true,
+  selectedListIds: [],
+  preselectedListId: null,
+  subscribeSubject: '',
+  subscribeMessage: '',
+  confirmedSubject: '',
+  confirmedMessage: '',
+  unsubscribeSubject: '',
+  unsubscribeMessage: '',
+  // todo: update the rest-api to set owner from request
+  ownerId: ''
+})
+
+const defaultLanguageOptions = ref(['english.inc'])
+
+const loadDefaultLanguageOptions = async () => {
+  try {
+    const resp = await backendFetch('/_internal/languages')
+    if (resp && resp.ok) {
+      const items = await resp.json()
+      if (Array.isArray(items) && items.length > 0) {
+        defaultLanguageOptions.value = items
+      }
+    }
+  } catch (error) {
+    // keep default hardcoded list on error
+    console.error('Failed to load default language options:', error)
+  }
+}
+
+const languageOptions = computed(() => {
+  const current = form.value.languageFile?.trim()
+  if (!current || defaultLanguageOptions.value.includes(current)) {
+    return defaultLanguageOptions.value
+  }
+  return [current, ...defaultLanguageOptions.value]
+})
+
+const publicLists = computed(() => lists.value.filter((list) => list.public === true))
+
+const goToStep = (stepId) => {
+  if (stepId < 1 || stepId > steps.length) return
+  currentStep.value = stepId
+}
+
+const resolveStepFromQuery = (stepValue) => {
+  const rawValue = Array.isArray(stepValue) ? stepValue[0] : stepValue
+  const parsedValue = Number(rawValue)
+  if (!Number.isInteger(parsedValue) || parsedValue < 1 || parsedValue > steps.length) {
+    return null
+  }
+  return parsedValue
+}
+
+const parseBoolean = (value, fallback = false) => {
+  if (value === null || value === undefined || value === '') {
+    return fallback
+  }
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'number') return value !== 0
+  if (typeof value !== 'string') return fallback
+  return ['1', 'true', 'yes', 'on'].includes(value.trim().toLowerCase())
+}
+
+const parseIdArray = (value) => {
+  if (!value) return []
+
+  let raw = value
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+      try {
+        raw = JSON.parse(trimmed)
+      } catch (error) {
+        raw = trimmed.split(',')
+      }
+    } else {
+      raw = trimmed.split(',')
+    }
+  }
+
+  if (!Array.isArray(raw)) {
+    raw = [raw]
+  }
+
+  return raw
+    .map((item) => Number(item))
+    .filter((item) => Number.isFinite(item) && item > 0)
+}
+
+const getDataValue = (key, fallback = '') => {
+  const value = dataMap.value[key]
+  return value === undefined || value === null ? fallback : String(value)
+}
+
+const attributeState = (attributeId) => {
+  if (!attributeConfig.value[attributeId]) {
+    attributeConfig.value[attributeId] = {
+      use: false,
+      required: false,
+      defaultValue: '',
+      listOrder: ''
+    }
+  }
+
+  return attributeConfig.value[attributeId]
+}
+
+const updateAttributeState = (attributeId, field, value) => {
+  attributeConfig.value[attributeId] = {
+    ...attributeState(attributeId),
+    [field]: value
+  }
+}
+
+const toggleListSelection = (listId, event) => {
+  const checked = event?.target?.checked === true
+  const selected = new Set(form.value.selectedListIds)
+
+  if (checked) {
+    selected.add(listId)
+  } else {
+    selected.delete(listId)
+    if (form.value.preselectedListId === listId) {
+      form.value.preselectedListId = null
+      form.value.noPreselectAnyList = true
+    }
+  }
+
+  form.value.selectedListIds = Array.from(selected).sort((a, b) => a - b)
+}
+
+const toggleNoPreselectAnyList = (event) => {
+  const checked = event?.target?.checked === true
+  if (checked) {
+    form.value.noPreselectAnyList = true
+    form.value.preselectedListId = null
+    return
+  }
+
+  form.value.noPreselectAnyList = form.value.preselectedListId === null
+}
+
+const toggleListPreselection = (listId, event) => {
+  const checked = event?.target?.checked === true
+  form.value.preselectedListId = checked ? listId : null
+  form.value.noPreselectAnyList = form.value.preselectedListId === null
+}
+
+const loadPageDataMap = (items) => {
+  dataMap.value = Object.fromEntries(
+      (items || []).map(({ key, value }) => [key, value])
+  )
+}
+
+const applyLoadedDataToForm = (page = null) => {
+  form.value.title = page?.title || ''
+  form.value.ajaxSuccessText = getDataValue('ajax_subscribeconfirmation', '')
+  form.value.attributes = getDataValue('attributes', '')
+  form.value.button = getDataValue('button', '')
+  form.value.footerText = getDataValue('footer', '')
+  form.value.headerText = getDataValue('header', '')
+  const legacyHtmlChoice = getDataValue('htmlchoice', '').trim().toLowerCase()
+  form.value.htmlChoice = legacyHtmlChoiceOptions.has(legacyHtmlChoice)
+    ? legacyHtmlChoice // todo: check if correct
+    : (parseBoolean(getDataValue('html_email_choice', '1'), true) ? 'checkforhtml' : 'textonly')
+  form.value.introText = getDataValue('intro', '')
+  form.value.languageFile = getDataValue('language_file', 'english.inc')
+  form.value.selectedListIds = parseIdArray(getDataValue('lists', ''))
+  const loadedPreselectedId = Number(getDataValue('preselectlist', ''))
+  form.value.preselectedListId = loadedPreselectedId && form.value.selectedListIds.includes(loadedPreselectedId)
+    ? loadedPreselectedId
+    : null
+  form.value.noPreselectAnyList = form.value.preselectedListId === null
+  form.value.displayListCategories = parseBoolean(getDataValue('showcategories', '1'), true) ? '1' : '0'
+  form.value.thankYouPageText = getDataValue('thankyoupage', '')
+  form.value.title = getDataValue('title', '')
+  form.value.displayEmailConfirmationField = parseBoolean(getDataValue('emaildoubleentry', '0')) ? '1' : '0'
+  form.value.subscribeSubject = getDataValue('subscribesubject', '')
+  form.value.subscribeMessage = getDataValue('subscribemessage', '')
+  form.value.confirmedSubject = getDataValue('confirmationsubject', '')
+  form.value.confirmedMessage = getDataValue('confirmationmessage', '')
+  form.value.unsubscribeSubject = getDataValue('unsubscribesubject', '')
+  form.value.unsubscribeMessage = getDataValue('unsubscribemessage', '')
+
+  const ownerIdFromPage = page?.owner?.id ? String(page.owner.id) : ''
+  form.value.ownerId = getDataValue('owner_id', ownerIdFromPage)
+
+  const pageDataItems = Array.isArray(page?.data) ? page.data : []
+  const config = {}
+  form.value.attributes.split(',').forEach((attributeId) => {
+    const attribute = pageDataItems.find(
+        (attr) => attr.key === `attribute${String(attributeId).padStart(3, '0')}`
+    )
+
+    if (!attribute) {
+      return
+    }
+    const [
+      use = '0',
+      defaultValue = '',
+      listOrder = '',
+      required = '0'
+    ] = attribute.value.split('###')
+
+    config[attributeId] = {
+      use: parseBoolean(use),
+      required: parseBoolean(required),
+      defaultValue,
+      listOrder
+    }
+  })
+
+  attributeConfig.value = config
+}
+
+const loadInitialData = async () => {
+  isLoading.value = true
+
+  try {
+    // fetch language options from vendor package (exposed via internal controller)
+    await loadDefaultLanguageOptions()
+    const [fetchedAdmins, fetchedLists, fetchedAttributes] = await Promise.all([
+      fetchAllAdmins(),
+      fetchAllLists(),
+      fetchAllAttributeDefinitions()
+    ])
+
+    admins.value = fetchedAdmins.sort((a, b) => a.id - b.id)
+    lists.value = fetchedLists.sort((a, b) => a.id - b.id)
+    attributes.value = fetchedAttributes.sort((a, b) => a.id - b.id)
+
+    if (isEditMode.value) {
+      const page = await subscribePagesClient.getSubscribePage(pageId.value)
+      loadPageDataMap(page?.data)
+      applyLoadedDataToForm(page)
+    } else {
+      dataMap.value = {}
+      applyLoadedDataToForm()
+    }
+  } catch (error) {
+    console.error('Failed to load public page editor data:', error)
+    window.alert(error?.message || 'Failed to load data for public page editor.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const serializeIdArray = (ids) => ids
+  .map((id) => Number(id))
+  .filter((id) => Number.isFinite(id) && id > 0)
+  .sort((a, b) => a - b)
+  .join(',')
+
+const persistDataItems = async () => {
+  const selectedListIds = serializeIdArray(form.value.selectedListIds)
+  const selectedListSet = new Set(parseIdArray(selectedListIds))
+  const candidatePreselectedId = form.value.noPreselectAnyList ? null : Number(form.value.preselectedListId)
+  const normalizedPreselectedId = Number.isFinite(candidatePreselectedId) && selectedListSet.has(candidatePreselectedId)
+    ? String(candidatePreselectedId)
+    : ''
+
+  return [
+    ['title', form.value.title],
+    ['language_file', form.value.languageFile],
+    ['intro', form.value.introText],
+    ['header', form.value.headerText],
+    ['footer', form.value.footerText],
+    ['thankyoupage', form.value.thankYouPageText],
+    ['ajax_subscribeconfirmation', form.value.ajaxSuccessText],
+    ['button', form.value.button],
+    ['htmlchoice', form.value.htmlChoice],
+    ['emaildoubleentry', form.value.displayEmailConfirmationField === '1' ? 'yes' : 'no'],
+    ['showcategories', form.value.displayListCategories === '1' ? 'yes' : 'no'],
+    ['lists', selectedListIds],
+    ['preselectlist', normalizedPreselectedId],
+    ['subscribesubject', form.value.subscribeSubject],
+    ['subscribemessage', form.value.subscribeMessage],
+    ['confirmationsubject', form.value.confirmedSubject],
+    ['confirmationmessage', form.value.confirmedMessage],
+    ['unsubscribesubject', form.value.unsubscribeSubject],
+    ['unsubscribemessage', form.value.unsubscribeMessage],
+  ]
+}
+
+const savePage = async () => {
+  const dataItems = (await persistDataItems()).map(([key, value]) => ({
+    key,
+    value
+  }));
+
+  const title = form.value.title.trim()
+  if (!title) {
+    window.alert('Title is required.')
+    return
+  }
+
+  const attributeIds = []
+  attributes.value.forEach((attribute) => {
+    const state = attributeState(attribute.id)
+    if (!state.use) {
+      return
+    }
+
+    attributeIds.push(attribute.id)
+
+    dataItems.push({
+      key: `attribute${String(attribute.id).padStart(3, '0')}`,
+      value: [
+        state.use ? '1' : '',
+        state.defaultValue ?? '',
+        state.listOrder ?? '',
+        state.required ? '1' : ''
+      ].join('###')
+    })
+  })
+
+  dataItems.push({
+    key: 'attributes',
+    value: attributeIds.join(',')
+  })
+
+  isSaving.value = true
+  try {
+    const ownerId = form.value.ownerId ? Number(form.value.ownerId) : null
+    let savedPage
+
+    if (isEditMode.value) {
+      savedPage = await subscribePagesClient.updateSubscribePage(pageId.value, {
+        title,
+        active: true,
+        owner: ownerId,
+        data: dataItems
+      })
+    } else {
+      savedPage = await subscribePagesClient.createSubscribePage({
+        title,
+        active: true,
+        owner: ownerId,
+        data: dataItems
+      })
+    }
+
+    const savedId = Number(savedPage?.id || pageId.value)
+    if (!Number.isFinite(savedId) || savedId <= 0) {
+      throw new Error('Invalid subscribe page id returned from server.')
+    }
+
+    await persistDataItems(savedId)
+
+    if (!isEditMode.value) {
+      await router.replace({
+        name: 'public-page-edit',
+        params: { pageId: savedId },
+        query: {
+          ...route.query,
+          step: String(currentStep.value)
+        }
+      })
+    }
+
+    window.alert('Public page saved.')
+  } catch (error) {
+    console.error('Failed to save public page:', error)
+    window.alert(error?.message || 'Failed to save public page.')
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const goBack = () => {
+  router.push({ name: 'public-pages' })
+}
+
+onMounted(() => {
+  loadInitialData()
+})
+
+watch(
+  () => route.query.step,
+  (stepValue) => {
+    const nextStep = resolveStepFromQuery(stepValue) ?? 1
+    if (nextStep !== currentStep.value) {
+      currentStep.value = nextStep
+    }
+  },
+  { immediate: true }
+)
+
+watch(currentStep, (stepValue) => {
+  const stepQuery = String(stepValue)
+  if (route.query.step === stepQuery) return
+
+  router.replace({
+    query: {
+      ...route.query,
+      step: stepQuery
+    }
+  }).catch(() => {})
+})
+</script>
diff --git a/assets/vue/components/public-pages/PublicPagesDirectory.vue b/assets/vue/components/public-pages/PublicPagesDirectory.vue
new file mode 100644
index 0000000..365a6f4
--- /dev/null
+++ b/assets/vue/components/public-pages/PublicPagesDirectory.vue
@@ -0,0 +1,338 @@
+<template>
+  <section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <header class="p-4 sm:p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <h2 class="text-xl font-bold text-slate-900">Subscribe Pages</h2>
+      <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>
+        Add New Subscribe Page
+      </button>
+    </header>
+
+    <div class="overflow-x-auto">
+      <table class="w-full text-left text-sm hidden md:table">
+        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <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">
+        <template v-for="page in subscribePages" :key="page.id">
+          <tr class="hover:bg-slate-50 transition-colors">
+            <td class="px-6 py-4 text-slate-600">{{ page.id }}</td>
+            <td class="px-6 py-4 font-medium text-slate-900">{{ page.title || `Subscribe page #${page.id}` }}</td>
+            <td class="px-6 py-4 text-slate-700">{{ page.owner?.loginName || page.owner?.email || 'No owner' }}</td>
+            <td class="px-6 py-4">
+              <label class="inline-flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  class="w-4 h-4 text-ext-wf1 border-slate-300 focus:ring-ext-wf2"
+                  :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 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 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 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 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">
+            Loading subscribe pages...
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td colspan="6" class="px-6 py-8 text-center text-red-600">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        <tr v-else-if="subscribePages.length === 0">
+          <td colspan="6" class="px-6 py-8 text-center text-slate-500">
+            No subscribe pages found.
+          </td>
+        </tr>
+        </tbody>
+      </table>
+
+      <div class="block md:hidden divide-y divide-slate-100">
+        <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">#{{ page.id }}</p>
+              <p class="font-semibold text-slate-900">{{ page.title || `Subscribe page #${page.id}` }}</p>
+              <p class="text-xs text-slate-500 mt-1">Owner: {{ page.owner?.loginName || page.owner?.email || 'No owner' }}</p>
+            </div>
+            <div class="text-xs text-slate-500">
+              {{ 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">
+              <input
+                type="radio"
+                class="w-4 h-4 text-ext-wf1 border-slate-300 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">
+              <input
+                type="checkbox"
+                class="w-4 h-4 rounded border-slate-300 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 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 justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-60"
+              :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 justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-60"
+              :disabled="isRowBusy(page.id)"
+              @click="handleDelete(page)"
+            >
+              <BaseIcon name="delete" class="w-3.5 h-3.5" />
+              Delete
+            </button>
+          </div>
+        </article>
+
+        <div
+          v-if="isLoading"
+          class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          Loading subscribe pages...
+        </div>
+
+        <div
+          v-else-if="loadError"
+          class="px-4 py-8 text-center text-red-600 text-sm"
+        >
+          {{ loadError }}
+        </div>
+
+        <div
+          v-else-if="subscribePages.length === 0"
+          class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          No subscribe pages found.
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Requests } from '@tatevikgr/rest-api-client'
+import BaseIcon from '../base/BaseIcon.vue'
+import { subscribePagesClient } from '../../api'
+
+const router = useRouter()
+const subscribePages = ref([])
+const isLoading = ref(false)
+const loadError = ref('')
+const rowBusyState = ref({})
+
+const fetchSubscribePages = async ({ limit = 100, maxPages = 100 } = {}) => {
+  const pages = []
+  let afterId = null
+
+  for (let pageIndex = 0; pageIndex < maxPages; pageIndex += 1) {
+    const response = await subscribePagesClient.getSubscribePages(afterId, limit)
+    const items = Array.isArray(response?.items) ? response.items : []
+    pages.push(...items)
+
+    const hasMore = response?.pagination?.hasMore === true
+    const nextCursor = response?.pagination?.nextCursor
+
+    if (!hasMore || !Number.isFinite(nextCursor) || nextCursor === afterId) {
+      break
+    }
+
+    afterId = nextCursor
+  }
+
+  return pages.sort((a, b) => a.id - b.id)
+}
+
+const loadSubscribePages = async () => {
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    subscribePages.value = await fetchSubscribePages()
+  } catch (error) {
+    console.error('Failed to load subscribe pages:', error)
+    subscribePages.value = []
+    loadError.value = error?.message || 'Failed to load subscribe pages.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const setRowBusy = (id, busy) => {
+  rowBusyState.value = {
+    ...rowBusyState.value,
+    [id]: busy
+  }
+}
+
+const isRowBusy = (id) => !!rowBusyState.value[id]
+
+const withRowTask = async (id, task) => {
+  setRowBusy(id, true)
+  try {
+    await task()
+  } finally {
+    setRowBusy(id, false)
+  }
+}
+
+const handleCreatePage = async () => {
+  await router.push({ name: 'public-page-create' })
+}
+
+const handleEdit = async (page) => {
+  await router.push({ name: 'public-page-edit', params: { pageId: page.id } })
+}
+
+const handleDelete = async (page) => {
+  const confirmed = window.confirm(`Delete subscribe page "${page.title || `#${page.id}`}"?`)
+  if (!confirmed) {
+    return
+  }
+
+  await withRowTask(page.id, async () => {
+    try {
+      await subscribePagesClient.deleteSubscribePage(page.id)
+      await loadSubscribePages()
+    } catch (error) {
+      console.error('Failed to delete subscribe page:', error)
+      window.alert(error?.message || 'Failed to delete subscribe page.')
+    }
+  })
+}
+
+const handleToggleActive = async (page, event) => {
+  const checked = event?.target?.checked === true
+
+  await withRowTask(page.id, async () => {
+    try {
+      await subscribePagesClient.updateSubscribePage(
+        page.id,
+        new Requests.UpdateSubscribePageRequest(page.title || null, checked)
+      )
+      page.active = checked
+    } catch (error) {
+      console.error('Failed to update subscribe page active state:', error)
+      window.alert(error?.message || 'Failed to update active state.')
+    }
+  })
+}
+
+const handleSetDefault = async (targetPage) => {
+  await withRowTask(targetPage.id, async () => {
+    // todo: this should post/put to phplist_config defaultsubscribepage
+  })
+}
+
+const handlePreview = (page) => {
+  const previewUrl = `/subscribe/${page.id}`
+  window.open(previewUrl, '_blank', 'noopener,noreferrer')
+}
+
+onMounted(() => {
+  loadSubscribePages()
+})
+</script>
diff --git a/assets/vue/components/settings/CreateAdminAttributeModal.vue b/assets/vue/components/settings/CreateAdminAttributeModal.vue
new file mode 100644
index 0000000..74cfb5f
--- /dev/null
+++ b/assets/vue/components/settings/CreateAdminAttributeModal.vue
@@ -0,0 +1,144 @@
+<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 shadow-xl">
+        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900">
+            Create Attribute
+          </h2>
+
+          <button
+              class="text-slate-400 hover:text-slate-700"
+              @click="$emit('close')"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form
+            class="p-6 space-y-5"
+            @submit.prevent="submit"
+        >
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-1">
+              Name
+            </label>
+
+            <input
+                v-model="form.name"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ext-wf1"
+                required
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-1">
+              Type
+            </label>
+
+            <select
+                v-model="form.type"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+            >
+              <option value="textline">Text</option>
+              <option value="hidden">Hidden</option>
+
+            </select>
+          </div>
+
+          <label class="flex items-center gap-2">
+            <input
+                type="checkbox"
+                v-model="form.required"
+            >
+
+            <span class="text-sm text-slate-700">
+              Required
+            </span>
+          </label>
+
+          <div
+              v-if="error"
+              class="text-sm text-red-600"
+          >
+            {{ error }}
+          </div>
+
+          <div class="flex justify-end gap-3 pt-2">
+            <button
+                type="button"
+                class="px-4 py-2 rounded-lg border border-slate-300"
+                @click="$emit('close')"
+            >
+              Cancel
+            </button>
+
+            <button
+                class="px-4 py-2 rounded-lg bg-ext-wf1 text-white"
+                :disabled="saving"
+            >
+              {{ saving ? 'Creating...' : 'Create' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+import { adminAttributeClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean
+})
+
+const emit = defineEmits([
+  'close',
+  'created'
+])
+
+const saving = ref(false)
+const error = ref('')
+
+const form = reactive({
+  name: '',
+  type: 'string',
+  required: false
+})
+
+watch(
+    () => props.isOpen,
+    (open) => {
+      if (!open) return
+
+      form.name = ''
+      form.type = 'textline'
+      form.required = false
+      error.value = ''
+    }
+)
+
+const submit = async () => {
+  saving.value = true
+  error.value = ''
+
+  try {
+    await adminAttributeClient.createAttributeDefinition({
+      name: form.name,
+      type: form.type,
+      required: form.required
+    })
+
+    emit('created')
+  } catch (e) {
+    error.value = e?.message || 'Unable to create attribute.'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/settings/CreateAdminModal.vue b/assets/vue/components/settings/CreateAdminModal.vue
new file mode 100644
index 0000000..a50f4d2
--- /dev/null
+++ b/assets/vue/components/settings/CreateAdminModal.vue
@@ -0,0 +1,269 @@
+<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"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+    <form class="mt-4 space-y-4" @submit.prevent="submitCreateAdmin">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+          <div class="flex justify-between items-center">
+            <h3 id="create-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Create New Administrator
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-3.5 h-3.5" />
+            </button>
+          </div>
+
+          <!-- Login Name -->
+          <div>
+            <label for="admin-login-name" class="block text-sm font-medium text-slate-700">Login Name</label>
+            <input
+              id="admin-login-name"
+              v-model.trim="form.login_name"
+              type="text"
+              required
+              minlength="3"
+              maxlength="255"
+              placeholder="admin"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+            <p class="mt-1 text-xs text-slate-500">Minimum 3 characters</p>
+          </div>
+
+          <!-- Email -->
+          <div>
+            <label for="admin-email" class="block text-sm font-medium text-slate-700">Email</label>
+            <input
+              id="admin-email"
+              v-model.trim="form.email"
+              type="email"
+              required
+              placeholder="admin@example.com"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="admin-password" class="block text-sm font-medium text-slate-700">Password</label>
+            <input
+              id="admin-password"
+              v-model="form.password"
+              type="password"
+              required
+              minlength="6"
+              maxlength="255"
+              placeholder="••••••••"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+            <p class="mt-1 text-xs text-slate-500">Minimum 6 characters</p>
+          </div>
+
+          <!-- Super User -->
+          <div class="flex items-center">
+            <input
+              id="admin-super-user"
+              v-model="form.super_user"
+              type="checkbox"
+              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+            >
+            <label for="admin-super-user" class="ml-2 block text-sm text-slate-900">
+              Super User / Full Access
+            </label>
+          </div>
+
+          <!-- Privileges Section -->
+          <div v-if="!form.super_user" class="border-t pt-4">
+            <p class="text-sm font-medium text-slate-700 mb-3">Privileges</p>
+            <div class="space-y-2">
+              <div class="flex items-center">
+                <input
+                  id="priv-subscribers"
+                  v-model="form.privileges.subscribers"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="priv-subscribers" class="ml-2 block text-sm text-slate-700">
+                  Subscribers Management
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="priv-campaigns"
+                  v-model="form.privileges.campaigns"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="priv-campaigns" class="ml-2 block text-sm text-slate-700">
+                  Campaigns Management
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="priv-statistics"
+                  v-model="form.privileges.statistics"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="priv-statistics" class="ml-2 block text-sm text-slate-700">
+                  Statistics Viewing
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="priv-settings"
+                  v-model="form.privileges.settings"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="priv-settings" class="ml-2 block text-sm text-slate-700">
+                  Settings Management
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+        </div>
+
+        <div class="bg-slate-50 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 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
+            @click="close"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</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";
+
+const props = defineProps({
+  isOpen: Boolean
+})
+
+const emit = defineEmits(['close', 'created'])
+
+const isCreating = ref(false)
+const createError = ref('')
+
+const form = ref({
+  login_name: '',
+  email: '',
+  password: '',
+  super_user: false,
+  privileges: {
+    subscribers: false,
+    campaigns: false,
+    statistics: false,
+    settings: false
+  }
+})
+
+const isFormValid = computed(() => {
+  return form.value.login_name.trim().length >= 3 &&
+    form.value.email.trim().length > 0 &&
+    form.value.password.length >= 6 &&
+    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email)
+})
+
+const resetForm = () => {
+  form.value = {
+    login_name: '',
+    email: '',
+    password: '',
+    super_user: false,
+    privileges: {
+      subscribers: false,
+      campaigns: false,
+      statistics: false,
+      settings: false
+    }
+  }
+  createError.value = ''
+}
+
+watch(
+  () => props.isOpen,
+  (isOpen) => {
+    if (isOpen) {
+      resetForm()
+    }
+  }
+)
+
+const close = () => {
+  if (isCreating.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitCreateAdmin = async () => {
+  if (isCreating.value || !isFormValid.value) {
+    return
+  }
+
+  if (!form.value.login_name.trim()) {
+    createError.value = 'Login name is required.'
+    return
+  }
+
+  if (!form.value.email.trim()) {
+    createError.value = 'Email is required.'
+    return
+  }
+
+  if (!form.value.password) {
+    createError.value = 'Password is required.'
+    return
+  }
+
+  isCreating.value = true
+  createError.value = ''
+
+  try {
+    const request = new Requests.CreateAdministratorRequest(
+      form.value.login_name.trim(),
+      form.value.password,
+      form.value.email.trim(),
+      form.value.super_user,
+      form.value.super_user ? undefined : form.value.privileges
+    )
+
+    const createdAdmin = await adminClient.createAdministrator(request)
+    emit('created', createdAdmin)
+    emit('close')
+  } catch (error) {
+    console.error('Create admin failed:', error)
+    createError.value = error?.message || 'Failed to create administrator.'
+  } finally {
+    isCreating.value = false
+  }
+}
+</script>
+
diff --git a/assets/vue/components/settings/CreateSubscriberAttributeModal.vue b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
new file mode 100644
index 0000000..4fd744f
--- /dev/null
+++ b/assets/vue/components/settings/CreateSubscriberAttributeModal.vue
@@ -0,0 +1,243 @@
+<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 shadow-xl">
+        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold">
+            Create Subscriber Attribute
+          </h2>
+
+          <button
+              class="text-slate-500 hover:text-slate-800"
+              @click="close"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form
+            class="p-6 space-y-5"
+            @submit.prevent="submit"
+        >
+          <div>
+            <label class="block mb-1">Name</label>
+
+            <input
+                v-model="form.name"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+                required
+            >
+          </div>
+
+          <div>
+            <label class="block mb-1">Type</label>
+
+            <select
+                v-model="form.type"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+              <option
+                  v-for="type in attributeTypes"
+                  :key="type.value"
+                  :value="type.value"
+              >
+                {{ type.label }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block mb-1">Order</label>
+
+            <input
+                v-model.number="form.order"
+                type="number"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+          </div>
+
+          <div>
+            <label class="block mb-1">Default value</label>
+
+            <input
+                v-model="form.default_value"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+          </div>
+
+          <label class="flex items-center gap-2">
+            <input
+                v-model="form.required"
+                type="checkbox"
+            >
+
+            Required
+          </label>
+
+          <div v-if="supportsOptions">
+            <div class="flex justify-between items-center mb-3">
+              <strong>Options</strong>
+
+              <button
+                  type="button"
+                  class="rounded bg-slate-200 px-3 py-1"
+                  @click="addOption"
+              >
+                Add
+              </button>
+            </div>
+
+            <div class="max-h-64 overflow-y-auto border rounded p-2 space-y-2 pr-2 border-slate-300">
+              <div
+                  v-for="(option, index) in form.options"
+                  :key="index"
+                  class="flex gap-2"
+              >
+                <input
+                    v-model="option.name"
+                    class="flex-1 rounded border border-slate-300 px-3 py-2"
+                    placeholder="Option"
+                >
+
+                <input
+                    v-model.number="option.list_order"
+                    type="number"
+                    class="w-24 rounded border border-slate-300 px-3 py-2"
+                >
+
+                <button
+                    type="button"
+                    class="rounded px-3"
+                    @click="removeOption(index)"
+                >
+                  <BaseIcon name="delete" class="w-4 h-4 cursor-pointer"/>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+              v-if="error"
+              class="text-red-600"
+          >
+            {{ error }}
+          </div>
+
+          <div class="flex justify-end gap-3">
+            <button
+                type="button"
+                class="rounded border px-4 py-2"
+                @click="close"
+            >
+              Cancel
+            </button>
+
+            <button
+                class="rounded bg-ext-wf1 px-4 py-2 text-white"
+                :disabled="saving"
+            >
+              {{ saving ? 'Creating...' : 'Create' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { subscriberAttributesClient } from '../../api';
+import BaseIcon from "../base/BaseIcon.vue";
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+
+const emit = defineEmits([
+  'close',
+  'created',
+]);
+
+const saving = ref(false);
+const error = ref('');
+
+const attributeTypes = [
+  { label: 'Text', value: 'textline' },
+  { label: 'Hidden', value: 'hidden' },
+  { label: 'Credit Card', value: 'creditcardno' },
+  { label: 'Select', value: 'select' },
+  { label: 'Date', value: 'date' },
+  { label: 'Checkbox', value: 'checkbox' },
+  { label: 'Textarea', value: 'textarea' },
+  { label: 'Radio', value: 'radio' },
+  { label: 'Checkbox Group', value: 'checkboxgroup' },
+];
+
+const optionTypes = ['select', 'radio', 'checkboxgroup'];
+
+function newForm() {
+  return {
+    name: '',
+    type: 'textline',
+    order: null,
+    default_value: '',
+    required: false,
+    options: [],
+  };
+}
+
+const form = reactive(newForm());
+
+const supportsOptions = computed(() =>
+    optionTypes.includes(form.type)
+);
+
+watch(
+    () => props.isOpen,
+    (open) => {
+      if (!open) {
+        return;
+      }
+
+      Object.assign(form, newForm());
+      error.value = '';
+    }
+);
+
+function addOption() {
+  form.options.push({
+    name: '',
+    list_order: form.options.length + 1,
+  });
+}
+
+function removeOption(index) {
+  form.options.splice(index, 1);
+}
+
+function close() {
+  emit('close');
+}
+
+async function submit() {
+  saving.value = true;
+  error.value = '';
+
+  try {
+    await subscriberAttributesClient.createAttributeDefinition({
+      ...form,
+      options: JSON.parse(JSON.stringify(form.options)),
+    });
+
+    emit('created');
+    close();
+  } catch (e) {
+    error.value = e?.message || 'Unable to create attribute.';
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
diff --git a/assets/vue/components/settings/EditAdminAttributeModal.vue b/assets/vue/components/settings/EditAdminAttributeModal.vue
new file mode 100644
index 0000000..15f7191
--- /dev/null
+++ b/assets/vue/components/settings/EditAdminAttributeModal.vue
@@ -0,0 +1,148 @@
+<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 shadow-xl">
+        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold text-slate-900">
+            Edit Attribute
+          </h2>
+
+          <button
+              class="text-slate-400 hover:text-slate-700"
+              @click="$emit('close')"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form
+            class="p-6 space-y-5"
+            @submit.prevent="submit"
+        >
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-1">
+              Name
+            </label>
+
+            <input
+                v-model="form.name"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+                required
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-1">
+              Type
+            </label>
+
+            <select
+                v-model="form.type"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2"
+            >
+              <option value="textline">String</option>
+              <option value="hidden">Hidden</option>
+            </select>
+          </div>
+
+          <label class="flex items-center gap-2">
+            <input
+                type="checkbox"
+                v-model="form.required"
+            >
+
+            <span class="text-sm text-slate-700">
+              Required
+            </span>
+          </label>
+
+          <div
+              v-if="error"
+              class="text-red-600 text-sm"
+          >
+            {{ error }}
+          </div>
+
+          <div class="flex justify-end gap-3 pt-2">
+            <button
+                type="button"
+                class="px-4 py-2 rounded-lg border border-slate-300"
+                @click="$emit('close')"
+            >
+              Cancel
+            </button>
+
+            <button
+                class="px-4 py-2 rounded-lg bg-ext-wf1 text-white"
+                :disabled="saving"
+            >
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+import { adminAttributeClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean,
+  attribute: Object
+})
+
+const emit = defineEmits([
+  'close',
+  'updated'
+])
+
+const saving = ref(false)
+const error = ref('')
+
+const form = reactive({
+  name: '',
+  type: 'string',
+  required: false
+})
+
+watch(
+    () => props.attribute,
+    (attribute) => {
+      if (!attribute) return
+
+      form.name = attribute.name
+      form.type = attribute.type
+      form.required = attribute.required
+      error.value = ''
+    },
+    { immediate: true }
+)
+
+const submit = async () => {
+  saving.value = true
+  error.value = ''
+
+  try {
+    await adminAttributeClient.updateAttributeDefinition(
+        props.attribute.id,
+        {
+          name: form.name,
+          type: form.type,
+          required: form.required
+        }
+    )
+
+    emit('updated')
+  } catch (e) {
+    error.value = e?.message || 'Unable to update attribute.'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/settings/EditAdminModal.vue b/assets/vue/components/settings/EditAdminModal.vue
new file mode 100644
index 0000000..f989f61
--- /dev/null
+++ b/assets/vue/components/settings/EditAdminModal.vue
@@ -0,0 +1,275 @@
+<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"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+    <form class="mt-4 space-y-4" @submit.prevent="submitUpdateAdmin">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10 max-h-[90vh] overflow-y-auto">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+          <div class="flex justify-between items-center">
+            <h3 id="edit-admin-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Edit Administrator
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close" aria-label="Close edit administrator modal">
+              <BaseIcon name="close" class="w-3.5 h-3.5" />
+            </button>
+          </div>
+
+          <!-- ID Display -->
+          <div class="bg-slate-50 p-3 rounded-md">
+            <p class="text-xs text-slate-500">Administrator ID</p>
+            <p class="font-mono font-semibold text-slate-900">{{ admin?.id }}</p>
+          </div>
+
+          <!-- Login Name -->
+          <div>
+            <label for="edit-admin-login-name" class="block text-sm font-medium text-slate-700">Login Name</label>
+            <input
+              id="edit-admin-login-name"
+              v-model.trim="form.loginName"
+              type="text"
+              minlength="3"
+              maxlength="255"
+              placeholder="admin"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current value. Minimum 3 characters.</p>
+          </div>
+
+          <!-- Email -->
+          <div>
+            <label for="edit-admin-email" class="block text-sm font-medium text-slate-700">Email</label>
+            <input
+              id="edit-admin-email"
+              v-model.trim="form.email"
+              type="email"
+              placeholder="admin@example.com"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current value.</p>
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="edit-admin-password" class="block text-sm font-medium text-slate-700">Password</label>
+            <input
+              id="edit-admin-password"
+              v-model="form.password"
+              type="password"
+              minlength="6"
+              maxlength="255"
+              placeholder="••••••••"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+            <p class="mt-1 text-xs text-slate-500">Leave empty to keep current password. Minimum 6 characters if setting new password.</p>
+          </div>
+
+          <!-- Super User -->
+          <div class="flex items-center">
+            <input
+              id="edit-admin-super-user"
+              v-model="form.superUser"
+              type="checkbox"
+              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+            >
+            <label for="edit-admin-super-user" class="ml-2 block text-sm text-slate-900">
+              Super User / Full Access
+            </label>
+          </div>
+
+          <!-- Privileges Section -->
+          <div class="border-t pt-4 border-slate-300">
+            <p class="text-sm font-medium text-slate-700 mb-3">Privileges</p>
+            <div class="space-y-2">
+              <div class="flex items-center">
+                <input
+                  id="edit-priv-subscribers"
+                  v-model="form.privileges.subscribers"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="edit-priv-subscribers" class="ml-2 block text-sm text-slate-700">
+                  Subscribers Management
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="edit-priv-campaigns"
+                  v-model="form.privileges.campaigns"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="edit-priv-campaigns" class="ml-2 block text-sm text-slate-700">
+                  Campaigns Management
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="edit-priv-statistics"
+                  v-model="form.privileges.statistics"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="edit-priv-statistics" class="ml-2 block text-sm text-slate-700">
+                  Statistics Viewing
+                </label>
+              </div>
+
+              <div class="flex items-center">
+                <input
+                  id="edit-priv-settings"
+                  v-model="form.privileges.settings"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
+                >
+                <label for="edit-priv-settings" class="ml-2 block text-sm text-slate-700">
+                  Settings Management
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <p v-if="updateError" class="text-sm text-red-600">{{ updateError }}</p>
+        </div>
+
+        <div class="bg-slate-50 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 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors"
+            @click="close"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</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";
+
+const props = defineProps({
+  isOpen: Boolean,
+  admin: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'updated'])
+
+const isUpdating = ref(false)
+const updateError = ref('')
+
+const form = ref({
+  loginName: '',
+  email: '',
+  password: '',
+  superUser: false,
+  privileges: {
+    subscribers: false,
+    campaigns: false,
+    statistics: false,
+    settings: false
+  }
+})
+
+const resetForm = () => {
+  if (props.admin) {
+    form.value = {
+      loginName: props.admin.loginName,
+      email: props.admin.email,
+      password: '',
+      superUser: props.admin.superUser || false,
+      privileges: {
+        subscribers: props.admin.privileges?.subscribers || false,
+        campaigns: props.admin.privileges?.campaigns || false,
+        statistics: props.admin.privileges?.statistics || false,
+        settings: props.admin.privileges?.settings || false
+      }
+    }
+  }
+  updateError.value = ''
+}
+
+watch(
+  () => [props.isOpen, props.admin?.id],
+  ([isOpen]) => {
+      if (isOpen) {
+        resetForm()
+      }
+    },
+    { immediate: true }
+)
+
+const close = () => {
+  if (isUpdating.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitUpdateAdmin = async () => {
+  if (isUpdating.value || !props.admin) {
+    return
+  }
+
+  isUpdating.value = true
+  updateError.value = ''
+
+  try {
+    const updateData = {}
+
+    if (form.value.loginName.trim()) {
+      updateData.loginName = form.value.loginName.trim()
+    }
+
+    if (form.value.email.trim()) {
+      updateData.email = form.value.email.trim()
+    }
+
+    if (form.value.password) {
+      updateData.password = form.value.password
+    }
+
+    updateData.superUser = form.value.superUser
+    updateData.privileges = form.value.privileges
+
+    const request = new Requests.UpdateAdministratorRequest(
+      updateData.loginName,
+      updateData.password,
+      updateData.email,
+      updateData.superUser,
+      updateData.privileges
+    )
+
+    const updatedAdmin = await adminClient.updateAdministrator(props.admin.id, request)
+    emit('updated', updatedAdmin)
+    emit('close')
+  } catch (error) {
+    console.error('Update admin failed:', error)
+    updateError.value = error?.message || 'Failed to update administrator.'
+  } finally {
+    isUpdating.value = false
+  }
+}
+</script>
+
diff --git a/assets/vue/components/settings/EditSubscriberAttributeModal.vue b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
new file mode 100644
index 0000000..9ff79c1
--- /dev/null
+++ b/assets/vue/components/settings/EditSubscriberAttributeModal.vue
@@ -0,0 +1,225 @@
+<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 shadow-xl">
+        <div class="border-b border-slate-200 px-6 py-4 flex justify-between items-center">
+          <h2 class="text-lg font-semibold">
+            Edit Subscriber Attribute
+          </h2>
+
+          <button
+              class="text-slate-500 hover:text-slate-800"
+              @click="close"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form
+            class="p-6 space-y-5"
+            @submit.prevent="save"
+        >
+          <div>
+            <label class="block mb-1">Name</label>
+
+            <input
+                v-model="form.name"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+                required
+            >
+          </div>
+
+          <div>
+            <label class="block mb-1">Type</label>
+
+            <select
+                v-model="form.type"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+              <option
+                  v-for="type in attributeTypes"
+                  :key="type.value"
+                  :value="type.value"
+              >
+                {{ type.label }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block mb-1">Order</label>
+
+            <input
+                v-model.number="form.order"
+                type="number"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+          </div>
+
+          <div>
+            <label class="block mb-1">Default value</label>
+
+            <input
+                v-model="form.default_value"
+                class="w-full rounded border border-slate-300 px-3 py-2"
+            >
+          </div>
+
+          <label class="flex items-center gap-2">
+            <input
+                v-model="form.required"
+                type="checkbox"
+            >
+            Required
+          </label>
+
+          <div v-if="supportsOptions">
+            <div class="flex justify-between items-center mb-3">
+              <strong>Options</strong>
+
+              <button
+                  type="button"
+                  class="rounded bg-slate-200 px-3 py-1"
+                  @click="addOption"
+              >
+                Add
+              </button>
+            </div>
+
+            <div class="max-h-64 overflow-y-auto space-y-2 pr-2 border rounded p-2 border-slate-300">
+              <div v-for="(option, index) in form.options" :key="index" class="flex gap-2">
+                <input v-model="option.name" class="flex-1 rounded border border-slate-300 px-3 py-2" placeholder="Option">
+
+                <input v-model.number="option.list_order" type="number" class="w-24 rounded border border-slate-300 px-3 py-2">
+
+                <button type="button" class="rounded px-3 " @click="removeOption(index)">
+                  <BaseIcon name="delete" class="w-4 h-4 cursor-pointer"/>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div v-if="error" class="text-red-600">
+            {{ error }}
+          </div>
+
+          <div class="flex justify-end gap-3">
+            <button
+                type="button"
+                class="rounded border px-4 py-2"
+                @click="close"
+            >
+              Cancel
+            </button>
+
+            <button
+                class="rounded bg-ext-wf1 px-4 py-2 text-white"
+                :disabled="saving"
+            >
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { subscriberAttributesClient } from '../../api';
+import BaseIcon from "../base/BaseIcon.vue";
+
+const props = defineProps({
+  isOpen: Boolean,
+  attribute: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'close',
+  'updated',
+]);
+
+const saving = ref(false);
+const error = ref('');
+
+const attributeTypes = [
+  { label: 'Text', value: 'textline' },
+  { label: 'Hidden', value: 'hidden' },
+  { label: 'Credit Card', value: 'creditcardno' },
+  { label: 'Select', value: 'select' },
+  { label: 'Date', value: 'date' },
+  { label: 'Checkbox', value: 'checkbox' },
+  { label: 'Textarea', value: 'textarea' },
+  { label: 'Radio', value: 'radio' },
+  { label: 'Checkbox Group', value: 'checkboxgroup' },
+];
+
+const optionTypes = ['select', 'radio', 'checkboxgroup'];
+
+const form = reactive({
+  id: null,
+  name: '',
+  type: 'textline',
+  order: null,
+  default_value: '',
+  required: false,
+  options: [],
+});
+
+const supportsOptions = computed(() =>
+    optionTypes.includes(form.type)
+);
+
+watch(
+    () => props.isOpen,
+    (open) => {
+      if (!open || !props.attribute) {
+        return;
+      }
+
+      Object.assign(form, JSON.parse(JSON.stringify(props.attribute)));
+      error.value = '';
+    },
+    { immediate: true }
+);
+
+function addOption() {
+  form.options.push({
+    name: '',
+    list_order: form.options.length + 1,
+  });
+}
+
+function removeOption(index) {
+  form.options.splice(index, 1);
+}
+
+function close() {
+  emit('close');
+}
+
+async function save() {
+  saving.value = true;
+  error.value = '';
+
+  try {
+    await subscriberAttributesClient.updateAttributeDefinition(
+        form.id,
+        JSON.parse(JSON.stringify(form))
+    );
+
+    emit('updated');
+    close();
+  } catch (e) {
+    error.value = e?.message || 'Unable to update attribute.';
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
diff --git a/assets/vue/components/settings/SettingsActionsPanel.vue b/assets/vue/components/settings/SettingsActionsPanel.vue
new file mode 100644
index 0000000..9fb8eef
--- /dev/null
+++ b/assets/vue/components/settings/SettingsActionsPanel.vue
@@ -0,0 +1,108 @@
+<template>
+  <section class="space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-bold text-slate-900">Settings</h2>
+        <p class="mt-0.5 text-sm text-slate-500">Application configuration and admin management</p>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        type="button"
+        class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap shrink-0"
+        :class="activeTab === tab.id
+          ? 'bg-white text-slate-900 shadow-sm border border-slate-300'
+          : 'text-slate-500 hover:text-slate-700 hover:bg-white/60'"
+        @click="setActiveTab(tab.id)"
+      >
+        <span>{{ tab.label }}</span>
+      </button>
+    </div>
+
+    <template v-if="activeTab === 'configs'">
+      <SettingsConfigs />
+    </template>
+
+    <template v-else-if="activeTab === 'admins'">
+      <SettingsAdmins />
+    </template>
+
+    <template v-else-if="activeTab === 'admin_attributes'">
+      <SettingsAdminAttributes />
+    </template>
+
+    <template v-else-if="activeTab === 'subscriber_attributes'">
+      <SettingsSubscriberAttributes />
+    </template>
+
+    <template v-else>
+      <div class="bg-white rounded-xl border border-slate-200 p-6">
+        <h3 class="text-base font-semibold text-slate-900">{{ currentTabLabel }}</h3>
+        <p class="mt-1 text-sm text-slate-500">This panel is under construction.</p>
+      </div>
+    </template>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import SettingsConfigs from './SettingsConfigs.vue'
+import SettingsAdmins from './SettingsAdmins.vue'
+import SettingsAdminAttributes from './SettingsAdminAttributes.vue'
+import SettingsSubscriberAttributes from "./SettingsSubscriberAttributes.vue";
+
+const tabs = [
+  { id: 'configs', label: 'Configs' },
+  { id: 'admins', label: 'Admins' },
+  { id: 'admin_attributes', label: 'Admin Attributes' },
+  { id: 'subscriber_attributes', label: 'Subscriber Attributes' },
+]
+
+const route = useRoute()
+const router = useRouter()
+
+const defaultTabId = 'configs'
+const tabIds = new Set(tabs.map((tab) => tab.id))
+
+const normalizeTabId = (tabId) => (typeof tabId === 'string' && tabIds.has(tabId) ? tabId : defaultTabId)
+
+const activeTab = ref(normalizeTabId(route.query.tab))
+
+const setActiveTab = (tabId) => {
+  activeTab.value = normalizeTabId(tabId)
+}
+
+watch(
+  () => route.query.tab,
+  (tabId) => {
+    const normalizedTabId = normalizeTabId(tabId)
+    if (activeTab.value !== normalizedTabId) {
+      activeTab.value = normalizedTabId
+    }
+  }
+)
+
+watch(
+  activeTab,
+  (tabId) => {
+    if (route.query.tab === tabId) {
+      return
+    }
+
+    router.replace({
+      query: {
+        ...route.query,
+        tab: tabId,
+      },
+    })
+  },
+  { immediate: true }
+)
+
+const currentTabLabel = computed(() => tabs.find((tab) => tab.id === activeTab.value)?.label || 'Panel')
+</script>
+
diff --git a/assets/vue/components/settings/SettingsAdminAttributes.vue b/assets/vue/components/settings/SettingsAdminAttributes.vue
new file mode 100644
index 0000000..ae39f0f
--- /dev/null
+++ b/assets/vue/components/settings/SettingsAdminAttributes.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+      <div>
+        <h2 class="text-xl font-bold text-slate-900">
+          Admin Attributes
+        </h2>
+
+        <p class="mt-0.5 text-sm text-slate-500">
+          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 text-slate-500 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">
+
+        <tr
+            v-for="attribute in attributes"
+            :key="attribute.id"
+            class="hover:bg-slate-50 transition-colors"
+        >
+          <td class="px-6 py-4 text-slate-600">
+            {{ attribute.id }}
+          </td>
+
+          <td class="px-6 py-4 font-medium text-slate-900">
+            {{ attribute.name }}
+          </td>
+
+          <td class="px-6 py-4 text-slate-600">
+            {{ 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'
+                : 'bg-slate-100 text-slate-600'"
+            >
+              {{ 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 text-slate-700 hover:bg-slate-50"
+                  @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 text-red-600 hover:bg-red-50"
+                  @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">
+            No attributes found.
+          </td>
+        </tr>
+
+        <tr v-if="isLoading">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+            Loading attributes...
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td colspan="5" class="px-6 py-8 text-center text-red-600">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        </tbody>
+      </table>
+
+      <!-- Mobile -->
+
+      <div class="block md:hidden divide-y divide-slate-100">
+
+        <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">
+                #{{ attribute.id }}
+              </p>
+
+              <p class="font-semibold text-slate-900">
+                {{ attribute.name }}
+              </p>
+
+              <p class="text-sm text-slate-500">
+                {{ 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'
+                : 'bg-slate-100 text-slate-600'"
+            >
+              {{ 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 text-slate-700"
+                @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 text-red-600"
+                @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"
+        >
+          Loading attributes...
+        </div>
+
+        <div
+            v-else-if="loadError"
+            class="px-4 py-8 text-center text-red-600"
+        >
+          {{ loadError }}
+        </div>
+
+        <div
+            v-else-if="attributes.length===0"
+            class="px-4 py-8 text-center text-slate-500"
+        >
+          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"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import BaseIcon from '../base/BaseIcon.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>
diff --git a/assets/vue/components/settings/SettingsAdmins.vue b/assets/vue/components/settings/SettingsAdmins.vue
new file mode 100644
index 0000000..bc02460
--- /dev/null
+++ b/assets/vue/components/settings/SettingsAdmins.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+      <div>
+        <h2 class="text-xl font-bold text-slate-900">Administrators</h2>
+        <p class="mt-0.5 text-sm text-slate-500">Manage administrator accounts and permissions</p>
+      </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>
+        Add Admin
+      </button>
+    </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 text-slate-500 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">
+          <tr
+            v-for="admin in admins"
+            :key="admin.id"
+            class="hover:bg-slate-50 transition-colors"
+          >
+            <td class="px-6 py-4 text-slate-600">{{ admin.id }}</td>
+            <td class="px-6 py-4 font-medium text-slate-900">{{ admin.loginName }}</td>
+            <td class="px-6 py-4 text-slate-600">{{ admin.email }}</td>
+            <td class="px-6 py-4">
+              <span
+                class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                :class="admin.superUser ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'"
+              >
+                {{ admin.superUser ? 'Yes' : 'No' }}
+              </span>
+            </td>
+            <td class="px-6 py-4 text-slate-600 text-xs">
+              {{ formatDate(admin.createdAt) }}
+            </td>
+            <td class="px-6 py-4">
+              <div class="flex flex-wrap justify-end gap-2">
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+                  @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 text-red-600 hover:bg-red-50 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">
+              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">
+              Loading administrators...
+            </td>
+          </tr>
+
+          <tr v-else-if="loadError">
+            <td colspan="6" class="px-6 py-8 text-center text-red-600">
+              {{ loadError }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Mobile Card View -->
+      <div class="block md:hidden divide-y divide-slate-100">
+        <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">#{{ admin.id }}</p>
+              <p class="font-semibold text-slate-900">{{ admin.loginName }}</p>
+              <p class="text-sm text-slate-500">{{ admin.email }}</p>
+            </div>
+
+            <span
+              class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+              :class="admin.superUser ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'"
+            >
+              {{ admin.superUser ? 'Super' : 'User' }}
+            </span>
+          </div>
+
+          <p class="text-xs text-slate-500">
+            Created: {{ formatDate(admin.createdAt) }}
+          </p>
+
+          <div class="grid grid-cols-2 gap-2">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
+              @click="handleEdit(admin)"
+            >
+              <BaseIcon name="edit" class="w-3.5 h-3.5" />
+              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-red-200 text-red-600 hover:bg-red-50 transition-colors"
+              @click="handleDelete(admin)"
+            >
+              <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 text-sm">
+          Loading administrators...
+        </div>
+
+        <div v-else-if="loadError" class="px-4 py-8 text-center text-red-600 text-sm">
+          {{ loadError }}
+        </div>
+
+        <div v-else-if="admins.length === 0" class="px-4 py-8 text-center text-slate-500 text-sm">
+          No administrators found. Create one to get started.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Admin Modal -->
+  <CreateAdminModal
+    :is-open="isCreateModalOpen"
+    @close="closeCreateModal"
+    @created="handleAdminCreated"
+  />
+
+  <!-- Edit Admin Modal -->
+  <EditAdminModal
+    :is-open="isEditModalOpen"
+    :admin="selectedAdmin"
+    @close="closeEditModal"
+    @updated="handleAdminUpdated"
+  />
+</template>
+
+<script setup>
+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";
+
+const admins = ref([])
+const isLoading = ref(false)
+const loadError = ref('')
+const isCreateModalOpen = ref(false)
+const selectedAdmin = ref(null)
+const isEditModalOpen = ref(false)
+
+const fetchAdmins = async () => {
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    admins.value = await fetchAllAdmins()
+  } catch (error) {
+    console.error('Failed to fetch administrators:', error)
+    admins.value = []
+    loadError.value = error?.message || 'Failed to load administrators.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchAdmins()
+})
+
+const handleDelete = async (admin) => {
+  const confirmed = window.confirm(
+    `Delete administrator "${admin.loginName}"?\n\nThis action cannot be undone.`
+  )
+
+  if (!confirmed) return
+
+  try {
+    await adminClient.deleteAdministrator(admin.id)
+    await fetchAdmins()
+  } catch (e) {
+    console.error('Delete failed', e)
+    alert('Failed to delete administrator: ' + (e?.message || 'Unknown error'))
+  }
+}
+
+const handleEdit = (admin) => {
+  selectedAdmin.value = admin
+  isEditModalOpen.value = true
+}
+
+const closeEditModal = () => {
+  isEditModalOpen.value = false
+  selectedAdmin.value = null
+}
+
+const handleAdminUpdated = async () => {
+  await fetchAdmins()
+}
+
+const openCreateModal = () => {
+  isCreateModalOpen.value = true
+}
+
+const closeCreateModal = () => {
+  isCreateModalOpen.value = false
+}
+
+const handleAdminCreated = async () => {
+  await fetchAdmins()
+}
+
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+  } catch {
+    return dateString
+  }
+}
+</script>
diff --git a/assets/vue/components/settings/SettingsConfigs.vue b/assets/vue/components/settings/SettingsConfigs.vue
new file mode 100644
index 0000000..5b6be46
--- /dev/null
+++ b/assets/vue/components/settings/SettingsConfigs.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-semibold text-slate-900">Configs</h3>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input
+            v-model="filter"
+            type="search"
+            placeholder="Search keys..."
+            class="rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+          />
+          <button
+            class="px-3 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors"
+            type="button"
+            @click="loadConfigs"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <section class="bg-white rounded-lg border border-slate-200 shadow-sm p-4 mt-4">
+      <div v-if="isLoading" class="text-sm text-slate-500">Loading configuration keys...</div>
+      <div v-else-if="error" class="text-sm text-red-600">{{ error }}</div>
+      <div v-else-if="filtered.length" class="overflow-x-auto">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div v-for="item in filtered" :key="item.key" class="border border-slate-200 rounded-lg p-3">
+            <div class="mb-2">
+              <div class="text-sm font-semibold text-slate-800">
+                {{ item.key }}
+              </div>
+              <div v-if="item.description" class="text-xs text-slate-500">
+                {{ item.description }}
+              </div>
+            </div>
+
+            <input
+                v-model="edited[item.key]"
+                :aria-label="`Value for ${item.key}`"
+                :readonly="!item.editable"
+                :class="['w-full px-2 py-1.5 text-sm rounded border',item.editable ? 'border-slate-300 focus:ring-1 focus:ring-ext-wf1 focus:border-ext-wf1' : 'border-slate-200 bg-slate-100 text-slate-500 cursor-not-allowed']"
+            />
+
+            <div class="flex gap-2 mt-2">
+              <button
+                  class="px-2 py-1 text-xs rounded bg-ext-wf1 text-white disabled:opacity-50"
+                  :disabled="saving[item.key] || !item.editable"
+                  @click="save(item.key)"
+              >
+                {{ saving[item.key] ? '...' : 'Save' }}
+              </button>
+
+              <button class="px-2 py-1 text-xs rounded border border-slate-300" @click="reset(item.key)">
+                Reset
+              </button>
+            </div>
+
+            <p v-if="errors[item.key]" class="text-[11px] text-red-500 mt-1">
+              {{ errors[item.key] }}
+            </p>
+
+            <p v-if="success[item.key]" class="text-[11px] text-green-500 mt-1">
+              {{ success[item.key] }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-else class="text-sm text-slate-500">No configuration keys found.</div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { default as apiClient, configClient } from '../../api'
+
+const configs = ref([])
+const isLoading = ref(false)
+const error = ref('')
+const filter = ref('')
+const edited = ref({})
+const saving = ref({})
+const errors = ref({})
+const success = ref({})
+
+const loadConfigs = async () => {
+  isLoading.value = true
+  error.value = ''
+  try {
+    const response = await configClient.getConfigs()
+    const items = Array.isArray(response?.items) ? response.items : []
+    configs.value = items
+    // initialize edited values
+    const map = {}
+    items.forEach((it) => {
+      map[it.key] = it.value ?? ''
+    })
+    edited.value = map
+  } catch (err) {
+    console.error('Failed to load configs', err)
+    error.value = err?.message || 'Failed to load settings.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const filtered = computed(() => {
+  const q = filter.value.trim().toLowerCase()
+  if (!q) return configs.value
+  return configs.value.filter((c) => (c.key || '').toLowerCase().includes(q))
+})
+
+const save = async (key) => {
+  if (!Object.prototype.hasOwnProperty.call(edited.value, key)) return
+  saving.value = { ...saving.value, [key]: true }
+  errors.value = { ...errors.value, [key]: '' }
+  success.value = { ...success.value, [key]: '' }
+
+  try {
+    const response = await configClient.update(key, edited.value[key])
+    // update local cache: response may be the updated config
+    const idx = configs.value.findIndex((c) => c.key === key)
+    if (idx !== -1) {
+      configs.value[idx] = response || { ...configs.value[idx], value: edited.value[key] }
+    }
+    success.value = { ...success.value, [key]: 'Saved' }
+  } catch (err) {
+    console.error('Failed to save config', key, err)
+    const msg = err?.message || 'Save failed.'
+    errors.value = { ...errors.value, [key]: msg }
+  } finally {
+    saving.value = { ...saving.value, [key]: false }
+    setTimeout(() => {
+      success.value = { ...success.value, [key]: '' }
+      errors.value = { ...errors.value, [key]: '' }
+    }, 3000)
+  }
+}
+
+const reset = (key) => {
+  const original = configs.value.find((c) => c.key === key)
+  if (original) {
+    edited.value = { ...edited.value, [key]: original.value ?? '' }
+  }
+  errors.value = { ...errors.value, [key]: '' }
+  success.value = { ...success.value, [key]: '' }
+}
+
+onMounted(() => {
+  loadConfigs()
+})
+</script>
+
diff --git a/assets/vue/components/settings/SettingsSubscriberAttributes.vue b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
new file mode 100644
index 0000000..30a8cfe
--- /dev/null
+++ b/assets/vue/components/settings/SettingsSubscriberAttributes.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+      <div>
+        <h2 class="text-xl font-bold text-slate-900">
+          Subscriber Attributes
+        </h2>
+
+        <p class="mt-0.5 text-sm text-slate-500">
+          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 text-slate-500 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">
+
+        <tr
+            v-for="attribute in attributes"
+            :key="attribute.id"
+            class="hover:bg-slate-50 transition-colors"
+        >
+          <td class="px-6 py-4 text-slate-600">
+            {{ attribute.id }}
+          </td>
+
+          <td class="px-6 py-4 font-medium text-slate-900">
+            {{ attribute.name }}
+          </td>
+
+          <td class="px-6 py-4 text-slate-600">
+            {{ 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'
+                : 'bg-slate-100 text-slate-600'"
+            >
+              {{ 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 text-slate-700 hover:bg-slate-50"
+                  @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 text-red-600 hover:bg-red-50"
+                  @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">
+            No attributes found.
+          </td>
+        </tr>
+
+        <tr v-if="isLoading">
+          <td colspan="5" class="px-6 py-8 text-center text-slate-500">
+            Loading attributes...
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td colspan="5" class="px-6 py-8 text-center text-red-600">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        </tbody>
+      </table>
+
+      <!-- Mobile -->
+
+      <div class="block md:hidden divide-y divide-slate-100">
+
+        <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">
+                #{{ attribute.id }}
+              </p>
+
+              <p class="font-semibold text-slate-900">
+                {{ attribute.name }}
+              </p>
+
+              <p class="text-sm text-slate-500">
+                {{ 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'
+                : 'bg-slate-100 text-slate-600'"
+            >
+              {{ 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 text-slate-700"
+                @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 text-red-600"
+                @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"
+        >
+          Loading attributes...
+        </div>
+
+        <div
+            v-else-if="loadError"
+            class="px-4 py-8 text-center text-red-600"
+        >
+          {{ loadError }}
+        </div>
+
+        <div
+            v-else-if="attributes.length===0"
+            class="px-4 py-8 text-center text-slate-500"
+        >
+          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"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import BaseIcon from '../base/BaseIcon.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>
diff --git a/assets/vue/components/subscribers/SubscriberDirectory.vue b/assets/vue/components/subscribers/SubscriberDirectory.vue
index 7b3899e..1bfe5ef 100644
--- a/assets/vue/components/subscribers/SubscriberDirectory.vue
+++ b/assets/vue/components/subscribers/SubscriberDirectory.vue
@@ -67,14 +67,14 @@
       </div>
       <div class="flex gap-2 w-full sm:w-auto">
         <button
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
           :disabled="pagination.isFirstPage"
           @click="previousPage"
         >
           Previous
         </button>
         <button
-          class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+          class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
           :disabled="!pagination.hasMore"
           @click="nextPage"
         >
diff --git a/assets/vue/components/subscribers/SubscriberModal.vue b/assets/vue/components/subscribers/SubscriberModal.vue
index a1745a3..8d6c6a7 100644
--- a/assets/vue/components/subscribers/SubscriberModal.vue
+++ b/assets/vue/components/subscribers/SubscriberModal.vue
@@ -10,7 +10,7 @@
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
               <div class="flex justify-between items-center">
                 <h3 class="text-lg leading-6 font-medium text-slate-900" id="modal-title">
-                  Subscriber Details ID: {{ subscriber.id ?? '' }}
+                  Subscriber Details ID: {{ subscriber?.id ?? '' }}
                 </h3>
                 <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
                   <BaseIcon name="close" class="w-5 h-5" />
@@ -39,7 +39,7 @@
                       id="confirmed"
                       v-model="formData.confirmed"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
                     >
                     <label for="confirmed" class="ml-2 block text-sm text-slate-900">
                       Confirmed
@@ -51,7 +51,7 @@
                       id="blacklisted"
                       v-model="formData.blacklisted"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
                     >
                     <label for="blacklisted" class="ml-2 block text-sm text-slate-900">
                       Blacklisted
@@ -63,7 +63,7 @@
                       id="htmlEmail"
                       v-model="formData.htmlEmail"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
                     >
                     <label for="htmlEmail" class="ml-2 block text-sm text-slate-900">
                       HTML Email
@@ -75,7 +75,7 @@
                       id="disabled"
                       v-model="formData.disabled"
                       type="checkbox"
-                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded accent-ext-wf1"
                     >
                     <label for="disabled" class="ml-2 block text-sm text-slate-900">
                       Disabled
@@ -155,15 +155,6 @@ const formData = ref({
   disabled: false
 })
 
-watch(
-  () => [props.isOpen, props.subscriberId],
-  ([isOpen, subscriberId]) => {
-    if (isOpen && subscriberId) {
-      fetchSubscriberDetails()
-    }
-  }
-)
-
 const fetchSubscriberDetails = async () => {
   loading.value = true
   error.value = null
@@ -176,7 +167,7 @@ const fetchSubscriberDetails = async () => {
       confirmed: !!subscriber.value.confirmed,
       blacklisted: !!subscriber.value.blacklisted,
       htmlEmail: !!subscriber.value.htmlEmail,
-      disabled: !!subscriber.value.disabled
+      disabled: !!subscriber.value.disabled,
     }
   } catch (err) {
     error.value = err.message
@@ -202,4 +193,14 @@ const save = async () => {
 const close = () => {
   emit('close')
 }
+
+watch(
+    () => [props.isOpen, props.subscriberId],
+    ([isOpen, subscriberId]) => {
+      if (isOpen && subscriberId) {
+        fetchSubscriberDetails()
+      }
+    },
+    { immediate: true }
+)
 </script>
diff --git a/assets/vue/components/subscribers/SubscriberTable.vue b/assets/vue/components/subscribers/SubscriberTable.vue
index b4919c4..8899b8a 100644
--- a/assets/vue/components/subscribers/SubscriberTable.vue
+++ b/assets/vue/components/subscribers/SubscriberTable.vue
@@ -49,7 +49,7 @@
           <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-200 text-slate-700 hover:bg-slate-50 transition-colors"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
               @click="emit('view', subscriber.id)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
@@ -86,7 +86,7 @@
             </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-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                 @click="emit('view', subscriber.id)"
             >
               <BaseIcon name="eye" class="w-3.5 h-3.5" />
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index 7f623e3..b6e514e 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -4,7 +4,7 @@
       <h2 class="text-xl font-bold text-slate-900">Templates</h2>
       <div class="flex gap-2">
         <button
-          class="px-4 py-2 border border-slate-200 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
+          class="px-4 py-2 border border-slate-300 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
           type="button"
           @click="openDefaultTemplateModal"
         >
@@ -64,7 +64,7 @@
 
             <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-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 transition-colors"
                   type="button"
                   @click="goToEditTemplate(templateItem.id)"
               >
diff --git a/assets/vue/views/AnalyticsView.vue b/assets/vue/views/AnalyticsView.vue
new file mode 100644
index 0000000..025c5a7
--- /dev/null
+++ b/assets/vue/views/AnalyticsView.vue
@@ -0,0 +1,497 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <div
+        v-if="errorMessage"
+        class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        role="alert"
+      >
+        {{ errorMessage }}
+      </div>
+
+      <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <BaseCard v-for="metric in metrics" :key="metric.id" class="h-full">
+          <header class="mb-2 flex items-center gap-3">
+            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600">
+              <BaseIcon :name="metric.icon" />
+            </span>
+            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+              {{ metric.label }}
+            </p>
+          </header>
+          <p class="mb-1 text-2xl font-bold text-slate-900">
+            {{ metric.value }}
+          </p>
+          <p class="text-sm text-slate-500">
+            {{ metric.description }}
+          </p>
+        </BaseCard>
+      </section>
+
+      <section class="grid grid-cols-1 gap-6 xl:grid-cols-3">
+        <BaseCard class="xl:col-span-2">
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Campaign performance</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Top campaigns ranked by unique views and click volume.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(campaignStatistics.length) }} campaigns
+            </p>
+          </header>
+
+          <div v-if="isLoading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            Loading analytics...
+          </div>
+
+          <div v-else-if="hasLoaded && campaignChartItems.length === 0" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            No campaign statistics found.
+          </div>
+
+          <div v-else class="min-h-[260px]">
+            <VueApexCharts
+              type="bar"
+              height="320"
+              :options="campaignChartOptions"
+              :series="campaignChartSeries"
+            />
+          </div>
+        </BaseCard>
+
+        <BaseCard>
+          <header class="mb-4">
+            <h2 class="text-sm font-bold text-slate-900">Domain confirmation</h2>
+            <p class="mt-1 text-xs text-slate-500">
+              Confirmation coverage for the configured sending domain.
+            </p>
+          </header>
+
+          <div v-if="domainConfirmation" class="space-y-4">
+            <div>
+              <p class="text-xs uppercase tracking-wide text-slate-500">Domain</p>
+              <p class="mt-1 break-all text-sm font-semibold text-slate-900">
+                {{ domainConfirmation.domain || 'Unknown domain' }}
+              </p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3 text-sm">
+              <div class="rounded-lg bg-emerald-50 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-emerald-700">Confirmed</p>
+                <p class="mt-1 text-lg font-bold text-emerald-900">
+                  {{ formatCount(domainConfirmation.confirmed) }}
+                </p>
+              </div>
+              <div class="rounded-lg bg-amber-50 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-amber-700">Unconfirmed</p>
+                <p class="mt-1 text-lg font-bold text-amber-900">
+                  {{ formatCount(domainConfirmation.unconfirmed) }}
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <div class="mb-2 flex items-center justify-between text-xs text-slate-500">
+                <span>Confirmation rate</span>
+                <span>{{ formatPercentage(domainConfirmation.confirmationRate) }}</span>
+              </div>
+              <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+                <div
+                  class="h-full rounded-full bg-emerald-500"
+                  :style="{ width: `${clampPercentage(domainConfirmation.confirmationRate)}%` }"
+                />
+              </div>
+            </div>
+
+            <dl class="grid grid-cols-3 gap-3 text-sm">
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Total</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.total) }}</dd>
+              </div>
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Confirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.confirmed) }}</dd>
+              </div>
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Unconfirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.unconfirmed) }}</dd>
+              </div>
+            </dl>
+          </div>
+
+          <div v-else-if="hasLoaded" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            No confirmation data found.
+          </div>
+        </BaseCard>
+      </section>
+
+      <section class="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        <BaseCard>
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Top domains</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Subscriber counts by email domain.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(topDomains.length) }} domains
+            </p>
+          </header>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-sm">
+              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th class="px-4 py-3">Domain</th>
+                  <th class="px-4 py-3 text-right">Subscribers</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-100">
+                <tr v-if="hasLoaded && topDomains.length === 0">
+                  <td colspan="2" class="px-4 py-6 text-center text-slate-500">
+                    No domain statistics found.
+                  </td>
+                </tr>
+                <tr v-for="domain in topDomains" :key="domain.domain">
+                  <td class="px-4 py-3 font-medium text-slate-900">
+                    {{ domain.domain || 'Unknown domain' }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-700">
+                    {{ formatCount(domain.subscribers) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </BaseCard>
+
+        <BaseCard>
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Top local parts</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Most common subscriber usernames.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(topLocalParts.length) }} values
+            </p>
+          </header>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-sm">
+              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th class="px-4 py-3">Local part</th>
+                  <th class="px-4 py-3 text-right">Count</th>
+                  <th class="px-4 py-3 text-right">Share</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-100">
+                <tr v-if="hasLoaded && topLocalParts.length === 0">
+                  <td colspan="3" class="px-4 py-6 text-center text-slate-500">
+                    No local-part statistics found.
+                  </td>
+                </tr>
+                <tr v-for="part in topLocalParts" :key="part.localPart">
+                  <td class="px-4 py-3 font-medium text-slate-900">
+                    {{ part.localPart || 'Unknown' }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-700">
+                    {{ formatCount(part.count) }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-600">
+                    {{ formatPercentage(part.percentage) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </BaseCard>
+      </section>
+
+      <BaseCard>
+        <header class="mb-4 flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-sm font-bold text-slate-900">Campaign breakdown</h2>
+            <p class="mt-1 text-xs text-slate-500">
+              Open and click activity by campaign.
+            </p>
+          </div>
+          <p class="text-xs text-slate-400">
+            {{ formatCount(campaignStatistics.length) }} records
+          </p>
+        </header>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <tr>
+                <th class="px-4 py-3">Campaign</th>
+                <th class="px-4 py-3 text-right">Sent</th>
+                <th class="px-4 py-3 text-right">Views</th>
+                <th class="px-4 py-3 text-right">Open rate</th>
+                <th class="px-4 py-3 text-right">Clicks</th>
+                <th class="px-4 py-3 text-right">Bounce</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              <tr v-if="hasLoaded && campaignStatistics.length === 0">
+                <td colspan="6" class="px-4 py-6 text-center text-slate-500">
+                  No campaign statistics found.
+                </td>
+              </tr>
+              <tr v-for="campaign in campaignStatistics" :key="campaign.campaignId">
+                <td class="px-4 py-3">
+                  <div class="font-medium text-slate-900">
+                    {{ campaign.subject || `Campaign #${campaign.campaignId}` }}
+                  </div>
+                  <div class="mt-1 text-xs text-slate-500">
+                    Sent {{ campaign.dateSent ? formatDate(campaign.dateSent) : 'unknown date' }}
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.sent) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.uniqueViews) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatPercentage(calcRate(campaign.uniqueViews, campaign.sent)) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.totalClicks) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.bounces) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </BaseCard>
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import BaseCard from '../components/base/BaseCard.vue'
+import BaseIcon from '../components/base/BaseIcon.vue'
+import { statisticsClient } from '../api'
+
+const isLoading = ref(false)
+const hasLoaded = ref(false)
+const errorMessage = ref('')
+const campaignStatistics = ref([])
+const viewOpens = ref([])
+const topDomains = ref([])
+const domainConfirmation = ref(null)
+const topLocalParts = ref([])
+
+const formatCount = (value) => new Intl.NumberFormat().format(Number(value) || 0)
+
+const toPercent = (value) => {
+  const numericValue = Number(value) || 0
+  return numericValue <= 1 ? numericValue * 100 : numericValue
+}
+
+const formatPercentage = (value) => `${toPercent(value).toFixed(1)}%`
+
+const clampPercentage = (value) => Math.max(0, Math.min(100, toPercent(value)))
+
+const formatDate = (dateValue) => {
+  if (!dateValue) {
+    return 'Unknown date'
+  }
+
+  let date
+
+  if (typeof dateValue === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateValue)) {
+    const [year, month, day] = dateValue.split('-').map(Number)
+    date = new Date(year, month - 1, day)
+  } else {
+    date = new Date(dateValue)
+  }
+
+  if (Number.isNaN(date.getTime())) {
+    return 'Unknown date'
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  }).format(date)
+}
+
+const calcRate = (numerator, denominator) => {
+  const total = Number(denominator) || 0
+  if (total <= 0) {
+    return 0
+  }
+
+  return ((Number(numerator) || 0) / total) * 100
+}
+
+const averageOpenRate = computed(() => {
+  if (!viewOpens.value.length) {
+    return 0
+  }
+
+  const totalRate = viewOpens.value.reduce((sum, item) => sum + (Number(item.rate) || 0), 0)
+  return totalRate / viewOpens.value.length
+})
+
+const metrics = computed(() => {
+  const totalCampaigns = campaignStatistics.value.length
+  const totalSent = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.sent) || 0), 0)
+  const totalViews = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.uniqueViews) || 0), 0)
+  const totalClicks = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.totalClicks) || 0), 0)
+  const totalBounces = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.bounces) || 0), 0)
+
+  return [
+    {
+      id: 'campaigns',
+      label: 'Campaigns tracked',
+      value: formatCount(totalCampaigns),
+      description: 'Campaign records returned by the analytics service.',
+      icon: 'plane',
+    },
+    {
+      id: 'sent',
+      label: 'Messages sent',
+      value: formatCount(totalSent),
+      description: 'Total messages represented in the campaign stats feed.',
+      icon: 'time',
+    },
+    {
+      id: 'views',
+      label: 'Unique views',
+      value: formatCount(totalViews),
+      description: `Average ${formatPercentage(averageOpenRate.value)} across view-open analytics rows.`,
+      icon: 'rate',
+    },
+    {
+      id: 'clicks',
+      label: 'Total clicks',
+      value: formatCount(totalClicks),
+      description: `Bounces recorded: ${formatCount(totalBounces)}.`,
+      icon: 'chart',
+    },
+  ]
+})
+
+const campaignChartItems = computed(() =>
+  [...campaignStatistics.value]
+    .sort((left, right) => (Number(right.uniqueViews) || 0) - (Number(left.uniqueViews) || 0))
+    .slice(0, 8)
+)
+
+const campaignChartSeries = computed(() => [
+  {
+    name: 'Unique views',
+    data: campaignChartItems.value.map((item) => Number(item.uniqueViews) || 0),
+  },
+  {
+    name: 'Clicks',
+    data: campaignChartItems.value.map((item) => Number(item.totalClicks) || 0),
+  },
+])
+
+const campaignChartOptions = computed(() => ({
+  chart: {
+    type: 'bar',
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    fontFamily: 'inherit',
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: '44%',
+      borderRadius: 4,
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  colors: ['#2563eb', '#10b981'],
+  grid: {
+    borderColor: '#e5e7eb',
+    strokeDashArray: 4,
+  },
+  legend: {
+    show: true,
+    position: 'top',
+    horizontalAlign: 'right',
+    fontSize: '12px',
+  },
+  xaxis: {
+    categories: campaignChartItems.value.map((item) => item.subject || `#${item.campaignId}`),
+    labels: {
+      rotate: -30,
+      trim: true,
+      style: {
+        colors: '#64748b',
+        fontSize: '12px',
+      },
+    },
+  },
+  yaxis: {
+    labels: {
+      style: {
+        colors: '#64748b',
+        fontSize: '12px',
+      },
+      formatter: (value) => Math.round(value).toLocaleString(),
+    },
+  },
+  tooltip: {
+    shared: true,
+    intersect: false,
+    y: {
+      formatter: (value) => new Intl.NumberFormat().format(Number(value) || 0),
+    },
+  },
+}))
+
+const loadAnalytics = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const [
+      campaignResponse,
+      viewOpensResponse,
+      topDomainsResponse,
+      domainConfirmationResponse,
+      topLocalPartsResponse,
+    ] = await Promise.all([
+      statisticsClient.getCampaignStatistics(null, 100),
+      statisticsClient.getStatisticsOfViewOpens(null, 100),
+      statisticsClient.getTopDomains(20, 5),
+      statisticsClient.getDomainConfirmationStatistics(50),
+      statisticsClient.getTopLocalParts(25),
+    ])
+
+    campaignStatistics.value = campaignResponse?.items ?? []
+    viewOpens.value = viewOpensResponse?.items ?? []
+    topDomains.value = topDomainsResponse?.items ?? []
+    domainConfirmation.value = domainConfirmationResponse ?? null
+    topLocalParts.value = topLocalPartsResponse?.items ?? []
+  } catch (error) {
+    errorMessage.value = 'Failed to load analytics.'
+    console.error('Failed to load analytics:', error)
+  } finally {
+    isLoading.value = false
+    hasLoaded.value = true
+  }
+}
+
+onMounted(loadAnalytics)
+</script>
diff --git a/assets/vue/views/CampaignEditView.vue b/assets/vue/views/CampaignEditView.vue
index 7c8efb9..9f39a4c 100644
--- a/assets/vue/views/CampaignEditView.vue
+++ b/assets/vue/views/CampaignEditView.vue
@@ -27,7 +27,7 @@
 
       <div v-else class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
         <div class="border-b border-slate-200 px-4 pt-4 sm:px-6 sm:pt-6">
-          <div class="grid grid-cols-3 gap-2 sm:grid-cols-6">
+          <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
             <button
               v-for="step in steps"
               :key="step.id"
@@ -117,7 +117,7 @@
 
           <section v-else-if="currentStep === 2" class="space-y-5">
             <h3 class="text-2xl font-semibold text-slate-900">Format</h3>
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-[2fr_2fr_1fr]">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-[2fr_2fr_1fr]">
 
               <div>
                 <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-template">Use template</label>
@@ -133,12 +133,12 @@
                 </select>
               </div>
 
-              <div class="sm:justify-self-center justify-self-start">
+              <div class="md:justify-self-center justify-self-start">
                 <label class="mb-1 block text-sm font-medium text-slate-700">
                   Send format
                 </label>
 
-                <div class="flex gap-4">
+                <div class="flex flex-wrap gap-4">
                   <label class="flex items-center gap-2 text-sm text-slate-900">
                     <input type="radio" value="html" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 text-blue-600 focus:ring-blue-500"/>
                     HTML
@@ -156,12 +156,12 @@
                 </div>
               </div>
 
-              <label class="flex items-center gap-2 text-sm text-slate-800 sm:mt-2">
+              <label class="flex items-center gap-2 text-sm text-slate-800 md:mt-2">
                 <input
                   v-model="form.htmlFormated"
                   disabled
                   type="checkbox"
-                  class="h-4 w-4 rounded border-slate-300 text-slate-900"
+                  class="h-4 w-4 rounded border-slate-300 text-slate-900 accent-ext-wf1"
                 >
                 HTML formatted
               </label>
@@ -244,7 +244,7 @@
                   v-model="selectedListIds"
                   type="checkbox"
                   :value="list.id"
-                  class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400"
+                  class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400 accent-ext-wf1"
                 >
                 <span>{{ list.name || `List #${list.id}` }}</span>
               </label>
@@ -331,7 +331,7 @@
         </div>
 
         <div class="border-t border-slate-200 px-4 py-4 sm:px-6">
-          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
             <div class="text-sm">
               <div v-if="saveErrors.length" class="text-red-600">
                 <p class="font-medium">Please fix the following fields:</p>
@@ -343,7 +343,7 @@
               <p v-else-if="saveSuccess" class="text-emerald-700">{{ saveSuccess }}</p>
             </div>
 
-            <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+            <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap lg:justify-end">
               <button
                 type="button"
                 class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
diff --git a/assets/vue/views/DashboardView.vue b/assets/vue/views/DashboardView.vue
index 16dff3d..2ff404c 100644
--- a/assets/vue/views/DashboardView.vue
+++ b/assets/vue/views/DashboardView.vue
@@ -4,6 +4,14 @@
 
     <!-- Main content -->
     <div class="w-full">
+      <div
+        v-if="dashboardError"
+        class="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        role="alert"
+      >
+        {{ dashboardError }}
+      </div>
+
       <!-- KPI Cards -->
       <KpiGrid />
 
@@ -50,6 +58,7 @@ const parseDashboardStats = () => {
 }
 
 const dashboardStats = parseDashboardStats()
+const dashboardError = appElement?.dataset.dashboardError || ''
 
 const chart = dashboardStats.chart || {
   labels: [],
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index 762483f..8842bd1 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -97,7 +97,7 @@
                 <input
                     ref="selectAllCheckbox"
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300"
+                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
                     :checked="allVisibleSelected"
                     :disabled="filteredSubscribers.length === 0"
                     @change="toggleSelectAllVisible"
@@ -129,7 +129,7 @@
                 <input
                     v-model="selectedIds"
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300"
+                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
                     :value="subscriber.id"
                 >
               </td>
@@ -171,7 +171,7 @@
               <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                 <input
                     type="checkbox"
-                    class="w-4 h-4 rounded border-slate-300"
+                    class="w-4 h-4 rounded border-slate-300 accent-ext-wf1"
                     :checked="allVisibleSelected"
                     @change="toggleSelectAllVisible"
                 >
@@ -188,7 +188,7 @@
                 <input
                     v-model="selectedIds"
                     type="checkbox"
-                    class="mt-1 w-4 h-4 rounded border-slate-300"
+                    class="mt-1 w-4 h-4 rounded border-slate-300 accent-ext-wf1"
                     :value="subscriber.id"
                 >
 
@@ -231,7 +231,7 @@
           <div class="flex gap-2 w-full sm:w-auto">
             <button
                 type="button"
-                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
                 :disabled="!canGoPrevious || loading || actionLoading"
                 @click="previousPage"
             >
@@ -239,7 +239,7 @@
             </button>
             <button
                 type="button"
-                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
                 :disabled="!canGoNext || loading || actionLoading"
                 @click="nextPage"
             >
diff --git a/assets/vue/views/PublicPageEditView.vue b/assets/vue/views/PublicPageEditView.vue
new file mode 100644
index 0000000..97116b0
--- /dev/null
+++ b/assets/vue/views/PublicPageEditView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <PublicPageEditor />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import PublicPageEditor from '../components/public-pages/PublicPageEditor.vue'
+</script>
diff --git a/assets/vue/views/PublicPagesView.vue b/assets/vue/views/PublicPagesView.vue
new file mode 100644
index 0000000..bd247ea
--- /dev/null
+++ b/assets/vue/views/PublicPagesView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <PublicPagesDirectory />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import PublicPagesDirectory from '../components/public-pages/PublicPagesDirectory.vue'
+</script>
diff --git a/assets/vue/views/SettingsView.vue b/assets/vue/views/SettingsView.vue
new file mode 100644
index 0000000..7c13671
--- /dev/null
+++ b/assets/vue/views/SettingsView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <SettingsActionsPanel />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import SettingsActionsPanel from '../components/settings/SettingsActionsPanel.vue'
+</script>
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index 7e2b1ba..2ccac85 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -65,7 +65,7 @@
                 <label for="template-text" class="block text-sm font-medium text-slate-700">Text version</label>
                 <button
                   type="button"
-                  class="px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50 text-xs text-slate-700 transition-colors"
+                  class="px-3 py-1.5 border border-slate-300 rounded-lg hover:bg-slate-50 text-xs text-slate-700 transition-colors"
                   @click="populateTextFromContent"
                 >
                   Use HTML as plain text
@@ -98,7 +98,7 @@
                   <input
                     v-model="form.checkLinks"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all links have a full URL
                 </label>
@@ -106,7 +106,7 @@
                   <input
                     v-model="form.checkImages"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all images have a full URL
                 </label>
@@ -114,7 +114,7 @@
                   <input
                     v-model="form.checkExternalImages"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 accent-ext-wf1"
                   >
                   Check that all external images exist
                 </label>
diff --git a/composer.json b/composer.json
index af8f27f..fdfa974 100755
--- a/composer.json
+++ b/composer.json
@@ -19,6 +19,10 @@
         {
             "type": "vcs",
             "url": "https://github.com/tatevikgr/rss-bundle.git"
+        },
+        {
+            "type": "vcs",
+            "url": "https://github.com/phpList/phplist-lan-texts"
         }
     ],
     "minimum-stability": "dev",
@@ -47,11 +51,14 @@
     },
     "require": {
         "php": "^8.1",
-        "phplist/core": "dev-main",
+        "phplist/core": "dev-dev",
         "symfony/twig-bundle": "^6.4",
         "symfony/webpack-encore-bundle": "^2.2",
         "symfony/security-bundle": "^6.4",
-        "tatevikgr/rest-api-client": "dev-main"
+        "tatevikgr/rest-api-client": "dev-dev",
+        "phplist/phplist-lan-texts": "^2021.05",
+        "psr/simple-cache": "^3.0",
+        "ext-fileinfo": "*"
     },
     "require-dev": {
         "phpunit/phpunit": "^9.5",
@@ -91,13 +98,18 @@
             "PhpList\\Core\\Composer\\ScriptHandler::createParametersConfiguration",
             "PhpList\\Core\\Composer\\ScriptHandler::clearAllCaches"
         ],
+        "publish-phplist-texts": [
+            "@php bin/console web-frontend:publish-phplist-texts"
+        ],
         "post-install-cmd": [
             "@create-directories",
-            "@update-configuration"
+            "@update-configuration",
+            "@publish-phplist-texts"
         ],
         "post-update-cmd": [
             "@create-directories",
-            "@update-configuration"
+            "@update-configuration",
+            "@publish-phplist-texts"
         ]
     },
     "extra": {
diff --git a/config/packages/framework.yaml b/config/packages/framework.yaml
index d7dbf70..06ba328 100644
--- a/config/packages/framework.yaml
+++ b/config/packages/framework.yaml
@@ -8,3 +8,9 @@ framework:
         handler_id: null
         cookie_secure: auto
         cookie_samesite: lax
+    translator:
+        default_path: '%kernel.project_dir%/translations'
+        fallbacks:
+            - en
+        providers: ~
+        # Force Symfony to scan our custom public files path via empty files in translations/
diff --git a/config/packages/security.yaml b/config/packages/security.yaml
index 4219501..f10f2a0 100644
--- a/config/packages/security.yaml
+++ b/config/packages/security.yaml
@@ -21,4 +21,6 @@ security:
   access_control:
     - { path: ^/(?:app(?:_test)?\.php/)?login(?:/|$), roles: PUBLIC_ACCESS }
     - { path: ^/(?:app(?:_test)?\.php/)?api/v2(?:/|$), roles: PUBLIC_ACCESS }
+    - { path: ^/(?:app(?:_test)?\.php/)?subscribe(?:/|$), roles: PUBLIC_ACCESS }
+    - { path: ^/(?:app(?:_test)?\.php/)?unsubscribe(?:/|$), roles: PUBLIC_ACCESS }
     - { path: ^/, roles: ROLE_ADMIN }
diff --git a/config/services.yml b/config/services.yml
index 106c9c3..76325ac 100755
--- a/config/services.yml
+++ b/config/services.yml
@@ -8,6 +8,8 @@ services:
     autowire: true
     autoconfigure: true
     public: false
+    bind:
+      $projectDir: '%kernel.project_dir%'
 
   PhpList\WebFrontend\:
     resource: '../src/'
@@ -30,3 +32,12 @@ services:
   PhpList\WebFrontend\EventListener\ApiSessionListener:
     tags:
       - { name: kernel.event_subscriber }
+
+  PhpList\WebFrontend\Service\PhpListTranslationLoader:
+    arguments:
+      $projectDir: '%kernel.project_dir%'
+    tags:
+      - { name: translation.loader, alias: phplist }
+
+  PhpList\WebFrontend\Twig\HtmlCleanupExtension:
+    tags: [ 'twig.extension' ]
diff --git a/openapi.json b/openapi.json
index 722bd8a..11b8f56 100644
--- a/openapi.json
+++ b/openapi.json
@@ -4,7 +4,7 @@
         "title": "phpList API Documentation",
         "description": "This is the OpenAPI documentation for phpList API.",
         "contact": {
-            "email": "support@phplist.com"
+            "email": "tatevik@phplist.com"
         },
         "license": {
             "name": "AGPL-3.0-or-later",
@@ -19,14 +19,14 @@
         }
     ],
     "paths": {
-        "/api/v2/administrators/attributes": {
+        "/api/v2/configs": {
             "get": {
                 "tags": [
-                    "admin-attributes"
+                    "configs"
                 ],
-                "summary": "Gets a list of all admin attribute definitions.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a JSON list of all admin attribute definitions.",
-                "operationId": "68b7d9433a6358436de121484f402e3b",
+                "summary": "Gets all configuration items.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns all configuration items.",
+                "operationId": "8f8a371403a0e0c77c620357231d2415",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -36,29 +36,6 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "after_id",
-                        "in": "query",
-                        "description": "Last id (starting from 0)",
-                        "required": false,
-                        "schema": {
-                            "type": "integer",
-                            "default": 1,
-                            "minimum": 1
-                        }
-                    },
-                    {
-                        "name": "limit",
-                        "in": "query",
-                        "description": "Number of results per page",
-                        "required": false,
-                        "schema": {
-                            "type": "integer",
-                            "default": 25,
-                            "maximum": 100,
-                            "minimum": 1
-                        }
                     }
                 ],
                 "responses": {
@@ -71,7 +48,7 @@
                                         "items": {
                                             "type": "array",
                                             "items": {
-                                                "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                                "$ref": "#/components/schemas/Config"
                                             }
                                         },
                                         "pagination": {
@@ -97,11 +74,11 @@
             },
             "post": {
                 "tags": [
-                    "admin-attributes"
+                    "configs"
                 ],
-                "summary": "Create an admin attribute definition.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created admin attribute definition.",
-                "operationId": "5bee92e632fc1245eba1d29f00558a80",
+                "summary": "Creates a configuration item.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Creates a configuration item.",
+                "operationId": "c767f008e7e0f8c093645a263932800f",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -114,12 +91,12 @@
                     }
                 ],
                 "requestBody": {
-                    "description": "Pass parameters to create admin attribute.",
+                    "description": "Configuration item data",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "$ref": "#/components/schemas/AdminAttributeDefinitionRequest"
+                                "$ref": "#/components/schemas/ConfigRequest"
                             }
                         }
                     }
@@ -130,7 +107,7 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                    "$ref": "#/components/schemas/Config"
                                 }
                             }
                         }
@@ -145,6 +122,16 @@
                             }
                         }
                     },
+                    "409": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/AlreadyExistsResponse"
+                                }
+                            }
+                        }
+                    },
                     "422": {
                         "description": "Failure",
                         "content": {
@@ -158,28 +145,28 @@
                 }
             }
         },
-        "/api/v2/administrators/attributes/{definitionId}": {
+        "/api/v2/configs/{key}": {
             "get": {
                 "tags": [
-                    "admin-attributes"
+                    "configs"
                 ],
-                "summary": "Gets attribute with specified ID.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a single attribute with specified ID.",
-                "operationId": "9e57fc1f6a265beac32eb349f5c730f0",
+                "summary": "Gets a configuration item.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns one configuration item by key.",
+                "operationId": "6e300b7f3a1f48551382d63965d42236",
                 "parameters": [
                     {
-                        "name": "definitionId",
-                        "in": "path",
-                        "description": "Definition ID",
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
                         "required": true,
                         "schema": {
                             "type": "string"
                         }
                     },
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
+                        "name": "key",
+                        "in": "path",
+                        "description": "Configuration key",
                         "required": true,
                         "schema": {
                             "type": "string"
@@ -192,7 +179,7 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                    "$ref": "#/components/schemas/Config"
                                 }
                             }
                         }
@@ -212,13 +199,7 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "properties": {
-                                        "message": {
-                                            "type": "string",
-                                            "example": "There is no attribute with that ID."
-                                        }
-                                    },
-                                    "type": "object"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
@@ -227,25 +208,25 @@
             },
             "put": {
                 "tags": [
-                    "admin-attributes"
+                    "configs"
                 ],
-                "summary": "Update an admin attribute definition.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns updated admin attribute definition.",
-                "operationId": "f9808a1d30aebafde1426e19dae9e8cf",
+                "summary": "Updates a configuration item.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates a configuration item value.",
+                "operationId": "240870a0b6dce4847a5adad676c82e45",
                 "parameters": [
                     {
-                        "name": "definitionId",
-                        "in": "path",
-                        "description": "Definition ID",
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
                         "required": true,
                         "schema": {
                             "type": "string"
                         }
                     },
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
+                        "name": "key",
+                        "in": "path",
+                        "description": "Configuration key",
                         "required": true,
                         "schema": {
                             "type": "string"
@@ -253,12 +234,12 @@
                     }
                 ],
                 "requestBody": {
-                    "description": "Pass parameters to update admin attribute.",
+                    "description": "Configuration item data",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "$ref": "#/components/schemas/AdminAttributeDefinitionRequest"
+                                "$ref": "#/components/schemas/ConfigUpdateRequest"
                             }
                         }
                     }
@@ -269,7 +250,7 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                    "$ref": "#/components/schemas/Config"
                                 }
                             }
                         }
@@ -284,6 +265,16 @@
                             }
                         }
                     },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    },
                     "422": {
                         "description": "Failure",
                         "content": {
@@ -298,11 +289,11 @@
             },
             "delete": {
                 "tags": [
-                    "admin-attributes"
+                    "configs"
                 ],
-                "summary": "Deletes an attribute definition.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Deletes a single admin attribute definition.",
-                "operationId": "5e22c902d069355dd7b6ee6fac9309af",
+                "summary": "Deletes a configuration item.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Deletes a configuration item.",
+                "operationId": "3b07e5ff518395283f31ec4e1ed2d9d7",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -314,9 +305,9 @@
                         }
                     },
                     {
-                        "name": "definitionId",
+                        "name": "key",
                         "in": "path",
-                        "description": "Definition ID",
+                        "description": "Configuration key",
                         "required": true,
                         "schema": {
                             "type": "string"
@@ -324,7 +315,7 @@
                     }
                 ],
                 "responses": {
-                    "200": {
+                    "204": {
                         "description": "Success"
                     },
                     "403": {
@@ -350,40 +341,45 @@
                 }
             }
         },
-        "/api/v2/administrators/{adminId}/attributes/{definitionId}": {
+        "/api/v2/administrators/attributes": {
             "get": {
                 "tags": [
                     "admin-attributes"
                 ],
-                "summary": "Gets admin attribute.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a single attribute.",
-                "operationId": "c78ef2b0910f4e150dbcd2a6cd0ea27e",
+                "summary": "Gets a list of all admin attribute definitions.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a JSON list of all admin attribute definitions.",
+                "operationId": "68b7d9433a6358436de121484f402e3b",
                 "parameters": [
                     {
-                        "name": "definitionId",
-                        "in": "path",
-                        "description": "attribute definition id",
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
                         "required": true,
                         "schema": {
-                            "type": "integer"
+                            "type": "string"
                         }
                     },
                     {
-                        "name": "adminId",
-                        "in": "path",
-                        "description": "Administrator id",
-                        "required": true,
+                        "name": "after_id",
+                        "in": "query",
+                        "description": "Last id (starting from 0)",
+                        "required": false,
                         "schema": {
-                            "type": "integer"
+                            "type": "integer",
+                            "default": 1,
+                            "minimum": 1
                         }
                     },
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
+                        "name": "limit",
+                        "in": "query",
+                        "description": "Number of results per page",
+                        "required": false,
                         "schema": {
-                            "type": "string"
+                            "type": "integer",
+                            "default": 25,
+                            "maximum": 100,
+                            "minimum": 1
                         }
                     }
                 ],
@@ -393,7 +389,18 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/AdminAttributeValue"
+                                    "properties": {
+                                        "items": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                            }
+                                        },
+                                        "pagination": {
+                                            "$ref": "#/components/schemas/CursorPagination"
+                                        }
+                                    },
+                                    "type": "object"
                                 }
                             }
                         }
@@ -407,22 +414,6 @@
                                 }
                             }
                         }
-                    },
-                    "404": {
-                        "description": "Failure",
-                        "content": {
-                            "application/json": {
-                                "schema": {
-                                    "properties": {
-                                        "message": {
-                                            "type": "string",
-                                            "example": "There is no attribute with that ID."
-                                        }
-                                    },
-                                    "type": "object"
-                                }
-                            }
-                        }
                     }
                 }
             },
@@ -430,9 +421,9 @@
                 "tags": [
                     "admin-attributes"
                 ],
-                "summary": "Create/update an admin attribute.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created/updated admin attribute.",
-                "operationId": "3cc645e3d26cc49501ad67adda844712",
+                "summary": "Create an admin attribute definition.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created admin attribute definition.",
+                "operationId": "5bee92e632fc1245eba1d29f00558a80",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -442,24 +433,6 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "definitionId",
-                        "in": "path",
-                        "description": "attribute definition id",
-                        "required": true,
-                        "schema": {
-                            "type": "integer"
-                        }
-                    },
-                    {
-                        "name": "adminId",
-                        "in": "path",
-                        "description": "Administrator id",
-                        "required": true,
-                        "schema": {
-                            "type": "integer"
-                        }
                     }
                 ],
                 "requestBody": {
@@ -468,13 +441,7 @@
                     "content": {
                         "application/json": {
                             "schema": {
-                                "properties": {
-                                    "value": {
-                                        "type": "string",
-                                        "example": "United States"
-                                    }
-                                },
-                                "type": "object"
+                                "$ref": "#/components/schemas/AdminAttributeDefinitionRequest"
                             }
                         }
                     }
@@ -485,7 +452,7 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/AdminAttributeValue"
+                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
                                 }
                             }
                         }
@@ -511,46 +478,46 @@
                         }
                     }
                 }
-            },
-            "delete": {
+            }
+        },
+        "/api/v2/administrators/attributes/{definitionId}": {
+            "get": {
                 "tags": [
                     "admin-attributes"
                 ],
-                "summary": "Deletes an attribute.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Deletes a single admin attribute.",
-                "operationId": "7e8b9cefb17ef3cbb69501820e0d0f6c",
+                "summary": "Gets attribute with specified ID.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a single attribute with specified ID.",
+                "operationId": "9e57fc1f6a265beac32eb349f5c730f0",
                 "parameters": [
-                    {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
                     {
                         "name": "definitionId",
                         "in": "path",
-                        "description": "attribute definition id",
+                        "description": "Definition ID",
                         "required": true,
                         "schema": {
-                            "type": "integer"
+                            "type": "string"
                         }
                     },
                     {
-                        "name": "adminId",
-                        "in": "path",
-                        "description": "Administrator id",
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
                         "required": true,
                         "schema": {
-                            "type": "integer"
+                            "type": "string"
                         }
                     }
                 ],
                 "responses": {
                     "200": {
-                        "description": "Success"
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                }
+                            }
+                        }
                     },
                     "403": {
                         "description": "Failure",
@@ -567,8 +534,363 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
-                                }
+                                    "properties": {
+                                        "message": {
+                                            "type": "string",
+                                            "example": "There is no attribute with that ID."
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "put": {
+                "tags": [
+                    "admin-attributes"
+                ],
+                "summary": "Update an admin attribute definition.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns updated admin attribute definition.",
+                "operationId": "f9808a1d30aebafde1426e19dae9e8cf",
+                "parameters": [
+                    {
+                        "name": "definitionId",
+                        "in": "path",
+                        "description": "Definition ID",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "requestBody": {
+                    "description": "Pass parameters to update admin attribute.",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/AdminAttributeDefinitionRequest"
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/AdminAttributeDefinition"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "422": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "tags": [
+                    "admin-attributes"
+                ],
+                "summary": "Deletes an attribute definition.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Deletes a single admin attribute definition.",
+                "operationId": "5e22c902d069355dd7b6ee6fac9309af",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "definitionId",
+                        "in": "path",
+                        "description": "Definition ID",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success"
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/v2/administrators/{adminId}/attributes/{definitionId}": {
+            "get": {
+                "tags": [
+                    "admin-attributes"
+                ],
+                "summary": "Gets admin attribute.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a single attribute.",
+                "operationId": "c78ef2b0910f4e150dbcd2a6cd0ea27e",
+                "parameters": [
+                    {
+                        "name": "definitionId",
+                        "in": "path",
+                        "description": "attribute definition id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "name": "adminId",
+                        "in": "path",
+                        "description": "Administrator id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/AdminAttributeValue"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "message": {
+                                            "type": "string",
+                                            "example": "There is no attribute with that ID."
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "post": {
+                "tags": [
+                    "admin-attributes"
+                ],
+                "summary": "Create/update an admin attribute.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created/updated admin attribute.",
+                "operationId": "3cc645e3d26cc49501ad67adda844712",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "definitionId",
+                        "in": "path",
+                        "description": "attribute definition id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "name": "adminId",
+                        "in": "path",
+                        "description": "Administrator id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "requestBody": {
+                    "description": "Pass parameters to create admin attribute.",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "properties": {
+                                    "value": {
+                                        "type": "string",
+                                        "example": "United States"
+                                    }
+                                },
+                                "type": "object"
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "201": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/AdminAttributeValue"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "422": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "tags": [
+                    "admin-attributes"
+                ],
+                "summary": "Deletes an attribute.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Deletes a single admin attribute.",
+                "operationId": "7e8b9cefb17ef3cbb69501820e0d0f6c",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "definitionId",
+                        "in": "path",
+                        "description": "attribute definition id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "name": "adminId",
+                        "in": "path",
+                        "description": "Administrator id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success"
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
                             }
                         }
                     }
@@ -1393,10 +1715,18 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "type": "array",
-                                    "items": {
-                                        "$ref": "#/components/schemas/BounceView"
-                                    }
+                                    "properties": {
+                                        "items": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/components/schemas/BounceView"
+                                            }
+                                        },
+                                        "pagination": {
+                                            "$ref": "#/components/schemas/CursorPagination"
+                                        }
+                                    },
+                                    "type": "object"
                                 }
                             }
                         }
@@ -1692,12 +2022,208 @@
                             }
                         }
                     },
-                    "422": {
+                    "422": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/v2/bounces/regex/{ruleId}": {
+            "get": {
+                "tags": [
+                    "bounces"
+                ],
+                "summary": "Get a bounce regex by its ID",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a bounce regex by its ID.",
+                "operationId": "babc8c57b673d026ea5fc6100320d4a6",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "ruleId",
+                        "in": "path",
+                        "description": "Regex ID",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/BounceRegex"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "put": {
+                "tags": [
+                    "bounces"
+                ],
+                "summary": "Update a bounce regex",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates an existing one.",
+                "operationId": "fefed1a3824116daedc42d65b0117230",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "ruleId",
+                        "in": "path",
+                        "description": "regex rule ID",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "requestBody": {
+                    "description": "Update a bounce regex rule.",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/BounceRegexRequest"
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "201": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/BounceRegex"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    },
+                    "422": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "tags": [
+                    "bounces"
+                ],
+                "summary": "Delete a bounce regex by its id",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Delete a bounce regex by its id.",
+                "operationId": "afe7121aa9c6652066ba8ca4e2c07fba",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "ruleId",
+                        "in": "path",
+                        "description": "Regex hash",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "204": {
+                        "description": "Success"
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
@@ -1705,14 +2231,14 @@
                 }
             }
         },
-        "/api/v2/bounces/regex/{ruleId}": {
-            "get": {
+        "/api/v2/campaigns/{messageId}/copy": {
+            "post": {
                 "tags": [
-                    "bounces"
+                    "campaigns"
                 ],
-                "summary": "Get a bounce regex by its ID",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a bounce regex by its ID.",
-                "operationId": "babc8c57b673d026ea5fc6100320d4a6",
+                "summary": "Copies campaign/message by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Copies campaign/message by id into a draft message.",
+                "operationId": "858216f8617f37fd5f4d40d4f84632d0",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -1724,22 +2250,22 @@
                         }
                     },
                     {
-                        "name": "ruleId",
+                        "name": "messageId",
                         "in": "path",
-                        "description": "Regex ID",
+                        "description": "message ID",
                         "required": true,
                         "schema": {
-                            "type": "integer"
+                            "type": "string"
                         }
                     }
                 ],
                 "responses": {
-                    "200": {
+                    "201": {
                         "description": "Success",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/BounceRegex"
+                                    "$ref": "#/components/schemas/Message"
                                 }
                             }
                         }
@@ -1765,14 +2291,16 @@
                         }
                     }
                 }
-            },
-            "put": {
+            }
+        },
+        "/api/v2/campaigns/{messageId}/status": {
+            "patch": {
                 "tags": [
-                    "bounces"
+                    "campaigns"
                 ],
-                "summary": "Update a bounce regex",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates an existing one.",
-                "operationId": "fefed1a3824116daedc42d65b0117230",
+                "summary": "Update campaign status by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates campaign/message status by id.",
+                "operationId": "8b4d780c2f00df2eddca6244cbfc45d8",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -1784,33 +2312,33 @@
                         }
                     },
                     {
-                        "name": "ruleId",
+                        "name": "messageId",
                         "in": "path",
-                        "description": "regex rule ID",
+                        "description": "message ID",
                         "required": true,
                         "schema": {
-                            "type": "integer"
+                            "type": "string"
                         }
                     }
                 ],
                 "requestBody": {
-                    "description": "Update a bounce regex rule.",
+                    "description": "Update message status.",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "$ref": "#/components/schemas/BounceRegexRequest"
+                                "$ref": "#/components/schemas/MessageMetadataRequest"
                             }
                         }
                     }
                 },
                 "responses": {
-                    "201": {
+                    "200": {
                         "description": "Success",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/BounceRegex"
+                                    "$ref": "#/components/schemas/Message"
                                 }
                             }
                         }
@@ -1846,14 +2374,16 @@
                         }
                     }
                 }
-            },
-            "delete": {
+            }
+        },
+        "/api/v2/campaigns/{messageId}/send": {
+            "post": {
                 "tags": [
-                    "bounces"
+                    "campaigns"
                 ],
-                "summary": "Delete a bounce regex by its id",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Delete a bounce regex by its id.",
-                "operationId": "afe7121aa9c6652066ba8ca4e2c07fba",
+                "summary": "Processes/sends campaign/message by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id.",
+                "operationId": "8f1cd9b2882cd23e38fb481096e95658",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -1865,9 +2395,9 @@
                         }
                     },
                     {
-                        "name": "ruleId",
+                        "name": "messageId",
                         "in": "path",
-                        "description": "Regex hash",
+                        "description": "message ID",
                         "required": true,
                         "schema": {
                             "type": "string"
@@ -1875,8 +2405,15 @@
                     }
                 ],
                 "responses": {
-                    "204": {
-                        "description": "Success"
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/Message"
+                                }
+                            }
+                        }
                     },
                     "403": {
                         "description": "Failure",
@@ -1901,14 +2438,14 @@
                 }
             }
         },
-        "/api/v2/campaigns/{messageId}/copy": {
+        "/api/v2/campaigns/{messageId}/resend": {
             "post": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Copies campaign/message by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Copies campaign/message by id into a draft message.",
-                "operationId": "858216f8617f37fd5f4d40d4f84632d0",
+                "summary": "Processes/sends campaign/message by id to lists.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id to specified mailing lists.",
+                "operationId": "e83ae5f0557b149d31889770ae75b36b",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -1929,8 +2466,19 @@
                         }
                     }
                 ],
+                "requestBody": {
+                    "description": "List ids to send this campaign to.",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/ResendMessageToListsRequest"
+                            }
+                        }
+                    }
+                },
                 "responses": {
-                    "201": {
+                    "200": {
                         "description": "Success",
                         "content": {
                             "application/json": {
@@ -1963,14 +2511,14 @@
                 }
             }
         },
-        "/api/v2/campaigns/{messageId}/status": {
-            "patch": {
+        "/api/v2/campaigns/{messageId}/test-send": {
+            "post": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Update campaign status by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates campaign/message status by id.",
-                "operationId": "8b4d780c2f00df2eddca6244cbfc45d8",
+                "summary": "Processes/sends campaign/message by id to specified subscribers.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id to specified subscribers.",
+                "operationId": "6503953d7fcf631b0582053a57d2f2a8",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -1992,12 +2540,12 @@
                     }
                 ],
                 "requestBody": {
-                    "description": "Update message status.",
+                    "description": "Subscribers email to send this campaign to.",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "$ref": "#/components/schemas/MessageMetadataRequest"
+                                "$ref": "#/components/schemas/ResendMessageToListsRequest"
                             }
                         }
                     }
@@ -2032,28 +2580,103 @@
                                 }
                             }
                         }
+                    }
+                }
+            }
+        },
+        "/api/v2/campaigns": {
+            "get": {
+                "tags": [
+                    "campaigns"
+                ],
+                "summary": "Gets a list of all campaigns.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a JSON list of all campaigns/messages.",
+                "operationId": "ea24d861841d2dbccb639a4d2918aebc",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "after_id",
+                        "in": "query",
+                        "description": "Last id (starting from 0)",
+                        "required": false,
+                        "schema": {
+                            "type": "integer",
+                            "default": 1,
+                            "minimum": 1
+                        }
+                    },
+                    {
+                        "name": "limit",
+                        "in": "query",
+                        "description": "Number of results per page",
+                        "required": false,
+                        "schema": {
+                            "type": "integer",
+                            "default": 25,
+                            "maximum": 100,
+                            "minimum": 1
+                        }
+                    },
+                    {
+                        "name": "subject",
+                        "in": "query",
+                        "description": "Filter campaigns by subject (partial match)",
+                        "required": false,
+                        "schema": {
+                            "type": "string",
+                            "maxLength": 50
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "items": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/components/schemas/Message"
+                                            }
+                                        },
+                                        "pagination": {
+                                            "$ref": "#/components/schemas/CursorPagination"
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
                     },
-                    "422": {
+                    "403": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
                                 }
                             }
                         }
                     }
                 }
-            }
-        },
-        "/api/v2/campaigns/{messageId}/send": {
+            },
             "post": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Processes/sends campaign/message by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id.",
-                "operationId": "8f1cd9b2882cd23e38fb481096e95658",
+                "summary": "Create a message for campaign.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created message.",
+                "operationId": "4509477a54e9a738a3ff9ad71f8a7b00",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2063,19 +2686,49 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "messageId",
-                        "in": "path",
-                        "description": "message ID",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
+                    }
+                ],
+                "requestBody": {
+                    "description": "Create a new message.",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "required": [
+                                    "content",
+                                    "format",
+                                    "metadata",
+                                    "schedule",
+                                    "options"
+                                ],
+                                "properties": {
+                                    "template_id": {
+                                        "type": "integer",
+                                        "example": 1
+                                    },
+                                    "content": {
+                                        "$ref": "#/components/schemas/MessageContentRequest"
+                                    },
+                                    "format": {
+                                        "$ref": "#/components/schemas/MessageFormatRequest"
+                                    },
+                                    "metadata": {
+                                        "$ref": "#/components/schemas/MessageMetadataRequest"
+                                    },
+                                    "schedule": {
+                                        "$ref": "#/components/schemas/MessageScheduleRequest"
+                                    },
+                                    "options": {
+                                        "$ref": "#/components/schemas/MessageOptionsRequest"
+                                    }
+                                },
+                                "type": "object"
+                            }
                         }
                     }
-                ],
+                },
                 "responses": {
-                    "200": {
+                    "201": {
                         "description": "Success",
                         "content": {
                             "application/json": {
@@ -2095,12 +2748,12 @@
                             }
                         }
                     },
-                    "404": {
+                    "422": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
@@ -2108,14 +2761,14 @@
                 }
             }
         },
-        "/api/v2/campaigns/{messageId}/resend": {
-            "post": {
+        "/api/v2/campaigns/{messageId}": {
+            "get": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Processes/sends campaign/message by id to lists.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id to specified mailing lists.",
-                "operationId": "e83ae5f0557b149d31889770ae75b36b",
+                "summary": "Gets a campaign by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns campaign/message by id.",
+                "operationId": "f1c98ff78ce3d1ce528257de4ce3da07",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2136,17 +2789,6 @@
                         }
                     }
                 ],
-                "requestBody": {
-                    "description": "List ids to send this campaign to.",
-                    "required": true,
-                    "content": {
-                        "application/json": {
-                            "schema": {
-                                "$ref": "#/components/schemas/ResendMessageToListsRequest"
-                            }
-                        }
-                    }
-                },
                 "responses": {
                     "200": {
                         "description": "Success",
@@ -2179,16 +2821,14 @@
                         }
                     }
                 }
-            }
-        },
-        "/api/v2/campaigns/{messageId}/test-send": {
-            "post": {
+            },
+            "put": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Processes/sends campaign/message by id to specified subscribers.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Processes/sends campaign/message by id to specified subscribers.",
-                "operationId": "6503953d7fcf631b0582053a57d2f2a8",
+                "summary": "Update campaign by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates campaign/message by id.",
+                "operationId": "442ec1af3bc897d7b2daf7d0013ea367",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2210,12 +2850,36 @@
                     }
                 ],
                 "requestBody": {
-                    "description": "Subscribers email to send this campaign to.",
+                    "description": "Update message.",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "$ref": "#/components/schemas/ResendMessageToListsRequest"
+                                "required": [
+                                    "content",
+                                    "format",
+                                    "schedule",
+                                    "options"
+                                ],
+                                "properties": {
+                                    "template_id": {
+                                        "type": "integer",
+                                        "example": 1
+                                    },
+                                    "content": {
+                                        "$ref": "#/components/schemas/MessageContentRequest"
+                                    },
+                                    "format": {
+                                        "$ref": "#/components/schemas/MessageFormatRequest"
+                                    },
+                                    "schedule": {
+                                        "$ref": "#/components/schemas/MessageScheduleRequest"
+                                    },
+                                    "options": {
+                                        "$ref": "#/components/schemas/MessageOptionsRequest"
+                                    }
+                                },
+                                "type": "object"
                             }
                         }
                     }
@@ -2250,103 +2914,26 @@
                                 }
                             }
                         }
-                    }
-                }
-            }
-        },
-        "/api/v2/campaigns": {
-            "get": {
-                "tags": [
-                    "campaigns"
-                ],
-                "summary": "Gets a list of all campaigns.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a JSON list of all campaigns/messages.",
-                "operationId": "ea24d861841d2dbccb639a4d2918aebc",
-                "parameters": [
-                    {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    {
-                        "name": "after_id",
-                        "in": "query",
-                        "description": "Last id (starting from 0)",
-                        "required": false,
-                        "schema": {
-                            "type": "integer",
-                            "default": 1,
-                            "minimum": 1
-                        }
-                    },
-                    {
-                        "name": "limit",
-                        "in": "query",
-                        "description": "Number of results per page",
-                        "required": false,
-                        "schema": {
-                            "type": "integer",
-                            "default": 25,
-                            "maximum": 100,
-                            "minimum": 1
-                        }
-                    },
-                    {
-                        "name": "subject",
-                        "in": "query",
-                        "description": "Filter campaigns by subject (partial match)",
-                        "required": false,
-                        "schema": {
-                            "type": "string",
-                            "maxLength": 50
-                        }
-                    }
-                ],
-                "responses": {
-                    "200": {
-                        "description": "Success",
-                        "content": {
-                            "application/json": {
-                                "schema": {
-                                    "properties": {
-                                        "items": {
-                                            "type": "array",
-                                            "items": {
-                                                "$ref": "#/components/schemas/Message"
-                                            }
-                                        },
-                                        "pagination": {
-                                            "$ref": "#/components/schemas/CursorPagination"
-                                        }
-                                    },
-                                    "type": "object"
-                                }
-                            }
-                        }
                     },
-                    "403": {
+                    "422": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
                     }
                 }
             },
-            "post": {
+            "delete": {
                 "tags": [
                     "campaigns"
                 ],
-                "summary": "Create a message for campaign.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns created message.",
-                "operationId": "4509477a54e9a738a3ff9ad71f8a7b00",
+                "summary": "Delete campaign by id.",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Delete campaign/message by id.",
+                "operationId": "f13a1efd58d8cfb8bc67807adcec2d8e",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2356,49 +2943,19 @@
                         "schema": {
                             "type": "string"
                         }
-                    }
-                ],
-                "requestBody": {
-                    "description": "Create a new message.",
-                    "required": true,
-                    "content": {
-                        "application/json": {
-                            "schema": {
-                                "required": [
-                                    "content",
-                                    "format",
-                                    "metadata",
-                                    "schedule",
-                                    "options"
-                                ],
-                                "properties": {
-                                    "template_id": {
-                                        "type": "integer",
-                                        "example": 1
-                                    },
-                                    "content": {
-                                        "$ref": "#/components/schemas/MessageContentRequest"
-                                    },
-                                    "format": {
-                                        "$ref": "#/components/schemas/MessageFormatRequest"
-                                    },
-                                    "metadata": {
-                                        "$ref": "#/components/schemas/MessageMetadataRequest"
-                                    },
-                                    "schedule": {
-                                        "$ref": "#/components/schemas/MessageScheduleRequest"
-                                    },
-                                    "options": {
-                                        "$ref": "#/components/schemas/MessageOptionsRequest"
-                                    }
-                                },
-                                "type": "object"
-                            }
+                    },
+                    {
+                        "name": "messageId",
+                        "in": "path",
+                        "description": "message ID",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
                         }
                     }
-                },
+                ],
                 "responses": {
-                    "201": {
+                    "200": {
                         "description": "Success",
                         "content": {
                             "application/json": {
@@ -2418,12 +2975,12 @@
                             }
                         }
                     },
-                    "422": {
+                    "404": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
@@ -2431,14 +2988,14 @@
                 }
             }
         },
-        "/api/v2/campaigns/{messageId}": {
+        "/api/v2/editor-uploads": {
             "get": {
                 "tags": [
-                    "campaigns"
+                    "editor-uploads"
                 ],
-                "summary": "Gets a campaign by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns campaign/message by id.",
-                "operationId": "f1c98ff78ce3d1ce528257de4ce3da07",
+                "summary": "List files in upload directory",
+                "description": "Returns a list of files in the requested upload directory.",
+                "operationId": "e7e69f1b4695239ad3301bc61de57862",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2449,29 +3006,78 @@
                             "type": "string"
                         }
                     },
-                    {
-                        "name": "messageId",
-                        "in": "path",
-                        "description": "message ID",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                ],
-                "responses": {
-                    "200": {
-                        "description": "Success",
+                    {
+                        "name": "directory",
+                        "in": "query",
+                        "description": "Upload directory name (e.g., \"uploads\" or \"images\")",
+                        "required": false,
+                        "schema": {
+                            "type": "string",
+                            "default": "uploads"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "files": {
+                                            "type": "array",
+                                            "items": {
+                                                "properties": {
+                                                    "name": {
+                                                        "type": "string",
+                                                        "example": "image.png"
+                                                    },
+                                                    "url": {
+                                                        "type": "string",
+                                                        "example": "https://ex.com/api/v2/editor-uploads/image.png"
+                                                    },
+                                                    "size": {
+                                                        "type": "integer",
+                                                        "example": 12345
+                                                    },
+                                                    "type": {
+                                                        "type": "string",
+                                                        "example": "file"
+                                                    },
+                                                    "modified": {
+                                                        "type": "integer",
+                                                        "example": 1689255600
+                                                    }
+                                                },
+                                                "type": "object"
+                                            }
+                                        },
+                                        "directory": {
+                                            "type": "string",
+                                            "example": "uploads"
+                                        },
+                                        "total": {
+                                            "type": "integer",
+                                            "example": 5
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
+                    },
+                    "400": {
+                        "description": "Bad request - invalid directory",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/Message"
+                                    "$ref": "#/components/schemas/BadRequestResponse"
                                 }
                             }
                         }
                     },
-                    "403": {
-                        "description": "Failure",
+                    "401": {
+                        "description": "Unauthorized",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -2481,7 +3087,7 @@
                         }
                     },
                     "404": {
-                        "description": "Failure",
+                        "description": "Directory not found",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -2492,13 +3098,13 @@
                     }
                 }
             },
-            "put": {
+            "post": {
                 "tags": [
-                    "campaigns"
+                    "editor-uploads"
                 ],
-                "summary": "Update campaign by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Updates campaign/message by id.",
-                "operationId": "442ec1af3bc897d7b2daf7d0013ea367",
+                "summary": "Upload editor asset",
+                "description": "Uploads an editor asset for use in CKEditor.",
+                "operationId": "b6cf7a64f5fccb8f0601331579203dc1",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -2508,45 +3114,23 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "messageId",
-                        "in": "path",
-                        "description": "message ID",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
                     }
                 ],
                 "requestBody": {
-                    "description": "Update message.",
                     "required": true,
                     "content": {
-                        "application/json": {
+                        "multipart/form-data": {
                             "schema": {
-                                "required": [
-                                    "content",
-                                    "format",
-                                    "schedule",
-                                    "options"
-                                ],
                                 "properties": {
-                                    "template_id": {
-                                        "type": "integer",
-                                        "example": 1
-                                    },
-                                    "content": {
-                                        "$ref": "#/components/schemas/MessageContentRequest"
-                                    },
-                                    "format": {
-                                        "$ref": "#/components/schemas/MessageFormatRequest"
-                                    },
-                                    "schedule": {
-                                        "$ref": "#/components/schemas/MessageScheduleRequest"
+                                    "upload": {
+                                        "description": "Asset file to upload",
+                                        "type": "string",
+                                        "format": "binary"
                                     },
-                                    "options": {
-                                        "$ref": "#/components/schemas/MessageOptionsRequest"
+                                    "file": {
+                                        "description": "Alternative asset file field name",
+                                        "type": "string",
+                                        "format": "binary"
                                     }
                                 },
                                 "type": "object"
@@ -2555,18 +3139,28 @@
                     }
                 },
                 "responses": {
-                    "200": {
+                    "201": {
                         "description": "Success",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/Message"
+                                    "$ref": "#/components/schemas/EditorUpload"
                                 }
                             }
                         }
                     },
-                    "403": {
-                        "description": "Failure",
+                    "400": {
+                        "description": "Bad request",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/BadRequestResponse"
+                                }
+                            }
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -2575,49 +3169,42 @@
                             }
                         }
                     },
-                    "404": {
-                        "description": "Failure",
+                    "413": {
+                        "description": "Payload too large",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/GenericErrorResponse"
                                 }
                             }
                         }
                     },
-                    "422": {
-                        "description": "Failure",
+                    "500": {
+                        "description": "Storage failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                    "$ref": "#/components/schemas/GenericErrorResponse"
                                 }
                             }
                         }
                     }
                 }
-            },
-            "delete": {
+            }
+        },
+        "/api/v2/editor-uploads/{filename}": {
+            "get": {
                 "tags": [
-                    "campaigns"
+                    "editor-uploads"
                 ],
-                "summary": "Delete campaign by id.",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Delete campaign/message by id.",
-                "operationId": "f13a1efd58d8cfb8bc67807adcec2d8e",
+                "summary": "Get uploaded image by name",
+                "description": "Returns an uploaded image file by its name.",
+                "operationId": "e6468f87da70512337db720c33725084",
                 "parameters": [
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    {
-                        "name": "messageId",
+                        "name": "filename",
                         "in": "path",
-                        "description": "message ID",
+                        "description": "Name of the uploaded image file",
                         "required": true,
                         "schema": {
                             "type": "string"
@@ -2628,25 +3215,11 @@
                     "200": {
                         "description": "Success",
                         "content": {
-                            "application/json": {
-                                "schema": {
-                                    "$ref": "#/components/schemas/Message"
-                                }
-                            }
-                        }
-                    },
-                    "403": {
-                        "description": "Failure",
-                        "content": {
-                            "application/json": {
-                                "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
-                                }
-                            }
+                            "application/octet-stream": {}
                         }
                     },
                     "404": {
-                        "description": "Failure",
+                        "description": "File not found",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -4059,8 +4632,8 @@
                             }
                         }
                     },
-                    "403": {
-                        "description": "Unauthorized",
+                    "401": {
+                        "description": "Not authenticated",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -4602,27 +5175,182 @@
                         }
                     },
                     {
-                        "name": "listId",
-                        "in": "path",
-                        "description": "List ID",
-                        "required": true,
+                        "name": "listId",
+                        "in": "path",
+                        "description": "List ID",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "emails",
+                        "in": "query",
+                        "description": "emails of subscribers to delete from list.",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "204": {
+                        "description": "Success"
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/v2/lists/{listId}/count": {
+            "get": {
+                "tags": [
+                    "subscriptions"
+                ],
+                "summary": "Gets the total number of subscribers of a list",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a count of all subscribers in a given list.",
+                "operationId": "8be6d0b47d8fd6570b56c7cb3861e2ec",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "listId",
+                        "in": "path",
+                        "description": "List ID",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "subscribers_count": {
+                                            "type": "integer",
+                                            "example": 42
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
+                    },
+                    "403": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/v2/subscribe-pages": {
+            "get": {
+                "tags": [
+                    "subscribe-pages"
+                ],
+                "summary": "Get subscribe pages list",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
+                "operationId": "1a89921fa5f82ce43daf2ca40dc3f954",
+                "parameters": [
+                    {
+                        "name": "php-auth-pw",
+                        "in": "header",
+                        "description": "Session key obtained from login",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "name": "after_id",
+                        "in": "query",
+                        "description": "Last id (starting from 0)",
+                        "required": false,
                         "schema": {
-                            "type": "string"
+                            "type": "integer",
+                            "default": 1,
+                            "minimum": 1
                         }
                     },
                     {
-                        "name": "emails",
+                        "name": "limit",
                         "in": "query",
-                        "description": "emails of subscribers to delete from list.",
-                        "required": true,
+                        "description": "Number of results per page",
+                        "required": false,
                         "schema": {
-                            "type": "string"
+                            "type": "integer",
+                            "default": 25,
+                            "maximum": 100,
+                            "minimum": 1
                         }
                     }
                 ],
                 "responses": {
-                    "204": {
-                        "description": "Success"
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "items": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/components/schemas/SubscribePage"
+                                            }
+                                        },
+                                        "pagination": {
+                                            "$ref": "#/components/schemas/CursorPagination"
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
                     },
                     "403": {
                         "description": "Failure",
@@ -4635,7 +5363,7 @@
                         }
                     },
                     "404": {
-                        "description": "Failure",
+                        "description": "Not Found",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -4645,16 +5373,14 @@
                         }
                     }
                 }
-            }
-        },
-        "/api/v2/lists/{listId}/count": {
-            "get": {
+            },
+            "post": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Gets the total number of subscribers of a list",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production. Returns a count of all subscribers in a given list.",
-                "operationId": "8be6d0b47d8fd6570b56c7cb3861e2ec",
+                "summary": "Create subscribe page",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
+                "operationId": "314286c5d8ef80c845f5dfd2d671bad3",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -4664,30 +5390,49 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "listId",
-                        "in": "path",
-                        "description": "List ID",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
                     }
                 ],
+                "requestBody": {
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "properties": {
+                                    "title": {
+                                        "type": "string"
+                                    },
+                                    "active": {
+                                        "type": "boolean",
+                                        "nullable": true
+                                    },
+                                    "data": {
+                                        "type": "array",
+                                        "items": {
+                                            "properties": {
+                                                "key": {
+                                                    "type": "string"
+                                                },
+                                                "value": {
+                                                    "type": "string"
+                                                }
+                                            },
+                                            "type": "object"
+                                        },
+                                        "nullable": true
+                                    }
+                                },
+                                "type": "object"
+                            }
+                        }
+                    }
+                },
                 "responses": {
-                    "200": {
-                        "description": "Success",
+                    "201": {
+                        "description": "Created",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "properties": {
-                                        "subscribers_count": {
-                                            "type": "integer",
-                                            "example": 42
-                                        }
-                                    },
-                                    "type": "object"
+                                    "$ref": "#/components/schemas/SubscribePage"
                                 }
                             }
                         }
@@ -4702,12 +5447,12 @@
                             }
                         }
                     },
-                    "404": {
-                        "description": "Failure",
+                    "422": {
+                        "description": "Validation failed",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
@@ -4718,7 +5463,7 @@
         "/api/v2/subscribe-pages/{id}": {
             "get": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
                 "summary": "Get subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
@@ -4778,7 +5523,7 @@
             },
             "put": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
                 "summary": "Update subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
@@ -4816,6 +5561,21 @@
                                     "active": {
                                         "type": "boolean",
                                         "nullable": true
+                                    },
+                                    "data": {
+                                        "type": "array",
+                                        "items": {
+                                            "properties": {
+                                                "key": {
+                                                    "type": "string"
+                                                },
+                                                "value": {
+                                                    "type": "string"
+                                                }
+                                            },
+                                            "type": "object"
+                                        },
+                                        "nullable": true
                                     }
                                 },
                                 "type": "object"
@@ -4858,7 +5618,7 @@
             },
             "delete": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
                 "summary": "Delete subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
@@ -4910,98 +5670,58 @@
                 }
             }
         },
-        "/api/v2/subscribe-pages": {
-            "post": {
+        "/api/v2/public/subscribe-pages/{pageId}": {
+            "get": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Create subscribe page",
+                "summary": "Get public subscribe page (placeholders replaced with actual values)",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "314286c5d8ef80c845f5dfd2d671bad3",
+                "operationId": "0ce8d9a7201bd20911aede0e4b62f479",
                 "parameters": [
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
+                        "name": "pageId",
+                        "in": "path",
+                        "description": "Subscribe page ID",
                         "required": true,
                         "schema": {
-                            "type": "string"
+                            "type": "integer"
                         }
                     }
                 ],
-                "requestBody": {
-                    "required": true,
-                    "content": {
-                        "application/json": {
-                            "schema": {
-                                "properties": {
-                                    "title": {
-                                        "type": "string"
-                                    },
-                                    "active": {
-                                        "type": "boolean",
-                                        "nullable": true
-                                    }
-                                },
-                                "type": "object"
-                            }
-                        }
-                    }
-                },
                 "responses": {
-                    "201": {
-                        "description": "Created",
-                        "content": {
-                            "application/json": {
-                                "schema": {
-                                    "$ref": "#/components/schemas/SubscribePage"
-                                }
-                            }
-                        }
-                    },
-                    "403": {
-                        "description": "Failure",
+                    "200": {
+                        "description": "Success",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                    "$ref": "#/components/schemas/SubscribePagePublic"
                                 }
                             }
                         }
                     },
-                    "422": {
-                        "description": "Validation failed",
+                    "404": {
+                        "description": "Not Found",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
                     }
                 }
-            }
-        },
-        "/api/v2/subscribe-pages/{id}/data": {
-            "get": {
+            },
+            "post": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Get subscribe page data",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "ffe22f26936614a0e853e7c44e5a0fca",
+                "summary": "Create subscription",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.Subscribe subscriber to a list from subscribe page.",
+                "operationId": "106ea367d6b2e0925240532f5cf1087c",
                 "parameters": [
                     {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    {
-                        "name": "id",
+                        "name": "pageId",
                         "in": "path",
                         "description": "Subscribe page ID",
                         "required": true,
@@ -5010,73 +5730,63 @@
                         }
                     }
                 ],
+                "requestBody": {
+                    "description": "",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/PublicSubscriptionRequest"
+                            }
+                        }
+                    }
+                },
                 "responses": {
-                    "200": {
-                        "description": "Success",
+                    "204": {
+                        "description": "Success"
+                    },
+                    "400": {
+                        "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "type": "array",
-                                    "items": {
-                                        "properties": {
-                                            "id": {
-                                                "type": "integer"
-                                            },
-                                            "name": {
-                                                "type": "string"
-                                            },
-                                            "data": {
-                                                "type": "string",
-                                                "nullable": true
-                                            }
-                                        },
-                                        "type": "object"
-                                    }
+                                    "$ref": "#/components/schemas/BadRequestResponse"
                                 }
                             }
                         }
                     },
-                    "403": {
+                    "404": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
                     },
-                    "404": {
-                        "description": "Not Found",
+                    "422": {
+                        "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
-                    }
-                }
-            },
-            "put": {
-                "tags": [
-                    "subscriptions"
-                ],
-                "summary": "Set subscribe page data item",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "a71571132947a19d862eac4baf7a98a7",
-                "parameters": [
-                    {
-                        "name": "php-auth-pw",
-                        "in": "header",
-                        "description": "Session key obtained from login",
-                        "required": true,
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
+                    }
+                }
+            },
+            "delete": {
+                "tags": [
+                    "subscribe-pages"
+                ],
+                "summary": "Delete subscription",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.Unsubscribe subscriber from lists of subscribe page.",
+                "operationId": "48751c56d39746c6b8dc3f782a9b22e5",
+                "parameters": [
                     {
-                        "name": "id",
+                        "name": "pageId",
                         "in": "path",
                         "description": "Subscribe page ID",
                         "required": true,
@@ -5086,63 +5796,46 @@
                     }
                 ],
                 "requestBody": {
+                    "description": "",
                     "required": true,
                     "content": {
                         "application/json": {
                             "schema": {
-                                "properties": {
-                                    "name": {
-                                        "type": "string"
-                                    },
-                                    "value": {
-                                        "type": "string",
-                                        "nullable": true
-                                    }
-                                },
-                                "type": "object"
+                                "$ref": "#/components/schemas/PublicUnsubscriptionRequest"
                             }
                         }
                     }
                 },
                 "responses": {
-                    "200": {
-                        "description": "Success",
+                    "204": {
+                        "description": "Success"
+                    },
+                    "400": {
+                        "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "properties": {
-                                        "id": {
-                                            "type": "integer"
-                                        },
-                                        "name": {
-                                            "type": "string"
-                                        },
-                                        "data": {
-                                            "type": "string",
-                                            "nullable": true
-                                        }
-                                    },
-                                    "type": "object"
+                                    "$ref": "#/components/schemas/BadRequestResponse"
                                 }
                             }
                         }
                     },
-                    "403": {
+                    "404": {
                         "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
                                 }
                             }
                         }
                     },
-                    "404": {
-                        "description": "Not Found",
+                    "422": {
+                        "description": "Failure",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
@@ -7071,6 +7764,69 @@
                 },
                 "type": "object"
             },
+            "ConfigRequest": {
+                "required": [
+                    "key",
+                    "value"
+                ],
+                "properties": {
+                    "key": {
+                        "type": "string",
+                        "maxLength": 35,
+                        "example": "organisation_name"
+                    },
+                    "value": {
+                        "type": "string",
+                        "example": "Example Organisation"
+                    },
+                    "editable": {
+                        "type": "boolean",
+                        "example": true
+                    },
+                    "type": {
+                        "type": "string",
+                        "maxLength": 25,
+                        "example": "text",
+                        "nullable": true
+                    }
+                },
+                "type": "object"
+            },
+            "ConfigUpdateRequest": {
+                "required": [
+                    "value"
+                ],
+                "properties": {
+                    "value": {
+                        "type": "string",
+                        "example": "Example Organisation"
+                    }
+                },
+                "type": "object"
+            },
+            "Config": {
+                "properties": {
+                    "key": {
+                        "type": "string",
+                        "example": "organisation_name"
+                    },
+                    "value": {
+                        "type": "string",
+                        "example": "Example Organisation",
+                        "nullable": true
+                    },
+                    "editable": {
+                        "type": "boolean",
+                        "example": true
+                    },
+                    "type": {
+                        "type": "string",
+                        "example": "text",
+                        "nullable": true
+                    }
+                },
+                "type": "object"
+            },
             "AdminAttributeDefinitionRequest": {
                 "required": [
                     "name"
@@ -7709,6 +8465,67 @@
                 },
                 "type": "object"
             },
+            "EditorUpload": {
+                "properties": {
+                    "uploaded": {
+                        "type": "boolean",
+                        "example": true
+                    },
+                    "file_name": {
+                        "type": "string",
+                        "example": "test.png"
+                    },
+                    "url": {
+                        "type": "string",
+                        "example": "https://ex.com/uploads/test.png"
+                    },
+                    "default": {
+                        "type": "string",
+                        "example": "https://ex.com/uploads/test.png"
+                    },
+                    "mime_type": {
+                        "type": "string",
+                        "example": "image/png"
+                    },
+                    "size": {
+                        "type": "integer",
+                        "example": 123456,
+                        "nullable": true
+                    },
+                    "extension": {
+                        "type": "string",
+                        "example": "png"
+                    }
+                },
+                "type": "object",
+                "nullable": true
+            },
+            "FileListingEntry": {
+                "properties": {
+                    "name": {
+                        "type": "string",
+                        "example": "image.png"
+                    },
+                    "url": {
+                        "type": "string",
+                        "example": "https://ex.com/api/v2/editor-uploads/image.png"
+                    },
+                    "size": {
+                        "type": "integer",
+                        "example": 12345
+                    },
+                    "type": {
+                        "type": "string",
+                        "example": "file"
+                    },
+                    "modified": {
+                        "type": "integer",
+                        "example": 1689255600
+                    }
+                },
+                "type": "object",
+                "nullable": true
+            },
             "ForwardRecipientResult": {
                 "properties": {
                     "email": {
@@ -8247,6 +9064,51 @@
                 },
                 "type": "object"
             },
+            "PublicSubscriptionRequest": {
+                "required": [
+                    "email",
+                    "list_id"
+                ],
+                "properties": {
+                    "email": {
+                        "type": "string",
+                        "format": "email",
+                        "example": "lia@example.com"
+                    },
+                    "confirm_email": {
+                        "type": "string",
+                        "format": "email",
+                        "example": "lia@example.com"
+                    },
+                    "list_id": {
+                        "type": "integer",
+                        "example": 1
+                    },
+                    "attributes": {
+                        "type": "object",
+                        "example": {
+                            "firstname": "John",
+                            "lastname": "Grigoryan",
+                            "country": "Armenia"
+                        },
+                        "additionalProperties": true
+                    }
+                },
+                "type": "object"
+            },
+            "PublicUnsubscriptionRequest": {
+                "required": [
+                    "email"
+                ],
+                "properties": {
+                    "email": {
+                        "type": "string",
+                        "format": "email",
+                        "example": "lia@example.com"
+                    }
+                },
+                "type": "object"
+            },
             "SubscriberAttributeDefinitionRequest": {
                 "required": [
                     "name"
@@ -8507,6 +9369,19 @@
                 },
                 "type": "object"
             },
+            "SubscribePageData": {
+                "properties": {
+                    "key": {
+                        "type": "string",
+                        "example": "button"
+                    },
+                    "value": {
+                        "type": "string",
+                        "example": "Subscribe to the selected newsletters"
+                    }
+                },
+                "type": "object"
+            },
             "SubscribePage": {
                 "properties": {
                     "id": {
@@ -8523,6 +9398,106 @@
                     },
                     "owner": {
                         "$ref": "#/components/schemas/Administrator"
+                    },
+                    "data": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/components/schemas/SubscribePageData"
+                        }
+                    }
+                },
+                "type": "object"
+            },
+            "SubscribePagePublic": {
+                "properties": {
+                    "id": {
+                        "type": "integer",
+                        "example": 1
+                    },
+                    "title": {
+                        "type": "string",
+                        "example": "Subscribe to our newsletter"
+                    },
+                    "data": {
+                        "properties": {
+                            "attributes": {
+                                "type": "array",
+                                "items": {
+                                    "properties": {
+                                        "id": {
+                                            "type": "integer"
+                                        },
+                                        "name": {
+                                            "type": "string"
+                                        },
+                                        "type": {
+                                            "type": "string"
+                                        },
+                                        "required": {
+                                            "type": "boolean"
+                                        },
+                                        "default_value": {
+                                            "type": "string",
+                                            "nullable": true
+                                        },
+                                        "list_order": {
+                                            "type": "integer"
+                                        },
+                                        "options": {
+                                            "type": "array",
+                                            "items": {
+                                                "type": "object"
+                                            }
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            },
+                            "lists": {
+                                "type": "array",
+                                "items": {
+                                    "properties": {
+                                        "id": {
+                                            "type": "integer"
+                                        },
+                                        "name": {
+                                            "type": "string"
+                                        },
+                                        "description": {
+                                            "type": "string",
+                                            "nullable": true
+                                        },
+                                        "list_position": {
+                                            "type": "integer"
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        },
+                        "type": "object",
+                        "additionalProperties": {
+                            "oneOf": [
+                                {
+                                    "type": "string"
+                                },
+                                {
+                                    "type": "integer"
+                                },
+                                {
+                                    "type": "boolean"
+                                },
+                                {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "object"
+                                    }
+                                },
+                                {
+                                    "type": "object"
+                                }
+                            ]
+                        }
                     }
                 },
                 "type": "object"
@@ -8738,6 +9713,10 @@
         }
     },
     "tags": [
+        {
+            "name": "configs",
+            "description": "configs"
+        },
         {
             "name": "admin-attributes",
             "description": "admin-attributes"
@@ -8766,6 +9745,10 @@
             "name": "campaigns",
             "description": "campaigns"
         },
+        {
+            "name": "editor-uploads",
+            "description": "editor-uploads"
+        },
         {
             "name": "list-messages",
             "description": "list-messages"
@@ -8790,6 +9773,10 @@
             "name": "subscriptions",
             "description": "subscriptions"
         },
+        {
+            "name": "subscribe-pages",
+            "description": "subscribe-pages"
+        },
         {
             "name": "subscriber-attributes",
             "description": "subscriber-attributes"
@@ -8803,4 +9790,4 @@
             "description": "lists"
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a0bd099..217de08 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,9 @@
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
-    "@vitejs/plugin-vue": "^5.2.4",
     "@symfony/webpack-encore": "^5.1.0",
     "@tailwindcss/postcss": "^4.2.1",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/compiler-sfc": "^3.5.16",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.27",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.1.7",
+    "@tatevikgr/rest-api-client": "^2.1.16",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/src/Command/PublishPhplistTextsCommand.php b/src/Command/PublishPhplistTextsCommand.php
new file mode 100644
index 0000000..8d25d74
--- /dev/null
+++ b/src/Command/PublishPhplistTextsCommand.php
@@ -0,0 +1,104 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Command;
+
+use Composer\InstalledVersions;
+use Exception;
+use PhpList\Core\Core\ApplicationStructure;
+use RuntimeException;
+use Symfony\Component\Console\Attribute\AsCommand;
+use Symfony\Component\Console\Command\Command;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Output\OutputInterface;
+use Symfony\Component\Console\Style\SymfonyStyle;
+use Symfony\Component\Filesystem\Filesystem;
+
+#[AsCommand(
+    name: 'web-frontend:publish-phplist-texts',
+    description: 'Publishes phpList language texts from vendor to public directory.',
+)]
+class PublishPhplistTextsCommand extends Command
+{
+    private string $projectDir;
+    private Filesystem $filesystem;
+
+    public function __construct(string $projectDir)
+    {
+        parent::__construct();
+        $this->projectDir = $projectDir;
+        $this->filesystem = new Filesystem();
+    }
+
+    protected function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $io = new SymfonyStyle($input, $output);
+
+        $sourceDir = $this->resolveTextsSourceDir();
+        $targetDir = $this->resolveTargetDir();
+
+        if ($sourceDir === null || !$this->filesystem->exists($sourceDir)) {
+            $io->error('The phplist-lan-texts package is not installed in the vendor directory.');
+            return Command::FAILURE;
+        }
+
+        try {
+            // Ensure the target directory exists and is clean
+            if ($this->filesystem->exists($targetDir)) {
+                $this->filesystem->remove($targetDir);
+            }
+            $this->filesystem->mkdir($targetDir);
+
+            // Copy all .inc files from vendor to public directory
+            foreach (glob($sourceDir . '/*.inc') as $file) {
+                $filename = basename($file);
+                $this->filesystem->copy($file, $targetDir . '/' . $filename, true);
+            }
+
+            $io->success('phpList translation files successfully published to public/lists/texts/');
+            return Command::SUCCESS;
+        } catch (Exception $e) {
+            $io->error('An error occurred while copying files: ' . $e->getMessage());
+            return Command::FAILURE;
+        }
+    }
+
+    private function resolveTextsSourceDir(): ?string
+    {
+        if (class_exists(InstalledVersions::class) && InstalledVersions::isInstalled('phplist/phplist-lan-texts')) {
+            $installPath = InstalledVersions::getInstallPath('phplist/phplist-lan-texts');
+            if (is_string($installPath) && $installPath !== '') {
+                return $installPath;
+            }
+        }
+
+        $applicationRoot = $this->resolveApplicationRoot();
+        $candidates = [
+            $applicationRoot . '/vendor/phplist/phplist-lan-texts',
+            $this->projectDir . '/vendor/phplist/phplist-lan-texts',
+        ];
+
+        foreach ($candidates as $candidate) {
+            if ($this->filesystem->exists($candidate)) {
+                return $candidate;
+            }
+        }
+
+        return null;
+    }
+
+    private function resolveTargetDir(): string
+    {
+        return $this->resolveApplicationRoot() . '/public/lists/texts';
+    }
+
+    private function resolveApplicationRoot(): string
+    {
+        try {
+            return (new ApplicationStructure())->getApplicationRoot();
+        } catch (RuntimeException) {
+            return $this->projectDir;
+        }
+    }
+}
diff --git a/src/Controller/AnalyticsController.php b/src/Controller/AnalyticsController.php
new file mode 100644
index 0000000..d8486ff
--- /dev/null
+++ b/src/Controller/AnalyticsController.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/analytics', name: 'analytics_')]
+class AnalyticsController extends AbstractController
+{
+    #[Route('/', name: 'list', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Analytics',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/src/Controller/AuthController.php b/src/Controller/AuthController.php
index 1a1408d..00182f5 100755
--- a/src/Controller/AuthController.php
+++ b/src/Controller/AuthController.php
@@ -7,6 +7,9 @@
 use Exception;
 use GuzzleHttp\Exception\GuzzleException;
 use PhpList\RestApiClient\Endpoint\AuthClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\WebFrontend\Trait\RedirectValidationTrait;
 use Psr\Log\LoggerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
@@ -16,6 +19,8 @@
 
 class AuthController extends AbstractController
 {
+    use RedirectValidationTrait;
+
     public function __construct(
         private readonly AuthClient $authClient,
         private readonly LoggerInterface $logger
@@ -25,8 +30,10 @@ public function __construct(
     #[Route('/login', name: 'login', methods: ['GET', 'POST'])]
     public function login(Request $request): Response
     {
+        $redirectTarget = $this->resolveRedirectTarget($request);
+
         if ($request->getSession()->has('auth_token')) {
-            return $this->redirectToRoute('home');
+            return $this->redirectAfterLogin($redirectTarget);
         }
 
         $error = null;
@@ -43,6 +50,7 @@ public function login(Request $request): Response
             if ($username === '' || $password === '') {
                 return $this->render('@PhpListFrontend/auth/login.html.twig', [
                     'error' => 'Username and password are required.',
+                    'redirect' => $redirectTarget,
                 ]);
             }
 
@@ -53,7 +61,7 @@ public function login(Request $request): Response
                 $request->getSession()->set('auth_id', (int) $authData['id']);
                 $request->getSession()->save();
 
-                return $this->redirectToRoute('home');
+                return $this->redirectAfterLogin($redirectTarget);
             } catch (Exception $e) {
                 $error = $e->getCode() === 401 ? 'Invalid credentials: ' . $e->getMessage() : $e->getMessage();
             } catch (GuzzleException $e) {
@@ -63,6 +71,7 @@ public function login(Request $request): Response
 
         return $this->render('@PhpListFrontend/auth/login.html.twig', [
             'error' => $error,
+            'redirect' => $redirectTarget,
         ]);
     }
 
@@ -81,15 +90,44 @@ public function about(): JsonResponse
     {
         try {
             $user = $this->authClient->getSessionUser();
-        } catch (Exception | GuzzleException $e) {
+        } catch (AuthenticationException) {
+            return new JsonResponse(
+                ['error' => 'Unable to load current user.'],
+                401
+            );
+        } catch (ApiException $e) {
             $this->logger->error('Unable to load current user: ' . $e->getMessage());
 
             return new JsonResponse(
                 ['error' => 'Unable to load current user.'],
-                Response::HTTP_SERVICE_UNAVAILABLE
+                Response::HTTP_BAD_GATEWAY
             );
         }
 
         return new JsonResponse($user->toArray());
     }
+
+    private function redirectAfterLogin(?string $redirectTarget): Response
+    {
+        if ($redirectTarget !== null) {
+            return $this->redirect($redirectTarget);
+        }
+
+        return $this->redirectToRoute('home');
+    }
+
+    private function resolveRedirectTarget(Request $request): ?string
+    {
+        $redirectTarget = $request->get('redirect');
+        if (!is_string($redirectTarget)) {
+            return null;
+        }
+
+        $redirectTarget = trim($redirectTarget);
+        if ($redirectTarget === '') {
+            return null;
+        }
+
+        return $this->isSafeRedirectTarget($redirectTarget) ? $redirectTarget : null;
+    }
 }
diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php
new file mode 100644
index 0000000..142ad6f
--- /dev/null
+++ b/src/Controller/BaseController.php
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\RestApiClient\Endpoint\AuthClient;
+use PhpList\RestApiClient\Entity\Administrator;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+
+class BaseController extends AbstractController
+{
+    public function __construct(
+        protected AuthClient $authClient,
+    ) {
+    }
+
+    protected function getAdmin(): ?Administrator
+    {
+        try {
+            $admin = $this->authClient->getSessionUser();
+        } catch (ApiException | AuthenticationException | AuthorizationException) {
+            // Best-effort context: knowing whether an admin is viewing is optional, so any
+            // failure (including an upstream ApiException) degrades to "anonymous visitor"
+            // rather than breaking public pages. Callers that need the API result to succeed
+            // must not rely on this method.
+            $admin = null;
+        }
+
+        return $admin;
+    }
+}
diff --git a/src/Controller/DashboardController.php b/src/Controller/DashboardController.php
index ac9ee6e..aea6970 100755
--- a/src/Controller/DashboardController.php
+++ b/src/Controller/DashboardController.php
@@ -4,6 +4,7 @@
 
 namespace PhpList\WebFrontend\Controller;
 
+use PhpList\RestApiClient\Exception\AuthorizationException;
 use PhpList\RestApiClient\Endpoint\StatisticsClient;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -19,7 +20,27 @@ public function __construct(private readonly StatisticsClient $statisticsClient)
     #[Route('/', name: 'home', methods: ['GET'])]
     public function index(Request $request): Response
     {
-        $stats = $this->statisticsClient->getDashboardStats();
+        $dashboardStats = [];
+        $dashboardError = null;
+
+        try {
+            $stats = $this->statisticsClient->getDashboardStats();
+            $dashboardStats = $this->buildDashboardStats($stats);
+        } catch (AuthorizationException $e) {
+            $dashboardError = $e->getMessage() ?: 'Unable to load dashboard statistics.';
+        }
+
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Dashboard',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+            'dashboard_stats' => $dashboardStats,
+            'dashboard_error' => $dashboardError,
+        ]);
+    }
+
+    private function buildDashboardStats(object $stats): array
+    {
         $recentCampaigns = [];
         foreach ($stats->recentCampaigns as $campaign) {
             $recentCampaigns[] = [
@@ -40,36 +61,31 @@ public function index(Request $request): Response
             $chartClicks[] = $point->clicks;
         }
 
-        return $this->render('@PhpListFrontend/spa.html.twig', [
-            'page' => 'Dashboard',
-            'api_token' => $request->getSession()->get('auth_token'),
-            'api_base_url' => $this->getParameter('api_base_url'),
-            'dashboard_stats' => [
-                'total_subscribers' => [
-                    'value' => $stats->totalSubscribers->value,
-                    'change_vs_last_month' => $stats->totalSubscribers->changeVsLastMonth,
-                ],
-                'active_campaigns' => [
-                    'value' => $stats->activeCampaigns->value,
-                    'change_vs_last_month' => $stats->activeCampaigns->changeVsLastMonth,
-                ],
-                'open_rate' => [
-                    'value' => $stats->openRate->value,
-                    'change_vs_last_month' => $stats->openRate->changeVsLastMonth,
-                ],
-                'bounce_rate' => [
-                    'value' => $stats->bounceRate->value,
-                    'change_vs_last_month' => $stats->bounceRate->changeVsLastMonth,
-                ],
-                'recent_campaigns' => $recentCampaigns,
-                'chart' => [
-                    'labels' => $chartLabels,
-                    'series' => [
-                        ['name' => 'Opens', 'data' => $chartOpens],
-                        ['name' => 'Clicks', 'data' => $chartClicks],
-                    ],
+        return [
+            'total_subscribers' => [
+                'value' => $stats->totalSubscribers->value,
+                'change_vs_last_month' => $stats->totalSubscribers->changeVsLastMonth,
+            ],
+            'active_campaigns' => [
+                'value' => $stats->activeCampaigns->value,
+                'change_vs_last_month' => $stats->activeCampaigns->changeVsLastMonth,
+            ],
+            'open_rate' => [
+                'value' => $stats->openRate->value,
+                'change_vs_last_month' => $stats->openRate->changeVsLastMonth,
+            ],
+            'bounce_rate' => [
+                'value' => $stats->bounceRate->value,
+                'change_vs_last_month' => $stats->bounceRate->changeVsLastMonth,
+            ],
+            'recent_campaigns' => $recentCampaigns,
+            'chart' => [
+                'labels' => $chartLabels,
+                'series' => [
+                    ['name' => 'Opens', 'data' => $chartOpens],
+                    ['name' => 'Clicks', 'data' => $chartClicks],
                 ],
             ],
-        ]);
+        ];
     }
 }
diff --git a/src/Controller/EditorUploadController.php b/src/Controller/EditorUploadController.php
new file mode 100644
index 0000000..743d9d7
--- /dev/null
+++ b/src/Controller/EditorUploadController.php
@@ -0,0 +1,72 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+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;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/editor', name: 'editor_')]
+final class EditorUploadController
+{
+    public function __construct(
+        private readonly EditorUploadService $editorUploadService,
+    ) {
+    }
+
+    #[Route('/upload', name: 'upload', methods: ['POST'])]
+    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);
+        }
+
+        try {
+            $result = $this->editorUploadService->storeImage($uploadedFile);
+        } catch (UpstreamServiceException $exception) {
+            return new JsonResponse([
+                'error' => [
+                    'message' => $exception->getMessage(),
+                ],
+            ], Response::HTTP_BAD_GATEWAY);
+        }
+
+        return new JsonResponse([
+            'url' => $result->relativeUrl,
+            'fileName' => $result->fileName,
+        ]);
+    }
+
+    #[Route('/assets', name: 'assets', methods: ['GET'])]
+    public function assets(): JsonResponse
+    {
+        try {
+            $assets = $this->editorUploadService->listAssets();
+        } catch (UpstreamServiceException $exception) {
+            return new JsonResponse([
+                'error' => [
+                    'message' => $exception->getMessage(),
+                ],
+            ], Response::HTTP_BAD_GATEWAY);
+        }
+
+        return new JsonResponse([
+            'items' => array_map(
+                static fn ($asset) => $asset->toArray(),
+                $assets
+            ),
+        ]);
+    }
+}
diff --git a/src/Controller/InternalController.php b/src/Controller/InternalController.php
new file mode 100644
index 0000000..95c5e06
--- /dev/null
+++ b/src/Controller/InternalController.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\Core\Core\ApplicationStructure;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/_internal', name: 'internal_')]
+class InternalController extends AbstractController
+{
+    #[Route('/languages', name: 'languages', methods: ['GET'])]
+    public function languages(Request $request): JsonResponse
+    {
+        $applicationRoot = (new ApplicationStructure())->getApplicationRoot();
+        $langDir = $applicationRoot . '/public/lists/texts';
+
+        $files = [];
+        if (is_dir($langDir)) {
+            $dirItems = scandir($langDir);
+            if (is_array($dirItems)) {
+                foreach ($dirItems as $item) {
+                    if (is_file($langDir . '/' . $item) && preg_match('/\.inc$/i', $item)) {
+                        $files[] = $item;
+                    }
+                }
+            }
+        }
+
+        sort($files, SORT_STRING);
+
+        return $this->json($files);
+    }
+}
diff --git a/src/Controller/PublicPagesController.php b/src/Controller/PublicPagesController.php
new file mode 100644
index 0000000..1a6d80c
--- /dev/null
+++ b/src/Controller/PublicPagesController.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/public', name: 'public_')]
+class PublicPagesController extends AbstractController
+{
+    #[Route('/', name: 'pages', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Subscribe Pages',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+
+    #[Route('/create', name: 'create', methods: ['GET'])]
+    public function create(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Create Subscribe Page',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+
+    #[Route('/{pageId}/edit', name: 'edit', methods: ['GET'])]
+    public function edit(Request $request, int $pageId): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => sprintf('Edit Subscribe Page #%d', $pageId),
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/src/Controller/PublicSubscribeController.php b/src/Controller/PublicSubscribeController.php
new file mode 100644
index 0000000..2bab727
--- /dev/null
+++ b/src/Controller/PublicSubscribeController.php
@@ -0,0 +1,179 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\Core\Core\ApplicationStructure;
+use PhpList\Core\Domain\Configuration\Model\ConfigOption;
+use PhpList\Core\Domain\Configuration\Service\Provider\DefaultConfigProvider;
+use PhpList\RestApiClient\Endpoint\AuthClient;
+use PhpList\RestApiClient\Endpoint\SubscribePagesClient;
+use PhpList\RestApiClient\Exception\ValidationException;
+use PhpList\RestApiClient\Request\SubscribePage\PublicSubscriptionRequest;
+use PhpList\WebFrontend\Service\LanguageService;
+use PhpList\WebFrontend\Service\PublicSubscribeFormBuilder;
+use PhpList\WebFrontend\Service\PublicSubscribeFormValidator;
+use RuntimeException;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('', name: 'public_')]
+class PublicSubscribeController extends BaseController
+{
+    public function __construct(
+        private readonly SubscribePagesClient $subscribePagesClient,
+        protected AuthClient $authClient,
+        private readonly LanguageService $languageService,
+        private readonly PublicSubscribeFormBuilder $formBuilder,
+        private readonly PublicSubscribeFormValidator $formValidator,
+        private readonly DefaultConfigProvider $defaultConfigProvider,
+        #[Autowire('%app.show_unsubscribe_link%')]
+        private readonly bool $showUnsubscribeLink = true,
+    ) {
+        parent::__construct($authClient);
+    }
+
+    #[Route('/unsubscribe/{pageId}', name: 'unsubscribe', requirements: ['pageId' => '\d+'], methods: ['GET', 'POST'])]
+    public function unsubscribe(Request $request, int $pageId): Response
+    {
+        $page = $this->subscribePagesClient->getPublicSubscribePage($pageId);
+        $pageData = $page->data;
+        $languageFile = $pageData['language_file'] ?? 'english.inc';
+        $languageTexts = $this->languageService->loadLanguageTexts($languageFile);
+
+        $success = false;
+        if ($request->isMethod('POST')) {
+            $email = trim((string) $request->request->get('email'));
+
+            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+                throw $this->createNotFoundException('Invalid email address.');
+            }
+            $this->subscribePagesClient->deletePublicSubscription($pageId, $email);
+            $success = true;
+        }
+
+        return $this->render('@PhpListFrontend/public/unsubscribe.html.twig', [
+            'page' => 'Unsubscribe Page',
+            'page_id' => $pageId,
+            'data' => $pageData,
+            'success' => $success,
+            'signature' => $this->getDefaultSignature(),
+            'language_texts' => $languageTexts,
+        ]);
+    }
+
+    #[Route('/subscribe/images/{fileName}', name: 'sub_images', requirements: ['fileName' => '[A-Za-z0-9._-]+'])]
+    #[Route('/subscribe/styles/{fileName}', name: 'sub_styles', requirements: ['fileName' => '[A-Za-z0-9._-]+'])]
+    #[Route('/unsubscribe/images/{fileName}', name: 'unsub_images', requirements: ['fileName' => '[A-Za-z0-9._-]+'])]
+    public function getImages(string $fileName): Response
+    {
+        $applicationRoot = (new ApplicationStructure())->getApplicationRoot();
+
+        $baseDir = realpath($applicationRoot . '/public/build');
+
+        if ($baseDir === false) {
+            throw new RuntimeException('Build directory not found.');
+        }
+
+        $path = realpath($baseDir . DIRECTORY_SEPARATOR . $fileName);
+
+        if ($path === false || !str_starts_with($path, $baseDir . DIRECTORY_SEPARATOR)) {
+            throw $this->createNotFoundException();
+        }
+
+        return $this->file($path);
+    }
+
+    #[Route('/subscribe/{pageId}', name: 'subscribe', requirements: ['pageId' => '\d+'], methods: ['GET', 'POST'])]
+    public function subscribe(Request $request, int $pageId): Response
+    {
+        $admin = $this->getAdmin();
+        $page = $this->subscribePagesClient->getPublicSubscribePage($pageId);
+        $pageData = $page->data;
+        $isSubmitted = $request->isMethod('POST');
+
+        $languageFile = $pageData['language_file'] ?? 'english.inc';
+        $languageTexts = $this->languageService->loadLanguageTexts($languageFile);
+
+        $htmlChoice = $this->formBuilder->normalizeHtmlChoice($pageData['htmlchoice'] ?? null);
+        $emailDoubleEntry = strtolower((string) ($pageData['emaildoubleentry'] ?? '')) === 'yes';
+
+        $lists = $pageData['lists'] ?? [];
+        $availableListIds = array_map(static fn ($list): int => (int) $list['id'], $lists);
+
+        $attributes = $this->formBuilder->buildAttributeConfig($pageData);
+        $formData = $this->formBuilder->buildInitialFormData(
+            request: $request,
+            emailDoubleEntry: $emailDoubleEntry,
+            htmlChoice: $htmlChoice,
+            pageData: $pageData,
+            availableListIds: $availableListIds,
+            attributes: $attributes
+        );
+
+        $errorMessages = [];
+        $successHtml = null;
+        if ($isSubmitted) {
+            $errorMessages = $this->formValidator->validateFormData(
+                formData: $formData,
+                emailDoubleEntry: $emailDoubleEntry,
+                availableListIds: $availableListIds,
+                attributes: $attributes
+            );
+
+            if ($errorMessages === []) {
+                try {
+                    foreach ($formData['selected_lists'] as $listId) {
+                        $this->subscribePagesClient->createPublicSubscription(
+                            pageId: $pageId,
+                            request: new PublicSubscriptionRequest(
+                                email: $formData['email'],
+                                listId: $listId,
+                                attributes: $attributes,
+                            )
+                        );
+                    }
+
+                    $successHtml = trim((string) ($pageData['thankyoupage'] ?? ''));
+                } catch (ValidationException $exception) {
+                    // Genuine client-input rejection from the API: show it inline on the form.
+                    // A bare ApiException (upstream failure) is intentionally left to propagate
+                    // so the global handler can map it to a 502 rather than masking it here.
+                    $errorMessages[] = $exception->getMessage();
+                }
+            }
+        }
+
+        return $this->render('@PhpListFrontend/public/subscribe.html.twig', [
+            'page' => $page,
+            'page_id' => $pageId,
+            'data' => $pageData,
+            'language_texts' => $languageTexts,
+            'lists' => $lists,
+            'attributes' => $attributes,
+            'form_data' => $formData,
+            'form_errors' => $errorMessages,
+            'is_submitted' => $isSubmitted,
+            'html_choice' => $htmlChoice,
+            'email_double_entry' => $emailDoubleEntry,
+            'admin' => $admin,
+            'admin_page_url' => $this->generateUrl('public_edit', ['pageId' => $pageId]),
+            'show_unsubscribe_link' => $this->showUnsubscribeLink,
+            'unsubscribe_link' => $this->generateUrl('public_unsubscribe', ['pageId' => $pageId]),
+            'success_html' => $successHtml,
+            'signature' => $this->getDefaultSignature()
+        ]);
+    }
+
+    private function getDefaultSignature(): string
+    {
+        $defaultConfig = $this->defaultConfigProvider->get(ConfigOption::PoweredByImage, []);
+
+        return is_array($defaultConfig) && is_scalar($defaultConfig['value'] ?? null)
+            ? (string) $defaultConfig['value']
+            : '';
+    }
+}
diff --git a/src/Controller/SettingsController.php b/src/Controller/SettingsController.php
new file mode 100644
index 0000000..02d8684
--- /dev/null
+++ b/src/Controller/SettingsController.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/settings', name: 'setting_')]
+class SettingsController extends AbstractController
+{
+    #[Route('/', name: 'settings', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Settings',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/src/DependencyInjection/PhpListFrontendExtension.php b/src/DependencyInjection/PhpListFrontendExtension.php
index 36c4348..1b1bad4 100755
--- a/src/DependencyInjection/PhpListFrontendExtension.php
+++ b/src/DependencyInjection/PhpListFrontendExtension.php
@@ -76,6 +76,8 @@ public function prepend(ContainerBuilder $container): void
             ],
             'access_control' => [
                 ['path' => '^/login', 'roles' => 'PUBLIC_ACCESS'],
+                ['path' => '^/subscribe/', 'roles' => 'PUBLIC_ACCESS'],
+                ['path' => '^/unsubscribe/', 'roles' => 'PUBLIC_ACCESS'],
                 ['path' => '^/api/v2', 'roles' => 'PUBLIC_ACCESS'],
                 ['path' => '^/', 'roles' => 'ROLE_ADMIN'],
             ],
diff --git a/src/Dto/EditorAssetItem.php b/src/Dto/EditorAssetItem.php
new file mode 100644
index 0000000..ef010d6
--- /dev/null
+++ b/src/Dto/EditorAssetItem.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Dto;
+
+final class EditorAssetItem
+{
+    public function __construct(
+        public readonly string $fileName,
+        public readonly string $url,
+        public readonly string $mimeType,
+        public readonly int $size,
+        public readonly int $modifiedAt,
+        public readonly bool $isImage,
+    ) {
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'fileName' => $this->fileName,
+            'url' => $this->url,
+            'mimeType' => $this->mimeType,
+            'size' => $this->size,
+            'modifiedAt' => $this->modifiedAt,
+            'isImage' => $this->isImage,
+        ];
+    }
+}
diff --git a/src/Dto/EditorUploadResult.php b/src/Dto/EditorUploadResult.php
new file mode 100644
index 0000000..c2aa731
--- /dev/null
+++ b/src/Dto/EditorUploadResult.php
@@ -0,0 +1,14 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Dto;
+
+final class EditorUploadResult
+{
+    public function __construct(
+        public readonly string $fileName,
+        public readonly string $relativeUrl,
+    ) {
+    }
+}
diff --git a/src/EventSubscriber/ApiExceptionSubscriber.php b/src/EventSubscriber/ApiExceptionSubscriber.php
new file mode 100644
index 0000000..41c41c9
--- /dev/null
+++ b/src/EventSubscriber/ApiExceptionSubscriber.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\EventSubscriber;
+
+use PhpList\RestApiClient\Exception\ApiException;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Event\ExceptionEvent;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+class ApiExceptionSubscriber
+{
+    public static function getSubscribedEvents(): array
+    {
+        return [
+            KernelEvents::EXCEPTION => 'onKernelException',
+        ];
+    }
+
+    public function onKernelException(ExceptionEvent $event): void
+    {
+        $exception = $event->getThrowable();
+        // An ApiException whose status is a transport failure (code 0) or a 5xx means the
+        // upstream REST API failed or was unreachable. Surface that as a 502 Bad Gateway
+        // rather than letting it fall through to a generic 500, which would wrongly imply the
+        // fault is in this frontend. Client-shaped subclasses (NotFoundException 404,
+        // ValidationException 400/422) carry their own status and are left untouched here.
+        if ($exception instanceof ApiException && $this->isUpstreamFailure($exception)) {
+            $message = 'The upstream service is currently unavailable. Please try again later.';
+
+            if ($event->getRequest()->isXmlHttpRequest()) {
+                $event->setResponse(new JsonResponse([
+                    'error' => 'upstream_unavailable',
+                    'message' => $message,
+                ], Response::HTTP_BAD_GATEWAY));
+
+                return;
+            }
+
+            $event->setResponse(new Response($message, Response::HTTP_BAD_GATEWAY, [
+                'Content-Type' => 'text/plain; charset=UTF-8',
+            ]));
+        }
+    }
+
+    private function isUpstreamFailure(ApiException $exception): bool
+    {
+        $statusCode = $exception->getStatusCode();
+
+        // Code 0 is a transport error (connection refused/timeout); >= 500 is an upstream 5xx.
+        return $statusCode === 0 || $statusCode >= 500;
+    }
+}
diff --git a/src/EventSubscriber/AuthGateSubscriber.php b/src/EventSubscriber/AuthGateSubscriber.php
index 5fa61fd..eb77fef 100644
--- a/src/EventSubscriber/AuthGateSubscriber.php
+++ b/src/EventSubscriber/AuthGateSubscriber.php
@@ -4,6 +4,7 @@
 
 namespace PhpList\WebFrontend\EventSubscriber;
 
+use PhpList\WebFrontend\Trait\RedirectValidationTrait;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
@@ -18,8 +19,12 @@
  */
 class AuthGateSubscriber implements EventSubscriberInterface
 {
+    use RedirectValidationTrait;
+
     private const ALLOW_LIST = [
         '/api/v2',
+        '/subscribe/',
+        '/unsubscribe/',
         '/build/',
         '/assets/',
         '/css/',
@@ -55,7 +60,7 @@ public function onKernelRequest(RequestEvent $event): void
 
         $session = $request->getSession();
         if (!$session->has('auth_token')) {
-            $loginUrl = $this->urlGenerator->generate('login');
+            $loginUrl = $this->buildLoginUrl($request);
             $event->setResponse(new RedirectResponse($loginUrl));
         }
     }
@@ -76,7 +81,7 @@ private function isPublicPath(Request $request): bool
 
         // Allow static assets commonly served under these prefixes
         foreach (self::ALLOW_LIST as $prefix) {
-            if (str_starts_with($path, $prefix)) {
+            if ($this->matchesPrefix($path, $prefix)) {
                 return true;
             }
         }
@@ -84,8 +89,25 @@ private function isPublicPath(Request $request): bool
         return false;
     }
 
-    private function normalizePath(string $path): string
+    private function buildLoginUrl(Request $request): string
     {
-        return (string) preg_replace('#^/(?:app|app_test)\.php#', '', $path, 1);
+        $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 017843f..d80c8cc 100755
--- a/src/EventSubscriber/UnauthorizedSubscriber.php
+++ b/src/EventSubscriber/UnauthorizedSubscriber.php
@@ -4,16 +4,21 @@
 
 namespace PhpList\WebFrontend\EventSubscriber;
 
+use PhpList\WebFrontend\Trait\RedirectValidationTrait;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\RedirectResponse;
+use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Event\ExceptionEvent;
 use Symfony\Component\HttpKernel\KernelEvents;
 use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
 
 class UnauthorizedSubscriber implements EventSubscriberInterface
 {
+    use RedirectValidationTrait;
+
     public function __construct(
         private readonly UrlGeneratorInterface $urlGenerator,
     ) {
@@ -30,6 +35,25 @@ public function onKernelException(ExceptionEvent $event): void
     {
         $exception = $event->getThrowable();
 
+        if ($exception instanceof AuthorizationException) {
+            $message = 'Access denied.';
+
+            if ($event->getRequest()->isXmlHttpRequest()) {
+                $event->setResponse(new JsonResponse([
+                    'error' => 'access_denied',
+                    'message' => $message,
+                ], 403));
+
+                return;
+            }
+
+            $event->setResponse(new Response($message, 403, [
+                'Content-Type' => 'text/plain; charset=UTF-8',
+            ]));
+
+            return;
+        }
+
         if ($exception instanceof AuthenticationException) {
             $request = $event->getRequest();
 
@@ -38,7 +62,7 @@ public function onKernelException(ExceptionEvent $event): void
                 $session->invalidate();
             }
 
-            $loginUrl = $this->urlGenerator->generate('login');
+            $loginUrl = $this->buildLoginUrl($request->getRequestUri());
 
             if ($request->isXmlHttpRequest()) {
                 $event->setResponse(new JsonResponse([
@@ -61,4 +85,15 @@ 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/Exception/UpstreamServiceException.php b/src/Exception/UpstreamServiceException.php
new file mode 100644
index 0000000..0abcc12
--- /dev/null
+++ b/src/Exception/UpstreamServiceException.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Exception;
+
+use RuntimeException;
+
+/**
+ * Thrown when a request to the phpList REST API fails for reasons outside the
+ * caller's control (outage, network error, unexpected server response).
+ *
+ * Controllers map this to a 5xx status so upstream failures are not reported as
+ * client (4xx) errors.
+ */
+final class UpstreamServiceException extends RuntimeException
+{
+
+}
diff --git a/src/Security/SessionAuthenticator.php b/src/Security/SessionAuthenticator.php
index 6393241..49f6d4c 100644
--- a/src/Security/SessionAuthenticator.php
+++ b/src/Security/SessionAuthenticator.php
@@ -4,6 +4,7 @@
 
 namespace PhpList\WebFrontend\Security;
 
+use PhpList\WebFrontend\Trait\RedirectValidationTrait;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -19,8 +20,12 @@
 
 class SessionAuthenticator extends AbstractAuthenticator implements AuthenticationEntryPointInterface
 {
+    use RedirectValidationTrait;
+
     private const NOT_SUPPORTED_PATHS = [
         '/login',
+        '/subscribe/',
+        '/unsubscribe/',
         '/_profiler',
         '/_wdt',
         '/build/',
@@ -41,7 +46,7 @@ public function supports(Request $request): ?bool
     {
         $path = $this->normalizePath($request->getPathInfo());
         foreach (self::NOT_SUPPORTED_PATHS as $prefix) {
-            if (str_starts_with($path, $prefix)) {
+            if ($this->matchesPrefix($path, $prefix)) {
                 return false;
             }
         }
@@ -85,7 +90,28 @@ public function onAuthenticationFailure(Request $request, AuthenticationExceptio
 
     public function start(Request $request, AuthenticationException $authException = null): Response
     {
-        $loginUrl = $this->urlGenerator->generate('login');
+        $loginUrl = $this->buildLoginUrl($request->getRequestUri());
         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, '/')) {
+            $exactPath = rtrim($prefix, '/');
+            return $path === $exactPath || str_starts_with($path, $prefix);
+        }
+
+        return str_starts_with($path, $prefix);
+    }
 }
diff --git a/src/Service/AttributeValidator.php b/src/Service/AttributeValidator.php
new file mode 100644
index 0000000..a8c7955
--- /dev/null
+++ b/src/Service/AttributeValidator.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+class AttributeValidator
+{
+    /**
+     * @param array<int,mixed> $attributeValues
+     * @param list<array<string,mixed>> $attributes
+     * @return list<string>
+     */
+    public function validateRequiredAttributes(array $attributeValues, array $attributes): array
+    {
+        $errors = [];
+
+        foreach ($attributes as $attribute) {
+            if (!($attribute['required'] ?? false)) {
+                continue;
+            }
+
+            $attributeId = (int) $attribute['id'];
+            $value = $attributeValues[$attributeId] ?? null;
+            $type = (string) ($attribute['type'] ?? 'textline');
+            $name = (string) ($attribute['name'] ?? ('Attribute ' . $attributeId));
+            $error = $this->validateRequiredAttribute($type, $value, $name);
+
+            if ($error !== null) {
+                $errors[] = $error;
+            }
+        }
+
+        return $errors;
+    }
+
+    private function validateRequiredAttribute(string $type, mixed $value, string $name): ?string
+    {
+        return match ($type) {
+            'checkbox' => $value === true
+                ? null
+                : sprintf('The following field is required: %s', $name),
+
+            'checkboxgroup' => is_array($value) && $value !== []
+                ? null
+                : sprintf('Please enter your %s', $name),
+
+            default => trim((string) $value) !== ''
+                ? null
+                : sprintf('Please enter your %s', $name),
+        };
+    }
+}
diff --git a/src/Service/EditorUploadService.php b/src/Service/EditorUploadService.php
new file mode 100644
index 0000000..fbe0519
--- /dev/null
+++ b/src/Service/EditorUploadService.php
@@ -0,0 +1,197 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use Exception;
+use PhpList\WebFrontend\Dto\EditorAssetItem;
+use PhpList\WebFrontend\Dto\EditorUploadResult;
+use PhpList\WebFrontend\Exception\UpstreamServiceException;
+use PhpList\RestApiClient\Endpoint\UploadsClient as RestApiUploadsClient;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
+use PhpList\RestApiClient\Exception\NotFoundException;
+use RuntimeException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+final class EditorUploadService
+{
+    private const UPLOAD_DIRECTORY = 'uploadimages';
+
+    private const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+    public function __construct(
+        private readonly RestApiUploadsClient $uploadsClient,
+    ) {
+    }
+
+    /**
+     * @throws AuthorizationException
+     * @throws AuthenticationException
+     * @throws UpstreamServiceException on API/transport failure
+     */
+    public function storeImage(UploadedFile $uploadedFile): EditorUploadResult
+    {
+        $tempPath = $this->validateUploadedFile($uploadedFile);
+
+        // The API validates the extension of the transmitted filename, and the REST
+        // client derives that filename from the path's basename. The framework stores
+        // uploads under an extensionless temp name (e.g. /tmp/phpAB12), so hand the
+        // client a path whose basename carries the real extension.
+        $uploadPath = $this->prepareUploadPath($uploadedFile, $tempPath);
+
+        try {
+            $response = $this->uploadsClient->upload($uploadPath, 'upload');
+        } catch (AuthenticationException | AuthorizationException $e) {
+            throw $e;
+        } catch (Exception $e) {
+            throw new UpstreamServiceException('Upload failed: ' . $e->getMessage(), 0, $e);
+        } finally {
+            if ($uploadPath !== $tempPath && is_file($uploadPath)) {
+                unlink($uploadPath);
+            }
+        }
+
+        $fileName = $response['fileName']
+            ?? ($uploadedFile->getClientOriginalName() ?: basename($uploadPath));
+        $relativeUrl = $response['url'] ?? $this->buildRelativeUrl($fileName);
+
+        return new EditorUploadResult(
+            fileName: $fileName,
+            relativeUrl: $relativeUrl,
+        );
+    }
+
+    /**
+     * @throws AuthorizationException
+     * @throws AuthenticationException
+     * @throws UpstreamServiceException on API/transport failure
+     * @return array<int, EditorAssetItem>
+     */
+    public function listAssets(): array
+    {
+        try {
+            $response = $this->uploadsClient->getUploads();
+        } catch (AuthenticationException | AuthorizationException $e) {
+            throw $e;
+        } catch (NotFoundException) {
+            // The upload directory is created lazily on first upload; treat a missing
+            // directory as an empty asset list rather than an error.
+            return [];
+        } catch (Exception $e) {
+            throw new UpstreamServiceException('Failed to list assets: ' . $e->getMessage(), 0, $e);
+        }
+
+        $files = $response['files'] ?? [];
+
+        return $this->loadItems($files);
+    }
+
+    public function buildRelativeUrl(string $fileName): string
+    {
+        return '/' . self::UPLOAD_DIRECTORY . '/' . rawurlencode(basename($fileName));
+    }
+
+    public function getTargetDirectory(): string
+    {
+        return '/' . self::UPLOAD_DIRECTORY;
+    }
+
+    /**
+     * Return a filesystem path whose basename carries the upload's real extension so
+     * the API can validate it. Returns the original temp path when no extension can be
+     * determined or the copy fails.
+     */
+    private function prepareUploadPath(UploadedFile $uploadedFile, string $tempPath): string
+    {
+        $extension = $uploadedFile->getClientOriginalExtension();
+        if ($extension === '') {
+            $extension = (string) $uploadedFile->guessExtension();
+        }
+
+        if ($extension === '' || pathinfo($tempPath, PATHINFO_EXTENSION) !== '') {
+            return $tempPath;
+        }
+
+        $namedPath = $tempPath . '.' . strtolower($extension);
+        if (!copy($tempPath, $namedPath)) {
+            return $tempPath;
+        }
+
+        return $namedPath;
+    }
+
+    private function loadItems(array $files): array
+    {
+        $items = [];
+        foreach ($files as $file) {
+            $fileName = (string) ($file['name'] ?? '');
+            if ($fileName === '') {
+                continue;
+            }
+
+            if (($file['type'] ?? '') === 'directory') {
+                continue;
+            }
+
+            $mimeType = (string) ($file['mime_type'] ?? $this->guessMimeType($fileName));
+
+            $items[] = new EditorAssetItem(
+                fileName: $fileName,
+                url: $file['url'],
+                mimeType: $mimeType,
+                size: (int) ($file['size'] ?? 0),
+                modifiedAt: (int) ($file['modified'] ?? time()),
+                isImage: str_starts_with($mimeType, 'image/'),
+            );
+        }
+
+        // Newest first, so the most recently uploaded assets surface at the top of the picker.
+        usort(
+            $items,
+            static fn (EditorAssetItem $as1, EditorAssetItem $as2): int => $as2->modifiedAt <=> $as1->modifiedAt
+        );
+
+        return $items;
+    }
+
+    private function guessMimeType(string $fileName): string
+    {
+        return match (strtolower(pathinfo($fileName, PATHINFO_EXTENSION))) {
+            'jpg', 'jpeg' => 'image/jpeg',
+            'png' => 'image/png',
+            'gif' => 'image/gif',
+            'webp' => 'image/webp',
+            'bmp' => 'image/bmp',
+            'svg' => 'image/svg+xml',
+            default => 'application/octet-stream',
+        };
+    }
+
+    private function validateUploadedFile(UploadedFile $uploadedFile): string
+    {
+        if (!$uploadedFile->isValid()) {
+            throw new RuntimeException($uploadedFile->getErrorMessage());
+        }
+
+        if ($uploadedFile->getSize() > self::MAX_FILE_SIZE) {
+            throw new RuntimeException(sprintf(
+                'The uploaded file exceeds the maximum allowed size of %d MB.',
+                intdiv(self::MAX_FILE_SIZE, 1024 * 1024)
+            ));
+        }
+
+        $mimeType = (string) $uploadedFile->getMimeType();
+        if (!str_starts_with($mimeType, 'image/')) {
+            throw new RuntimeException('Only image uploads are supported.');
+        }
+
+        $tempPath = $uploadedFile->getRealPath();
+        if (!is_string($tempPath) || $tempPath === '') {
+            throw new RuntimeException('Failed to get uploaded file path.');
+        }
+
+        return $tempPath;
+    }
+}
diff --git a/src/Service/FormDataMapper.php b/src/Service/FormDataMapper.php
new file mode 100644
index 0000000..450785e
--- /dev/null
+++ b/src/Service/FormDataMapper.php
@@ -0,0 +1,185 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use Symfony\Component\HttpFoundation\Request;
+
+class FormDataMapper
+{
+    /**
+     * @param list<int> $availableListIds
+     * @param list<array<string,mixed>> $attributes
+     * @return array<string,mixed>
+     */
+    public function buildInitialFormData(
+        Request $request,
+        bool $emailDoubleEntry,
+        string $htmlChoice,
+        array $pageData,
+        array $availableListIds,
+        array $attributes
+    ): array {
+        $defaults = [
+            'email' => '',
+            'email_confirm' => '',
+            'make_confirmed' => '0',
+            'htmlemail' => $this->defaultHtmlEmailForChoice($htmlChoice),
+            'selected_lists' => $this->defaultSelectedLists($pageData, $availableListIds),
+            'attributes' => $this->defaultAttributeValues($attributes),
+        ];
+
+        if (!$request->isMethod('POST')) {
+            if ($request->query->has('email')) {
+                $defaults['email'] = trim((string) $request->query->get('email', ''));
+            }
+            if ($request->query->has('htmlemail')) {
+                $defaults['htmlemail'] = ((int) $request->query->get('htmlemail', 1)) === 1;
+            }
+            if (!$emailDoubleEntry) {
+                $defaults['email_confirm'] = '';
+            }
+
+            return $defaults;
+        }
+
+        $form = $request->request;
+
+        return [
+            'email' => trim((string) $form->get('email', '')),
+            'email_confirm' => trim((string) $form->get('emailconfirm', '')),
+            'make_confirmed' => $form->get('makeconfirmed', '0') === '1' ? '1' : '0',
+            'htmlemail' => $this->resolveHtmlEmailFromRequest($htmlChoice, $form->all()),
+            'selected_lists' => $this->parseNumericIds($form->all('lists')),
+            'attributes' => $this->extractPostedAttributeValues($form->all(), $attributes),
+            'honeypot' => trim((string) $form->get('VerificationCodeX', '')),
+        ];
+    }
+
+    /**
+     * Check if a value is truthy (handles string, bool, and other types).
+     */
+    public function isTruthy(mixed $value): bool
+    {
+        if (is_bool($value)) {
+            return $value;
+        }
+
+        return in_array(strtolower(trim((string) $value)), ['1', 'true', 'yes', 'on'], true);
+    }
+
+    /**
+     * Parse numeric IDs from a string or array.
+     *
+     * @param string|array<int,mixed>|null $value
+     * @return list<int>
+     */
+    public function parseNumericIds(string|array|null $value): array
+    {
+        if ($value === null) {
+            return [];
+        }
+
+        $parts = (is_array($value) ? $value : preg_split('/\s*,\s*/', (string) $value)) ?: [];
+        $ids = [];
+        foreach ($parts as $part) {
+            if (!is_scalar($part) || !is_numeric((string) $part)) {
+                continue;
+            }
+
+            $id = (int) $part;
+            if ($id > 0) {
+                $ids[$id] = true;
+            }
+        }
+
+        $result = array_map('intval', array_keys($ids));
+        sort($result);
+
+        return $result;
+    }
+
+    /**
+     * @param list<array<string,mixed>> $attributes
+     * @return array<int,mixed>
+     */
+    private function defaultAttributeValues(array $attributes): array
+    {
+        $values = [];
+
+        foreach ($attributes as $attribute) {
+            $attributeId = (int) $attribute['id'];
+            $type = (string) $attribute['type'];
+            $defaultValue = $attribute['default_value'];
+
+            $values[$attributeId] = match ($type) {
+                'checkboxgroup' => $this->parseNumericIds((string) $defaultValue),
+                'checkbox' => $this->isTruthy($defaultValue),
+                default => (string) $defaultValue,
+            };
+        }
+
+        return $values;
+    }
+
+    /**
+     * @param array<string,mixed> $posted
+     * @param list<array<string,mixed>> $attributes
+     * @return array<int,mixed>
+     */
+    private function extractPostedAttributeValues(array $posted, array $attributes): array
+    {
+        $values = [];
+
+        foreach ($attributes as $attribute) {
+            $attributeId = (int) $attribute['id'];
+            $field = 'attribute' . $attributeId;
+            $type = (string) $attribute['type'];
+
+            $values[$attributeId] = match ($type) {
+                'checkbox' => isset($posted[$field]),
+                'checkboxgroup' => $this->parseNumericIds($posted[$field] ?? []),
+                default => trim((string) ($posted[$field] ?? '')),
+            };
+        }
+
+        return $values;
+    }
+
+    /**
+     * @param list<int> $availableListIds
+     * @return list<int>
+     */
+    private function defaultSelectedLists(array $pageData, array $availableListIds): array
+    {
+        $preselectId = (int) ($pageData['preselectlist'] ?? 0);
+        if ($preselectId > 0 && in_array($preselectId, $availableListIds, true)) {
+            return [$preselectId];
+        }
+
+        return [];
+    }
+
+    private function defaultHtmlEmailForChoice(string $htmlChoice): bool
+    {
+        return match ($htmlChoice) {
+            'textonly', 'radiotext' => false,
+            default => true,
+        };
+    }
+
+    /**
+     * @param array<string,mixed> $posted
+     */
+    private function resolveHtmlEmailFromRequest(string $htmlChoice, array $posted): bool
+    {
+        return match ($htmlChoice) {
+            'textonly' => false,
+            'htmlonly' => true,
+            'checkfortext' => !isset($posted['textemail']),
+            'radiotext', 'radiohtml' => ((int) ($posted['htmlemail'] ?? 0)) === 1,
+            default => isset($posted['htmlemail']),
+        };
+    }
+}
diff --git a/src/Service/LanguageService.php b/src/Service/LanguageService.php
new file mode 100644
index 0000000..bb8221d
--- /dev/null
+++ b/src/Service/LanguageService.php
@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use PhpList\Core\Core\ApplicationStructure;
+
+class LanguageService
+{
+    private const DEFAULT_LANGUAGE_FILE = 'english.inc';
+    private const LANGUAGE_FILE_PATH = '/public/lists/texts';
+
+    /**
+     * @return array<string, string>
+     */
+    public function loadLanguageTexts(?string $languageFile): array
+    {
+        $applicationRoot = (new ApplicationStructure())->getApplicationRoot();
+        $languageDir = $applicationRoot . self::LANGUAGE_FILE_PATH;
+
+        if (!is_dir($languageDir)) {
+            return [];
+        }
+
+        $selectedFile = $this->sanitizeLanguageFile($languageFile) ?? self::DEFAULT_LANGUAGE_FILE;
+        $languagePath = $languageDir . '/' . $selectedFile;
+
+        if (!is_file($languagePath)) {
+            $languagePath = $languageDir . '/' . self::DEFAULT_LANGUAGE_FILE;
+        }
+
+        if (!is_file($languagePath)) {
+            return [];
+        }
+
+        $loader = static function (string $path): array {
+            require $path;
+
+            return array_map(function ($value) {
+                return $value;
+            }, get_defined_vars());
+        };
+
+        return $loader($languagePath);
+    }
+
+    private function sanitizeLanguageFile(?string $languageFile): ?string
+    {
+        if (!is_string($languageFile) || $languageFile === '') {
+            return null;
+        }
+
+        $languageFile = basename($languageFile);
+
+        if (!preg_match('/^[A-Za-z0-9._-]+\.inc$/', $languageFile)) {
+            return null;
+        }
+
+        return $languageFile;
+    }
+}
diff --git a/src/Service/ListSelectionService.php b/src/Service/ListSelectionService.php
new file mode 100644
index 0000000..4723404
--- /dev/null
+++ b/src/Service/ListSelectionService.php
@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+class ListSelectionService
+{
+    public function __construct(
+        private readonly FormDataMapper $formDataMapper,
+    ) {
+    }
+
+    /**
+     * @param string|array<int,mixed>|null $rawListIds
+     * @return list<int>
+     */
+    public function parseAvailableListIds(string|array|null $rawListIds): array
+    {
+        return $this->formDataMapper->parseNumericIds($rawListIds);
+    }
+
+    /**
+     * @param list<int> $selectedLists
+     * @param list<int> $availableListIds
+     */
+    public function validateSelection(array $selectedLists, array $availableListIds): ?string
+    {
+        if ($selectedLists === []) {
+            return 'error.select_newsletter';
+        }
+
+        $allowedListLookup = array_fill_keys($availableListIds, true);
+        foreach ($selectedLists as $selectedListId) {
+            if (!isset($allowedListLookup[$selectedListId])) {
+                return 'error.invalid_selected_lists';
+            }
+        }
+
+        return null;
+    }
+}
diff --git a/src/Service/PhpListTranslationLoader.php b/src/Service/PhpListTranslationLoader.php
new file mode 100644
index 0000000..3bd81a6
--- /dev/null
+++ b/src/Service/PhpListTranslationLoader.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace PhpList\WebFrontend\Service;
+
+use Symfony\Component\Translation\Loader\LoaderInterface;
+use Symfony\Component\Translation\MessageCatalogue;
+
+class PhpListTranslationLoader implements LoaderInterface
+{
+    private string $publicDir;
+
+    public function __construct(string $projectDir)
+    {
+        // Target the compatible public path
+        $this->publicDir = $projectDir . '/public/lists/texts/';
+    }
+
+    public function load(mixed $resource, string $locale, string $domain = 'messages'): MessageCatalogue
+    {
+        $catalogue = new MessageCatalogue($locale);
+
+        // Map Symfony locales (e.g., 'en') to phpList filenames (e.g., 'english.php')
+        $fileName = $this->mapLocaleToPhpListFile($locale);
+        $filePath = $this->publicDir . $fileName;
+
+        if (!file_exists($filePath)) {
+            return $catalogue;
+        }
+
+        // Isolate scope and include the raw file to capture phpList variables
+        $phpListTranslations = $this->extractVariables($filePath);
+
+        $catalogue->add($phpListTranslations, $domain);
+
+        return $catalogue;
+    }
+
+    private function extractVariables(string $filePath): array
+    {
+        // Include the file inside an isolated closure
+        $getVars = function ($file) {
+            include $file;
+            return get_defined_vars();
+        };
+
+        $allVars = $getVars($filePath);
+        $flattened = [];
+
+        foreach ($allVars as $key => $value) {
+            // Filter out internal closure parameters
+            if ($key === 'file') {
+                continue;
+            };
+
+            // phpList3 handles both $strVariable and $lan['variable'] arrays
+            if ($key === 'lan' && is_array($value)) {
+                foreach ($value as $subKey => $subValue) {
+                    $flattened['lan.' . $subKey] = $subValue;
+                }
+            } elseif (is_string($value)) {
+                $flattened[$key] = $value;
+            }
+        }
+
+        return $flattened;
+    }
+
+    private function mapLocaleToPhpListFile(string $locale): string
+    {
+        $normalized = strtolower(str_replace('-', '_', $locale));
+        $baseLocale = strtok($normalized, '_') ?: 'en';
+
+        $map = [
+            'en' => 'english.inc',
+            'es' => 'spanish.inc',
+            'fr' => 'french.inc',
+        ];
+
+        return $map[$baseLocale] ?? 'english.php';
+    }
+}
+
+// USAGE
+// If the file contains $strPleaseEnter
+//    <label>{{ 'strPleaseEnter'|trans }}</label>
+//
+// If the file contains $lan['money']
+//    <p>{{ 'lan.money'|trans }}</p>
diff --git a/src/Service/PublicSubscribeFormBuilder.php b/src/Service/PublicSubscribeFormBuilder.php
new file mode 100644
index 0000000..40d45e1
--- /dev/null
+++ b/src/Service/PublicSubscribeFormBuilder.php
@@ -0,0 +1,121 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * Builder for public subscribe form data.
+ * Handles form data construction, attribute configuration, and list loading.
+ */
+class PublicSubscribeFormBuilder
+{
+    public function __construct(
+        private readonly FormDataMapper $formDataMapper,
+    ) {
+    }
+
+    /**
+     * @return list<array<string,mixed>>
+     */
+    public function buildAttributeConfig(array $pageData): array
+    {
+        $attributes = $pageData['attributes'] ?? [];
+        $overrides = $this->extractLegacyOverrides($pageData);
+
+        $builtAttributes = [];
+        foreach ($attributes as $attribute) {
+            $builtAttributes[] = $this->mapAttributeConfig($attribute, $overrides);
+        }
+
+        usort(
+            $builtAttributes,
+            static fn (array $right, array $left): int =>
+                [$left['type'], $left['list_order']] <=> [$right['type'], $right['list_order']]
+        );
+
+        return $builtAttributes;
+    }
+
+    private function mapAttributeConfig(array $attribute, array $overrides): array
+    {
+        $options = $attribute['options'] ?? [];
+        usort(
+            $options,
+            static fn (array $left, array $right): int =>
+                [$left['list_order'], $left['id']] <=> [$right['list_order'], $right['id']]
+        );
+
+        return [
+            'id' => $attribute['id'],
+            'name' => (string) ($attribute['name'] ?? ('Attribute ' . $attribute['id'])),
+            'type' => $attribute['type'],
+            'required' => $overrides[$attribute['id']]['required'] ?? (bool) ($attribute['required'] ?? false),
+            'default_value' => $overrides[$attribute['id']]['default'] ?? (string) ($attribute['default_value'] ?? ''),
+            'list_order' => $overrides[$attribute['id']]['order'] ?? (int) ($attribute['list_order'] ?? 0),
+            'options' => $options,
+        ];
+    }
+
+    /**
+     * @param list<int> $availableListIds
+     * @param list<array<string,mixed>> $attributes
+     * @return array<string,mixed>
+     */
+    public function buildInitialFormData(
+        Request $request,
+        bool $emailDoubleEntry,
+        string $htmlChoice,
+        array $pageData,
+        array $availableListIds,
+        array $attributes
+    ): array {
+        return $this->formDataMapper->buildInitialFormData(
+            $request,
+            $emailDoubleEntry,
+            $htmlChoice,
+            $pageData,
+            $availableListIds,
+            $attributes
+        );
+    }
+
+    public function normalizeHtmlChoice(mixed $value): string
+    {
+        $normalized = strtolower(trim((string) $value));
+        return match ($normalized) {
+            'textonly', 'htmlonly', 'checkfortext', 'checkforhtml', 'radiotext', 'radiohtml' => $normalized,
+            default => 'checkforhtml',
+        };
+    }
+
+    /**
+     * @param array<string,mixed> $pageData
+     * @return array<int,array{default?:string,order?:int,required?:bool}>
+     */
+    private function extractLegacyOverrides(array $pageData): array
+    {
+        $result = [];
+        foreach ($pageData as $key => $value) {
+            if (!preg_match('/^attribute(\d{1,})$/', (string) $key, $matches)) {
+                continue;
+            }
+
+            $id = (int) $matches[1];
+            $parts = explode('###', (string) $value);
+            if (isset($parts[1])) {
+                $result[$id]['default'] = $parts[1];
+            }
+            if (isset($parts[2])) {
+                $result[$id]['order'] = (int) $parts[2];
+            }
+            if (isset($parts[3])) {
+                $result[$id]['required'] = $parts[3] === '1';
+            }
+        }
+
+        return $result;
+    }
+}
diff --git a/src/Service/PublicSubscribeFormValidator.php b/src/Service/PublicSubscribeFormValidator.php
new file mode 100644
index 0000000..a433228
--- /dev/null
+++ b/src/Service/PublicSubscribeFormValidator.php
@@ -0,0 +1,83 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+/**
+ * Validator for public subscribe form data.
+ * Handles validation of email, lists, attributes, and honeypot field.
+ */
+class PublicSubscribeFormValidator
+{
+    public function __construct(
+        private readonly ListSelectionService $listSelectionService,
+        private readonly AttributeValidator $attributeValidator,
+    ) {
+    }
+
+    /**
+     * @param array<string,mixed> $formData
+     * @param list<int> $availableListIds
+     * @param list<array<string,mixed>> $attributes
+     * @return list<string>
+     */
+    public function validateFormData(
+        array $formData,
+        bool $emailDoubleEntry,
+        array $availableListIds,
+        array $attributes
+    ): array {
+        $errors = [];
+        $email = trim((string) ($formData['email'] ?? ''));
+        $emailConfirm = trim((string) ($formData['email_confirm'] ?? ''));
+        $rawSelectedLists = is_array($formData['selected_lists'] ?? null) ? $formData['selected_lists'] : [];
+        $selectedLists = array_values(array_unique(array_map('intval', $rawSelectedLists)));
+
+        if (($formData['honeypot'] ?? '') !== '') {
+            $errors[] = 'Submission rejected.';
+            return $errors;
+        }
+
+        $this->validateEmail($email, $errors);
+        $this->validateEmailDoubleEntry($email, $emailConfirm, $emailDoubleEntry, $errors);
+        $listSelectionError = $this->listSelectionService->validateSelection($selectedLists, $availableListIds);
+        if ($listSelectionError !== null) {
+            $errors[] = $listSelectionError;
+        }
+
+        $attributeValues = is_array($formData['attributes'] ?? null) ? $formData['attributes'] : [];
+        $errors = array_merge(
+            $errors,
+            $this->attributeValidator->validateRequiredAttributes($attributeValues, $attributes)
+        );
+
+        return array_values(array_unique($errors));
+    }
+
+    /**
+     * @param list<string> $errors
+     */
+    private function validateEmail(string $email, array &$errors): void
+    {
+        if ($email === '') {
+            $errors[] = 'Please enter your email address.';
+        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+            $errors[] = 'Email address is not valid.';
+        }
+    }
+
+    /**
+     * @param list<string> $errors
+     */
+    private function validateEmailDoubleEntry(
+        string $email,
+        string $emailConfirm,
+        bool $emailDoubleEntry,
+        array &$errors
+    ): void {
+        if ($emailDoubleEntry && $email !== $emailConfirm) {
+            $errors[] = 'Email addresses you entered do not match.';
+        }
+    }
+}
diff --git a/src/Trait/RedirectValidationTrait.php b/src/Trait/RedirectValidationTrait.php
new file mode 100644
index 0000000..a8e653e
--- /dev/null
+++ b/src/Trait/RedirectValidationTrait.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Trait;
+
+trait RedirectValidationTrait
+{
+    private function isSafeRedirectTarget(string $target): bool
+    {
+        if (!str_starts_with($target, '/') || str_starts_with($target, '//')) {
+            return false;
+        }
+
+        $path = parse_url($target, PHP_URL_PATH);
+        if (!is_string($path)) {
+            return false;
+        }
+
+        $normalizedPath = $this->normalizePath($path);
+
+        return $normalizedPath !== '/login' && !str_starts_with($normalizedPath, '/login');
+    }
+
+    private function normalizePath(string $path): string
+    {
+        return (string) preg_replace('#^/(?:app|app_test)\.php#', '', $path, 1);
+    }
+}
diff --git a/src/Twig/HtmlCleanupExtension.php b/src/Twig/HtmlCleanupExtension.php
new file mode 100644
index 0000000..5b594b7
--- /dev/null
+++ b/src/Twig/HtmlCleanupExtension.php
@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Twig;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class HtmlCleanupExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('unescape_header', [$this, 'unescapeHeader']),
+        ];
+    }
+
+    public function unescapeHeader(?string $content): string
+    {
+        if ($content === null) {
+            return '';
+        }
+
+        return stripslashes($content);
+    }
+}
diff --git a/templates/auth/login.html.twig b/templates/auth/login.html.twig
index e32f82c..2b5a201 100644
--- a/templates/auth/login.html.twig
+++ b/templates/auth/login.html.twig
@@ -27,6 +27,9 @@
                         {% endif %}
 
                         <form method="post">
+                            {% if redirect %}
+                                <input type="hidden" name="redirect" value="{{ redirect }}">
+                            {% endif %}
                             <div class="mb-4">
                                 <label for="username" class="block text-sm font-semibold text-gray-700 mb-1">Login</label>
                                 <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" name="username" id="username" required autofocus/>
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 34c4376..7274070 100755
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -11,6 +11,7 @@
         <script src="{{ asset('build/runtime.js', 'phplist_web_frontend') }}" defer></script>
         <script src="{{ asset('build/app.js', 'phplist_web_frontend') }}" defer></script>
     {% endblock %}
+
 </head>
 <body>
 <main class="">
diff --git a/templates/public/base.html.twig b/templates/public/base.html.twig
new file mode 100755
index 0000000..862b686
--- /dev/null
+++ b/templates/public/base.html.twig
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}phpList{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{{ asset('build/subscribe.css', 'phplist_web_frontend') }}">
+    <link rel="stylesheet" href="{{ asset('build/color.css', 'phplist_web_frontend') }}">
+    <link rel="stylesheet" href="{{ asset('build/app.css', 'phplist_web_frontend') }}">
+    <link rel="stylesheet" href="{{ asset('build/styles.css', 'phplist_web_frontend') }}">
+
+    {% block javascripts %}
+        <script src="{{ asset('build/runtime.js', 'phplist_web_frontend') }}" defer></script>
+        <script src="{{ asset('build/app.js', 'phplist_web_frontend') }}" defer></script>
+    {% endblock %}
+
+    {{ data['header']|default('')|unescape_header|raw }}
+
+    {% block body %}{% endblock %}
+
+    {{ signature|raw }}
+
+    {{ data['footer']|default('')|unescape_header|raw }}
diff --git a/templates/public/subscribe.html.twig b/templates/public/subscribe.html.twig
new file mode 100644
index 0000000..ab0141c
--- /dev/null
+++ b/templates/public/subscribe.html.twig
@@ -0,0 +1,169 @@
+{% extends '@PhpListFrontend/public/base.html.twig' %}
+
+{% block title %}{{ language_texts.strSubscribeTitle|default('Subscribe') }}{% endblock %}
+
+{% block body %}
+    <div class="legacy-page-shell">
+        <section class="legacy-card">
+
+            {% if success_html %}
+                <div class="legacy-html-text">{{ success_html|raw }}</div>
+            {% else %}
+
+                {% if data['intro'] is defined and data['intro'] is not empty %}
+                    <div class="legacy-html-text">{{ data['intro']|raw }}</div>
+                {% endif %}
+
+                <div class="legacy-required-note">
+                    * {{ language_texts.strRequired|default('required fields are marked red') }}
+                </div>
+
+                {% if form_errors is not empty %}
+                    <div class="legacy-error-box">
+                        {% for error in form_errors %}
+                            <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+                <form method="post" action="{{ path('public_subscribe', {pageId: page_id}) }}" class="legacy-form" novalidate>
+                    {% if admin is not null %}
+                        <div class="adminmessage">
+                            <p><b>You are logged in as administrator ({{ admin.loginName }}) of this phpList system</b></p>
+                            <p>You are therefore offered the following choice, which your subscribers will not see when they load this page.</p>
+                            <p><a href="{{ admin_page_url }}" class="button">Go back to admin area</a></p>
+                            <p>
+                                <b>Please choose</b><br>
+                                <label><input type="radio" name="makeconfirmed" class="accent-ext-wf1" value="1" {% if form_data.make_confirmed == '1' %}checked{% endif %}> Make this subscriber confirmed immediately</label><br>
+                                <label><input type="radio" name="makeconfirmed" class="accent-ext-wf1" value="0" {% if form_data.make_confirmed != '1' %}checked{% endif %}> Send this subscriber a request for confirmation email</label>
+                            </p>
+                        </div>
+                    {% endif %}
+
+                    <div class="legacy-field-group inline-field">
+                        <label class="legacy-label" for="email">
+                            {{ language_texts.strEmail|default('Email') }} *
+                        </label>
+                        <input
+                                id="email"
+                                name="email"
+                                type="email"
+                                class="legacy-input"
+                                value="{{ form_data.email|default('') }}"
+                                required
+                                autocomplete="email"
+                        >
+                    </div>
+
+                    {% if email_double_entry %}
+                        <div class="legacy-field-group inline-field">
+                            <label class="legacy-label" for="emailconfirm">{{ language_texts.strConfirmEmail|default('Confirm your email address') }} *</label>
+                            <input id="emailconfirm" name="emailconfirm" type="email" class="legacy-input" value="{{ form_data.email_confirm|default('') }}" required autocomplete="email">
+                        </div>
+                    {% endif %}
+
+                    {% if html_choice == 'textonly' %}
+                        <input type="hidden" name="htmlemail" value="0">
+                    {% elseif html_choice == 'htmlonly' %}
+                        <input type="hidden" name="htmlemail" value="1">
+                    {% elseif html_choice == 'checkfortext' %}
+                        <div class="legacy-field-group">
+                            <label><input type="checkbox" name="textemail" value="1" {% if not form_data.htmlemail %}checked{% endif %}> {{ language_texts.strPreferTextEmail|default('I would like to receive emails in text format') }}</label>
+                        </div>
+                    {% elseif html_choice == 'radiotext' or html_choice == 'radiohtml' %}
+                        <div class="legacy-field-group  inline-field">
+                            <p class="legacy-label">{{ language_texts.strPreferredFormat|default('Preferred format') }}</p>
+                            <label><input type="radio" name="htmlemail" class="accent-ext-wf1" value="0" {% if not form_data.htmlemail %}checked{% endif %}> {{ language_texts.strText|default('Text') }}</label>
+                            <label><input type="radio" name="htmlemail" class="accent-ext-wf1" value="1" {% if form_data.htmlemail %}checked{% endif %}> {{ language_texts.strHTML|default('HTML') }}</label>
+                        </div>
+                    {% else %}
+                        <div class="legacy-field-group  inline-field">
+                            <label><input type="checkbox" name="htmlemail" value="1" {% if form_data.htmlemail %}checked{% endif %}> {{ language_texts.strPreferHTMLEmail|default('I would like to receive emails in HTML format') }}</label>
+                        </div>
+                    {% endif %}
+
+                    {% for attribute in attributes %}
+                        {% set field = 'attribute' ~ attribute.id %}
+                        {% set value = form_data.attributes[attribute.id]|default(attribute.default_value|default('')) %}
+                        {% if attribute.type == 'checkbox' %}
+                            <div class="legacy-field-group  checkbox-field">
+                                <label>
+                                    <input type="checkbox" id="{{ field }}" name="{{ field }}" value="1" {% if value %}checked{% endif %}>
+                                    <span class="{{ attribute.required ? 'legacy-label' : '' }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</span>
+                                </label>
+                            </div>
+                        {% elseif attribute.type == 'radio' %}
+                            <div class="legacy-field-group  inline-field">
+                                <p class="{{ attribute.required ? 'legacy-label' : '' }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</p>
+                                {% for option in attribute.options %}
+                                    <label><input type="radio" name="{{ field }}" class="accent-ext-wf1" value="{{ option.id }}" {% if value == option.id or value == (option.id ~ '') %}checked{% endif %}> {{ option.name }}</label>
+                                {% endfor %}
+                            </div>
+                        {% elseif attribute.type == 'select' %}
+                            <div class="legacy-field-group  inline-field">
+                                <label class="{{ attribute.required ? 'legacy-label' : '' }}" for="{{ field }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</label>
+                                <select id="{{ field }}" name="{{ field }}" class="legacy-input">
+                                    {% if not attribute.required %}
+                                        <option value="">--</option>
+                                    {% endif %}
+                                    {% for option in attribute.options %}
+                                        <option value="{{ option.id }}" {% if value == option.id or value ==  (option.id ~ '') %}selected{% endif %}>{{ option.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        {% elseif attribute.type == 'checkboxgroup' %}
+                            <div class="legacy-field-group checkbox-field">
+                                <p class="{{ attribute.required ? 'legacy-label' : '' }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</p>
+                                {% set selectedOptions = value is iterable ? value : [] %}
+                                {% for option in attribute.options %}
+                                    <label><input type="checkbox" class="legacy-input" name="{{ field }}[]" value="{{ option.id }}" {% if option.id in selectedOptions %}checked{% endif %}> {{ option.name }}</label>
+                                {% endfor %}
+                            </div>
+                        {% elseif attribute.type == 'textarea' %}
+                            <div class="legacy-field-group  inline-field">
+                                <label class="{{ attribute.required ? 'legacy-label' : '' }}" for="{{ field }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</label>
+                                <textarea id="{{ field }}" name="{{ field }}" class="legacy-input" rows="5">{{ value }}</textarea>
+                            </div>
+                        {% elseif attribute.type == 'hidden' %}
+                            <input type="hidden" id="{{ field }}" name="{{ field }}" value="{{ value }}">
+                        {% elseif attribute.type == 'date' %}
+                            <div class="legacy-field-group  inline-field">
+                                <label class="{{ attribute.required ? 'legacy-label' : '' }}" for="{{ field }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</label>
+                                <input id="{{ field }}" name="{{ field }}" type="date" class="legacy-input" value="{{ value }}">
+                            </div>
+                        {% else %}
+                            <div class="legacy-field-group  checkbox-field">
+                                <label class="{{ attribute.required ? 'legacy-label' : '' }}" for="{{ field }}">{{ attribute.name }}{% if attribute.required %} *{% endif %}</label>
+                                <input id="{{ field }}" name="{{ field }}" type="text" class="legacy-input" value="{{ value }}">
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+
+                    <fieldset class="legacy-lists">
+                        <legend>{{ language_texts.strPleaseSelect|default('Please select the newsletters you want to sign up to') }}</legend>
+                        <div class="legacy-list-options">
+                            {% for list in lists %}
+                                <label class="legacy-list-option">
+                                    <input type="checkbox" name="lists[]" value="{{ list.id }}" {% if list.id in form_data.selected_lists %}checked{% endif %}>
+                                    <span>
+                                        <strong>{{ list.name }}</strong>
+                                        {% if list.description %}<br><span>{{ list.description }}</span>{% endif %}
+                                    </span>
+                                </label>
+                            {% endfor %}
+                        </div>
+                    </fieldset>
+
+                    <div class="legacy-hidden">
+                        <input type="text" name="VerificationCodeX" value="">
+                    </div>
+
+                    <button type="submit" class="legacy-button">{{ data['button']|default(language_texts.strSubmit|default('Subscribe')) }}</button>
+                    {% if show_unsubscribe_link %}
+                        <a href="{{ unsubscribe_link }}">{{ language_texts.strUnsubscribe|default('Unsubscribe') }}</a>
+                    {% endif %}
+                </form>
+            {% endif %}
+        </section>
+    </div>
+
+{% endblock %}
diff --git a/templates/public/unsubscribe.html.twig b/templates/public/unsubscribe.html.twig
new file mode 100644
index 0000000..5db19a8
--- /dev/null
+++ b/templates/public/unsubscribe.html.twig
@@ -0,0 +1,37 @@
+{% extends '@PhpListFrontend/public/base.html.twig' %}
+
+{% block title %}{{ language_texts.strUnsubscribeTitle }}{% endblock %}
+
+{% block body %}
+    <div class="legacy-page-shell">
+        <section class="legacy-card">
+
+            {% if data['intro'] is defined and data['intro'] is not empty %}
+                <div class="legacy-html-text">{{ data['intro']|raw }}</div>
+            {% endif %}
+
+            {% if form_errors is not empty %}
+                <div class="legacy-error-box">
+                    {% for error in form_errors %}
+                        <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+            {% endif %}
+
+            {% if success %}
+                <div class="legacy-html-text">{{ language_texts.strUnsubscribeDone|raw }}</div>
+            {% else %}
+                <form method="post" action="{{ path('public_unsubscribe', { pageId: page_id }) }}" class="legacy-form" novalidate>
+
+                    <div class="legacy-field-group">
+                        <label class="legacy-label" for="email">{{ language_texts.strEnterEmail|default('Email') }} *</label>
+                        <input id="email" name="email" type="email" class="legacy-input" value="{{ form_data.email|default('') }}" required autocomplete="email">
+                    </div>
+
+                    <button type="submit" class="legacy-button">{{ language_texts.strContinue|default('Unsubscribe') }}</button>
+                </form>
+            {% endif %}
+
+        </section>
+    </div>
+{% endblock %}
diff --git a/templates/spa.html.twig b/templates/spa.html.twig
index d478a74..a0fda5a 100644
--- a/templates/spa.html.twig
+++ b/templates/spa.html.twig
@@ -7,6 +7,7 @@
          data-api-token="{{ api_token|default('') }}"
          data-api-base-url="{{ api_base_url|default('') }}"
          data-dashboard-stats="{{ dashboard_stats|default({})|json_encode|e('html_attr') }}"
+         data-dashboard-error="{{ dashboard_error|default('')|e('html_attr') }}"
          data-bounce-actions="{{ bounce_actions|default({})|json_encode|e('html_attr') }}">
     </div>
 {% endblock %}
diff --git a/tests/Integration/Controller/AnalyticsControllerTest.php b/tests/Integration/Controller/AnalyticsControllerTest.php
new file mode 100644
index 0000000..5691010
--- /dev/null
+++ b/tests/Integration/Controller/AnalyticsControllerTest.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PhpList\WebFrontend\Controller\AnalyticsController;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Session\Session;
+use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
+use Symfony\Component\Routing\RouterInterface;
+
+class AnalyticsControllerTest extends KernelTestCase
+{
+    public function testAnalyticsRouteIsRegistered(): void
+    {
+        self::bootKernel();
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/analytics/', $router->generate('analytics_list'));
+    }
+
+    public function testAnalyticsPageRendersExpectedSpaPayload(): void
+    {
+        self::bootKernel();
+        /** @var AnalyticsController $controller */
+        $controller = static::getContainer()->get(AnalyticsController::class);
+        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+
+        $request = Request::create('/analytics/');
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        $response = $controller->index($request);
+        $content = (string) $response->getContent();
+
+        self::assertSame(200, $response->getStatusCode());
+        self::assertStringContainsString('<title>phpList - Analytics</title>', $content);
+        self::assertStringContainsString('data-api-token="integration-token"', $content);
+        self::assertStringContainsString(sprintf('data-api-base-url="%s"', $apiBaseUrl), $content);
+    }
+}
diff --git a/tests/Integration/Controller/DashboardControllerTest.php b/tests/Integration/Controller/DashboardControllerTest.php
index b5c8061..a24a786 100644
--- a/tests/Integration/Controller/DashboardControllerTest.php
+++ b/tests/Integration/Controller/DashboardControllerTest.php
@@ -5,6 +5,8 @@
 namespace PhpList\WebFrontend\Tests\Integration\Controller;
 
 use PhpList\RestApiClient\Endpoint\StatisticsClient;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
 use PhpList\RestApiClient\Response\Statistics\DashboardStatisticsResponse;
 use PhpList\WebFrontend\Controller\DashboardController;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
@@ -52,6 +54,62 @@ public function testDashboardRendersSpaPayloadWithStats(): void
         self::assertStringContainsString('data-dashboard-stats=', $content);
         self::assertStringContainsString('&quot;recent_campaigns&quot;', $content);
         self::assertStringContainsString('Weekly&#x20;Digest', $content);
+        self::assertStringContainsString('data-dashboard-error=""', $content);
+    }
+
+    public function testDashboardPropagatesAuthenticationExceptionForLoginRedirect(): void
+    {
+        self::bootKernel();
+
+        $statsClient = $this->createMock(StatisticsClient::class);
+        $statsClient->expects(self::once())
+            ->method('getDashboardStats')
+            ->willThrowException(new AuthenticationException('Session expired'));
+
+        $controller = new DashboardController($statsClient);
+        $controller->setContainer(static::getContainer());
+
+        $request = Request::create('/');
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        // An expired session must not be rendered inline: the controller lets the
+        // AuthenticationException propagate so UnauthorizedSubscriber redirects to /login.
+        $this->expectException(AuthenticationException::class);
+        $this->expectExceptionMessage('Session expired');
+
+        $controller->index($request);
+    }
+
+    public function testDashboardRendersDashboardErrorWhenAuthorizationFails(): void
+    {
+        self::bootKernel();
+
+        $statsClient = $this->createMock(StatisticsClient::class);
+        $statsClient->expects(self::once())
+            ->method('getDashboardStats')
+            ->willThrowException(new AuthorizationException(
+                'No valid session key was provided as basic auth password.',
+                403
+            ));
+
+        $controller = new DashboardController($statsClient);
+        $controller->setContainer(static::getContainer());
+
+        $request = Request::create('/');
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        $response = $controller->index($request);
+        $content = (string) $response->getContent();
+
+        $error = 'data-dashboard-error="No&#x20;valid&#x20;session&#x20;key&#x20;was&#x20;provided&#x20;'
+            . 'as&#x20;basic&#x20;auth&#x20;password."';
+        self::assertSame(200, $response->getStatusCode());
+        self::assertStringContainsString($error, $content);
+        self::assertStringContainsString('data-dashboard-stats="&#x5B;&#x5D;"', $content);
     }
 
     private function createDashboardStatsResponse(): DashboardStatisticsResponse
diff --git a/tests/Integration/Controller/EditorUploadControllerTest.php b/tests/Integration/Controller/EditorUploadControllerTest.php
new file mode 100644
index 0000000..33d3d3b
--- /dev/null
+++ b/tests/Integration/Controller/EditorUploadControllerTest.php
@@ -0,0 +1,151 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PhpList\RestApiClient\Endpoint\UploadsClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\WebFrontend\Controller\EditorUploadController;
+use PhpList\WebFrontend\Service\EditorUploadService;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Session\Session;
+use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
+use Symfony\Component\Routing\RouterInterface;
+
+final class EditorUploadControllerTest extends KernelTestCase
+{
+    public function testUploadRouteIsRegistered(): void
+    {
+        self::bootKernel();
+
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/editor/upload', $router->generate('editor_upload'));
+    }
+
+    public function testAssetsRouteIsRegistered(): void
+    {
+        self::bootKernel();
+
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/editor/assets', $router->generate('editor_assets'));
+    }
+
+    public function testUploadReturnsAJsonUrl(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('upload')
+            ->willReturn([
+                'fileName' => 'newsletter-image.jpg',
+                'url' => '/uploadimages/newsletter-image.jpg',
+            ]);
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->upload($this->createUploadRequest());
+
+        self::assertSame(200, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+
+        self::assertSame('/uploadimages/newsletter-image.jpg', $payload['url']);
+        self::assertSame('newsletter-image.jpg', $payload['fileName']);
+    }
+
+    public function testUploadReturnsBadRequestWhenNoFileProvided(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $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());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('No file was provided.', $payload['error']['message']);
+    }
+
+    public function testUploadReturnsBadGatewayWhenApiFails(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new ApiException('boom', 500));
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->upload($this->createUploadRequest());
+
+        self::assertSame(502, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('Upload failed: boom', $payload['error']['message']);
+    }
+
+    public function testAssetsReturnsMappedItems(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('getUploads')
+            ->with('/')
+            ->willReturn([
+                'files' => [
+                    [
+                        'name' => 'asset.png',
+                        'url' => 'http://api.phplist.test/uploadimages/asset.png',
+                        'size' => 12,
+                        'type' => 'file',
+                        'modified' => 100,
+                    ],
+                ],
+            ]);
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->assets();
+        self::assertSame(200, $response->getStatusCode());
+
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertCount(1, $payload['items']);
+        self::assertSame('asset.png', $payload['items'][0]['fileName']);
+        self::assertTrue($payload['items'][0]['isImage']);
+    }
+
+    public function testAssetsReturnsBadGatewayWhenApiFails(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new ApiException('unavailable', 500));
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->assets();
+
+        self::assertSame(502, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('Failed to list assets: unavailable', $payload['error']['message']);
+    }
+
+    private function createUploadRequest(): Request
+    {
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, base64_decode(
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO3Z4foAAAAASUVORK5CYII='
+        ));
+
+        $uploadedFile = new UploadedFile($sourceFile, 'newsletter-image.jpg', 'image/png', null, true);
+
+        $request = Request::create('/editor/upload', 'POST', [], [], ['upload' => $uploadedFile]);
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        return $request;
+    }
+}
diff --git a/tests/Integration/Controller/ListsControllerPantherTest.php b/tests/Integration/Controller/ListsControllerPantherTest.php
index c364664..ecd3908 100644
--- a/tests/Integration/Controller/ListsControllerPantherTest.php
+++ b/tests/Integration/Controller/ListsControllerPantherTest.php
@@ -28,6 +28,7 @@ public function testAnonymousUserIsRedirectedToLoginForListsRoutes(string $path)
             'connection_timeout_in_ms' => 10000,
         ]);
         $client->request('GET', $path);
+        $client->takeScreenshot('var/screenshots/ananymouse-redirect-login.png');
 
         $this->assertPageTitleContains('phpList - Login');
         $this->assertSelectorExists('form');
@@ -41,8 +42,8 @@ public function testAnonymousUserIsRedirectedToLoginForListsRoutes(string $path)
     public function protectedListRoutesProvider(): array
     {
         return [
-            'lists index route' => ['/lists/'],
-            'list subscribers route' => ['/lists/11/subscribers'],
+            'lists index route' => ['/index.php/lists/'],
+            'list subscribers route' => ['/index.php/lists/11/subscribers'],
         ];
     }
 }
diff --git a/tests/Integration/Controller/PublicPagesControllerPantherTest.php b/tests/Integration/Controller/PublicPagesControllerPantherTest.php
new file mode 100644
index 0000000..f4650d6
--- /dev/null
+++ b/tests/Integration/Controller/PublicPagesControllerPantherTest.php
@@ -0,0 +1,74 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PHPUnitRetry\RetryAnnotationTrait;
+use PHPUnitRetry\RetryTrait;
+use Symfony\Component\Panther\PantherTestCase;
+
+/**
+ * @retryAttempts 1
+ * @retryIfException Facebook\WebDriver\Exception\NoSuchWindowException
+ * @retryDelaySeconds 5
+ */
+class PublicPagesControllerPantherTest extends PantherTestCase
+{
+    use RetryAnnotationTrait;
+    use RetryTrait;
+
+    /**
+     * @dataProvider protectedPublicPagesRoutesProvider
+     */
+    public function testAnonymousUserIsRedirectedToLoginForPublicPagesRoutes(string $path): void
+    {
+        $client = static::createPantherClient([
+            'browser' => static::CHROME,
+            'connection_timeout_in_ms' => 10000,
+        ]);
+        $client->request('GET', $path);
+
+        $this->assertPageTitleContains('phpList - Login');
+        $this->assertSelectorExists('form');
+        $this->assertSelectorExists('input[name="username"]');
+        $this->assertSelectorExists('input[name="password"]');
+    }
+
+    public function testAuthenticatedUserCanOpenPublicPagesIndex(): void
+    {
+        $client = static::createPantherClient([
+            'browser' => static::CHROME,
+            'connection_timeout_in_ms' => 20000,
+        ], [], [
+            '--window-size=1400,1000',
+        ]);
+        $client->request('GET', '/login');
+        $client->waitFor('form');
+
+        $form = $client->getCrawler()->filter('button[type="submit"]')->form([
+            'username' => 'admin',
+            'password' => 'admin',
+        ]);
+        $client->submit($form);
+        $client->waitFor('#vue-app');
+
+        $client->request('GET', '/public/');
+        $client->waitFor('#vue-app');
+
+        $this->assertPageTitleContains('phpList - Public Pages');
+        $this->assertSelectorExists('#vue-app');
+    }
+
+    /**
+     * @return array<string, array{string}>
+     */
+    public function protectedPublicPagesRoutesProvider(): array
+    {
+        return [
+            'public pages index route' => ['/public/'],
+            'public pages create route' => ['/public/create'],
+            'public pages edit route' => ['/public/11/edit'],
+        ];
+    }
+}
diff --git a/tests/Integration/Controller/PublicSubscribeControllerPantherTest.php b/tests/Integration/Controller/PublicSubscribeControllerPantherTest.php
new file mode 100644
index 0000000..b139891
--- /dev/null
+++ b/tests/Integration/Controller/PublicSubscribeControllerPantherTest.php
@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PHPUnitRetry\RetryAnnotationTrait;
+use PHPUnitRetry\RetryTrait;
+use Symfony\Component\Panther\PantherTestCase;
+
+/**
+ * @retryAttempts 1
+ * @retryIfException Facebook\WebDriver\Exception\NoSuchWindowException
+ * @retryDelaySeconds 5
+ */
+class PublicSubscribeControllerPantherTest extends PantherTestCase
+{
+    use RetryAnnotationTrait;
+    use RetryTrait;
+
+    private const PANTHER_OPTIONS = [
+        'browser' => self::CHROME,
+        'connection_timeout_in_ms' => 10000,
+        'env' => [
+            'APP_ENV' => 'test',
+            'APP_DEBUG' => '1',
+        ],
+    ];
+
+    /**
+     * @dataProvider publicSubscribeAssetRoutesProvider
+     */
+    public function testAnonymousUserCanAccessPublicSubscribeAssetRoutes(string $path): void
+    {
+        $client = static::createPantherClient(self::PANTHER_OPTIONS);
+        $client->getCookieJar()->clear();
+        $client->request('GET', $path);
+
+        $currentPath = (string) parse_url($client->getCurrentURL(), PHP_URL_PATH);
+
+        $this->assertSame($path, $currentPath);
+        $this->assertNotSame('/login', $currentPath);
+    }
+
+    /**
+     * @return array<string, array{string}>
+     */
+    public function publicSubscribeAssetRoutesProvider(): array
+    {
+        return [
+            'subscribe styles route' => ['/subscribe/styles/app.css'],
+            'subscribe images route' => ['/subscribe/images/favicon.ico'],
+            'unsubscribe images route' => ['/unsubscribe/images/favicon.ico'],
+        ];
+    }
+
+    /**
+     * @dataProvider publicSubscribePageRoutesProvider
+     */
+    public function testAnonymousUserCanAccessPublicSubscribeAndUnsubscribePages(string $path): void
+    {
+        $client = static::createPantherClient(self::PANTHER_OPTIONS);
+        $client->getCookieJar()->clear();
+        $client->request('GET', $path);
+
+        $currentPath = (string) parse_url($client->getCurrentURL(), PHP_URL_PATH);
+
+        $this->assertSame($path, $currentPath);
+        $this->assertNotSame('/login', $currentPath);
+    }
+
+    public function testSubscribePageDisplaysEmailFieldAndSubmitButton(): void
+    {
+        $client = static::createPantherClient(self::PANTHER_OPTIONS);
+        $client->getCookieJar()->clear();
+        $client->request('GET', '/index.php/subscribe/1');
+
+        $client->takeScreenshot('var/screenshots/public-subscribe-0.png');
+        $client->waitFor('form.legacy-form', 10);
+        $client->takeScreenshot('var/screenshots/public-subscribe-1.png');
+
+        $currentPath = (string) parse_url($client->getCurrentURL(), PHP_URL_PATH);
+
+        $this->assertSame('/index.php/subscribe/1', $currentPath);
+        $this->assertNotSame('/login', $currentPath);
+        $this->assertSelectorExists('form');
+        $this->assertSelectorExists('input[name="email"][type="email"]');
+        $this->assertSelectorExists('button[type="submit"]');
+    }
+
+    /**
+     * @return array<string, array{string}>
+     */
+    public function publicSubscribePageRoutesProvider(): array
+    {
+        return [
+            'subscribe page route' => ['/index.php/subscribe/1'],
+            'unsubscribe page route' => ['/index.php/unsubscribe/1'],
+        ];
+    }
+}
diff --git a/tests/Integration/Controller/PublicSubscribeControllerTest.php b/tests/Integration/Controller/PublicSubscribeControllerTest.php
new file mode 100644
index 0000000..65b717e
--- /dev/null
+++ b/tests/Integration/Controller/PublicSubscribeControllerTest.php
@@ -0,0 +1,97 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PhpList\Core\Domain\Configuration\Model\ConfigOption;
+use PhpList\Core\Domain\Configuration\Service\Provider\DefaultConfigProvider;
+use PhpList\RestApiClient\Endpoint\AuthClient;
+use PhpList\RestApiClient\Endpoint\SubscribePagesClient;
+use PhpList\RestApiClient\Entity\SubscribePagePublic;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\WebFrontend\Controller\PublicSubscribeController;
+use PhpList\WebFrontend\Service\LanguageService;
+use PhpList\WebFrontend\Service\PublicSubscribeFormBuilder;
+use PhpList\WebFrontend\Service\PublicSubscribeFormValidator;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\HttpFoundation\Request;
+
+class PublicSubscribeControllerTest extends KernelTestCase
+{
+    public function testSubscribePageRendersForAnonymousUserWhenAdminLookupApiFails(): void
+    {
+        self::bootKernel();
+
+        $subscribePagesClient = $this->createMock(SubscribePagesClient::class);
+        $subscribePagesClient->expects(self::once())
+            ->method('getPublicSubscribePage')
+            ->with(1)
+            ->willReturn($this->createPublicSubscribePage());
+
+        $authClient = $this->createMock(AuthClient::class);
+        $authClient->expects(self::once())
+            ->method('getSessionUser')
+            ->willThrowException(new ApiException('API error occurred', 500));
+
+        $config = $this->createMock(DefaultConfigProvider::class);
+        $config->expects(self::once())
+            ->method('get')
+            ->with(ConfigOption::PoweredByImage, [])
+            ->willReturn(['value' => '']);
+
+        $container = static::getContainer();
+        $formBuilder = $this->createMock(PublicSubscribeFormBuilder::class);
+        $formBuilder->expects(self::once())
+            ->method('normalizeHtmlChoice')
+            ->with('checkforhtml')
+            ->willReturn('checkforhtml');
+        $formBuilder->expects(self::once())
+            ->method('buildAttributeConfig')
+            ->willReturn([]);
+        $formBuilder->expects(self::once())
+            ->method('buildInitialFormData')
+            ->willReturn([
+                'email' => '',
+                'email_confirm' => '',
+                'make_confirmed' => '0',
+                'htmlemail' => true,
+                'selected_lists' => [],
+                'attributes' => [],
+            ]);
+
+        $controller = new PublicSubscribeController(
+            $subscribePagesClient,
+            $authClient,
+            new LanguageService(),
+            $formBuilder,
+            $this->createMock(PublicSubscribeFormValidator::class),
+            $config,
+            false
+        );
+        $controller->setContainer($container);
+
+        $response = $controller->subscribe(Request::create('/subscribe/1'), 1);
+        $content = (string) $response->getContent();
+
+        self::assertSame(200, $response->getStatusCode());
+        self::assertStringContainsString('form method="post"', $content);
+        self::assertStringContainsString('name="email"', $content);
+        self::assertStringContainsString('type="email"', $content);
+        self::assertStringContainsString('type="submit"', $content);
+        self::assertStringNotContainsString('adminmessage', $content);
+    }
+
+    private function createPublicSubscribePage(): SubscribePagePublic
+    {
+        return new SubscribePagePublic([
+            'id' => 1,
+            'title' => 'Subscribe to our newsletter',
+            'data' => [
+                'button' => 'Subscribe',
+                'htmlchoice' => 'checkforhtml',
+                'intro' => '<p>Subscribe to our newsletter</p>',
+            ],
+        ]);
+    }
+}
diff --git a/tests/Unit/Controller/AuthControllerTest.php b/tests/Unit/Controller/AuthControllerTest.php
index ab236a5..261d9bf 100644
--- a/tests/Unit/Controller/AuthControllerTest.php
+++ b/tests/Unit/Controller/AuthControllerTest.php
@@ -5,6 +5,7 @@
 namespace PhpList\WebFrontend\Tests\Unit\Controller;
 
 use PhpList\RestApiClient\Entity\Administrator;
+use PhpList\RestApiClient\Exception\ApiException;
 use PhpList\WebFrontend\Controller\AuthController;
 use PhpList\RestApiClient\Endpoint\AuthClient;
 use PHPUnit\Framework\Assert;
@@ -141,6 +142,48 @@ public function testLoginWithPostRequestSuccess(): void
         $this->assertStringContainsString('mocked-route-to-home', $response->getTargetUrl());
     }
 
+    public function testLoginWithPostRequestSuccessRedirectsToOriginalPath(): void
+    {
+        $session = $this->createMock(SessionInterface::class);
+        $session->method('has')
+            ->willReturnMap([
+                ['auth_token', false],
+                ['login_error', false]
+            ]);
+
+        $expected = [
+            ['auth_token', 'test-token'],
+            ['auth_expiry_date', '2026-03-18T14:15:38+04:00'],
+            ['auth_id', 1],
+        ];
+
+        $index = 0;
+
+        $session->expects($this->exactly(3))
+            ->method('set')
+            ->willReturnCallback(function ($key, $value) use (&$expected, &$index) {
+                Assert::assertSame($expected[$index][0], $key);
+                Assert::assertSame($expected[$index][1], $value);
+                $index++;
+            });
+
+        $request = Request::create('/login', 'POST', [
+            'username' => 'testuser',
+            'password' => 'testpass',
+            'redirect' => '/campaigns/42?tab=summary',
+        ]);
+        $request->setSession($session);
+
+        $this->authClient->method('login')
+            ->with('testuser', 'testpass')
+            ->willReturn(['key' => 'test-token', 'id' => 1, 'expiry_date' => '2026-03-18T14:15:38+04:00']);
+
+        $response = $this->controller->login($request);
+
+        $this->assertInstanceOf(RedirectResponse::class, $response);
+        $this->assertSame('/campaigns/42?tab=summary', $response->getTargetUrl());
+    }
+
     public function testLoginWithPostRequestFailure(): void
     {
         $session = $this->createMock(SessionInterface::class);
@@ -188,6 +231,42 @@ public function testLoginWithExistingSession(): void
         $this->assertStringContainsString('/', $response->getTargetUrl());
     }
 
+    public function testLoginWithExistingSessionAndRedirectTarget(): void
+    {
+        $session = $this->createMock(SessionInterface::class);
+        $session->method('has')
+            ->willReturnMap([
+                ['auth_token', true],
+                ['login_error', false]
+            ]);
+
+        $request = Request::create('/login', 'GET', ['redirect' => '/lists/5/subscribers']);
+        $request->setSession($session);
+
+        $response = $this->controller->login($request);
+
+        $this->assertInstanceOf(RedirectResponse::class, $response);
+        $this->assertSame('/lists/5/subscribers', $response->getTargetUrl());
+    }
+
+    public function testLoginWithUnsafeRedirectFallsBackToHomeRoute(): void
+    {
+        $session = $this->createMock(SessionInterface::class);
+        $session->method('has')
+            ->willReturnMap([
+                ['auth_token', true],
+                ['login_error', false]
+            ]);
+
+        $request = Request::create('/login', 'GET', ['redirect' => 'https://example.com/evil']);
+        $request->setSession($session);
+
+        $response = $this->controller->login($request);
+
+        $this->assertInstanceOf(RedirectResponse::class, $response);
+        $this->assertStringContainsString('mocked-route-to-home', $response->getTargetUrl());
+    }
+
     public function testLogout(): void
     {
         $session = $this->createMock(SessionInterface::class);
@@ -239,4 +318,16 @@ public function testAbout(): void
             $response->getContent()
         );
     }
+
+    public function testAboutReturnsBadGatewayWhenUpstreamFails(): void
+    {
+        $this->authClient->expects($this->once())
+            ->method('getSessionUser')
+            ->willThrowException(new ApiException('upstream down', 500));
+
+        $response = $this->controller->about();
+
+        $this->assertInstanceOf(JsonResponse::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+    }
 }
diff --git a/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php b/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php
new file mode 100644
index 0000000..653bf22
--- /dev/null
+++ b/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php
@@ -0,0 +1,124 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Unit\EventSubscriber;
+
+use Exception;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\ValidationException;
+use PhpList\WebFrontend\EventSubscriber\ApiExceptionSubscriber;
+use Symfony\Component\HttpFoundation\Response;
+use PHPUnit\Framework\TestCase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Event\ExceptionEvent;
+use Symfony\Component\HttpKernel\HttpKernelInterface;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+class ApiExceptionSubscriberTest extends TestCase
+{
+    private ApiExceptionSubscriber $subscriber;
+
+    protected function setUp(): void
+    {
+        $this->subscriber = new ApiExceptionSubscriber();
+    }
+
+    public function testGetSubscribedEvents(): void
+    {
+        $events = ApiExceptionSubscriber::getSubscribedEvents();
+
+        $this->assertArrayHasKey(KernelEvents::EXCEPTION, $events);
+        $this->assertEquals('onKernelException', $events[KernelEvents::EXCEPTION]);
+    }
+
+    public function testOnKernelExceptionWithOtherException(): void
+    {
+        $exception = new Exception('Some other error');
+
+        $request = $this->createMock(Request::class);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $exception
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $this->assertNull($event->getResponse());
+    }
+
+    public function testOnKernelExceptionMapsUpstreamApiFailureToBadGateway(): void
+    {
+        $apiException = new ApiException('API request failed', 500);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $apiException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $response = $event->getResponse();
+        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+    }
+
+    public function testOnKernelExceptionMapsUpstreamApiFailureToBadGatewayForXhr(): void
+    {
+        // statusCode 0 models a transport failure (connection refused / timeout).
+        $apiException = new ApiException('API request failed', 0);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(true);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $apiException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $response = $event->getResponse();
+        $this->assertInstanceOf(JsonResponse::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+
+        $data = json_decode($response->getContent(), true);
+        $this->assertEquals('upstream_unavailable', $data['error']);
+    }
+
+    public function testOnKernelExceptionLeavesClientShapedApiExceptionUntouched(): void
+    {
+        // A ValidationException (400/422) extends ApiException but is a genuine client error;
+        // it must not be converted to a 502.
+        $validationException = new ValidationException('Validation failed', 422);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $validationException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $this->assertNull($event->getResponse());
+    }
+}
diff --git a/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php b/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php
new file mode 100644
index 0000000..6096a2c
--- /dev/null
+++ b/tests/Unit/EventSubscriber/AuthGateSubscriberTest.php
@@ -0,0 +1,115 @@
+<?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/EventSubscriber/UnauthorizedSubscriberTest.php b/tests/Unit/EventSubscriber/UnauthorizedSubscriberTest.php
index ee80b4e..1183935 100644
--- a/tests/Unit/EventSubscriber/UnauthorizedSubscriberTest.php
+++ b/tests/Unit/EventSubscriber/UnauthorizedSubscriberTest.php
@@ -6,6 +6,7 @@
 
 use Exception;
 use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
 use PhpList\WebFrontend\EventSubscriber\UnauthorizedSubscriber;
 use PHPUnit\Framework\MockObject\MockObject;
 use PHPUnit\Framework\TestCase;
@@ -55,6 +56,8 @@ public function testOnKernelExceptionWithUnauthorizedException(): void
         $request = $this->createMock(Request::class);
         $request->method('hasSession')->willReturn(true);
         $request->method('getSession')->willReturn($session);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+        $request->method('getRequestUri')->willReturn('/dashboard?range=30d');
 
         $kernel = $this->createMock(HttpKernelInterface::class);
         $event = new ExceptionEvent(
@@ -73,7 +76,39 @@ public function testOnKernelExceptionWithUnauthorizedException(): void
 
         $response = $event->getResponse();
         $this->assertInstanceOf(RedirectResponse::class, $response);
-        $this->assertEquals($loginUrl, $response->getTargetUrl());
+        $this->assertEquals('/login?redirect=%2Fdashboard%3Frange%3D30d', $response->getTargetUrl());
+    }
+
+    public function testOnKernelExceptionWithAuthorizationException(): void
+    {
+        $authException = new AuthorizationException('No valid session key was provided as basic auth password.', 403);
+
+        $session = $this->createMock(SessionInterface::class);
+        $session->expects($this->never())->method('invalidate');
+
+        $request = $this->createMock(Request::class);
+        $request->method('hasSession')->willReturn(true);
+        $request->method('getSession')->willReturn($session);
+        $request->method('isXmlHttpRequest')->willReturn(true);
+        $request->method('getRequestUri')->willReturn('/dashboard');
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $authException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $response = $event->getResponse();
+        $this->assertInstanceOf(JsonResponse::class, $response);
+        $this->assertEquals(403, $response->getStatusCode());
+
+        $data = json_decode($response->getContent(), true);
+        $this->assertEquals('access_denied', $data['error']);
+        $this->assertEquals('Access denied.', $data['message']);
     }
 
     public function testOnKernelExceptionWithOtherException(): void
@@ -106,6 +141,7 @@ public function testOnKernelExceptionWithXmlHttpRequest(): void
         $request->method('hasSession')->willReturn(true);
         $request->method('getSession')->willReturn($session);
         $request->method('isXmlHttpRequest')->willReturn(true);
+        $request->method('getRequestUri')->willReturn('/campaigns/15?tab=stats');
 
         $kernel = $this->createMock(HttpKernelInterface::class);
         $event = new ExceptionEvent(
@@ -128,7 +164,7 @@ public function testOnKernelExceptionWithXmlHttpRequest(): void
 
         $data = json_decode($response->getContent(), true);
         $this->assertEquals('session_expired', $data['error']);
-        $this->assertEquals($loginUrl, $data['redirect']);
+        $this->assertEquals('/login?redirect=%2Fcampaigns%2F15%3Ftab%3Dstats', $data['redirect']);
     }
 
     public function testOnKernelExceptionWithoutSession(): void
@@ -137,6 +173,8 @@ public function testOnKernelExceptionWithoutSession(): void
 
         $request = $this->createMock(Request::class);
         $request->method('hasSession')->willReturn(false);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+        $request->method('getRequestUri')->willReturn('/lists/3/subscribers?page=2');
 
         $kernel = $this->createMock(HttpKernelInterface::class);
         $event = new ExceptionEvent(
@@ -155,6 +193,6 @@ public function testOnKernelExceptionWithoutSession(): void
 
         $response = $event->getResponse();
         $this->assertInstanceOf(RedirectResponse::class, $response);
-        $this->assertEquals($loginUrl, $response->getTargetUrl());
+        $this->assertEquals('/login?redirect=%2Flists%2F3%2Fsubscribers%3Fpage%3D2', $response->getTargetUrl());
     }
 }
diff --git a/tests/Unit/Security/SessionAuthenticatorTest.php b/tests/Unit/Security/SessionAuthenticatorTest.php
index da3959b..3445ee3 100644
--- a/tests/Unit/Security/SessionAuthenticatorTest.php
+++ b/tests/Unit/Security/SessionAuthenticatorTest.php
@@ -42,6 +42,18 @@ public function testSupportsReturnsFalseForLoginPath(): void
         $this->assertFalse($this->authenticator->supports($request));
     }
 
+    public function testSupportsReturnsFalseForUnsubscribePaths(): void
+    {
+        $request = Request::create('/unsubscribe');
+        $this->assertFalse($this->authenticator->supports($request));
+
+        $request = Request::create('/unsubscribe/7');
+        $this->assertFalse($this->authenticator->supports($request));
+
+        $request = Request::create('/subscribe');
+        $this->assertFalse($this->authenticator->supports($request));
+    }
+
     public function testSupportsReturnsTrueForOtherPaths(): void
     {
         $request = Request::create('/dashboard');
@@ -109,25 +121,25 @@ public function testOnAuthenticationSuccessReturnsNull(): void
     public function testOnAuthenticationFailureRedirectsToLogin(): void
     {
         $this->urlGenerator->method('generate')->with('login')->willReturn('/login');
-        
-        $request = Request::create('/dashboard');
+
+        $request = Request::create('/dashboard?tab=performance');
         $exception = new AuthenticationException('Auth failed');
-        
+
         $response = $this->authenticator->onAuthenticationFailure($request, $exception);
-        
+
         $this->assertInstanceOf(RedirectResponse::class, $response);
-        $this->assertEquals('/login', $response->getTargetUrl());
+        $this->assertEquals('/login?redirect=%2Fdashboard%3Ftab%3Dperformance', $response->getTargetUrl());
     }
 
     public function testStartRedirectsToLogin(): void
     {
         $this->urlGenerator->method('generate')->with('login')->willReturn('/login');
-        
-        $request = Request::create('/dashboard');
-        
+
+        $request = Request::create('/dashboard?tab=overview');
+
         $response = $this->authenticator->start($request);
-        
+
         $this->assertInstanceOf(RedirectResponse::class, $response);
-        $this->assertEquals('/login', $response->getTargetUrl());
+        $this->assertEquals('/login?redirect=%2Fdashboard%3Ftab%3Doverview', $response->getTargetUrl());
     }
 }
diff --git a/tests/Unit/Service/EditorUploadServiceTest.php b/tests/Unit/Service/EditorUploadServiceTest.php
new file mode 100644
index 0000000..72c5683
--- /dev/null
+++ b/tests/Unit/Service/EditorUploadServiceTest.php
@@ -0,0 +1,232 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Unit\Service;
+
+use PhpList\RestApiClient\Endpoint\UploadsClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\NotFoundException;
+use PhpList\WebFrontend\Exception\UpstreamServiceException;
+use PhpList\WebFrontend\Service\EditorUploadService;
+use PHPUnit\Framework\TestCase;
+use RuntimeException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+final class EditorUploadServiceTest extends TestCase
+{
+    public function testStoreImageUploadsThroughApiAndReturnsResult(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('upload')
+            ->with(
+                self::callback(static fn (string $path): bool => str_ends_with($path, '.png')),
+                'upload'
+            )
+            ->willReturn([
+                'fileName' => 'hero-image.png',
+                'url' => '/uploadimages/hero-image.png',
+            ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $result = $service->storeImage($this->createImageUpload());
+
+        self::assertSame('hero-image.png', $result->fileName);
+        self::assertSame('/uploadimages/hero-image.png', $result->relativeUrl);
+    }
+
+    public function testStoreImageFallsBackToClientNameAndBuiltUrl(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')->willReturn([]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $result = $service->storeImage($this->createImageUpload('hero image.png'));
+
+        self::assertSame('hero image.png', $result->fileName);
+        self::assertSame('/uploadimages/hero%20image.png', $result->relativeUrl);
+    }
+
+    public function testStoreImageRejectsNonImageUploads(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::never())->method('upload');
+
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, 'just some plain text, definitely not an image');
+        $upload = new UploadedFile($sourceFile, 'notes.txt', 'text/plain', null, true);
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(RuntimeException::class);
+        $this->expectExceptionMessage('Only image uploads are supported.');
+
+        $service->storeImage($upload);
+    }
+
+    public function testStoreImageRejectsFilesExceedingMaxSize(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::never())->method('upload');
+
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        // Write just over the 10 MB limit so the size check trips before upload.
+        file_put_contents($sourceFile, str_repeat("\0", 10 * 1024 * 1024 + 1));
+        $upload = new UploadedFile($sourceFile, 'huge.png', 'image/png', null, true);
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(RuntimeException::class);
+        $this->expectExceptionMessage('The uploaded file exceeds the maximum allowed size of 10 MB.');
+
+        $service->storeImage($upload);
+    }
+
+    public function testStoreImageWrapsApiErrorsInUpstreamServiceException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new ApiException('boom', 500));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(UpstreamServiceException::class);
+        $this->expectExceptionMessage('Upload failed: boom');
+
+        $service->storeImage($this->createImageUpload());
+    }
+
+    public function testStoreImageRethrowsAuthenticationException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new AuthenticationException('Session expired', 401));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(AuthenticationException::class);
+
+        $service->storeImage($this->createImageUpload());
+    }
+
+    public function testListAssetsMapsApiFieldsAndSortsByNewestFirst(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('getUploads')
+            ->with('/')
+            ->willReturn([
+                // Real API listing shape: name/url/size/type/modified, no mimeType.
+                'files' => [
+                    [
+                        'name' => 'image-one.png',
+                        'url' => 'http://api.phplist.test/uploadimages/image-one.png',
+                        'size' => 120,
+                        'type' => 'file',
+                        'modified' => 100,
+                    ],
+                    [
+                        'name' => 'notes.txt',
+                        'url' => 'http://api.phplist.test/uploadimages/notes.txt',
+                        'size' => 8,
+                        'type' => 'file',
+                        'modified' => 200,
+                    ],
+                ],
+            ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $assets = $service->listAssets();
+
+        self::assertCount(2, $assets);
+        self::assertSame('notes.txt', $assets[0]->fileName);
+        self::assertFalse($assets[0]->isImage);
+        self::assertSame('http://api.phplist.test/uploadimages/notes.txt', $assets[0]->url);
+        self::assertSame(200, $assets[0]->modifiedAt);
+        self::assertSame('image-one.png', $assets[1]->fileName);
+        self::assertTrue($assets[1]->isImage);
+        self::assertSame('image/png', $assets[1]->mimeType);
+        self::assertSame(100, $assets[1]->modifiedAt);
+    }
+
+    public function testListAssetsSkipsDirectoriesAndUnnamedEntries(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')->willReturn([
+            'files' => [
+                ['type' => 'file'],
+                ['name' => 'nested', 'type' => 'directory'],
+                [
+                    'name' => 'kept.png',
+                    'type' => 'file',
+                    'url' => 'http://api.phplist.test/uploads/kept.png',
+                    'size' => '2MB',
+                ],
+            ],
+        ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $assets = $service->listAssets();
+
+        self::assertCount(1, $assets);
+        self::assertSame('kept.png', $assets[0]->fileName);
+    }
+
+    public function testListAssetsReturnsEmptyWhenDirectoryMissing(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new NotFoundException('Directory "uploadimages" not found.', 404));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        self::assertSame([], $service->listAssets());
+    }
+
+    public function testListAssetsWrapsApiErrorsInUpstreamServiceException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new ApiException('unavailable', 500));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(UpstreamServiceException::class);
+        $this->expectExceptionMessage('Failed to list assets: unavailable');
+
+        $service->listAssets();
+    }
+
+    public function testListAssetsRethrowsAuthenticationException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new AuthenticationException('Session expired', 401));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(AuthenticationException::class);
+
+        $service->listAssets();
+    }
+
+    private function createImageUpload(string $clientName = 'newsletter-image.png'): UploadedFile
+    {
+        return new UploadedFile($this->createSourceFile(), $clientName, 'image/png', null, true);
+    }
+
+    private function createSourceFile(): string
+    {
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, base64_decode(
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO3Z4foAAAAASUVORK5CYII='
+        ));
+
+        return $sourceFile;
+    }
+}
diff --git a/tests/Unit/assets/editor/CkEditor.spec.js b/tests/Unit/assets/editor/CkEditor.spec.js
new file mode 100644
index 0000000..1848b12
--- /dev/null
+++ b/tests/Unit/assets/editor/CkEditor.spec.js
@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CkEditor from '../../../../assets/editor/CkEditor.vue'
+
+vi.mock('ckeditor5', () => ({
+  ClassicEditor: {},
+  Alignment: {},
+  AutoImage: {},
+  AutoLink: {},
+  Autosave: {},
+  Essentials: {},
+  Paragraph: {},
+  Bold: {},
+  Italic: {},
+  Heading: {},
+  Code: {},
+  FontBackgroundColor: {},
+  FontColor: {},
+  FontFamily: {},
+  FontSize: {},
+  Link: {},
+  List: {},
+  ListProperties: {},
+  BlockQuote: {},
+  Highlight: {},
+  Table: {},
+  TableCaption: {},
+  TableCellProperties: {},
+  TableColumnResize: {},
+  TableLayout: {},
+  TableProperties: {},
+  TableToolbar: {},
+  HorizontalLine: {},
+  HtmlEmbed: {},
+  SourceEditing: {},
+  RemoveFormat: {},
+  Strikethrough: {},
+  Subscript: {},
+  Superscript: {},
+  Underline: {},
+  TextTransformation: {},
+  TodoList: {},
+  Indent: {},
+  IndentBlock: {},
+  MediaEmbed: {},
+  Image: {},
+  ImageToolbar: {},
+  ImageCaption: {},
+  ImageStyle: {},
+  ImageResize: {},
+  ImageUpload: {},
+  ImageInsert: {},
+  ImageInsertUI: {},
+  ImageInsertViaUrl: {},
+  ImageInline: {},
+  ImageBlock: {},
+  LinkImage: {},
+  PictureEditing: {},
+  PlainTableOutput: {},
+  FileRepository: {},
+  GeneralHtmlSupport: {},
+  Plugin: class {},
+  ButtonView: class {},
+}))
+
+vi.mock('@ckeditor/ckeditor5-vue', () => ({
+  Ckeditor: {
+    name: 'ckeditor',
+    props: [
+      'modelValue',
+      'editor',
+      'config',
+      'id',
+      'disabled',
+    ],
+    emits: ['update:modelValue', 'ready'],
+    template: `
+      <div class="ckeditor-stub">
+        <button class="change-value" @click="$emit('update:modelValue', '<p>Updated</p>')">
+          Update
+        </button>
+        <button class="ready" @click="$emit('ready', {
+          plugins: { get: () => ({ createUploadAdapter: null }) },
+          enableReadOnlyMode: () => {},
+          disableReadOnlyMode: () => {},
+          destroy: () => Promise.resolve(),
+        })">
+          Ready
+        </button>
+      </div>
+    `,
+  },
+}))
+
+describe('CkEditor', () => {
+  const createWrapper = (props = {}) =>
+    mount(CkEditor, {
+      props: {
+        ...props,
+      },
+    })
+
+  it('syncs v-model updates', async () => {
+    const wrapper = createWrapper({ modelValue: '<p>Initial</p>' })
+
+    await wrapper.find('.change-value').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['<p>Updated</p>'],
+    ])
+  })
+
+  it('passes the expected editor config', () => {
+    const wrapper = createWrapper()
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    const config = editor.props('config')
+
+    expect(config.licenseKey).toBe('GPL')
+    expect(config.toolbar).toContain('insertImage')
+    expect(config.toolbar).toContain('assetBrowser')
+    expect(config.htmlSupport.allow[0].name).toBeDefined()
+  })
+
+  it('exposes an asset picker hook in the editor config', () => {
+    const wrapper = createWrapper()
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    const config = editor.props('config')
+
+    expect(typeof config.openAssetPicker).toBe('function')
+  })
+
+  it('disables the editor when readonly is set', () => {
+    const wrapper = createWrapper({ readonly: true })
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    expect(editor.props('disabled')).toBe(true)
+  })
+})
diff --git a/tests/Unit/assets/editor/uploadAdapter.spec.js b/tests/Unit/assets/editor/uploadAdapter.spec.js
new file mode 100644
index 0000000..7f60758
--- /dev/null
+++ b/tests/Unit/assets/editor/uploadAdapter.spec.js
@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import EditorUploadAdapter from '../../../../assets/editor/uploadAdapter.ts'
+
+const originalXhr = global.XMLHttpRequest
+
+describe('EditorUploadAdapter', () => {
+  let listeners
+  let sendMock
+
+  beforeEach(() => {
+    listeners = {}
+    sendMock = vi.fn()
+
+    global.XMLHttpRequest = class {
+      constructor() {
+        this.upload = {
+          addEventListener: (event, handler) => {
+            listeners[`upload:${event}`] = handler
+          },
+        }
+        this.addEventListener = (event, handler) => {
+          listeners[event] = handler
+        }
+        this.open = vi.fn()
+        this.setRequestHeader = vi.fn()
+        this.send = sendMock
+        this.abort = vi.fn()
+        this.response = null
+        this.responseText = ''
+        this.responseType = ''
+        this.withCredentials = false
+      }
+    }
+  })
+
+  afterEach(() => {
+    global.XMLHttpRequest = originalXhr
+  })
+
+  it('uploads files and resolves the returned URL', async () => {
+    const loader = {
+      file: Promise.resolve(new File(['image'], 'banner.png', { type: 'image/png' })),
+    }
+
+    const adapter = new EditorUploadAdapter(loader, {
+      endpoint: '/editor/upload',
+    })
+
+    const uploadPromise = adapter.upload()
+    await Promise.resolve()
+    const xhr = adapter.xhr
+
+    xhr.response = { url: '/uploadimages/ckeditor5/banner.png' }
+    listeners.load()
+
+    await expect(uploadPromise).resolves.toEqual({
+      default: '/uploadimages/ckeditor5/banner.png',
+    })
+
+    expect(sendMock).toHaveBeenCalledOnce()
+    expect(xhr.open).toHaveBeenCalledWith('POST', '/editor/upload', true)
+  })
+
+  it('rejects when the backend returns an error message', async () => {
+    const loader = {
+      file: Promise.resolve(new File(['image'], 'banner.png', { type: 'image/png' })),
+    }
+
+    const adapter = new EditorUploadAdapter(loader)
+    const uploadPromise = adapter.upload()
+    await Promise.resolve()
+
+    adapter.xhr.response = { error: { message: 'Upload failed.' } }
+    listeners.load()
+
+    await expect(uploadPromise).rejects.toBe('Upload failed.')
+  })
+})
diff --git a/tests/Unit/assets/vue/components/base/BaseBadge.spec.js b/tests/Unit/assets/vue/components/base/BaseBadge.spec.js
new file mode 100644
index 0000000..e590be0
--- /dev/null
+++ b/tests/Unit/assets/vue/components/base/BaseBadge.spec.js
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils'
+import BaseBadge from '../../../../../../assets/vue/components/base/BaseBadge.vue'
+
+describe('BaseBadge', () => {
+  it('applies shared base badge classes', () => {
+    const wrapper = mount(BaseBadge)
+    const classes = wrapper.get('span').classes()
+
+    expect(classes).toContain('inline-flex')
+    expect(classes).toContain('items-center')
+    expect(classes).toContain('px-2')
+    expect(classes).toContain('py-0.5')
+    expect(classes).toContain('rounded-full')
+    expect(classes).toContain('text-xs')
+    expect(classes).toContain('font-medium')
+  })
+
+  it('renders neutral variant by default', () => {
+    const wrapper = mount(BaseBadge, {
+      slots: {
+        default: 'All',
+      },
+    })
+
+    const classes = wrapper.get('span').classes()
+    expect(wrapper.text()).toContain('All')
+    expect(classes).toContain('bg-gray-100')
+    expect(classes).toContain('text-gray-800')
+  })
+
+  it('renders counter variant styles', () => {
+    const wrapper = mount(BaseBadge, {
+      props: {
+        variant: 'counter',
+      },
+      slots: {
+        default: '10',
+      },
+    })
+
+    const classes = wrapper.get('span').classes()
+    expect(classes).toContain('bg-indigo-50')
+    expect(classes).toContain('text-ext-wf3')
+    expect(classes).toContain('border')
+    expect(classes).toContain('border-indigo-100')
+    expect(wrapper.text()).toContain('10')
+  })
+
+  it('falls back to neutral styles for unknown variant', () => {
+    const wrapper = mount(BaseBadge, {
+      props: {
+        variant: 'unexpected',
+      },
+    })
+
+    const classes = wrapper.get('span').classes()
+    expect(classes).toContain('bg-gray-100')
+    expect(classes).toContain('text-gray-800')
+  })
+
+  it('forwards attributes to the root span', () => {
+    const wrapper = mount(BaseBadge, {
+      attrs: {
+        'data-testid': 'badge',
+      },
+    })
+
+    expect(wrapper.get('span').attributes('data-testid')).toBe('badge')
+  })
+})
diff --git a/assets/vue/components/base/BaseButton.spec.js b/tests/Unit/assets/vue/components/base/BaseButton.spec.js
similarity index 93%
rename from assets/vue/components/base/BaseButton.spec.js
rename to tests/Unit/assets/vue/components/base/BaseButton.spec.js
index 5a0106b..46f27a5 100644
--- a/assets/vue/components/base/BaseButton.spec.js
+++ b/tests/Unit/assets/vue/components/base/BaseButton.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import BaseButton from './BaseButton.vue'
+import BaseButton from '../../../../../../assets/vue/components/base/BaseButton.vue'
 
 describe('BaseButton', () => {
   it('renders slot content', () => {
diff --git a/tests/Unit/assets/vue/components/base/BaseCard.spec.js b/tests/Unit/assets/vue/components/base/BaseCard.spec.js
new file mode 100644
index 0000000..b298f8b
--- /dev/null
+++ b/tests/Unit/assets/vue/components/base/BaseCard.spec.js
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import BaseCard from '../../../../../../assets/vue/components/base/BaseCard.vue'
+
+describe('BaseCard.vue', () => {
+    describe('default variant', () => {
+        it('renders with default variant when no prop is passed', () => {
+            const wrapper = mount(BaseCard)
+            expect(wrapper.classes()).toContain('rounded-lg')
+            expect(wrapper.classes()).toContain('shadow-sm')
+            expect(wrapper.classes()).toContain('border')
+            expect(wrapper.classes()).toContain('border-gray-100')
+            expect(wrapper.classes()).toContain('bg-white')
+        })
+
+        it('renders body with default padding', () => {
+            const wrapper = mount(BaseCard)
+            const body = wrapper.find('[data-testid="card-body"]')
+            expect(body.classes()).toContain('p-4')
+        })
+    })
+
+    describe('subtle variant', () => {
+        it('applies subtle card classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'subtle' } })
+            expect(wrapper.classes()).toContain('bg-gray-50')
+            expect(wrapper.classes()).toContain('border-0')
+            expect(wrapper.classes()).not.toContain('bg-white')
+        })
+
+        it('applies subtle body classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'subtle' } })
+            const body = wrapper.find('[data-testid="card-body"]')
+            expect(body.classes()).toContain('p-4')
+        })
+    })
+
+    describe('danger variant', () => {
+        it('applies danger card classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'danger' } })
+            expect(wrapper.classes()).toContain('bg-red-600')
+            expect(wrapper.classes()).toContain('text-white')
+            expect(wrapper.classes()).toContain('border-0')
+        })
+
+        it('applies danger body classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'danger' } })
+            const body = wrapper.find('[data-testid="card-body"]')
+            expect(body.classes()).toContain('p-4')
+        })
+    })
+
+    describe('success variant', () => {
+        it('applies success card classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'success' } })
+            expect(wrapper.classes()).toContain('bg-green-600')
+            expect(wrapper.classes()).toContain('text-white')
+            expect(wrapper.classes()).toContain('border-0')
+        })
+
+        it('applies success body classes', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'success' } })
+            const body = wrapper.find('[data-testid="card-body"]')
+            expect(body.classes()).toContain('p-4')
+        })
+    })
+
+    describe('unknown variant fallback', () => {
+        it('falls back to default classes for an unrecognised variant', () => {
+            const wrapper = mount(BaseCard, { props: { variant: 'ghost' } })
+            expect(wrapper.classes()).toContain('bg-white')
+            expect(wrapper.classes()).toContain('border-gray-100')
+        })
+    })
+})
diff --git a/assets/vue/components/base/BaseIcon.spec.js b/tests/Unit/assets/vue/components/base/BaseIcon.spec.js
similarity index 90%
rename from assets/vue/components/base/BaseIcon.spec.js
rename to tests/Unit/assets/vue/components/base/BaseIcon.spec.js
index 047d803..c132b38 100644
--- a/assets/vue/components/base/BaseIcon.spec.js
+++ b/tests/Unit/assets/vue/components/base/BaseIcon.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import BaseIcon from './BaseIcon.vue'
+import BaseIcon from '../../../../../../assets/vue/components/base/BaseIcon.vue'
 
 describe('BaseIcon', () => {
   it('renders icon svg for known icon name', () => {
diff --git a/assets/vue/components/base/BaseProgressBar.spec.js b/tests/Unit/assets/vue/components/base/BaseProgressBar.spec.js
similarity index 90%
rename from assets/vue/components/base/BaseProgressBar.spec.js
rename to tests/Unit/assets/vue/components/base/BaseProgressBar.spec.js
index bc4a6fd..b9df57e 100644
--- a/assets/vue/components/base/BaseProgressBar.spec.js
+++ b/tests/Unit/assets/vue/components/base/BaseProgressBar.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import BaseProgressBar from './BaseProgressBar.vue'
+import BaseProgressBar from '../../../../../../assets/vue/components/base/BaseProgressBar.vue'
 
 describe('BaseProgressBar', () => {
   it('applies default height and progress attributes', () => {
diff --git a/tests/Unit/assets/vue/components/base/CkEditorField.spec.js b/tests/Unit/assets/vue/components/base/CkEditorField.spec.js
new file mode 100644
index 0000000..21bf85a
--- /dev/null
+++ b/tests/Unit/assets/vue/components/base/CkEditorField.spec.js
@@ -0,0 +1,141 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CkEditorField from '../../../../../../assets/vue/components/base/CkEditorField.vue'
+
+const CkEditorStub = {
+    name: 'CkEditor',
+    props: [
+        'modelValue',
+        'id',
+        'readonly',
+        'disabled',
+        'minHeight',
+        'uploadEndpoint',
+        'uploadHeaders',
+        'withCredentials',
+        'toolbar',
+        'plugins',
+        'config',
+    ],
+    emits: ['update:modelValue'],
+    template: `
+      <div class="ckeditor-stub">
+        <button class="change-value" @click="$emit('update:modelValue', '<p>Updated</p>')">
+          Update
+        </button>
+      </div>
+    `,
+}
+
+describe('CkEditorField', () => {
+    const createWrapper = (props = {}) =>
+        mount(CkEditorField, {
+            props: {
+                ...props,
+            },
+            global: {
+                stubs: {
+                    CkEditor: CkEditorStub,
+                },
+            },
+        })
+
+    it('renders label when provided', () => {
+        const wrapper = createWrapper({
+            label: 'Content',
+        })
+
+        expect(wrapper.text()).toContain('Content')
+    })
+
+    it('does not render label when not provided', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.find('label').exists())
+            .toBe(false)
+    })
+
+    it('passes modelValue to ckeditor', () => {
+        const wrapper = createWrapper({
+            modelValue: '<p>Hello</p>',
+        })
+
+        const editor = wrapper.findComponent(CkEditorStub)
+
+        expect(editor.props('modelValue'))
+            .toBe('<p>Hello</p>')
+    })
+
+    it('emits update:modelValue', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('.change-value')
+            .trigger('click')
+
+        expect(
+            wrapper.emitted('update:modelValue')
+        ).toEqual([
+            ['<p>Updated</p>'],
+        ])
+    })
+
+    it('uses provided id', () => {
+        const wrapper = createWrapper({
+            id: 'content-editor',
+            label: 'Content',
+        })
+
+        const label = wrapper.find('label')
+
+        expect(label.attributes('for'))
+            .toBe('content-editor')
+    })
+
+    it('generates an id when one is not provided', () => {
+        const wrapper = createWrapper({
+            label: 'Content',
+        })
+
+        const label = wrapper.find('label')
+
+        expect(
+            label.attributes('for')
+        ).toMatch(/^ckeditor-/)
+    })
+
+    it('passes id to ckeditor', () => {
+        const wrapper = createWrapper({
+            id: 'editor-1',
+        })
+
+        const editor = wrapper.findComponent(CkEditorStub)
+
+        expect(editor.props('id'))
+            .toBe('editor-1')
+    })
+
+    it('passes editor options through to the editor component', () => {
+        const wrapper = createWrapper()
+
+        const editor = wrapper.findComponent(CkEditorStub)
+
+        expect(editor.props('uploadEndpoint'))
+            .toBe('/editor/upload')
+
+        expect(editor.props('minHeight'))
+            .toBe(300)
+    })
+
+    it('forwards custom config and toolbar props', () => {
+        const toolbar = ['undo', 'bold']
+        const wrapper = createWrapper({
+            toolbar,
+            config: { placeholder: 'Write here' },
+        })
+
+        const editor = wrapper.findComponent(CkEditorStub)
+        expect(editor.props('toolbar')).toEqual(toolbar)
+        expect(editor.props('config')).toEqual({ placeholder: 'Write here' })
+    })
+})
diff --git a/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js b/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js
new file mode 100644
index 0000000..d7072d6
--- /dev/null
+++ b/tests/Unit/assets/vue/components/bounces/BounceOverview.spec.js
@@ -0,0 +1,255 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import BounceOverview from '../../../../../../assets/vue/components/bounces/BounceOverview.vue'
+import { bouncesClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    bouncesClient: {
+        list: vi.fn(),
+    },
+}))
+
+const makeBounce = (overrides = {}) => ({
+    id: 1,
+    date: '2024-03-15T10:30:00Z',
+    subscriber_email: 'user@example.com',
+    message_subject: 'Test Campaign',
+    comment: 'Hard bounce',
+    status: 'processed',
+    ...overrides,
+})
+
+const makeResponse = (items = [], hasMore = false, nextCursor = null) => ({
+    items,
+    pagination: { hasMore, nextCursor },
+})
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    bouncesClient.list.mockResolvedValue(makeResponse())
+})
+
+describe('BounceOverview.vue', () => {
+
+    describe('on mount', () => {
+        it('calls bouncesClient.list with cursor=null, pageSize=5, and identified status', async () => {
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(bouncesClient.list).toHaveBeenCalledWith(null, 5, 'identified-bounces')
+        })
+
+        it('renders bounce rows after a successful load', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('user@example.com')
+            expect(wrapper.text()).toContain('Test Campaign')
+        })
+
+        it('shows empty state when the API returns no items', async () => {
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('No bounces found.')
+        })
+
+        it('shows an error message when the API rejects', async () => {
+            bouncesClient.list.mockRejectedValue(new Error('Network error'))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('Network error')
+        })
+
+        it('shows a generic fallback when the error has no message', async () => {
+            bouncesClient.list.mockRejectedValue({})
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('Failed to load bounces.')
+        })
+    })
+
+    describe('data normalisation', () => {
+        it('falls back to "Unknown email" when subscriber_email is missing', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ subscriber_email: null })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('Unknown email')
+        })
+
+        it('falls back to "No subject" when message_subject is missing', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ message_subject: null })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('No subject')
+        })
+
+        it('falls back to "No comment" when comment is missing', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ comment: null })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('No comment')
+        })
+
+        it('falls back to "unknown" when status is missing', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ status: null })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('unknown')
+        })
+
+        it('shows "No date" for a missing date', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ date: null })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('No date')
+        })
+
+        it('shows "No date" for an invalid date string', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ date: 'not-a-date' })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            expect(wrapper.text()).toContain('No date')
+        })
+    })
+
+    describe('getStatusClass', () => {
+        const mountWithStatus = async (status) => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ status })]))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            return wrapper
+        }
+
+        it('applies purple classes for blacklist status', async () => {
+            const wrapper = await mountWithStatus('blacklisted')
+            expect(wrapper.find('span.bg-purple-100').exists()).toBe(true)
+        })
+
+        it('applies amber classes for soft/retry status', async () => {
+            const wrapper = await mountWithStatus('soft bounce')
+            expect(wrapper.find('span.bg-amber-100').exists()).toBe(true)
+        })
+
+        it('applies emerald classes for processed status', async () => {
+            const wrapper = await mountWithStatus('processed')
+            expect(wrapper.find('span.bg-emerald-100').exists()).toBe(true)
+        })
+
+        it('applies slate classes for an unrecognised status', async () => {
+            const wrapper = await mountWithStatus('something-else')
+            expect(wrapper.find('span.bg-slate-100').exists()).toBe(true)
+        })
+    })
+
+    describe('status filter', () => {
+        it('renders the status select with "identified" as the default', async () => {
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            const select = wrapper.find('select#bounce-status-filter')
+            expect(select.element.value).toBe('identified')
+        })
+
+        it('reloads with unidentified status when filter changes', async () => {
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            vi.clearAllMocks()
+            bouncesClient.list.mockResolvedValue(makeResponse())
+
+            await wrapper.find('select#bounce-status-filter').setValue('unidentified')
+            await flushPromises()
+
+            expect(bouncesClient.list).toHaveBeenCalledWith(null, 5, 'unidentified bounce')
+        })
+
+        it('resets to page 1 when the filter changes', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()], true, 10))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+
+            await wrapper.findAll('button')[1].trigger('click') // next page
+            await flushPromises()
+            expect(wrapper.text()).toContain('Page 2')
+
+            bouncesClient.list.mockResolvedValue(makeResponse())
+            await wrapper.find('select#bounce-status-filter').setValue('unidentified')
+            await flushPromises()
+            expect(wrapper.text()).toContain('Page 1')
+        })
+    })
+
+    describe('pagination', () => {
+        it('disables Previous on the first page', async () => {
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            const [prev] = wrapper.findAll('button')
+            expect(prev.attributes('disabled')).toBeDefined()
+        })
+
+        it('enables Next when hasMore is true', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()], true, 10))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            const [, next] = wrapper.findAll('button')
+            expect(next.attributes('disabled')).toBeUndefined()
+        })
+
+        it('disables Next when hasMore is false', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()], false))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+            const [, next] = wrapper.findAll('button')
+            expect(next.attributes('disabled')).toBeDefined()
+        })
+
+        it('advances to page 2 and fetches with the next cursor', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()], true, 42))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+
+            vi.clearAllMocks()
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce({ id: 2 })], false))
+            await wrapper.findAll('button')[1].trigger('click') // Next
+            await flushPromises()
+
+            expect(wrapper.text()).toContain('Page 2')
+            expect(bouncesClient.list).toHaveBeenCalledWith(42, 5, 'identified-bounces')
+        })
+
+        it('goes back to page 1 when Previous is clicked', async () => {
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()], true, 42))
+            const wrapper = mount(BounceOverview)
+            await flushPromises()
+
+            await wrapper.findAll('button')[1].trigger('click') // Next
+            await flushPromises()
+
+            vi.clearAllMocks()
+            bouncesClient.list.mockResolvedValue(makeResponse([makeBounce()]))
+            await wrapper.findAll('button')[0].trigger('click') // Previous
+            await flushPromises()
+
+            expect(wrapper.text()).toContain('Page 1')
+            expect(bouncesClient.list).toHaveBeenCalledWith(null, 5, 'identified-bounces')
+        })
+    })
+
+    describe('stale request cancellation', () => {
+        it('ignores a slow response that arrives after a newer request', async () => {
+            let resolveFirst
+            const slowRequest = new Promise((res) => { resolveFirst = res })
+            bouncesClient.list
+                .mockReturnValueOnce(slowRequest)
+                .mockResolvedValueOnce(makeResponse([makeBounce({ subscriber_email: 'new@example.com' })]))
+
+            const wrapper = mount(BounceOverview)
+
+            await wrapper.find('select#bounce-status-filter').setValue('unidentified')
+            await flushPromises()
+
+            resolveFirst(makeResponse([makeBounce({ subscriber_email: 'stale@example.com' })]))
+            await flushPromises()
+
+            expect(wrapper.text()).not.toContain('stale@example.com')
+            expect(wrapper.text()).toContain('new@example.com')
+        })
+    })
+})
diff --git a/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js b/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js
new file mode 100644
index 0000000..24c0a48
--- /dev/null
+++ b/tests/Unit/assets/vue/components/bounces/BouncePer.spec.js
@@ -0,0 +1,263 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import BouncePer from '../../../../../../assets/vue/components/bounces/BouncePer.vue'
+import { bouncesClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    bouncesClient: {
+        listByCampaign: vi.fn(),
+        listBySubscriber: vi.fn(),
+    },
+}))
+
+const makeSubscriber = (overrides = {}) => ({
+    subscriber_id: 101,
+    email: 'user@example.com',
+    confirmed: true,
+    blacklisted: false,
+    total_bounces: 3,
+    ...overrides,
+})
+
+const makeCampaign = (overrides = {}) => ({
+    message_id: 55,
+    subject: 'Weekly Newsletter',
+    total_bounces: 7,
+    ...overrides,
+})
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    bouncesClient.listByCampaign.mockResolvedValue([])
+    bouncesClient.listBySubscriber.mockResolvedValue([])
+})
+
+describe('loading states', () => {
+    it('no loading text after both APIs resolve', async () => {
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).not.toContain('Loading subscriber bounce data...')
+        expect(wrapper.text()).not.toContain('Loading campaign bounce data...')
+    })
+})
+
+describe('on mount', () => {
+    it('calls listBySubscriber once', async () => {
+        mount(BouncePer)
+        await flushPromises()
+        expect(bouncesClient.listBySubscriber).toHaveBeenCalledTimes(1)
+    })
+
+    it('calls listByCampaign once', async () => {
+        mount(BouncePer)
+        await flushPromises()
+        expect(bouncesClient.listByCampaign).toHaveBeenCalledTimes(1)
+    })
+})
+
+describe('empty states', () => {
+    it('shows subscriber empty state when the API returns no items', async () => {
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('No subscriber bounce data found.')
+    })
+
+    it('shows campaign empty state when the API returns no items', async () => {
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('No campaign bounce data found.')
+    })
+})
+
+describe('error states', () => {
+    it('shows subscriber error message on rejection', async () => {
+        bouncesClient.listBySubscriber.mockRejectedValue(new Error('Subscriber API down'))
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Subscriber API down')
+    })
+
+    it('shows campaign error message on rejection', async () => {
+        bouncesClient.listByCampaign.mockRejectedValue(new Error('Campaign API down'))
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Campaign API down')
+    })
+
+    it('shows a generic subscriber fallback when the error has no message', async () => {
+        bouncesClient.listBySubscriber.mockRejectedValue({})
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Failed to load subscriber bounce data.')
+    })
+
+    it('shows a generic campaign fallback when the error has no message', async () => {
+        bouncesClient.listByCampaign.mockRejectedValue({})
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Failed to load campaign bounce data.')
+    })
+
+    it('subscriber error does not bleed into campaign section', async () => {
+        bouncesClient.listBySubscriber.mockRejectedValue(new Error('Sub error'))
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign()])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Sub error')
+        expect(wrapper.text()).not.toContain('No campaign bounce data found.')
+        expect(wrapper.text()).toContain('Weekly Newsletter')
+    })
+})
+
+describe('subscriber data normalisation', () => {
+    it('renders subscriber id, email, and total bounces', async () => {
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber()])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('#101')
+        expect(wrapper.text()).toContain('user@example.com')
+        expect(wrapper.text()).toContain('3')
+    })
+
+    it('falls back to "N/A" when subscriber_id is missing', async () => {
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber({ subscriber_id: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('N/A')
+    })
+
+    it('falls back to "Unknown email" when email is missing', async () => {
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber({ email: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Unknown email')
+    })
+
+    it('falls back to 0 when total_bounces is missing', async () => {
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber({ total_bounces: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('0')
+    })
+
+    it('handles non-array response gracefully', async () => {
+        bouncesClient.listBySubscriber.mockResolvedValue(null)
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('No subscriber bounce data found.')
+    })
+})
+
+describe('campaign data normalisation', () => {
+    it('renders message id, subject, and total bounces', async () => {
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign()])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('#55')
+        expect(wrapper.text()).toContain('Weekly Newsletter')
+        expect(wrapper.text()).toContain('7')
+    })
+
+    it('falls back to "N/A" when message_id is missing', async () => {
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign({ message_id: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('N/A')
+    })
+
+    it('falls back to "No subject" when subject is missing', async () => {
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign({ subject: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('No subject')
+    })
+
+    it('falls back to 0 when total_bounces is missing', async () => {
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign({ total_bounces: null })])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('0')
+    })
+
+    it('handles non-array response gracefully', async () => {
+        bouncesClient.listByCampaign.mockResolvedValue(null)
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('No campaign bounce data found.')
+    })
+})
+
+describe('normalizeBoolean', () => {
+    const mountWithSubscriber = async (overrides) => {
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber(overrides)])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        return wrapper
+    }
+
+    describe('confirmed badge', () => {
+        it('shows emerald badge for confirmed=true', async () => {
+            const wrapper = await mountWithSubscriber({ confirmed: true })
+            const badges = wrapper.findAll('span.bg-emerald-100')
+            expect(badges.length).toBeGreaterThan(0)
+        })
+
+        it('treats confirmed=1 as truthy', async () => {
+            const wrapper = await mountWithSubscriber({ confirmed: 1 })
+            expect(wrapper.findAll('span.bg-emerald-100').length).toBeGreaterThan(0)
+        })
+
+        it('treats confirmed="1" as truthy', async () => {
+            const wrapper = await mountWithSubscriber({ confirmed: '1' })
+            expect(wrapper.findAll('span.bg-emerald-100').length).toBeGreaterThan(0)
+        })
+
+        it('shows slate 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)
+        })
+    })
+
+    describe('blacklisted badge', () => {
+        it('shows rose badge for blacklisted=true', async () => {
+            const wrapper = await mountWithSubscriber({ blacklisted: true })
+            expect(wrapper.findAll('span.bg-rose-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)
+        })
+
+        it('treats blacklisted="1" as truthy', async () => {
+            const wrapper = await mountWithSubscriber({ blacklisted: '1' })
+            expect(wrapper.findAll('span.bg-rose-100').length).toBeGreaterThan(0)
+        })
+
+        it('shows slate 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)
+        })
+    })
+})
+
+describe('section independence', () => {
+    it('renders campaign data even when subscriber section errors', async () => {
+        bouncesClient.listBySubscriber.mockRejectedValue(new Error('oops'))
+        bouncesClient.listByCampaign.mockResolvedValue([makeCampaign()])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Weekly Newsletter')
+    })
+
+    it('renders subscriber data even when campaign section errors', async () => {
+        bouncesClient.listByCampaign.mockRejectedValue(new Error('oops'))
+        bouncesClient.listBySubscriber.mockResolvedValue([makeSubscriber()])
+        const wrapper = mount(BouncePer)
+        await flushPromises()
+        expect(wrapper.text()).toContain('user@example.com')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js b/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js
new file mode 100644
index 0000000..691d389
--- /dev/null
+++ b/tests/Unit/assets/vue/components/bounces/BounceRules.spec.js
@@ -0,0 +1,435 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import BounceRules from '../../../../../../assets/vue/components/bounces/BounceRules.vue'
+import { bouncesClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    bouncesClient: {
+        listRegex: vi.fn(),
+        upsertRegex: vi.fn(),
+    },
+}))
+
+// ---------------------------------------------------------------------------
+// DOM setup — component reads bounce actions from #vue-app dataset
+// ---------------------------------------------------------------------------
+const setAppDataset = (actions = { 1: 'blacklist', 2: 'soft_bounce', 3: 'delete' }) => {
+    let el = document.getElementById('vue-app')
+    if (!el) {
+        el = document.createElement('div')
+        el.id = 'vue-app'
+        document.body.appendChild(el)
+    }
+    el.dataset.bounceActions = JSON.stringify(actions)
+}
+
+const makeRule = (overrides = {}) => ({
+    id: 1,
+    list_order: 1,
+    comment: 'Hard bounce rule',
+    regex: /550/.source,
+    action: 'blacklist',
+    count: 42,
+    status: 'active',
+    actionClass: 'bg-red-100 text-red-700',
+    ...overrides,
+})
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    setAppDataset()
+    bouncesClient.listRegex.mockResolvedValue([])
+    bouncesClient.upsertRegex.mockResolvedValue({})
+})
+
+const mountComponent = () => mount(BounceRules)
+
+const openModal = async (wrapper) => {
+    await wrapper.find('button[type="button"]').trigger('click')
+}
+
+const fillRegex = async (wrapper, value) => {
+    await wrapper.find('#bounce-rule-regex').setValue(value)
+}
+
+const submitForm = async (wrapper) => {
+    await wrapper.find('form').trigger('submit')
+}
+
+describe('on mount', () => {
+    it('calls listRegex once', async () => {
+        mountComponent()
+        await flushPromises()
+        expect(bouncesClient.listRegex).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders rules returned by the API', async () => {
+        bouncesClient.listRegex.mockResolvedValue([makeRule()])
+        const wrapper = mountComponent()
+        await flushPromises()
+        expect(wrapper.text()).toContain('Hard bounce rule')
+        expect(wrapper.text()).toContain('550')
+        expect(wrapper.text()).toContain('42')
+    })
+
+    it('renders nothing in the list when the API returns an empty array', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        // no rule rows — heading is still present
+        expect(wrapper.text()).toContain('Bounce Rules')
+        expect(wrapper.findAll('[class*="border-b last:border-b-0"]').length).toBe(0)
+    })
+
+    it('handles a non-array API response gracefully', async () => {
+        bouncesClient.listRegex.mockResolvedValue(null)
+        const wrapper = mountComponent()
+        await flushPromises()
+        expect(wrapper.findAll('[class*="border-b last:border-b-0"]').length).toBe(0)
+    })
+
+    it('silently clears rules on listRegex error', async () => {
+        bouncesClient.listRegex.mockRejectedValue(new Error('Network error'))
+        const wrapper = mountComponent()
+        await flushPromises()
+        expect(wrapper.findAll('[class*="border-b last:border-b-0"]').length).toBe(0)
+    })
+})
+
+describe('create modal', () => {
+    it('is closed on initial render', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(false)
+    })
+
+    it('opens when "New Rule" is clicked', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(true)
+    })
+
+    it('closes when Cancel is clicked', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await wrapper.find('[data-testid="modal-cancel"]').trigger('click')
+        await flushPromises()
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(false)
+    })
+
+    it('closes when the backdrop is clicked', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await wrapper.find('[aria-hidden="true"]').trigger('click')
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(false)
+    })
+
+    it('resets form fields when re-opened', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'some-regex')
+
+        // close then re-open
+        await wrapper.find('button[type="button"]:last-of-type').trigger('click')
+        await openModal(wrapper)
+
+        expect(wrapper.find('#bounce-rule-regex').element.value).toBe('')
+    })
+
+    it('populates action select with values from dataset', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        const options = wrapper.find('#bounce-rule-action').findAll('option')
+        const values = options.map((o) => o.text())
+        expect(values).toContain('blacklist')
+        expect(values).toContain('soft_bounce')
+    })
+
+    it('defaults status to "active"', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        expect(wrapper.find('#bounce-rule-status').element.value).toBe('active')
+    })
+})
+
+describe('client-side validation', () => {
+    it('shows a regex required error when submitting an empty regex', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await submitForm(wrapper)
+        expect(wrapper.text()).toContain('Regex is required.')
+    })
+
+    it('does not call upsertRegex when regex is empty', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await submitForm(wrapper)
+        expect(bouncesClient.upsertRegex).not.toHaveBeenCalled()
+    })
+
+    it('shows list_order error for a negative number', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await wrapper.find('#bounce-rule-order').setValue('-1')
+        await submitForm(wrapper)
+        expect(wrapper.text()).toContain('List Order must be a whole number greater than or equal to 0.')
+    })
+
+    it('shows list_order error for a decimal number', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await wrapper.find('#bounce-rule-order').setValue('1.5')
+        await submitForm(wrapper)
+        expect(wrapper.text()).toContain('List Order must be a whole number greater than or equal to 0.')
+    })
+
+    it('does not call upsertRegex for an invalid list_order', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await wrapper.find('#bounce-rule-order').setValue('-5')
+        await submitForm(wrapper)
+        expect(bouncesClient.upsertRegex).not.toHaveBeenCalled()
+    })
+
+    it('applies error border class to regex input when it has an error', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await submitForm(wrapper)
+        expect(wrapper.find('#bounce-rule-regex').classes()).toContain('border-red-300')
+    })
+})
+
+describe('successful submission', () => {
+    it('calls upsertRegex with regex in the payload', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, '5\\.5\\.0')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(bouncesClient.upsertRegex).toHaveBeenCalledWith(
+            expect.objectContaining({ regex: '5\\.5\\.0' })
+        )
+    })
+
+    it('omits comment from payload when comment is blank', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        const payload = bouncesClient.upsertRegex.mock.calls[0][0]
+        expect(payload).not.toHaveProperty('comment')
+    })
+
+    it('includes comment in payload when provided', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await wrapper.find('#bounce-rule-comment').setValue('My comment')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(bouncesClient.upsertRegex).toHaveBeenCalledWith(
+            expect.objectContaining({ comment: 'My comment' })
+        )
+    })
+
+    it('includes list_order as a number when provided', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await wrapper.find('#bounce-rule-order').setValue('3')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(bouncesClient.upsertRegex).toHaveBeenCalledWith(
+            expect.objectContaining({ list_order: 3 })
+        )
+    })
+
+    it('closes the modal after a successful submit', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(false)
+    })
+
+    it('reloads the rules list after a successful submit', async () => {
+        bouncesClient.listRegex
+            .mockResolvedValueOnce([])
+            .mockResolvedValueOnce([makeRule()])
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(bouncesClient.listRegex).toHaveBeenCalledTimes(2)
+        expect(wrapper.text()).toContain('Hard bounce rule')
+    })
+
+    it('shows "Creating..." on the submit button while submitting', async () => {
+        let resolve
+        bouncesClient.upsertRegex.mockReturnValue(new Promise((res) => { resolve = res }))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        expect(wrapper.find('button[type="submit"]').text()).toBe('Creating...')
+        resolve({})
+    })
+
+    it('submit and cancel buttons are disabled while submitting', async () => {
+        let resolve
+        bouncesClient.upsertRegex.mockReturnValue(new Promise((res) => { resolve = res }))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        expect(wrapper.find('[data-testid="modal-submit"]').element.disabled).toBe(true)
+        const cancelBtn = wrapper.find('button[type="button"]:last-of-type')
+        expect(wrapper.find('[data-testid="modal-cancel"]').element.disabled).toBe(true)
+        resolve({})
+    })
+
+    it('does not close the modal while submitting is in progress', async () => {
+        let resolve
+        bouncesClient.upsertRegex.mockReturnValue(new Promise((res) => { resolve = res }))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        // attempt to close via backdrop
+        await wrapper.find('[aria-hidden="true"]').trigger('click')
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(true)
+        resolve({})
+    })
+})
+
+describe('failed submission', () => {
+    it('shows a generic error when upsertRegex rejects without message', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue({})
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Failed to create rule.')
+    })
+
+    it('shows the error message from the rejection', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue(new Error('Server error'))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Server error')
+    })
+
+    it('displays server-side field errors from errors key', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue({
+            responseData: { errors: { regex: ['Regex already exists.'] } },
+        })
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'duplicate.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Regex already exists.')
+    })
+
+    it('displays server-side field errors from root responseData', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue({
+            responseData: { regex: ['Invalid pattern.'] },
+        })
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'bad.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.text()).toContain('Invalid pattern.')
+    })
+
+    it('keeps the modal open after a failed submit', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue(new Error('Server error'))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.find('[role="dialog"]').exists()).toBe(true)
+    })
+
+    it('re-enables the submit button after a failed submit', async () => {
+        bouncesClient.upsertRegex.mockRejectedValue(new Error('Server error'))
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        expect(wrapper.find('button[type="submit"]').element.disabled).toBe(false)
+    })
+})
+
+describe('normalizeValidationErrors', () => {
+    const triggerServerError = async (responseData) => {
+        bouncesClient.upsertRegex.mockRejectedValue({ responseData })
+        const wrapper = mountComponent()
+        await flushPromises()
+        await openModal(wrapper)
+        await fillRegex(wrapper, 'test.*')
+        await submitForm(wrapper)
+        await flushPromises()
+        return wrapper
+    }
+
+    it('shows generic error when responseData is an array', async () => {
+        const wrapper = await triggerServerError(['something'])
+        expect(wrapper.text()).toContain('Failed to create rule.')
+    })
+
+    it('shows generic error when responseData is null', async () => {
+        const wrapper = await triggerServerError(null)
+        expect(wrapper.text()).toContain('Failed to create rule.')
+    })
+
+    it('ignores fields with null message values', async () => {
+        const wrapper = await triggerServerError({ regex: null })
+        // no field error rendered, falls back to generic
+        expect(wrapper.text()).toContain('Failed to create rule.')
+    })
+
+    it('coerces non-array messages to an array', async () => {
+        const wrapper = await triggerServerError({ regex: 'Single string error.' })
+        expect(wrapper.text()).toContain('Single string error.')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/bounces/BouncesActionsPanel.spec.js b/tests/Unit/assets/vue/components/bounces/BouncesActionsPanel.spec.js
new file mode 100644
index 0000000..caea82d
--- /dev/null
+++ b/tests/Unit/assets/vue/components/bounces/BouncesActionsPanel.spec.js
@@ -0,0 +1,206 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import BouncesActionsPanel from '../../../../../../assets/vue/components/bounces/BouncesActionsPanel.vue'
+
+vi.mock('../../../../../../assets/vue/components/bounces/BounceOverview.vue', () => ({ default: { template: '<div data-testid="bounce-overview" />' } }))
+vi.mock('../../../../../../assets/vue/components/bounces/BounceRules.vue',    () => ({ default: { template: '<div data-testid="bounce-rules" />' } }))
+vi.mock('../../../../../../assets/vue/components/bounces/BouncePer.vue',      () => ({ default: { template: '<div data-testid="bounce-per" />' } }))
+
+const makeRouter = (query = {}) =>
+    createRouter({
+        history: createMemoryHistory(),
+        routes: [{ path: '/', component: { template: '<div />' } }],
+    })
+
+const mountComponent = async (query = {}) => {
+    const router = makeRouter()
+    await router.push({ path: '/', query })
+    await router.isReady()
+
+    const wrapper = mount(BouncesActionsPanel, {
+        global: { plugins: [router] },
+    })
+
+    await flushPromises()
+    return { wrapper, router }
+}
+
+describe('initial render', () => {
+    it('renders the page heading', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Bounce Management')
+    })
+
+    it('renders all four tab buttons', async () => {
+        const { wrapper } = await mountComponent()
+        const buttons = wrapper.findAll('button[type="button"]')
+        const labels = buttons.map((b) => b.text())
+        expect(labels).toContain('Overview')
+        expect(labels).toContain('Rules')
+        expect(labels).toContain('Per List/Campaign')
+        expect(labels).toContain('Processing')
+    })
+
+    it('defaults to the overview tab when no query param is present', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+
+    it('activates the tab matching a valid ?tab= query param', async () => {
+        const { wrapper } = await mountComponent({ tab: 'rules' })
+        expect(wrapper.find('[data-testid="bounce-rules"]').exists()).toBe(true)
+    })
+
+    it('falls back to overview for an unknown ?tab= value', async () => {
+        const { wrapper } = await mountComponent({ tab: 'nonexistent' })
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+
+    it('falls back to overview when tab param is not a string', async () => {
+        const { wrapper } = await mountComponent({ tab: undefined })
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+})
+
+describe('tab switching', () => {
+    const clickTab = async (wrapper, label) => {
+        const btn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes(label))
+        await btn.trigger('click')
+        await flushPromises()
+    }
+
+    it('shows BounceOverview when Overview tab is clicked', async () => {
+        const { wrapper } = await mountComponent({ tab: 'rules' })
+        await clickTab(wrapper, 'Overview')
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+
+    it('shows BounceRules when Rules tab is clicked', async () => {
+        const { wrapper } = await mountComponent()
+        await clickTab(wrapper, 'Rules')
+        expect(wrapper.find('[data-testid="bounce-rules"]').exists()).toBe(true)
+    })
+
+    it('shows BouncePer when Per List/Campaign tab is clicked', async () => {
+        const { wrapper } = await mountComponent()
+        await clickTab(wrapper, 'Per List/Campaign')
+        expect(wrapper.find('[data-testid="bounce-per"]').exists()).toBe(true)
+    })
+
+    it('shows the fallback panel for an unimplemented tab (Processing)', async () => {
+        const { wrapper } = await mountComponent()
+        await clickTab(wrapper, 'Processing')
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(false)
+        expect(wrapper.find('[data-testid="bounce-rules"]').exists()).toBe(false)
+        expect(wrapper.text()).toContain('Processing')
+    })
+
+    it('only renders one tab panel at a time', async () => {
+        const { wrapper } = await mountComponent()
+        await clickTab(wrapper, 'Rules')
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(false)
+        expect(wrapper.find('[data-testid="bounce-rules"]').exists()).toBe(true)
+        expect(wrapper.find('[data-testid="bounce-per"]').exists()).toBe(false)
+    })
+})
+
+describe('active tab styling', () => {
+    const getTabBtn = (wrapper, label) =>
+        wrapper.findAll('button[type="button"]').find((b) => b.text().includes(label))
+
+    it('applies active classes to the current tab button', async () => {
+        const { wrapper } = await mountComponent()
+        const overviewBtn = getTabBtn(wrapper, 'Overview')
+        expect(overviewBtn.classes()).toContain('bg-white')
+        expect(overviewBtn.classes()).toContain('shadow-sm')
+    })
+
+    it('does not apply active classes to inactive tab buttons', async () => {
+        const { wrapper } = await mountComponent()
+        const rulesBtn = getTabBtn(wrapper, 'Rules')
+        expect(rulesBtn.classes()).not.toContain('bg-white')
+        expect(rulesBtn.classes()).not.toContain('shadow-sm')
+    })
+
+    it('moves active styling when a new tab is clicked', async () => {
+        const { wrapper } = await mountComponent()
+        const rulesBtn = getTabBtn(wrapper, 'Rules')
+        await rulesBtn.trigger('click')
+        await flushPromises()
+        expect(rulesBtn.classes()).toContain('bg-white')
+        expect(getTabBtn(wrapper, 'Overview').classes()).not.toContain('bg-white')
+    })
+})
+
+describe('router sync', () => {
+    const clickTab = async (wrapper, label) => {
+        const btn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes(label))
+        await btn.trigger('click')
+        await flushPromises()
+    }
+
+    it('updates the URL query param when a tab is clicked', async () => {
+        const { wrapper, router } = await mountComponent()
+        await clickTab(wrapper, 'Rules')
+        expect(router.currentRoute.value.query.tab).toBe('rules')
+    })
+
+    it('sets ?tab=overview in the URL on initial load', async () => {
+        const { router } = await mountComponent()
+        expect(router.currentRoute.value.query.tab).toBe('overview')
+    })
+
+    it('preserves other existing query params when switching tabs', async () => {
+        const { wrapper, router } = await mountComponent({ tab: 'overview', foo: 'bar' })
+        await clickTab(wrapper, 'Rules')
+        expect(router.currentRoute.value.query.foo).toBe('bar')
+        expect(router.currentRoute.value.query.tab).toBe('rules')
+    })
+
+    it('reacts to an external route change and updates the active tab', async () => {
+        const { wrapper, router } = await mountComponent()
+        await router.replace({ query: { tab: 'per' } })
+        await flushPromises()
+        expect(wrapper.find('[data-testid="bounce-per"]').exists()).toBe(true)
+    })
+
+    it('does not push a duplicate navigation when the route already matches', async () => {
+        const { wrapper, router } = await mountComponent({ tab: 'rules' })
+        const replaceSpy = vi.spyOn(router, 'replace')
+        // navigate to same tab externally
+        await router.replace({ query: { tab: 'rules' } })
+        await flushPromises()
+        await clickTab(wrapper, 'Rules')
+        // replace should not have been called again for the same tab
+        const callsAfterMount = replaceSpy.mock.calls.filter(
+            (call) => call[0]?.query?.tab === 'rules'
+        )
+        // at most 1 call (the initial immediate watcher), not multiple
+        expect(callsAfterMount.length).toBeLessThanOrEqual(1)
+    })
+})
+
+describe('normalizeTabId', () => {
+    it('falls back to overview for an empty string', async () => {
+        const { wrapper } = await mountComponent({ tab: '' })
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+
+    it('falls back to overview for a numeric tab value', async () => {
+        const { wrapper } = await mountComponent({ tab: '123' })
+        expect(wrapper.find('[data-testid="bounce-overview"]').exists()).toBe(true)
+    })
+
+    it('accepts all defined tab ids', async () => {
+        for (const tabId of ['overview', 'rules', 'per', 'processing']) {
+            const { wrapper } = await mountComponent({ tab: tabId })
+            expect(wrapper.find('button.bg-white').text()).toContain(
+                tabId === 'overview' ? 'Overview'
+                    : tabId === 'rules'   ? 'Rules'
+                        : tabId === 'per'     ? 'Per List/Campaign'
+                            :                       'Processing'
+            )
+        }
+    })
+})
diff --git a/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
new file mode 100644
index 0000000..081581c
--- /dev/null
+++ b/tests/Unit/assets/vue/components/campaigns/CampaignDirectory.spec.js
@@ -0,0 +1,618 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import CampaignDirectory from '../../../../../../assets/vue/components/campaigns/CampaignDirectory.vue'
+import {
+    campaignClient,
+    fetchAllLists,
+    listMessagesClient,
+    statisticsClient,
+} from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    campaignClient: {
+        getCampaigns: vi.fn(),
+        getCampaign: vi.fn(),
+        updateCampaignStatus: vi.fn(),
+        deleteCampaign: vi.fn(),
+        copyCampaign: vi.fn(),
+        resendCampaign: vi.fn(),
+    },
+    fetchAllLists: vi.fn(),
+    listMessagesClient: { getListsByMessage: vi.fn() },
+    statisticsClient: {
+        getCampaignStatistics: vi.fn(),
+        getStatisticsOfViewOpens: vi.fn(),
+    },
+}))
+
+vi.mock('./ViewCampaignModal.vue', () => ({
+    default: {
+        template: '<div data-testid="view-campaign-modal" />',
+        props: ['isViewModalOpen', 'campaign', 'isViewLoading', 'viewErrorMessage',
+            'mailingLists', 'isResending', 'resendErrorMessage'],
+        emits: ['close', 'resend'],
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: { template: '<span />', props: ['name'] },
+}))
+
+const makeCampaign = (overrides = {}) => ({
+    id: 1,
+    messageContent: { subject: 'Test Campaign' },
+    messageMetadata: {
+        status: 'sent',
+        entered: '2024-03-01T10:00:00Z',
+        sent: '2024-03-01T10:05:00Z',
+        sendStart: '2024-03-01T10:00:00Z',
+        processed: 100,
+        views: 40,
+    },
+    messageFormat: { sendFormat: 'html' },
+    ...overrides,
+})
+
+const makePagedResponse = (items = [], hasMore = false, nextCursor = null) => ({
+    items,
+    pagination: { hasMore, nextCursor },
+})
+
+const makeStatsResponse = (items = []) => makePagedResponse(items)
+
+const defaultStats = () => makeStatsResponse([
+    { campaignId: 1, bounces: 2, sent: 100, uniqueViews: 10 },
+])
+
+const makeRouter = async (query = {}) => {
+    const router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+            { path: '/', component: { template: '<div />' } },
+            { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: { template: '<div />' } },
+            { path: '/lists/:listId/subscribers', component: { template: '<div />' } },
+        ],
+    })
+    await router.push({ path: '/', query })
+    await router.isReady()
+    return router
+}
+
+const mountComponent = async (query = {}) => {
+    const router = await makeRouter(query)
+    const wrapper = mount(CampaignDirectory, {
+        global: { plugins: [router] },
+    })
+    await flushPromises()
+    return { wrapper, router }
+}
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([makeCampaign()]))
+    campaignClient.getCampaign.mockResolvedValue(makeCampaign())
+    campaignClient.updateCampaignStatus.mockResolvedValue({})
+    campaignClient.deleteCampaign.mockResolvedValue({})
+    campaignClient.copyCampaign.mockResolvedValue({})
+    campaignClient.resendCampaign.mockResolvedValue({})
+    fetchAllLists.mockResolvedValue([])
+    listMessagesClient.getListsByMessage.mockResolvedValue(makePagedResponse([]))
+    statisticsClient.getCampaignStatistics.mockResolvedValue(defaultStats())
+    statisticsClient.getStatisticsOfViewOpens.mockResolvedValue(makeStatsResponse())
+})
+
+describe('loading state', () => {
+    it('clears loading text after the API resolves', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).not.toContain('Loading campaigns...')
+    })
+})
+
+describe('on mount', () => {
+    it('fetches campaigns on mount', async () => {
+        await mountComponent()
+        expect(campaignClient.getCampaigns).toHaveBeenCalled()
+    })
+
+    it('fetches mailing lists on mount', async () => {
+        await mountComponent()
+        expect(fetchAllLists).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders a campaign row after load', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Test Campaign')
+    })
+
+    it('shows empty state when no campaigns are returned', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([]))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('No campaigns for this filter.')
+    })
+
+    it('shows error message when getCampaigns rejects', async () => {
+        campaignClient.getCampaigns.mockRejectedValue(new Error('Network error'))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Failed to load campaigns.')
+    })
+
+    it('paginates through multiple pages to fetch all campaigns', async () => {
+        campaignClient.getCampaigns
+            .mockResolvedValueOnce(makePagedResponse([makeCampaign({ id: 1 })], true, 1))
+            .mockResolvedValueOnce(makePagedResponse([makeCampaign({ id: 2, messageContent: { subject: 'Second' } })]))
+        const { wrapper } = await mountComponent()
+        expect(campaignClient.getCampaigns).toHaveBeenCalledTimes(2)
+        expect(wrapper.text()).toContain('Test Campaign')
+    })
+})
+
+describe('status filter', () => {
+    const clickFilter = async (wrapper, label) => {
+        const btn = wrapper.findAll('button[type="button"]').find((b) => b.text().trim() === label)
+        await btn.trigger('click')
+        await flushPromises()
+    }
+
+    it('renders all four filter options', async () => {
+        const { wrapper } = await mountComponent()
+        const labels = wrapper.findAll('button[type="button"]').map((b) => b.text().trim())
+        expect(labels).toContain('All')
+        expect(labels).toContain('Sent')
+        expect(labels).toContain('Active')
+        expect(labels).toContain('Draft')
+    })
+
+    it('defaults to All filter', async () => {
+        const { wrapper } = await mountComponent()
+        const allBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().trim() === 'All')
+        expect(allBtn.classes()).toContain('bg-white')
+    })
+
+    it('reads status from the query param', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse([makeCampaign({ id: 1, messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } })])
+        )
+        const { wrapper } = await mountComponent({ status: 'draft' })
+        const draftBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().trim() === 'Draft')
+        expect(draftBtn.classes()).toContain('bg-white')
+    })
+
+    it('filters campaigns when Sent is clicked', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ id: 1 }),
+            makeCampaign({ id: 2, messageContent: { subject: 'Draft Campaign' }, messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        await clickFilter(wrapper, 'Sent')
+        expect(wrapper.text()).toContain('Test Campaign')
+        expect(wrapper.text()).not.toContain('Draft Campaign')
+    })
+
+    it('updates URL query param when filter is clicked', async () => {
+        const { wrapper, router } = await mountComponent()
+        await clickFilter(wrapper, 'Sent')
+        expect(router.currentRoute.value.query.status).toBe('sent')
+    })
+
+    it('removes status from URL when All is selected', async () => {
+        const { wrapper, router } = await mountComponent({ status: 'sent' })
+        await clickFilter(wrapper, 'All')
+        expect(router.currentRoute.value.query.status).toBeUndefined()
+    })
+
+    it('falls back to All for an unknown status query param', async () => {
+        const { wrapper } = await mountComponent({ status: 'garbage' })
+        const allBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().trim() === 'All')
+        expect(allBtn.classes()).toContain('bg-white')
+    })
+
+    it('resets to page 1 when filter changes', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 10 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper, router } = await mountComponent()
+        // advance to page 2 first
+        const [, nextBtn] = wrapper.findAll('button[type="button"]').slice(-2)
+        await nextBtn.trigger('click')
+        await flushPromises()
+        expect(router.currentRoute.value.query.page).toBe('2')
+        await clickFilter(wrapper, 'Sent')
+        expect(router.currentRoute.value.query.page).toBeUndefined()
+    })
+})
+
+describe('campaign normalisation', () => {
+    it('falls back to "Campaign #1" when subject is missing', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse([makeCampaign({ messageContent: {} })])
+        )
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Campaign #1')
+    })
+
+    it('shows "No date" when entered date is missing', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { status: 'sent', entered: null, sent: null, sendStart: null, processed: 0, views: 0 } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('No date')
+    })
+
+    it('shows "Not sent yet" when sendStart or sent is missing', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { status: 'sent', entered: '2024-01-01', sent: null, sendStart: null, processed: 0, views: 0 } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Not sent yet')
+    })
+
+    it('resolves active statuses to "Active" label', async () => {
+        for (const status of ['submitted', 'inprocess', 'requeued', 'scheduled']) {
+            campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+                makeCampaign({ id: 1, messageMetadata: { ...makeCampaign().messageMetadata, status } }),
+            ]))
+            const { wrapper } = await mountComponent()
+            expect(wrapper.text()).toContain('Active')
+        }
+    })
+
+    it('shows raw status label for unknown status', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'weird_status' } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('weird status')
+    })
+
+    it('separates processed counts into text and html based on sendFormat', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageFormat: { sendFormat: 'text' }, messageMetadata: { ...makeCampaign().messageMetadata, processed: 50 } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        // text format: text=50, html=0
+        const text = wrapper.text()
+        expect(text).toContain('50') // processedText
+    })
+})
+
+describe('status badge classes', () => {
+    const mountWithStatus = async (status) => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status } }),
+        ]))
+        return mountComponent()
+    }
+
+    it('applies emerald classes for sent', async () => {
+        const { wrapper } = await mountWithStatus('sent')
+        expect(wrapper.find('span.bg-emerald-100').exists()).toBe(true)
+    })
+
+    it('applies blue classes for active statuses', async () => {
+        const { wrapper } = await mountWithStatus('inprocess')
+        expect(wrapper.find('span.bg-blue-100').exists()).toBe(true)
+    })
+
+    it('applies slate classes for draft', async () => {
+        const { wrapper } = await mountWithStatus('draft')
+        expect(wrapper.find('span.bg-slate-100').exists()).toBe(true)
+    })
+
+    it('applies amber classes for unknown status', async () => {
+        const { wrapper } = await mountWithStatus('weird')
+        expect(wrapper.find('span.bg-amber-100').exists()).toBe(true)
+    })
+})
+
+describe('action button visibility', () => {
+    const mountWithStatus = async (status) => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status } }),
+        ]))
+        return mountComponent()
+    }
+
+    it('shows Delete and Edit buttons for draft campaigns', async () => {
+        const { wrapper } = await mountWithStatus('draft')
+        expect(wrapper.text()).toContain('Delete')
+        expect(wrapper.text()).toContain('Edit')
+        expect(wrapper.text()).not.toContain('Suspend')
+    })
+
+    it('shows Suspend button for active campaigns', async () => {
+        const { wrapper } = await mountWithStatus('inprocess')
+        expect(wrapper.text()).toContain('Suspend')
+        expect(wrapper.text()).not.toContain('Delete')
+    })
+
+    it('shows Requeue and Copy to draft buttons for sent campaigns', async () => {
+        const { wrapper } = await mountWithStatus('sent')
+        expect(wrapper.text()).toContain('Requeue')
+        expect(wrapper.text()).toContain('Copy to draft')
+    })
+
+    it('always shows View button', async () => {
+        for (const status of ['sent', 'draft', 'inprocess']) {
+            const { wrapper } = await mountWithStatus(status)
+            expect(wrapper.text()).toContain('View')
+        }
+    })
+})
+
+describe('action handlers', () => {
+    it('handleSuspend calls updateCampaignStatus with "suspended"', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'inprocess' } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        const suspendBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Suspend'))
+        await suspendBtn.trigger('click')
+        await flushPromises()
+        expect(campaignClient.updateCampaignStatus).toHaveBeenCalledWith(1, 'suspended')
+    })
+
+    it('handleSuspend shows success feedback', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'inprocess' } }),
+        ]))
+        const { wrapper } = await mountComponent()
+        const suspendBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Suspend'))
+        await suspendBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.text()).toContain('Campaign suspended.')
+    })
+
+    it('handleSuspend shows error feedback on failure', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'inprocess' } }),
+        ]))
+        campaignClient.updateCampaignStatus.mockRejectedValue(new Error('API error'))
+        const { wrapper } = await mountComponent()
+        const suspendBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Suspend'))
+        await suspendBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.text()).toContain('API error')
+    })
+
+    it('handleRequeue calls updateCampaignStatus with "requeued"', async () => {
+        const { wrapper } = await mountComponent()
+        const requeueBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Requeue'))
+        await requeueBtn.trigger('click')
+        await flushPromises()
+        expect(campaignClient.updateCampaignStatus).toHaveBeenCalledWith(1, 'requeued')
+    })
+
+    it('handleRequeue shows error feedback on failure', async () => {
+        campaignClient.updateCampaignStatus.mockRejectedValue(new Error('Requeue failed'))
+        const { wrapper } = await mountComponent()
+        const requeueBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Requeue'))
+        await requeueBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.text()).toContain('Requeue failed')
+    })
+
+    it('handleDelete calls window.confirm and deleteCampaign on confirmation', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } }),
+        ]))
+        vi.spyOn(window, 'confirm').mockReturnValue(true)
+        const { wrapper } = await mountComponent()
+        const deleteBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Delete'))
+        await deleteBtn.trigger('click')
+        await flushPromises()
+        expect(window.confirm).toHaveBeenCalled()
+        expect(campaignClient.deleteCampaign).toHaveBeenCalledWith(1)
+    })
+
+    it('handleDelete does not delete if user cancels confirm', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } }),
+        ]))
+        vi.spyOn(window, 'confirm').mockReturnValue(false)
+        const { wrapper } = await mountComponent()
+        const deleteBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Delete'))
+        await deleteBtn.trigger('click')
+        await flushPromises()
+        expect(campaignClient.deleteCampaign).not.toHaveBeenCalled()
+    })
+
+    it('handleDelete shows success feedback after deletion', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } }),
+        ]))
+        vi.spyOn(window, 'confirm').mockReturnValue(true)
+        const { wrapper } = await mountComponent()
+        const deleteBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Delete'))
+        await deleteBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.text()).toContain('Campaign deleted.')
+    })
+
+    it('handleCopyToDraft calls copyCampaign and shows feedback', async () => {
+        const { wrapper } = await mountComponent()
+        const copyBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Copy to draft'))
+        await copyBtn.trigger('click')
+        await flushPromises()
+        expect(campaignClient.copyCampaign).toHaveBeenCalledWith(1)
+        expect(wrapper.text()).toContain('Created draft copy')
+    })
+
+    it('handleCopyToDraft shows error feedback on failure', async () => {
+        campaignClient.copyCampaign.mockRejectedValue(new Error('Copy failed'))
+        const { wrapper } = await mountComponent()
+        const copyBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Copy to draft'))
+        await copyBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.text()).toContain('Copy failed')
+    })
+
+    it('handleEdit navigates to campaign-edit route', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([
+            makeCampaign({ messageMetadata: { ...makeCampaign().messageMetadata, status: 'draft' } }),
+        ]))
+        const { wrapper, router } = await mountComponent()
+        const editBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Edit'))
+        await editBtn.trigger('click')
+        await flushPromises()
+        expect(router.currentRoute.value.name).toBe('campaign-edit')
+        expect(router.currentRoute.value.params.campaignId).toBe('1')
+    })
+
+    it('prevents double-clicking an action while loading', async () => {
+        let resolve
+        campaignClient.updateCampaignStatus.mockReturnValue(new Promise((res) => { resolve = res }))
+        const { wrapper } = await mountComponent()
+        const requeueBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('Requeue'))
+        await requeueBtn.trigger('click')
+        await requeueBtn.trigger('click')
+        resolve({})
+        await flushPromises()
+        expect(campaignClient.updateCampaignStatus).toHaveBeenCalledTimes(1)
+    })
+})
+
+describe('view modal', () => {
+    it('opens the view modal when View is clicked', async () => {
+        const { wrapper } = await mountComponent()
+        const viewBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('View'))
+        await viewBtn.trigger('click')
+        await flushPromises()
+        expect(wrapper.findComponent({ name: 'ViewCampaignModal' }).exists() ||
+            wrapper.find('[data-testid="view-campaign-modal"]').exists()).toBe(true)
+    })
+
+    it('calls getCampaign with the correct id when View is clicked', async () => {
+        const { wrapper } = await mountComponent()
+        const viewBtn = wrapper.findAll('button[type="button"]').find((b) => b.text().includes('View'))
+        await viewBtn.trigger('click')
+        await flushPromises()
+        expect(campaignClient.getCampaign).toHaveBeenCalledWith(1)
+    })
+})
+
+describe('pagination', () => {
+    const getPrevBtn = (wrapper) => wrapper.findAll('button[type="button"]').at(-2)
+    const getNextBtn = (wrapper) => wrapper.findAll('button[type="button"]').at(-1)
+
+    it('disables Previous on first page', async () => {
+        const { wrapper } = await mountComponent()
+        expect(getPrevBtn(wrapper).element.disabled).toBe(true)
+    })
+
+    it('disables Next when all items fit on one page', async () => {
+        const { wrapper } = await mountComponent()
+        expect(getNextBtn(wrapper).element.disabled).toBe(true)
+    })
+
+    it('enables Next when there are more pages', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper } = await mountComponent()
+        expect(getNextBtn(wrapper).element.disabled).toBe(false)
+    })
+
+    it('shows correct range text', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('1')
+        expect(wrapper.text()).toContain('5')
+        expect(wrapper.text()).toContain('6')
+    })
+
+    it('advances to the next page when Next is clicked', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper } = await mountComponent()
+        await getNextBtn(wrapper).trigger('click')
+        await flushPromises()
+        // page 2 — range should start at 6
+        expect(wrapper.text()).toContain('6')
+    })
+
+    it('updates the URL page param when navigating', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper, router } = await mountComponent()
+        await getNextBtn(wrapper).trigger('click')
+        await flushPromises()
+        expect(router.currentRoute.value.query.page).toBe('2')
+    })
+
+    it('removes page param from URL when back on page 1', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper, router } = await mountComponent()
+        await getNextBtn(wrapper).trigger('click')
+        await flushPromises()
+        await getPrevBtn(wrapper).trigger('click')
+        await flushPromises()
+        expect(router.currentRoute.value.query.page).toBeUndefined()
+    })
+
+    it('reads page from URL query param on initial load', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(
+            makePagedResponse(Array.from({ length: 6 }, (_, i) => makeCampaign({ id: i + 1 })))
+        )
+        const { wrapper } = await mountComponent({ page: '2' })
+        expect(wrapper.text()).toContain('6')
+    })
+
+    it('falls back to page 1 for an invalid page query param', async () => {
+        const { wrapper } = await mountComponent({ page: 'abc' })
+        expect(wrapper.text()).toContain('1')
+    })
+
+    it('shows range 0-0 of 0 when no campaigns', async () => {
+        campaignClient.getCampaigns.mockResolvedValue(makePagedResponse([]))
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('0')
+    })
+})
+
+describe('lists for visible campaigns', () => {
+    it('fetches lists for campaigns on the current page', async () => {
+        const { } = await mountComponent()
+        expect(listMessagesClient.getListsByMessage).toHaveBeenCalledWith(1)
+    })
+
+    it('renders list names when lists are loaded', async () => {
+        listMessagesClient.getListsByMessage.mockResolvedValue(
+            makePagedResponse([{ id: 10, name: 'Subscribers List' }])
+        )
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('Subscribers List')
+    })
+
+    it('shows "-" when no lists are associated', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('-')
+    })
+})
+
+describe('statistics', () => {
+    it('fetches campaign statistics on mount', async () => {
+        await mountComponent()
+        expect(statisticsClient.getCampaignStatistics).toHaveBeenCalled()
+        expect(statisticsClient.getStatisticsOfViewOpens).toHaveBeenCalled()
+    })
+
+    it('renders bounced count from statistics', async () => {
+        const { wrapper } = await mountComponent()
+        expect(wrapper.text()).toContain('2') // bounces from defaultStats
+    })
+
+    it('paginates through statistics when hasMore is true', async () => {
+        statisticsClient.getCampaignStatistics
+            .mockResolvedValueOnce(makePagedResponse([{ campaignId: 1, bounces: 1, sent: 50, uniqueViews: 5 }], true, 1))
+            .mockResolvedValueOnce(makeStatsResponse([]))
+        await mountComponent()
+        expect(statisticsClient.getCampaignStatistics).toHaveBeenCalledTimes(2)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/campaigns/ViewCampaignModal.spec.js b/tests/Unit/assets/vue/components/campaigns/ViewCampaignModal.spec.js
new file mode 100644
index 0000000..44f0590
--- /dev/null
+++ b/tests/Unit/assets/vue/components/campaigns/ViewCampaignModal.spec.js
@@ -0,0 +1,375 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import ViewCampaignModal from '../../../../../../assets/vue/components/campaigns/ViewCampaignModal.vue'
+
+const makeCampaign = (overrides = {}) => ({
+  id: 42,
+  messageContent: {
+    subject: 'Weekly Update',
+    text: '<p>HTML body</p>',
+    textMessage: 'Plain text body',
+    footer: 'Unsubscribe here',
+  },
+  messageMetadata: { entered: '2024-03-15T10:30:00Z' },
+  messageOptions: { fromField: 'sender@example.com' },
+  messageSchedule: null,
+  ...overrides,
+})
+
+const makeList = (id, name) => ({ id, name })
+
+const defaultProps = (overrides = {}) => ({
+  isViewModalOpen: true,
+  campaign: makeCampaign(),
+  isViewLoading: false,
+  viewErrorMessage: '',
+  mailingLists: [],
+  isResending: false,
+  resendErrorMessage: '',
+  ...overrides,
+})
+
+const mountModal = (props = {}) =>
+  mount(ViewCampaignModal, { props: defaultProps(props) })
+
+const findResendButton = (wrapper) =>
+  wrapper
+    .findAll('button[type="button"]')
+    .find((button) => button.text().includes('Send to lists') || button.text().includes('Sending...'))
+
+describe('visibility', () => {
+  it('renders the modal when isViewModalOpen is true', () => {
+    const wrapper = mountModal()
+    expect(wrapper.find('.fixed').exists()).toBe(true)
+  })
+
+  it('does not render the modal when isViewModalOpen is false', () => {
+    const wrapper = mountModal({ isViewModalOpen: false })
+    expect(wrapper.find('.fixed').exists()).toBe(false)
+  })
+})
+
+describe('loading state', () => {
+  it('shows loading text when isViewLoading is true', () => {
+    const wrapper = mountModal({ isViewLoading: true, campaign: null })
+    expect(wrapper.text()).toContain('Loading campaign...')
+  })
+
+  it('does not show campaign content while loading', () => {
+    const wrapper = mountModal({ isViewLoading: true })
+    expect(wrapper.text()).not.toContain('Weekly Update')
+  })
+})
+
+describe('error state', () => {
+  it('shows the error message when viewErrorMessage is set', () => {
+    const wrapper = mountModal({ viewErrorMessage: 'Failed to load.', campaign: null })
+    expect(wrapper.text()).toContain('Failed to load.')
+  })
+
+  it('does not show campaign details when there is an error', () => {
+    const wrapper = mountModal({ viewErrorMessage: 'Oops', campaign: null })
+    expect(wrapper.text()).not.toContain('Subject:')
+  })
+})
+
+describe('no campaign selected', () => {
+  it('shows fallback when campaign is null and no loading/error', () => {
+    const wrapper = mountModal({ campaign: null })
+    expect(wrapper.text()).toContain('No campaign selected.')
+  })
+})
+
+describe('campaign details', () => {
+  it('renders the campaign id in the header', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('42')
+  })
+
+  it('shows "-" for id when campaign is null (header fallback)', () => {
+    const wrapper = mountModal({ campaign: null })
+    expect(wrapper.text()).toContain('-')
+  })
+
+  it('renders the subject', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('Weekly Update')
+  })
+
+  it('renders "-" for missing subject', () => {
+    const wrapper = mountModal({ campaign: makeCampaign({ messageContent: {} }) })
+    expect(wrapper.text()).toContain('-')
+  })
+
+  it('renders the fromField', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('sender@example.com')
+  })
+
+  it('renders "-" for missing fromField', () => {
+    const wrapper = mountModal({ campaign: makeCampaign({ messageOptions: {} }) })
+    expect(wrapper.text()).toContain('-')
+  })
+
+  it('renders the HTML content', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('<p>HTML body</p>')
+  })
+
+  it('renders "-" when HTML content is missing', () => {
+    const wrapper = mountModal({ campaign: makeCampaign({ messageContent: { subject: 'S' } }) })
+    expect(wrapper.text()).toContain('-')
+  })
+
+  it('renders the text message content', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('Plain text body')
+  })
+
+  it('renders the footer content', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('Unsubscribe here')
+  })
+
+  it('renders the entered date formatted', () => {
+    const wrapper = mountModal()
+    // formatDate uses toLocaleString — just verify it's not '-' and not raw ISO
+    expect(wrapper.text()).not.toContain('2024-03-15T10:30:00Z')
+    expect(wrapper.text()).not.toContain('Entered: -')
+  })
+
+  it('renders "-" for a null entered date', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({ messageMetadata: { entered: null } }),
+    })
+    expect(wrapper.text()).toContain('-')
+  })
+
+  it('renders "-" for an invalid entered date string', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({ messageMetadata: { entered: 'not-a-date' } }),
+    })
+    expect(wrapper.text()).toContain('-')
+  })
+})
+
+describe('getMessage', () => {
+  it('does not render requeue section when messageSchedule is null', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).not.toContain('Requeueing:')
+  })
+
+  it('does not render requeue section when requeueInterval is falsy', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({ messageSchedule: { requeueInterval: 0 } }),
+    })
+    expect(wrapper.text()).not.toContain('Requeueing:')
+  })
+
+  it('renders requeue message with correct interval', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({
+        messageSchedule: {
+          requeueInterval: 30,
+          requeueUntil: '2024-12-31T23:59:00Z',
+        },
+      }),
+    })
+    expect(wrapper.text()).toContain('Requeueing:')
+    expect(wrapper.text()).toContain('every 30 minutes until')
+  })
+
+  it('falls back to repeatInterval when requeueInterval is absent', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({
+        messageSchedule: {
+          repeatInterval: 15,
+          repeatUntil: '2024-12-31T23:59:00Z',
+        },
+      }),
+    })
+    expect(wrapper.text()).toContain('every 15 minutes until')
+  })
+
+  it('shows "Invalid date" for an unparseable until value', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({
+        messageSchedule: {
+          requeueInterval: 10,
+          requeueUntil: 'bad-date',
+        },
+      }),
+    })
+    expect(wrapper.text()).toContain('Invalid date')
+  })
+
+  it('shows "Invalid interval" when interval is missing', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({
+        messageSchedule: {
+          requeueInterval: null,
+          requeueUntil: '2024-12-31T23:59:00Z',
+        },
+      }),
+    })
+    // requeueInterval is null — v-if hides the block entirely
+    expect(wrapper.text()).not.toContain('Requeueing:')
+  })
+
+  it('replaces space separator in date string before parsing', () => {
+    const wrapper = mountModal({
+      campaign: makeCampaign({
+        messageSchedule: {
+          requeueInterval: 5,
+          requeueUntil: '2024-12-31 23:00:00',
+        },
+      }),
+    })
+    expect(wrapper.text()).toContain('every 5 minutes until')
+    expect(wrapper.text()).not.toContain('Invalid date')
+  })
+})
+
+describe('close', () => {
+  it('emits "close" when the Close button is clicked', async () => {
+    const wrapper = mountModal()
+    await wrapper.find('button[type="button"]').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits "close" when the backdrop is clicked', async () => {
+    const wrapper = mountModal()
+    await wrapper.find('.fixed').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('does not emit "close" when the modal content itself is clicked', async () => {
+    const wrapper = mountModal()
+    await wrapper.find('.rounded-xl').trigger('click')
+    expect(wrapper.emitted('close')).toBeFalsy()
+  })
+})
+
+describe('mailing list selection', () => {
+  it('shows "No mailing lists found." when mailingLists is empty', () => {
+    const wrapper = mountModal()
+    expect(wrapper.text()).toContain('No mailing lists found.')
+  })
+
+  it('renders mailing list checkboxes', () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter'), makeList(2, 'Promotions')],
+    })
+    expect(wrapper.text()).toContain('Newsletter')
+    expect(wrapper.text()).toContain('Promotions')
+    expect(wrapper.findAll('input[type="checkbox"]').length).toBe(2)
+  })
+
+  it('disables the Send button when no lists are selected', () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter')],
+    })
+    const sendBtn = findResendButton(wrapper)
+    expect(sendBtn).toBeDefined()
+    expect(sendBtn.element.disabled).toBe(true)
+  })
+
+  it('enables the Send button when a list is selected', async () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter')],
+    })
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+    const sendBtn = findResendButton(wrapper)
+    expect(sendBtn).toBeDefined()
+    expect(sendBtn.element.disabled).toBe(false)
+  })
+
+  it('disables the Send button while isResending is true', async () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter')],
+      isResending: true,
+    })
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+    const sendBtn = findResendButton(wrapper)
+    expect(sendBtn).toBeDefined()
+    expect(sendBtn.element.disabled).toBe(true)
+  })
+
+  it('shows "Sending..." on the button while isResending', () => {
+    const wrapper = mountModal({ isResending: true })
+    expect(wrapper.text()).toContain('Sending...')
+  })
+
+  it('shows the resend error message when resendErrorMessage is set', () => {
+    const wrapper = mountModal({ resendErrorMessage: 'Resend failed.' })
+    expect(wrapper.text()).toContain('Resend failed.')
+  })
+
+  it('resets selected list ids when modal is reopened', async () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter')],
+    })
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+    expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(true)
+
+    await wrapper.setProps({ isViewModalOpen: false })
+    await wrapper.setProps({ isViewModalOpen: true })
+
+    expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(false)
+  })
+})
+
+describe('handleResend', () => {
+  it('emits "resend" with selected list ids as numbers', async () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter'), makeList(2, 'Promotions')],
+    })
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(true)
+    await checkboxes[1].setValue(true)
+
+    const resendButton = findResendButton(wrapper)
+    expect(resendButton).toBeDefined()
+    await resendButton.trigger('click')
+
+    expect(wrapper.emitted('resend')).toBeTruthy()
+    expect(wrapper.emitted('resend')[0][0]).toEqual([1, 2])
+  })
+
+  it('does not emit "resend" when no lists are selected', async () => {
+    const wrapper = mountModal({
+      mailingLists: [makeList(1, 'Newsletter')],
+    })
+    const resendButton = findResendButton(wrapper)
+    expect(resendButton).toBeDefined()
+    await resendButton.trigger('click')
+    expect(wrapper.emitted('resend')).toBeFalsy()
+  })
+
+  it('filters out non-finite values from selected ids', async () => {
+    // Simulate a non-numeric id slipping through
+    const wrapper = mountModal({
+      mailingLists: [makeList('abc', 'Bad List'), makeList(3, 'Good List')],
+    })
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(true)
+    await checkboxes[1].setValue(true)
+
+    const resendButton = findResendButton(wrapper)
+    expect(resendButton).toBeDefined()
+    await resendButton.trigger('click')
+
+    const emitted = wrapper.emitted('resend')?.[0]?.[0]
+    expect(emitted).not.toContain(NaN)
+    expect(emitted).toContain(3)
+  })
+
+  it('does not emit when campaign is null', async () => {
+    const wrapper = mountModal({
+      campaign: null,
+      mailingLists: [makeList(1, 'Newsletter')],
+    })
+
+    expect(wrapper.emitted('resend')).toBeFalsy()
+  })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js b/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js
new file mode 100644
index 0000000..a1c3f2e
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/CampaignsTable.spec.js
@@ -0,0 +1,130 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import CampaignsTable from '../../../../../../assets/vue/components/dashboard/CampaignsTable.vue'
+
+const makeRow = (overrides = {}) => ({
+    id: 1,
+    name: 'Spring Newsletter',
+    status: 'sent',
+    date: 'Jun 1, 2024',
+    openRate: '42%',
+    clickRate: '12%',
+    ...overrides,
+})
+
+describe('table structure', () => {
+    it('renders all five column headers', () => {
+        const wrapper = mount(CampaignsTable)
+        const headers = wrapper.findAll('th').map((th) => th.text())
+        expect(headers).toContain('Campaign Name')
+        expect(headers).toContain('Status')
+        expect(headers).toContain('Date')
+        expect(headers).toContain('Open Rate')
+        expect(headers).toContain('Click Rate')
+    })
+})
+
+describe('empty state', () => {
+    it('shows "No campaigns yet." when rows is empty', () => {
+        const wrapper = mount(CampaignsTable)
+        expect(wrapper.text()).toContain('No campaigns yet.')
+    })
+
+    it('empty state cell spans all 5 columns', () => {
+        const wrapper = mount(CampaignsTable)
+        expect(wrapper.find('td[colspan="5"]').exists()).toBe(true)
+    })
+
+    it('does not show empty state when rows are provided', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow()] } })
+        expect(wrapper.text()).not.toContain('No campaigns yet.')
+    })
+})
+
+describe('row rendering', () => {
+    it('renders a row for each item in rows', () => {
+        const wrapper = mount(CampaignsTable, {
+            props: { rows: [makeRow({ id: 1 }), makeRow({ id: 2, name: 'Summer Sale' })] },
+        })
+        expect(wrapper.findAll('tbody tr').length).toBe(2)
+    })
+
+    it('renders the campaign name', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow()] } })
+        expect(wrapper.text()).toContain('Spring Newsletter')
+    })
+
+    it('renders the date', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow()] } })
+        expect(wrapper.text()).toContain('Jun 1, 2024')
+    })
+
+    it('renders the open rate', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow()] } })
+        expect(wrapper.text()).toContain('42%')
+    })
+
+    it('renders the click rate', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow()] } })
+        expect(wrapper.text()).toContain('12%')
+    })
+
+    it('renders "—" when openRate is null', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow({ openRate: null })] } })
+        expect(wrapper.text()).toContain('—')
+    })
+
+    it('renders "—" when clickRate is null', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow({ clickRate: null })] } })
+        expect(wrapper.text()).toContain('—')
+    })
+
+    it('renders "—" when openRate is undefined', () => {
+        const wrapper = mount(CampaignsTable, { props: { rows: [makeRow({ openRate: undefined })] } })
+        expect(wrapper.text()).toContain('—')
+    })
+})
+
+describe('statusClass', () => {
+    const mountWithStatus = (status) =>
+        mount(CampaignsTable, { props: { rows: [makeRow({ status })] } })
+
+    it('applies green classes 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)
+    })
+
+    it('applies blue classes 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)
+    })
+
+    it('applies gray classes 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', () => {
+        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', () => {
+        const wrapper = mountWithStatus('Sent')
+        expect(wrapper.find('span.bg-green-100').exists()).toBe(true)
+    })
+
+    it('is case-insensitive — "SCHEDULED" resolves to blue', () => {
+        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')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/KpiCard.spec.js b/tests/Unit/assets/vue/components/dashboard/KpiCard.spec.js
new file mode 100644
index 0000000..f3057b5
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/KpiCard.spec.js
@@ -0,0 +1,110 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import KpiCard from '../../../../../../assets/vue/components/dashboard/KpiCard.vue'
+
+// Stub child components to isolate KpiCard logic
+vi.mock('@/components/base/BaseCard.vue', () => ({
+    default: { template: '<div><slot /></div>', name: 'BaseCard' },
+}))
+
+vi.mock('@/components/base/BaseIcon.vue', () => ({
+    default: { template: '<span />', name: 'BaseIcon', props: ['name'] },
+}))
+
+const defaultProps = {
+    label: 'Total Revenue',
+    value: '$48,200',
+    change: '+12.5%',
+    trend: 'up',
+    icon: 'currency-dollar',
+}
+
+function mountCard(props = {}) {
+    return mount(KpiCard, { props: { ...defaultProps, ...props } })
+}
+
+describe('KpiCard', () => {
+    describe('rendering', () => {
+        it('renders the label', () => {
+            const wrapper = mountCard()
+            expect(wrapper.text()).toContain('Total Revenue')
+        })
+
+        it('renders a string value', () => {
+            const wrapper = mountCard({ value: '$48,200' })
+            expect(wrapper.text()).toContain('$48,200')
+        })
+
+        it('renders a numeric value', () => {
+            const wrapper = mountCard({ value: 1024 })
+            expect(wrapper.text()).toContain('1024')
+        })
+
+        it('renders the change string', () => {
+            const wrapper = mountCard({ change: '+12.5%' })
+            expect(wrapper.text()).toContain('+12.5%')
+        })
+
+        it('renders "vs last month" alongside the change', () => {
+            const wrapper = mountCard()
+            expect(wrapper.text()).toContain('vs last month')
+        })
+
+        it('passes the icon name to BaseIcon', () => {
+            const wrapper = mountCard({ icon: 'users' })
+            const icon = wrapper.findComponent({ name: 'BaseIcon' })
+            expect(icon.props('name')).toBe('users')
+        })
+    })
+
+    describe('trendClass', () => {
+        it('applies text-green-600 when trend is "up"', () => {
+            const wrapper = mountCard({ trend: 'up' })
+            const changeEl = wrapper.find('p.text-sm')
+            expect(changeEl.classes()).toContain('text-green-600')
+            expect(changeEl.classes()).not.toContain('text-red-600')
+        })
+
+        it('applies text-red-600 when trend is "down"', () => {
+            const wrapper = mountCard({ trend: 'down' })
+            const changeEl = wrapper.find('p.text-sm')
+            expect(changeEl.classes()).toContain('text-red-600')
+            expect(changeEl.classes()).not.toContain('text-green-600')
+        })
+
+        it('defaults to text-green-600 when trend prop is omitted', () => {
+            const wrapper = mount(KpiCard, {
+                props: { label: 'X', value: '0', change: '0%', icon: 'chart' },
+            })
+            const changeEl = wrapper.find('p.text-sm')
+            expect(changeEl.classes()).toContain('text-green-600')
+        })
+    })
+
+    describe('label styling', () => {
+        it('renders the label in uppercase via CSS classes', () => {
+            const wrapper = mountCard()
+            const labelEl = wrapper.find('p.uppercase')
+            expect(labelEl.exists()).toBe(true)
+            expect(labelEl.text()).toBe('Total Revenue')
+        })
+    })
+
+    describe('icon container', () => {
+        it('renders a rounded icon container', () => {
+            const wrapper = mountCard()
+            const container = wrapper.find('div.rounded-full')
+            expect(container.exists()).toBe(true)
+        })
+    })
+
+    describe('prop types', () => {
+        it('accepts a number for value without throwing', () => {
+            expect(() => mountCard({ value: 9999 })).not.toThrow()
+        })
+
+        it('accepts a string for value without throwing', () => {
+            expect(() => mountCard({ value: '9,999' })).not.toThrow()
+        })
+    })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/KpiGrid.spec.js b/tests/Unit/assets/vue/components/dashboard/KpiGrid.spec.js
new file mode 100644
index 0000000..7c65641
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/KpiGrid.spec.js
@@ -0,0 +1,137 @@
+// KpiGrid.spec.js
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('./KpiCard.vue', () => ({
+    default: {
+        name: 'KpiCard',
+        props: [
+            'id',
+            'label',
+            'value',
+            'change',
+            'trend',
+            'icon',
+        ],
+        template: '<div class="kpi-card">{{ label }}</div>',
+    },
+}))
+
+const createDashboardStats = () => ({
+    total_subscribers: {
+        value: 12345,
+        change_vs_last_month: 5.2,
+    },
+    active_campaigns: {
+        value: 42,
+        change_vs_last_month: -3.5,
+    },
+    open_rate: {
+        value: 28,
+        change_vs_last_month: 1.1,
+    },
+    bounce_rate: {
+        value: 4,
+        change_vs_last_month: -0.7,
+    },
+})
+
+describe('KpiGrid', () => {
+    beforeEach(() => {
+        document.body.innerHTML = `
+      <div
+        id="vue-app"
+        data-dashboard-stats='${JSON.stringify(createDashboardStats())}'
+      ></div>
+    `
+    })
+
+    it('renders four KPI cards', async () => {
+        const { default: KpiGrid } = await import('../../../../../../assets/vue/components/dashboard/KpiGrid.vue')
+
+        const wrapper = mount(KpiGrid)
+
+        const cards = wrapper.findAllComponents({ name: 'KpiCard' })
+
+        expect(cards).toHaveLength(4)
+    })
+
+    it('passes formatted props to KPI cards', async () => {
+        const { default: KpiGrid } = await import('../../../../../../assets/vue/components/dashboard/KpiGrid.vue')
+
+        const wrapper = mount(KpiGrid)
+
+        const cards = wrapper.findAllComponents({ name: 'KpiCard' })
+
+        expect(cards[0].props()).toEqual({
+            id: 'subscribers',
+            label: 'Total Subscribers',
+            value: '12,345',
+            change: '+5.2%',
+            trend: 'up',
+            icon: 'users',
+        })
+
+        expect(cards[1].props()).toEqual({
+            id: 'campaigns',
+            label: 'Active Campaigns',
+            value: '42',
+            change: '-3.5%',
+            trend: 'down',
+            icon: 'plane',
+        })
+
+        expect(cards[2].props()).toEqual({
+            id: 'open-rate',
+            label: 'Open Rate',
+            value: '28%',
+            change: '+1.1%',
+            trend: 'up',
+            icon: 'rate',
+        })
+
+        expect(cards[3].props()).toEqual({
+            id: 'bounce-rate',
+            label: 'Bounce Rate',
+            value: '4%',
+            change: '-0.7%',
+            trend: 'down',
+            icon: 'warning',
+        })
+    })
+
+    it('falls back to zero values when dashboard stats are missing', async () => {
+        document.body.innerHTML = `
+      <div id="vue-app" data-dashboard-stats="{}"></div>
+    `
+
+        vi.resetModules()
+
+        const { default: KpiGrid } = await import('../../../../../../assets/vue/components/dashboard/KpiGrid.vue')
+
+        const wrapper = mount(KpiGrid)
+
+        const cards = wrapper.findAllComponents({ name: 'KpiCard' })
+
+        expect(cards[0].props().value).toBe('0')
+        expect(cards[0].props().change).toBe('0.0%')
+        expect(cards[0].props().trend).toBe('up')
+    })
+
+    it('handles invalid JSON in dashboard stats', async () => {
+        document.body.innerHTML = `
+      <div id="vue-app" data-dashboard-stats="invalid-json"></div>
+    `
+
+        vi.resetModules()
+
+        const { default: KpiGrid } = await import('../../../../../../assets/vue/components/dashboard/KpiGrid.vue')
+
+        const wrapper = mount(KpiGrid)
+
+        const cards = wrapper.findAllComponents({ name: 'KpiCard' })
+
+        expect(cards).toHaveLength(4)
+        expect(cards[0].props().value).toBe('0')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/PerformanceChartCard.spec.js b/tests/Unit/assets/vue/components/dashboard/PerformanceChartCard.spec.js
new file mode 100644
index 0000000..fd6ca60
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/PerformanceChartCard.spec.js
@@ -0,0 +1,172 @@
+// PerformanceChartCard.spec.js
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PerformanceChartCard from '../../../../../../assets/vue/components/dashboard/PerformanceChartCard.vue'
+
+vi.mock('vue3-apexcharts', () => ({
+    default: {
+        name: 'apexchart',
+        props: ['type', 'height', 'options', 'series'],
+        template: '<div class="apexchart-stub" />',
+    },
+}))
+
+const BaseCardStub = {
+    name: 'BaseCard',
+    template: '<div class="base-card"><slot /></div>',
+}
+
+describe('PerformanceChartCard', () => {
+    const chartData = {
+        labels: ['May 1', 'May 2', 'May 3'],
+        series: [
+            {
+                name: 'Opens',
+                data: [120, 150, 180],
+            },
+            {
+                name: 'Clicks',
+                data: [25, 30, 42],
+            },
+        ],
+    }
+
+    const mountComponent = (props = {}) =>
+        mount(PerformanceChartCard, {
+            props: {
+                chart: chartData,
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseCard: BaseCardStub,
+                },
+            },
+        })
+
+    it('renders card title and description', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Campaign Performance')
+        expect(wrapper.text()).toContain(
+            'Daily opens and clicks for the last 30 days'
+        )
+    })
+
+    it('passes chart series to apexchart', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+
+        expect(chart.props('series')).toEqual(chartData.series)
+    })
+
+    it('passes area chart configuration', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+
+        expect(chart.props('type')).toBe('area')
+        expect(chart.props('height')).toBe('220')
+    })
+
+    it('uses chart labels as x-axis categories', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+        const options = chart.props('options')
+
+        expect(options.xaxis.categories).toEqual(chartData.labels)
+    })
+
+    it('configures expected chart options', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+        const options = chart.props('options')
+
+        expect(options.chart.toolbar.show).toBe(false)
+        expect(options.chart.zoom.enabled).toBe(false)
+
+        expect(options.stroke).toEqual({
+            curve: 'smooth',
+            width: 2,
+        })
+
+        expect(options.colors).toEqual([
+            '#10b981',
+            '#3b82f6',
+        ])
+
+        expect(options.legend.show).toBe(true)
+        expect(options.legend.position).toBe('top')
+    })
+
+    it('formats y-axis labels correctly', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+        const formatter =
+            chart.props('options').yaxis.labels.formatter
+
+        expect(formatter(1234.4)).toBe('1,234')
+        expect(formatter(1234.8)).toBe('1,235')
+    })
+
+    it('formats tooltip values correctly', () => {
+        const wrapper = mountComponent()
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+        const formatter =
+            chart.props('options').tooltip.y.formatter
+
+        expect(formatter(12345)).toBe('12,345')
+    })
+
+    it('falls back to empty arrays when chart data is missing', () => {
+        const wrapper = mount(PerformanceChartCard, {
+            props: {
+                chart: {},
+            },
+            global: {
+                stubs: {
+                    BaseCard: BaseCardStub,
+                },
+            },
+        })
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+
+        expect(chart.props('series')).toEqual([])
+        expect(chart.props('options').xaxis.categories).toEqual([])
+    })
+
+    it('reacts to prop changes', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.setProps({
+            chart: {
+                labels: ['Jun 1'],
+                series: [
+                    {
+                        name: 'Opens',
+                        data: [500],
+                    },
+                ],
+            },
+        })
+
+        const chart = wrapper.findComponent({ name: 'apexchart' })
+
+        expect(chart.props('series')).toEqual([
+            {
+                name: 'Opens',
+                data: [500],
+            },
+        ])
+
+        expect(chart.props('options').xaxis.categories).toEqual([
+            'Jun 1',
+        ])
+    })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/QuickActionsCard.spec.js b/tests/Unit/assets/vue/components/dashboard/QuickActionsCard.spec.js
new file mode 100644
index 0000000..9757cac
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/QuickActionsCard.spec.js
@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import QuickActionsCard from '../../../../../../assets/vue/components/dashboard/QuickActionsCard.vue'
+
+const BaseCardStub = {
+    name: 'BaseCard',
+    template: '<div class="base-card"><slot /></div>',
+}
+
+describe('QuickActionsCard', () => {
+    const mountComponent = () =>
+        mount(QuickActionsCard, {
+            global: {
+                stubs: {
+                    BaseCard: BaseCardStub,
+                },
+            },
+        })
+
+    it('renders the card title', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Quick Actions')
+    })
+
+    it('renders all quick action links', () => {
+        const wrapper = mountComponent()
+
+        const actions = wrapper.findAll('a')
+
+        expect(actions).toHaveLength(4)
+    })
+
+    it('renders the expected labels', () => {
+        const wrapper = mountComponent()
+
+        const labels = wrapper
+            .findAll('a')
+            .map((link) => link.text().trim())
+
+        expect(labels).toEqual([
+            'New Campaign',
+            'Add Subscribers',
+            'Import List',
+            'Manage Templates',
+        ])
+    })
+
+    it('renders the expected href values', () => {
+        const wrapper = mountComponent()
+
+        const links = wrapper.findAll('a')
+
+        expect(links[0].attributes('href')).toBe('/campaigns/create')
+        expect(links[1].attributes('href')).toBe('/subscribers')
+        expect(links[2].attributes('href')).toBe('/lists')
+        expect(links[3].attributes('href')).toBe('/templates')
+    })
+
+    it('renders one icon per action', () => {
+        const wrapper = mountComponent()
+
+        const icons = wrapper.findAll('svg')
+
+        expect(icons).toHaveLength(4)
+    })
+
+    it('renders actions in the expected order', () => {
+        const wrapper = mountComponent()
+
+        const links = wrapper.findAll('a')
+
+        expect(links[0].text()).toContain('New Campaign')
+        expect(links[1].text()).toContain('Add Subscribers')
+        expect(links[2].text()).toContain('Import List')
+        expect(links[3].text()).toContain('Manage Templates')
+    })
+
+    it('applies the expected styling classes to action links', () => {
+        const wrapper = mountComponent()
+
+        const firstAction = wrapper.find('a')
+
+        expect(firstAction.classes()).toContain('rounded-xl')
+        expect(firstAction.classes()).toContain('border')
+        expect(firstAction.classes()).toContain('hover:bg-gray-100')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/dashboard/RecentCampaignsCard.spec.js b/tests/Unit/assets/vue/components/dashboard/RecentCampaignsCard.spec.js
new file mode 100644
index 0000000..cff73bf
--- /dev/null
+++ b/tests/Unit/assets/vue/components/dashboard/RecentCampaignsCard.spec.js
@@ -0,0 +1,100 @@
+// RecentCampaignsCard.spec.js
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RecentCampaignsCard from '../../../../../../assets/vue/components/dashboard/RecentCampaignsCard.vue'
+
+vi.mock('../../../../../../assets/vue/components/dashboard/CampaignsTable.vue', () => ({
+    default: {
+        name: 'CampaignsTable',
+        props: ['rows'],
+        template: '<div class="campaigns-table-stub" />',
+    },
+}))
+
+const BaseCardStub = {
+    name: 'BaseCard',
+    template: '<div class="base-card"><slot /></div>',
+}
+
+describe('RecentCampaignsCard', () => {
+    const sampleRows = [
+        {
+            id: 1,
+            name: 'Summer Sale',
+            status: 'Sent',
+        },
+        {
+            id: 2,
+            name: 'Newsletter',
+            status: 'Draft',
+        },
+    ]
+
+    const mountComponent = (props = {}) =>
+        mount(RecentCampaignsCard, {
+            props,
+            global: {
+                stubs: {
+                    BaseCard: BaseCardStub,
+                },
+            },
+        })
+
+    it('renders the card title', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Recent Campaigns')
+    })
+
+    it('passes rows to CampaignsTable', () => {
+        const wrapper = mountComponent({
+            rows: sampleRows,
+        })
+
+        const table = wrapper.findComponent({
+            name: 'CampaignsTable',
+        })
+
+        expect(table.props('rows')).toEqual(sampleRows)
+    })
+
+    it('uses an empty array by default', () => {
+        const wrapper = mountComponent()
+
+        const table = wrapper.findComponent({
+            name: 'CampaignsTable',
+        })
+
+        expect(table.props('rows')).toEqual([])
+    })
+
+    it('renders the table container', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.find('.overflow-x-auto').exists()).toBe(true)
+    })
+
+    it('updates rows when props change', async () => {
+        const wrapper = mountComponent({
+            rows: [],
+        })
+
+        const updatedRows = [
+            {
+                id: 123,
+                name: 'Black Friday',
+            },
+        ]
+
+        await wrapper.setProps({
+            rows: updatedRows,
+        })
+
+        const table = wrapper.findComponent({
+            name: 'CampaignsTable',
+        })
+
+        expect(table.props('rows')).toEqual(updatedRows)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/lists/AddSubscribersModal.spec.js b/tests/Unit/assets/vue/components/lists/AddSubscribersModal.spec.js
new file mode 100644
index 0000000..322ea96
--- /dev/null
+++ b/tests/Unit/assets/vue/components/lists/AddSubscribersModal.spec.js
@@ -0,0 +1,227 @@
+// AddSubscribersModal.spec.js
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import AddSubscribersModal from '../../../../../../assets/vue/components/lists/AddSubscribersModal.vue'
+import { subscriptionClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    subscriptionClient: {
+        createSubscriptions: vi.fn(),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name'],
+    template: '<span class="base-icon" />',
+}
+
+describe('AddSubscribersModal', () => {
+    const createWrapper = (props = {}) =>
+        mount(AddSubscribersModal, {
+            props: {
+                isOpen: true,
+                list: {
+                    id: 123,
+                    name: 'Newsletter',
+                },
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it('renders when open', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Add subscribers')
+        expect(wrapper.find('#subscriber-emails').exists()).toBe(true)
+    })
+
+    it('does not render when closed', () => {
+        const wrapper = createWrapper({
+            isOpen: false,
+        })
+
+        expect(wrapper.find('form').exists()).toBe(false)
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+        const cancelButton = buttons.find(
+            button => button.text() === 'Cancel'
+        )
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when overlay is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const overlay = wrapper.find('.bg-slate-900\\/50')
+
+        await overlay.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('shows error when no list is selected', async () => {
+        const wrapper = createWrapper({
+            list: null,
+        })
+
+        await wrapper.find('textarea').setValue('john@example.com')
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'No mailing list selected.'
+        )
+
+        expect(subscriptionClient.createSubscriptions)
+            .not.toHaveBeenCalled()
+    })
+
+    it('shows error for invalid emails', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea').setValue(`
+      john@example.com
+      invalid-email
+    `)
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'Invalid email(s): invalid-email'
+        )
+
+        expect(subscriptionClient.createSubscriptions)
+            .not.toHaveBeenCalled()
+    })
+
+    it('submits valid emails', async () => {
+        subscriptionClient.createSubscriptions.mockResolvedValue()
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea').setValue(`
+      john@example.com
+      jane@example.com
+    `)
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(subscriptionClient.createSubscriptions)
+            .toHaveBeenCalledWith(
+                ['john@example.com', 'jane@example.com'],
+                123,
+                false
+            )
+
+        expect(wrapper.emitted('added')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('supports comma separated emails', async () => {
+        subscriptionClient.createSubscriptions.mockResolvedValue()
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea').setValue(
+            'john@example.com,jane@example.com'
+        )
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(subscriptionClient.createSubscriptions)
+            .toHaveBeenCalledWith(
+                ['john@example.com', 'jane@example.com'],
+                123,
+                false
+            )
+    })
+
+    it('passes autoConfirm value', async () => {
+        subscriptionClient.createSubscriptions.mockResolvedValue()
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea').setValue(
+            'john@example.com'
+        )
+
+        await wrapper.find('input[type="checkbox"]')
+            .setValue(true)
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(subscriptionClient.createSubscriptions)
+            .toHaveBeenCalledWith(
+                ['john@example.com'],
+                123,
+                true
+            )
+    })
+
+    it('shows api errors', async () => {
+        subscriptionClient.createSubscriptions.mockRejectedValue(
+            new Error('API failed')
+        )
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea').setValue(
+            'john@example.com'
+        )
+
+        await wrapper.find('form').trigger('submit')
+
+        await nextTick()
+
+        expect(wrapper.text()).toContain('API failed')
+    })
+
+    it('disables submit button when email field is empty', () => {
+        const wrapper = createWrapper()
+
+        const submitButton = wrapper
+            .findAll('button')
+            .find(button =>
+                button.text().includes('Add subscribers')
+            )
+
+        expect(submitButton.attributes('disabled'))
+            .toBeDefined()
+    })
+
+    it('resets form when modal is reopened', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('textarea')
+            .setValue('john@example.com')
+
+        await wrapper.setProps({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        expect(
+            wrapper.find('textarea').element.value
+        ).toBe('')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/lists/CreateListModal.spec.js b/tests/Unit/assets/vue/components/lists/CreateListModal.spec.js
new file mode 100644
index 0000000..4675161
--- /dev/null
+++ b/tests/Unit/assets/vue/components/lists/CreateListModal.spec.js
@@ -0,0 +1,261 @@
+// CreateListModal.spec.js
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import CreateListModal from '../../../../../../assets/vue/components/lists/CreateListModal.vue'
+import { listClient } from '../../../../../../assets/vue/api'
+import { Requests } from '@tatevikgr/rest-api-client'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    listClient: {
+        createList: vi.fn(),
+    },
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        CreateSubscriberListRequest: vi.fn(function (
+            name,
+            isPublic,
+            listPosition,
+            description
+        ) {
+            this.name = name
+            this.public = isPublic
+            this.listPosition = listPosition
+            this.description = description
+        }),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name'],
+    template: '<span />',
+}
+
+describe('CreateListModal', () => {
+    const createWrapper = (props = {}) =>
+        mount(CreateListModal, {
+            props: {
+                isOpen: true,
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it('renders when open', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Create New List')
+        expect(wrapper.find('#list-name').exists()).toBe(true)
+    })
+
+    it('does not render when closed', () => {
+        const wrapper = createWrapper({
+            isOpen: false,
+        })
+
+        expect(wrapper.find('form').exists()).toBe(false)
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when overlay is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const overlay = wrapper.find('.bg-slate-900\\/50')
+
+        await overlay.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('shows validation error when name is empty', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain('Name is required.')
+
+        expect(listClient.createList).not.toHaveBeenCalled()
+    })
+
+    it('validates negative list positions', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+        await wrapper.find('#list-position').setValue('-1')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'List Position must be a whole number greater than or equal to 0.'
+        )
+
+        expect(listClient.createList).not.toHaveBeenCalled()
+    })
+
+    it('validates non-integer list positions', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+        await wrapper.find('#list-position').setValue('1.5')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'List Position must be a whole number greater than or equal to 0.'
+        )
+    })
+
+    it('creates a list successfully', async () => {
+        const createdList = {
+            id: 1,
+            name: 'Newsletter',
+        }
+
+        listClient.createList.mockResolvedValue(createdList)
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+        await wrapper.find('#list-public').setValue(true)
+        await wrapper.find('#list-position').setValue('3')
+        await wrapper.find('#list-description').setValue(
+            'Weekly newsletter'
+        )
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(Requests.CreateSubscriberListRequest)
+            .toHaveBeenCalledWith(
+                'Newsletter',
+                true,
+                3,
+                'Weekly newsletter'
+            )
+
+        expect(listClient.createList).toHaveBeenCalledTimes(1)
+
+        expect(wrapper.emitted('created')).toEqual([
+            [createdList],
+        ])
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('passes null for empty optional fields', async () => {
+        listClient.createList.mockResolvedValue({
+            id: 1,
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(Requests.CreateSubscriberListRequest)
+            .toHaveBeenCalledWith(
+                'Newsletter',
+                false,
+                null,
+                null
+            )
+    })
+
+    it('trims name and description', async () => {
+        listClient.createList.mockResolvedValue({
+            id: 1,
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue(
+            '  Newsletter  '
+        )
+
+        await wrapper.find('#list-description').setValue(
+            '  Description  '
+        )
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(Requests.CreateSubscriberListRequest)
+            .toHaveBeenCalledWith(
+                'Newsletter',
+                false,
+                null,
+                'Description'
+            )
+    })
+
+    it('shows api errors', async () => {
+        listClient.createList.mockRejectedValue(
+            new Error('API failed')
+        )
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+
+        await wrapper.find('form').trigger('submit')
+        await nextTick()
+
+        expect(wrapper.text()).toContain('API failed')
+    })
+
+    it('disables submit button when name is empty', () => {
+        const wrapper = createWrapper()
+
+        const submitButton = wrapper
+            .findAll('button')
+            .find(button => button.text().includes('Create'))
+
+        expect(submitButton.attributes('disabled'))
+            .toBeDefined()
+    })
+
+    it('resets form when reopened', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('Newsletter')
+        await wrapper.find('#list-description').setValue('Test')
+
+        await wrapper.setProps({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        expect(
+            wrapper.find('#list-name').element.value
+        ).toBe('')
+
+        expect(
+            wrapper.find('#list-description').element.value
+        ).toBe('')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/lists/EditListModal.spec.js b/tests/Unit/assets/vue/components/lists/EditListModal.spec.js
new file mode 100644
index 0000000..e33e029
--- /dev/null
+++ b/tests/Unit/assets/vue/components/lists/EditListModal.spec.js
@@ -0,0 +1,305 @@
+// EditListModal.spec.js
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import EditListModal from '../../../../../../assets/vue/components/lists/EditListModal.vue'
+import { listClient } from '../../../../../../assets/vue/api'
+import { Requests } from '@tatevikgr/rest-api-client'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    listClient: {
+        updateList: vi.fn(),
+    },
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        CreateSubscriberListRequest: vi.fn(function (...args) {
+            this.args = args
+        }),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    template: '<span />',
+}
+
+describe('EditListModal', () => {
+    const list = {
+        id: 123,
+        name: 'Newsletter',
+        public: true,
+        listPosition: 5,
+        description: 'Weekly updates',
+        category: 'News',
+        rss_feed: 'https://example.com/rss',
+        subject_prefix: '[News]',
+    }
+
+    const createWrapper = (props = {}) =>
+        mount(EditListModal, {
+            props: {
+                isOpen: true,
+                list,
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it('renders when open', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Edit List')
+    })
+
+    it('does not render when closed', () => {
+        const wrapper = createWrapper({
+            isOpen: false,
+        })
+
+        expect(wrapper.find('form').exists()).toBe(false)
+    })
+
+    it('pre-populates form from list', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.find('#list-name').element.value)
+            .toBe('Newsletter')
+
+        expect(wrapper.find('#list-public').element.checked)
+            .toBe(true)
+
+        expect(wrapper.find('#list-position').element.value)
+            .toBe('5')
+
+        expect(wrapper.find('#list-description').element.value)
+            .toBe('Weekly updates')
+
+        expect(wrapper.find('#list-category').element.value)
+            .toBe('News')
+
+        expect(wrapper.find('#list-rss').element.value)
+            .toBe('https://example.com/rss')
+
+        expect(wrapper.find('#list-prefix').element.value)
+            .toBe('[News]')
+    })
+
+    it('supports snake_case list_position', () => {
+        const wrapper = createWrapper({
+            list: {
+                ...list,
+                listPosition: undefined,
+                list_position: 10,
+            },
+        })
+
+        expect(
+            wrapper.find('#list-position').element.value
+        ).toBe('10')
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('shows validation error when name is empty', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name').setValue('')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'Name is required.'
+        )
+
+        expect(listClient.updateList)
+            .not.toHaveBeenCalled()
+    })
+
+    it('validates negative positions', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-position')
+            .setValue('-1')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'List Position must be a whole number greater than or equal to 0.'
+        )
+    })
+
+    it('validates decimal positions', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-position')
+            .setValue('2.5')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.text()).toContain(
+            'List Position must be a whole number greater than or equal to 0.'
+        )
+    })
+
+    it('updates a list successfully', async () => {
+        const updatedList = {
+            id: 123,
+            name: 'Updated',
+        }
+
+        listClient.updateList.mockResolvedValue(updatedList)
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-name')
+            .setValue('Updated')
+
+        await wrapper.find('#list-public')
+            .setValue(false)
+
+        await wrapper.find('#list-position')
+            .setValue('7')
+
+        await wrapper.find('#list-description')
+            .setValue('Updated description')
+
+        await wrapper.find('#list-category')
+            .setValue('Marketing')
+
+        await wrapper.find('#list-rss')
+            .setValue('https://example.com/new-rss')
+
+        await wrapper.find('#list-prefix')
+            .setValue('[Marketing]')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(Requests.CreateSubscriberListRequest)
+            .toHaveBeenCalledWith(
+                'Updated',
+                false,
+                7,
+                'Updated description',
+                '[Marketing]',
+                'https://example.com/new-rss',
+                'Marketing'
+            )
+
+        expect(listClient.updateList)
+            .toHaveBeenCalledWith(
+                123,
+                expect.any(Object)
+            )
+
+        expect(wrapper.emitted('updated'))
+            .toEqual([[updatedList]])
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('passes null for empty optional fields', async () => {
+        listClient.updateList.mockResolvedValue({
+            id: 123,
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('#list-description')
+            .setValue('')
+
+        await wrapper.find('#list-category')
+            .setValue('')
+
+        await wrapper.find('#list-rss')
+            .setValue('')
+
+        await wrapper.find('#list-prefix')
+            .setValue('')
+
+        await wrapper.find('#list-position')
+            .setValue('')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(Requests.CreateSubscriberListRequest)
+            .toHaveBeenCalledWith(
+                'Newsletter',
+                true,
+                null,
+                null,
+                null,
+                null,
+                null
+            )
+    })
+
+    it('shows api errors', async () => {
+        listClient.updateList.mockRejectedValue(
+            new Error('Update failed')
+        )
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('form').trigger('submit')
+
+        await nextTick()
+
+        expect(wrapper.text())
+            .toContain('Update failed')
+    })
+
+    it('does nothing when list id is missing', async () => {
+        const wrapper = createWrapper({
+            list: {
+                name: 'No Id',
+            },
+        })
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(listClient.updateList)
+            .not.toHaveBeenCalled()
+    })
+
+    it('updates form when list prop changes', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.setProps({
+            list: {
+                id: 999,
+                name: 'Another List',
+                public: false,
+            },
+        })
+
+        expect(
+            wrapper.find('#list-name').element.value
+        ).toBe('Another List')
+
+        expect(
+            wrapper.find('#list-public').element.checked
+        ).toBe(false)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/lists/ListDirectory.spec.js b/tests/Unit/assets/vue/components/lists/ListDirectory.spec.js
new file mode 100644
index 0000000..7dbd9ad
--- /dev/null
+++ b/tests/Unit/assets/vue/components/lists/ListDirectory.spec.js
@@ -0,0 +1,322 @@
+// ListDirectory.spec.js
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import ListDirectory from '../../../../../../assets/vue/components/lists/ListDirectory.vue'
+import { fetchAllLists, listClient } from '../../../../../../assets/vue/api'
+
+const pushMock = vi.fn()
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: pushMock,
+    }),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    fetchAllLists: vi.fn(),
+    listClient: {
+        deleteList: vi.fn(),
+    },
+}))
+
+const BaseIconStub = {
+    template: '<span />',
+}
+
+const CreateListModalStub = {
+    name: 'CreateListModal',
+    props: ['isOpen'],
+    template: '<div class="create-modal" />',
+}
+
+const EditListModalStub = {
+    name: 'EditListModal',
+    props: ['isOpen', 'list'],
+    template: '<div class="edit-modal" />',
+}
+
+const AddSubscribersModalStub = {
+    name: 'AddSubscribersModal',
+    props: ['isOpen', 'list'],
+    template: '<div class="add-subscribers-modal" />',
+}
+
+const createWrapper = () =>
+    mount(ListDirectory, {
+        global: {
+            stubs: {
+                BaseIcon: BaseIconStub,
+                CreateListModal: CreateListModalStub,
+                EditListModal: EditListModalStub,
+                AddSubscribersModal: AddSubscribersModalStub,
+            },
+        },
+    })
+
+describe('ListDirectory', () => {
+    const lists = [
+        {
+            id: 1,
+            name: 'Newsletter',
+            public: true,
+        },
+        {
+            id: 2,
+            name: 'Customers',
+            public: false,
+        },
+    ]
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+        window.confirm = vi.fn()
+    })
+
+    it('loads mailing lists on mount', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(fetchAllLists).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Newsletter')
+        expect(wrapper.text()).toContain('Customers')
+    })
+
+    it('shows fetch errors', async () => {
+        fetchAllLists.mockRejectedValue(
+            new Error('Failed to load')
+        )
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain(
+            'Failed to load'
+        )
+    })
+
+    it('opens create modal', async () => {
+        fetchAllLists.mockResolvedValue([])
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper
+            .find('button')
+            .trigger('click')
+
+        const modal =
+            wrapper.findComponent(CreateListModalStub)
+
+        expect(modal.props('isOpen')).toBe(true)
+    })
+
+    it('opens edit modal', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const editButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Edit'))
+
+        await editButton.trigger('click')
+
+        const modal =
+            wrapper.findComponent(EditListModalStub)
+
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('list')).toEqual(lists[0])
+
+        expect(wrapper.emitted('edit')).toEqual([
+            [lists[0]],
+        ])
+    })
+
+    it('opens add subscribers modal', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Subscribers')
+            )
+
+        await button.trigger('click')
+
+        const modal =
+            wrapper.findComponent(AddSubscribersModalStub)
+
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('list')).toEqual(lists[0])
+
+        expect(wrapper.emitted('add-subscriber'))
+            .toEqual([[lists[0]]])
+    })
+
+    it('emits start-campaign', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Start Campaign')
+            )
+
+        await button.trigger('click')
+
+        expect(wrapper.emitted('start-campaign'))
+            .toEqual([[lists[0]]])
+    })
+
+    it('navigates to members page', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('View Members')
+            )
+
+        await button.trigger('click')
+
+        expect(pushMock).toHaveBeenCalledWith({
+            name: 'list-subscribers',
+            params: {
+                listId: 1,
+            },
+            query: {
+                listName: 'Newsletter',
+            },
+        })
+    })
+
+    it('deletes a list after confirmation', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+        listClient.deleteList.mockResolvedValue()
+
+        window.confirm.mockReturnValue(true)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Delete')
+            )
+
+        await button.trigger('click')
+
+        expect(listClient.deleteList)
+            .toHaveBeenCalledWith(1)
+
+        expect(fetchAllLists)
+            .toHaveBeenCalledTimes(2)
+    })
+
+    it('does not delete when confirmation is cancelled', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        window.confirm.mockReturnValue(false)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Delete')
+            )
+
+        await button.trigger('click')
+
+        expect(listClient.deleteList)
+            .not.toHaveBeenCalled()
+    })
+
+    it('refreshes after list created', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper
+            .findComponent(CreateListModalStub)
+            .vm.$emit('created')
+
+        await flushPromises()
+
+        expect(fetchAllLists)
+            .toHaveBeenCalledTimes(2)
+    })
+
+    it('refreshes after list updated', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper
+            .findComponent(EditListModalStub)
+            .vm.$emit('updated')
+
+        await flushPromises()
+
+        expect(fetchAllLists)
+            .toHaveBeenCalledTimes(2)
+    })
+
+    it('refreshes after subscribers added', async () => {
+        fetchAllLists.mockResolvedValue(lists)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper
+            .findComponent(AddSubscribersModalStub)
+            .vm.$emit('added')
+
+        await flushPromises()
+
+        expect(fetchAllLists)
+            .toHaveBeenCalledTimes(2)
+    })
+
+    it('correctly identifies public lists', async () => {
+        fetchAllLists.mockResolvedValue([
+            { id: 1, name: 'A', public: 1 },
+            { id: 2, name: 'B', public: '1' },
+        ])
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Yes')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js b/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
new file mode 100644
index 0000000..6b98d7e
--- /dev/null
+++ b/tests/Unit/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
@@ -0,0 +1,282 @@
+// ListSubscribersExportPanel.spec.js
+
+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'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    default: {
+        get: vi.fn(),
+    },
+    subscriberAttributesClient: {},
+}))
+
+describe('ListSubscribersExportPanel', () => {
+    const createWrapper = (props = {}) =>
+        mount(ListSubscribersExportPanel, {
+            props,
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        client.get.mockResolvedValue({
+            items: [],
+        })
+
+        delete window.location
+        window.location = {
+            href: '',
+        }
+    })
+
+    it('loads attribute definitions on mount', async () => {
+        client.get.mockResolvedValue({
+            items: [
+                { name: 'firstName' },
+                { name: 'lastName' },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(client.get).toHaveBeenCalledWith(
+            'attributes',
+            {
+                limit: 100,
+                offset: 0,
+            }
+        )
+
+        expect(wrapper.text()).toContain('FirstName')
+        expect(wrapper.text()).toContain('LastName')
+    })
+
+    it('disables date inputs when date type is any', () => {
+        const wrapper = createWrapper()
+
+        const dateFrom = wrapper.find('#list-export-date-from')
+        const dateTo = wrapper.find('#list-export-date-to')
+
+        expect(dateFrom.attributes('disabled')).toBeDefined()
+        expect(dateTo.attributes('disabled')).toBeDefined()
+    })
+
+    it('enables date inputs for signup date type', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('input[value="signup"]')
+            .setValue()
+
+        expect(
+            wrapper.find('#list-export-date-from')
+                .attributes('disabled')
+        ).toBeUndefined()
+
+        expect(
+            wrapper.find('#list-export-date-to')
+                .attributes('disabled')
+        ).toBeUndefined()
+    })
+
+    it('clears dates when switching back to any', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('input[value="signup"]')
+            .setValue()
+
+        await wrapper
+            .find('#list-export-date-from')
+            .setValue('2025-01-01')
+
+        await wrapper
+            .find('#list-export-date-to')
+            .setValue('2025-01-31')
+
+        await wrapper
+            .find('input[value="any"]')
+            .setValue()
+
+        expect(
+            wrapper.find('#list-export-date-from')
+                .element.value
+        ).toBe('')
+
+        expect(
+            wrapper.find('#list-export-date-to')
+                .element.value
+        ).toBe('')
+    })
+
+    it('unselects all columns', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const selectAll = wrapper
+            .find('input[type="checkbox"]:not([value])')
+
+        await selectAll.setValue(false)
+
+        const exportButton = wrapper
+            .find('button')
+
+        await exportButton.trigger('click')
+
+        expect(wrapper.text()).toContain(
+            'Select at least one column.'
+        )
+    })
+
+    it('selects all columns', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const columnCheckboxes = wrapper
+            .findAll('input[type="checkbox"]')
+            .slice(1)
+
+        columnCheckboxes.forEach(cb => {
+            expect(cb.element.checked).toBe(true)
+        })
+    })
+
+    it('validates date range', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('input[value="signup"]')
+            .setValue()
+
+        await wrapper
+            .find('#list-export-date-from')
+            .setValue('2025-12-31')
+
+        await wrapper
+            .find('#list-export-date-to')
+            .setValue('2025-01-01')
+
+        await wrapper.find('button').trigger('click')
+
+        expect(wrapper.text()).toContain(
+            'Date From cannot be after Date To.'
+        )
+    })
+
+    it('exports subscribers with list id', async () => {
+        const wrapper = createWrapper({
+            listId: 123,
+        })
+
+        await flushPromises()
+
+        await wrapper.find('button').trigger('click')
+
+        expect(window.location.href)
+            .toContain('/subscribers/export?')
+
+        expect(window.location.href)
+            .toContain('list_id=123')
+
+        expect(window.location.href)
+            .toContain('date_type=any')
+    })
+
+    it('includes directory filter', async () => {
+        const wrapper = createWrapper({
+            directoryFilter: 'confirmed',
+        })
+
+        await flushPromises()
+
+        await wrapper.find('button').trigger('click')
+
+        expect(window.location.href)
+            .toContain('confirmed=true')
+    })
+
+    it('includes date parameters', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('input[value="signup"]')
+            .setValue()
+
+        await wrapper
+            .find('#list-export-date-from')
+            .setValue('2025-01-01')
+
+        await wrapper
+            .find('#list-export-date-to')
+            .setValue('2025-01-31')
+
+        await wrapper.find('button').trigger('click')
+
+        expect(window.location.href)
+            .toContain('date_type=signup')
+
+        expect(window.location.href)
+            .toContain('date_from=2025-01-01')
+
+        expect(window.location.href)
+            .toContain('date_to=2025-01-31')
+    })
+
+    it('includes selected columns', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper.find('button').trigger('click')
+
+        expect(window.location.href)
+            .toContain('columns%5B%5D=id')
+
+        expect(window.location.href)
+            .toContain('columns%5B%5D=email')
+    })
+
+    it('sets checkbox indeterminate state', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const columnCheckboxes = wrapper
+            .findAll('input[type="checkbox"]')
+            .slice(1)
+
+        await columnCheckboxes[0].setValue(false)
+
+        const selectAll = wrapper
+            .find('input[type="checkbox"]:not([value])')
+
+        expect(selectAll.element.indeterminate)
+            .toBe(true)
+    })
+
+    it('loads multiple attribute pages', async () => {
+        client.get
+            .mockResolvedValueOnce({
+                items: Array.from({ length: 100 }, (_, i) => ({
+                    name: `field${i}`,
+                })),
+            })
+            .mockResolvedValueOnce({
+                items: [
+                    { name: 'extraField' },
+                ],
+            })
+
+        createWrapper()
+
+        await flushPromises()
+
+        expect(client.get).toHaveBeenCalledTimes(2)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/public-pages/PublicPageEditor.spec.js b/tests/Unit/assets/vue/components/public-pages/PublicPageEditor.spec.js
new file mode 100644
index 0000000..3afb358
--- /dev/null
+++ b/tests/Unit/assets/vue/components/public-pages/PublicPageEditor.spec.js
@@ -0,0 +1,142 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import PublicPageEditor from '../../../../../../assets/vue/components/public-pages/PublicPageEditor.vue'
+
+const {
+  routeMock,
+  pushMock,
+  replaceMock,
+  backendFetchMock,
+  fetchAllAdminsMock,
+  fetchAllListsMock,
+  fetchAllAttributeDefinitionsMock,
+  subscribePagesClientMock,
+} = vi.hoisted(() => ({
+  routeMock: {
+    params: {},
+    query: {},
+  },
+  pushMock: vi.fn(() => Promise.resolve()),
+  replaceMock: vi.fn(() => Promise.resolve()),
+  backendFetchMock: vi.fn(),
+  fetchAllAdminsMock: vi.fn(),
+  fetchAllListsMock: vi.fn(),
+  fetchAllAttributeDefinitionsMock: vi.fn(),
+  subscribePagesClientMock: {
+    getSubscribePage: vi.fn(),
+    createSubscribePage: vi.fn(),
+    updateSubscribePage: vi.fn(),
+  },
+}))
+
+vi.mock('vue-router', () => ({
+  useRoute: () => routeMock,
+  useRouter: () => ({
+    push: pushMock,
+    replace: replaceMock,
+  }),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+  backendFetch: backendFetchMock,
+  fetchAllAdmins: fetchAllAdminsMock,
+  fetchAllLists: fetchAllListsMock,
+  fetchAllAttributeDefinitions: fetchAllAttributeDefinitionsMock,
+  subscribePagesClient: subscribePagesClientMock,
+}))
+
+const mountComponent = () => mount(PublicPageEditor)
+
+describe('PublicPageEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    routeMock.params = {}
+    routeMock.query = {}
+
+    backendFetchMock.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(['english.inc', 'armenian.inc']),
+    })
+    fetchAllAdminsMock.mockResolvedValue([
+      { id: 2, loginName: 'second-admin' },
+      { id: 1, loginName: 'first-admin' },
+    ])
+    fetchAllListsMock.mockResolvedValue([
+      { id: 2, name: 'Non-public', public: false },
+      { id: 1, name: 'Public list', public: true },
+    ])
+    fetchAllAttributeDefinitionsMock.mockResolvedValue([
+      { id: 2, name: 'City', type: 'text' },
+      { id: 1, name: 'Email', type: 'text' },
+    ])
+    subscribePagesClientMock.getSubscribePage.mockResolvedValue({
+      id: 42,
+      title: 'Loaded page',
+      owner: { id: 4 },
+      data: [],
+    })
+    subscribePagesClientMock.createSubscribePage.mockResolvedValue({ id: 7 })
+    subscribePagesClientMock.updateSubscribePage.mockResolvedValue({ id: 42 })
+    vi.spyOn(window, 'alert').mockImplementation(() => {})
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  it('renders create mode and loads initial dependencies', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Create Subscribe Page')
+    expect(fetchAllAdminsMock).toHaveBeenCalled()
+    expect(fetchAllListsMock).toHaveBeenCalled()
+    expect(fetchAllAttributeDefinitionsMock).toHaveBeenCalled()
+    expect(subscribePagesClientMock.getSubscribePage).not.toHaveBeenCalled()
+  })
+
+  it('renders edit mode and populates title from loaded page data', async () => {
+    routeMock.params = { pageId: '42' }
+    subscribePagesClientMock.getSubscribePage.mockResolvedValueOnce({
+      id: 42,
+      title: 'Server page title',
+      owner: { id: 11 },
+      data: [
+        { key: 'title', value: 'Loaded Title' },
+        { key: 'language_file', value: 'armenian.inc' },
+        { key: 'attributes', value: '' },
+      ],
+    })
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Edit Subscribe Page')
+    expect(subscribePagesClientMock.getSubscribePage).toHaveBeenCalledWith(42)
+    expect(wrapper.find('input[type="text"]').element.value).toBe('Loaded Title')
+  })
+
+  it('updates route query when moving to a different step', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    const listsStepButton = wrapper.findAll('button').find((button) => button.text().includes('Lists'))
+    await listsStepButton.trigger('click')
+    await flushPromises()
+
+    expect(replaceMock).toHaveBeenCalledWith({
+      query: {
+        step: '2',
+      },
+    })
+  })
+
+  it('shows validation alert when saving without title', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    const saveButton = wrapper.findAll('button').find((button) => button.text().trim() === 'Save')
+    await saveButton.trigger('click')
+
+    expect(window.alert).toHaveBeenCalledWith('Title is required.')
+    expect(subscribePagesClientMock.createSubscribePage).not.toHaveBeenCalled()
+    expect(subscribePagesClientMock.updateSubscribePage).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests/Unit/assets/vue/components/public-pages/PublicPagesDirectory.spec.js b/tests/Unit/assets/vue/components/public-pages/PublicPagesDirectory.spec.js
new file mode 100644
index 0000000..03eca53
--- /dev/null
+++ b/tests/Unit/assets/vue/components/public-pages/PublicPagesDirectory.spec.js
@@ -0,0 +1,135 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { Requests } from '@tatevikgr/rest-api-client'
+import PublicPagesDirectory from '../../../../../../assets/vue/components/public-pages/PublicPagesDirectory.vue'
+
+const {
+  pushMock,
+  subscribePagesClientMock,
+} = vi.hoisted(() => ({
+  pushMock: vi.fn(() => Promise.resolve()),
+  subscribePagesClientMock: {
+    getSubscribePages: vi.fn(),
+    deleteSubscribePage: vi.fn(),
+    updateSubscribePage: vi.fn(),
+  },
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+  subscribePagesClient: subscribePagesClientMock,
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+  Requests: {
+    UpdateSubscribePageRequest: vi.fn((title, active) => ({ title, active })),
+  },
+}))
+
+const mountComponent = () => mount(PublicPagesDirectory, {
+  global: {
+    stubs: {
+      BaseIcon: true,
+    },
+  },
+})
+
+describe('PublicPagesDirectory', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    subscribePagesClientMock.getSubscribePages.mockResolvedValue({
+      items: [],
+      pagination: {
+        hasMore: false,
+      },
+    })
+  })
+
+  it('loads and renders subscribe pages on mount', async () => {
+    subscribePagesClientMock.getSubscribePages.mockResolvedValueOnce({
+      items: [{
+        id: 2,
+        title: 'Main page',
+        owner: { loginName: 'owner-admin' },
+        isDefault: false,
+        active: true,
+      }],
+      pagination: {
+        hasMore: false,
+      },
+    })
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(subscribePagesClientMock.getSubscribePages).toHaveBeenCalledWith(null, 100)
+    expect(wrapper.text()).toContain('Main page')
+    expect(wrapper.text()).toContain('owner-admin')
+  })
+
+  it('navigates to create page when add button is clicked', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    const createButton = wrapper.findAll('button').find((button) => button.text().includes('Add New Subscribe Page'))
+    await createButton.trigger('click')
+
+    expect(pushMock).toHaveBeenCalledWith({ name: 'public-page-create' })
+  })
+
+  it('updates active state when active checkbox changes', async () => {
+    subscribePagesClientMock.getSubscribePages.mockResolvedValueOnce({
+      items: [{
+        id: 5,
+        title: 'Weekly updates',
+        owner: { loginName: 'editor' },
+        isDefault: false,
+        active: false,
+      }],
+      pagination: {
+        hasMore: false,
+      },
+    })
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    const activeCheckbox = wrapper.find('input[type="checkbox"]')
+    await activeCheckbox.setValue(true)
+    await flushPromises()
+
+    expect(Requests.UpdateSubscribePageRequest).toHaveBeenCalledWith('Weekly updates', true)
+    expect(subscribePagesClientMock.updateSubscribePage).toHaveBeenCalledWith(5, {
+      title: 'Weekly updates',
+      active: true,
+    })
+  })
+
+  it('does not delete when confirmation is cancelled', async () => {
+    subscribePagesClientMock.getSubscribePages.mockResolvedValueOnce({
+      items: [{
+        id: 9,
+        title: 'To delete',
+        owner: { loginName: 'manager' },
+        isDefault: false,
+        active: true,
+      }],
+      pagination: {
+        hasMore: false,
+      },
+    })
+    vi.spyOn(window, 'confirm').mockReturnValue(false)
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    const deleteButton = wrapper.findAll('button').find((button) => button.text().includes('Delete'))
+    await deleteButton.trigger('click')
+
+    expect(subscribePagesClientMock.deleteSubscribePage).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests/Unit/assets/vue/components/settings/CreateAdminAttributeModal.spec.js b/tests/Unit/assets/vue/components/settings/CreateAdminAttributeModal.spec.js
new file mode 100644
index 0000000..1cd59e5
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/CreateAdminAttributeModal.spec.js
@@ -0,0 +1,119 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateAdminAttributeModal from '../../../../../../assets/vue/components/settings/CreateAdminAttributeModal.vue'
+
+const {
+    createAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    createAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    adminAttributeClient: {
+        createAttributeDefinition: createAttributeDefinitionMock,
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateAdminAttributeModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('CreateAdminAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create Attribute')
+        expect(wrapper.find('input').exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+        expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    })
+
+    it('resets form each time the modal opens', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('input').element.value).toBe('')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(false)
+    })
+
+    it('creates an attribute and emits created', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('input').setValue('Email')
+        await wrapper.find('select').setValue('hidden')
+        await wrapper.find('input[type="checkbox"]').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Email',
+            type: 'hidden',
+            required: true,
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to save')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('input').setValue('Email')
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to save')
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find((button) => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const closeButton = wrapper.findAll('button')[0]
+
+        await closeButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/CreateAdminModal.spec.js b/tests/Unit/assets/vue/components/settings/CreateAdminModal.spec.js
new file mode 100644
index 0000000..bf5aa33
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/CreateAdminModal.spec.js
@@ -0,0 +1,180 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateAdminModal from '../../../../../../assets/vue/components/settings/CreateAdminModal.vue'
+
+const {
+    createAdministratorMock,
+} = vi.hoisted(() => ({
+    createAdministratorMock: vi.fn(),
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        CreateAdministratorRequest: class {
+            constructor(login_name, password, email, super_user, privileges) {
+                this.login_name = login_name
+                this.password = password
+                this.email = email
+                this.super_user = super_user
+                this.privileges = privileges
+            }
+        },
+    },
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    adminClient: {
+        createAdministrator: createAdministratorMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateAdminModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+    })
+
+describe('CreateAdminModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAdministratorMock.mockResolvedValue({
+            id: 1,
+            login_name: 'admin',
+        })
+
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create New Administrator')
+        expect(wrapper.find('#admin-login-name').exists()).toBe(true)
+        expect(wrapper.find('#admin-email').exists()).toBe(true)
+        expect(wrapper.find('#admin-password').exists()).toBe(true)
+    })
+
+    it('resets form whenever opened', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('#admin-login-name').element.value).toBe('')
+        expect(wrapper.find('#admin-email').element.value).toBe('')
+        expect(wrapper.find('#admin-password').element.value).toBe('')
+        expect(wrapper.find('#admin-super-user').element.checked).toBe(false)
+    })
+
+    it('creates an administrator', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).toHaveBeenCalledTimes(1)
+
+        const request = createAdministratorMock.mock.calls[0][0]
+
+        expect(request.login_name).toBe('admin')
+        expect(request.email).toBe('admin@example.com')
+        expect(request.password).toBe('password123')
+        expect(request.super_user).toBe(false)
+        expect(request.privileges).toEqual({
+            subscribers: false,
+            campaigns: false,
+            statistics: false,
+            settings: false,
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('creates a super user without privileges', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+        await wrapper.find('#admin-super-user').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        const request = createAdministratorMock.mock.calls[0][0]
+
+        expect(request.super_user).toBe(true)
+        expect(request.privileges).toBeUndefined()
+    })
+
+    it('does not submit when form is invalid', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('ab')
+        await wrapper.find('#admin-email').setValue('invalid')
+        await wrapper.find('#admin-password').setValue('123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).not.toHaveBeenCalled()
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAdministratorMock.mockRejectedValueOnce(
+            new Error('Create failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Create failed')
+        expect(console.error).toHaveBeenCalled()
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find((button) => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the close button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('button[type="button"]').trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js b/tests/Unit/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js
new file mode 100644
index 0000000..09c0b12
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js
@@ -0,0 +1,189 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateSubscriberAttributeModal from '../../../../../../assets/vue/components/settings/CreateSubscriberAttributeModal.vue'
+
+const {
+    createAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    createAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    subscriberAttributesClient: {
+        createAttributeDefinition: createAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateSubscriberAttributeModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('CreateSubscriberAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create Subscriber Attribute')
+        expect(wrapper.findAll('input')[0].exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('resets the form when reopened', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(inputs[2].element.checked).toBe(false)
+    })
+
+    it('creates a subscriber attribute', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Country')
+        await wrapper.find('select').setValue('textline')
+        await inputs[1].setValue('10')
+        await inputs[2].setValue('Default')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Country',
+            type: 'textline',
+            order: 10,
+            default_value: 'Default',
+            required: false,
+            options: [],
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('adds and removes options', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('select').setValue('select')
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBeGreaterThan(4)
+
+        const removeButton = wrapper
+            .findAll('button')
+            .find(button => !button.text().trim())
+
+        await removeButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(4)
+    })
+
+    it('submits options for selectable types', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('input')[0].setValue('Status')
+        await wrapper.find('select').setValue('select')
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[4].setValue('Active')
+        await inputs[5].setValue('1')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Status',
+            type: 'select',
+            order: null,
+            default_value: '',
+            required: false,
+            options: [
+                {
+                    name: 'Active',
+                    list_order: 1,
+                },
+            ],
+        })
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to save')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('input')[0].setValue('Country')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to save')
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/EditAdminAttributeModal.spec.js b/tests/Unit/assets/vue/components/settings/EditAdminAttributeModal.spec.js
new file mode 100644
index 0000000..f39bde3
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/EditAdminAttributeModal.spec.js
@@ -0,0 +1,140 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditAdminAttributeModal from '../../../../../../assets/vue/components/settings/EditAdminAttributeModal.vue'
+
+const {
+    updateAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    updateAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    adminAttributeClient: {
+        updateAttributeDefinition: updateAttributeDefinitionMock,
+    },
+}))
+
+const attribute = {
+    id: 1,
+    name: 'Email',
+    type: 'textline',
+    required: true,
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditAdminAttributeModal, {
+        props: {
+            isOpen: true,
+            attribute,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('EditAdminAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Attribute')
+        expect(wrapper.find('input').exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('populates the form from the attribute prop', () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Email')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(inputs[1].element.checked).toBe(true)
+    })
+
+    it('updates the form when the attribute prop changes', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.setProps({
+            attribute: {
+                id: 2,
+                name: 'Country',
+                type: 'hidden',
+                required: false,
+            },
+        })
+
+        await flushPromises()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Country')
+        expect(wrapper.find('select').element.value).toBe('hidden')
+        expect(inputs[1].element.checked).toBe(false)
+    })
+
+    it('updates an attribute and emits updated', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Full Name')
+        await wrapper.find('select').setValue('hidden')
+        await inputs[1].setValue(false)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalledWith(1, {
+            name: 'Full Name',
+            type: 'hidden',
+            required: false,
+        })
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to update')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to update')
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js b/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js
new file mode 100644
index 0000000..698ac08
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/EditAdminModal.spec.js
@@ -0,0 +1,196 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditAdminModal from '../../../../../../assets/vue/components/settings/EditAdminModal.vue'
+
+const {
+    updateAdministratorMock,
+} = vi.hoisted(() => ({
+    updateAdministratorMock: vi.fn(),
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        UpdateAdministratorRequest: class {
+            constructor(loginName, password, email, superUser, privileges) {
+                this.loginName = loginName
+                this.password = password
+                this.email = email
+                this.superUser = superUser
+                this.privileges = privileges
+            }
+        },
+    },
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    adminClient: {
+        updateAdministrator: updateAdministratorMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const admin = {
+    id: 7,
+    loginName: 'admin',
+    email: 'admin@example.com',
+    superUser: false,
+    privileges: {
+        subscribers: true,
+        campaigns: false,
+        statistics: true,
+        settings: false,
+    },
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditAdminModal, {
+        props: {
+            isOpen: true,
+            admin,
+            ...props,
+        },
+    })
+
+describe('EditAdminModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAdministratorMock.mockResolvedValue({
+            id: 7,
+        })
+
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Administrator')
+        expect(wrapper.text()).toContain('7')
+        expect(wrapper.find('#edit-admin-login-name').exists()).toBe(true)
+        expect(wrapper.find('#edit-admin-email').exists()).toBe(true)
+        expect(wrapper.find('#edit-admin-password').exists()).toBe(true)
+    })
+
+    it('populates the form from the admin prop', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.find('#edit-admin-login-name').element.value).toBe('admin')
+        expect(wrapper.find('#edit-admin-email').element.value).toBe('admin@example.com')
+        expect(wrapper.find('#edit-admin-password').element.value).toBe('')
+        expect(wrapper.find('#edit-admin-super-user').element.checked).toBe(false)
+        expect(wrapper.find('#edit-priv-subscribers').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-statistics').element.checked).toBe(true)
+    })
+
+    it('updates the form when the admin prop changes', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.setProps({
+            admin: {
+                id: 9,
+                loginName: 'root',
+                email: 'root@example.com',
+                superUser: true,
+                privileges: {
+                    subscribers: false,
+                    campaigns: true,
+                    statistics: false,
+                    settings: true,
+                },
+            },
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('#edit-admin-login-name').element.value).toBe('root')
+        expect(wrapper.find('#edit-admin-email').element.value).toBe('root@example.com')
+        expect(wrapper.find('#edit-admin-super-user').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-campaigns').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-settings').element.checked).toBe(true)
+    })
+
+    it('updates an administrator', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#edit-admin-login-name').setValue('new-admin')
+        await wrapper.find('#edit-admin-email').setValue('new@example.com')
+        await wrapper.find('#edit-admin-password').setValue('password123')
+        await wrapper.find('#edit-admin-super-user').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).toHaveBeenCalledTimes(1)
+        expect(updateAdministratorMock.mock.calls[0][0]).toBe(7)
+
+        const request = updateAdministratorMock.mock.calls[0][1]
+
+        expect(request.loginName).toBe('new-admin')
+        expect(request.email).toBe('new@example.com')
+        expect(request.password).toBe('password123')
+        expect(request.superUser).toBe(true)
+        expect(request.privileges).toEqual({
+            subscribers: true,
+            campaigns: false,
+            statistics: true,
+            settings: false,
+        })
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('does not submit without an admin', async () => {
+        const wrapper = mountComponent({
+            admin: null,
+        })
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).not.toHaveBeenCalled()
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAdministratorMock.mockRejectedValueOnce(
+            new Error('Update failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Update failed')
+        expect(console.error).toHaveBeenCalled()
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    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')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js b/tests/Unit/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js
new file mode 100644
index 0000000..b53ca44
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js
@@ -0,0 +1,185 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditSubscriberAttributeModal from '../../../../../../assets/vue/components/settings/EditSubscriberAttributeModal.vue'
+
+const {
+    updateAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    updateAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    subscriberAttributesClient: {
+        updateAttributeDefinition: updateAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const attribute = {
+    id: 1,
+    name: 'Country',
+    type: 'select',
+    order: 5,
+    default_value: 'USA',
+    required: true,
+    options: [
+        {
+            name: 'USA',
+            list_order: 1,
+        },
+        {
+            name: 'Canada',
+            list_order: 2,
+        },
+    ],
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditSubscriberAttributeModal, {
+        props: {
+            isOpen: true,
+            attribute,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('EditSubscriberAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Subscriber Attribute')
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('populates the form from the attribute prop', () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Country')
+        expect(wrapper.find('select').element.value).toBe('select')
+        expect(inputs[1].element.value).toBe('5')
+        expect(inputs[2].element.value).toBe('USA')
+        expect(inputs[3].element.checked).toBe(true)
+    })
+
+    it('updates the attribute', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Status')
+        await inputs[1].setValue('10')
+        await inputs[2].setValue('Active')
+        await inputs[3].setValue(false)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalledWith(
+            1,
+            expect.objectContaining({
+                id: 1,
+                name: 'Status',
+                type: 'select',
+                order: 10,
+                default_value: 'Active',
+                required: false,
+            })
+        )
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('adds and removes options', async () => {
+        const wrapper = mountComponent()
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(10)
+
+        const removeButtons = wrapper
+            .findAll('button')
+            .filter(button => button.text().trim() === '')
+
+        await removeButtons[0].trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(8)
+    })
+
+    it('updates option values', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[4].setValue('UK')
+        await inputs[5].setValue('3')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        const payload = updateAttributeDefinitionMock.mock.calls[0][1]
+
+        expect(payload.options[0]).toEqual({
+            name: 'UK',
+            list_order: 3,
+        })
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Update failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Update failed')
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/SettingsActionsPanel.spec.js b/tests/Unit/assets/vue/components/settings/SettingsActionsPanel.spec.js
new file mode 100644
index 0000000..f82306d
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/SettingsActionsPanel.spec.js
@@ -0,0 +1,163 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import SettingsActionsPanel from '../../../../../../assets/vue/components/settings/SettingsActionsPanel.vue'
+
+const {
+    routeMock,
+    replaceMock,
+} = vi.hoisted(() => ({
+    routeMock: {
+        query: {},
+    },
+    replaceMock: vi.fn(() => Promise.resolve()),
+}))
+
+vi.mock('vue-router', () => ({
+    useRoute: () => routeMock,
+    useRouter: () => ({
+        replace: replaceMock,
+    }),
+}))
+
+vi.mock('../../../../../../assets/vue/components/settings/SettingsConfigs.vue', () => ({
+    default: {
+        template: '<div>Configs Panel</div>',
+    },
+}))
+
+vi.mock('../../../../../../assets/vue/components/settings/SettingsAdmins.vue', () => ({
+    default: {
+        template: '<div>Admins Panel</div>',
+    },
+}))
+
+vi.mock('../../../../../../assets/vue/components/settings/SettingsAdminAttributes.vue', () => ({
+    default: {
+        template: '<div>Admin Attributes Panel</div>',
+    },
+}))
+
+vi.mock('../../../../../../assets/vue/components/settings/SettingsSubscriberAttributes.vue', () => ({
+    default: {
+        template: '<div>Subscriber Attributes Panel</div>',
+    },
+}))
+
+const mountComponent = () => mount(SettingsActionsPanel)
+
+describe('SettingsActionsPanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        routeMock.query = {}
+    })
+
+    it('renders configs tab by default', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Settings')
+        expect(wrapper.text()).toContain('Configs Panel')
+
+        expect(replaceMock).toHaveBeenCalledWith({
+            query: {
+                tab: 'configs',
+            },
+        })
+    })
+
+    it('renders admins tab from route query', async () => {
+        routeMock.query = {
+            tab: 'admins',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+        expect(replaceMock).not.toHaveBeenCalled()
+    })
+
+    it('falls back to configs for an invalid tab', async () => {
+        routeMock.query = {
+            tab: 'invalid',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Configs Panel')
+
+        expect(replaceMock).toHaveBeenCalledWith({
+            query: {
+                tab: 'configs',
+            },
+        })
+    })
+
+    it('changes tabs when a tab button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Admins')
+
+        await button.trigger('click')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+
+        expect(replaceMock).toHaveBeenLastCalledWith({
+            query: {
+                tab: 'admins',
+            },
+        })
+    })
+
+    it('renders the admin attributes tab', async () => {
+        routeMock.query = {
+            tab: 'admin_attributes',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admin Attributes Panel')
+    })
+
+    it('renders the subscriber attributes tab', async () => {
+        routeMock.query = {
+            tab: 'subscriber_attributes',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Subscriber Attributes Panel')
+    })
+
+    it('updates the displayed panel when the route query changes', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+
+        const adminsButton = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Admins')
+
+        await adminsButton.trigger('click')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+        expect(replaceMock).toHaveBeenLastCalledWith({
+            query: {
+                tab: 'admins',
+            },
+        })
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/SettingsAdminAttributes.spec.js b/tests/Unit/assets/vue/components/settings/SettingsAdminAttributes.spec.js
new file mode 100644
index 0000000..a094ecc
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/SettingsAdminAttributes.spec.js
@@ -0,0 +1,219 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import SettingsAdminAttributes from '../../../../../../assets/vue/components/settings/SettingsAdminAttributes.vue'
+import {defineComponent} from "vue";
+
+const {
+    getAttributeDefinitionsMock,
+    deleteAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    getAttributeDefinitionsMock: vi.fn(),
+    deleteAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    adminAttributeClient: {
+        getAttributeDefinitions: getAttributeDefinitionsMock,
+        deleteAttributeDefinition: deleteAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const CreateStub = defineComponent({
+    name: 'CreateAdminAttributeModal',
+    props: ['isOpen'],
+    emits: ['close', 'created'],
+    template: '<div />',
+})
+
+const EditStub = defineComponent({
+    name: 'EditAdminAttributeModal',
+    props: ['isOpen', 'attribute'],
+    emits: ['close', 'updated'],
+    template: '<div />',
+})
+
+const mountComponent = () =>
+    mount(SettingsAdminAttributes, {
+        global: {
+            stubs: {
+                BaseIcon: true,
+                CreateAdminAttributeModal: CreateStub,
+                EditAdminAttributeModal: EditStub,
+            },
+        },
+    })
+describe('SettingsAdminAttributes', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        getAttributeDefinitionsMock.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    name: 'Email',
+                    type: 'textline',
+                    required: true,
+                },
+                {
+                    id: 2,
+                    name: 'Token',
+                    type: 'hidden',
+                    required: false,
+                },
+            ],
+        })
+
+        deleteAttributeDefinitionMock.mockResolvedValue()
+
+        vi.spyOn(window, 'confirm').mockImplementation(() => true)
+        vi.spyOn(window, 'alert').mockImplementation(() => {})
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('loads attributes on mount', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(getAttributeDefinitionsMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Email')
+        expect(wrapper.text()).toContain('Token')
+    })
+
+    it('shows empty state', async () => {
+        getAttributeDefinitionsMock.mockResolvedValueOnce({
+            items: [],
+        })
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('No attributes found.')
+    })
+
+    it('shows load error', async () => {
+        getAttributeDefinitionsMock.mockRejectedValueOnce(
+            new Error('Load failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Load failed')
+    })
+
+    it('opens create modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text().includes('Add Attribute'))
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findComponent({ name: 'CreateAdminAttributeModal' }).props('isOpen')).toBe(true)
+    })
+
+    it('reloads attributes after create', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        getAttributeDefinitionsMock.mockClear()
+
+        const createModal = wrapper.findComponent(CreateStub)
+        expect(createModal.exists()).toBe(true)
+        await createModal.vm.$emit('created')
+    })
+
+    it('opens edit modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const editButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Edit')
+
+        await editButton.trigger('click')
+
+        const modal = wrapper.findComponent({ name: 'EditAdminAttributeModal' })
+
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('attribute').name).toBe('Email')
+    })
+
+    it('reloads after update', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        getAttributeDefinitionsMock.mockClear()
+
+        wrapper.findComponent({ name: 'EditAdminAttributeModal' }).vm.$emit('updated')
+
+        await flushPromises()
+
+        expect(getAttributeDefinitionsMock).toHaveBeenCalled()
+    })
+
+    it('deletes an attribute after confirmation', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(window.confirm).toHaveBeenCalled()
+        expect(deleteAttributeDefinitionMock).toHaveBeenCalledWith(1)
+        expect(getAttributeDefinitionsMock).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not delete when confirmation is cancelled', async () => {
+        window.confirm.mockReturnValueOnce(false)
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(deleteAttributeDefinitionMock).not.toHaveBeenCalled()
+    })
+
+    it('shows alert when delete fails', async () => {
+        deleteAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Delete failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+        await flushPromises()
+
+        expect(window.alert).toHaveBeenCalledWith('Delete failed')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/SettingsAdmins.spec.js b/tests/Unit/assets/vue/components/settings/SettingsAdmins.spec.js
new file mode 100644
index 0000000..90132cb
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/SettingsAdmins.spec.js
@@ -0,0 +1,198 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import SettingsAdmins from '../../../../../../assets/vue/components/settings/SettingsAdmins.vue'
+
+const {
+    fetchAllAdminsMock,
+    deleteAdministratorMock,
+} = vi.hoisted(() => ({
+    fetchAllAdminsMock: vi.fn(),
+    deleteAdministratorMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    fetchAllAdmins: fetchAllAdminsMock,
+    adminClient: {
+        deleteAdministrator: deleteAdministratorMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+vi.mock('./CreateAdminModal.vue', () => ({
+    default: defineComponent({
+        name: 'CreateAdminModal',
+        props: ['isOpen'],
+        emits: ['close', 'created'],
+        template: '<div />',
+    }),
+}))
+
+vi.mock('./EditAdminModal.vue', () => ({
+    default: defineComponent({
+        name: 'EditAdminModal',
+        props: ['isOpen', 'admin'],
+        emits: ['close', 'updated'],
+        template: '<div />',
+    }),
+}))
+
+const mountComponent = () => mount(SettingsAdmins)
+
+describe('SettingsAdmins', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        fetchAllAdminsMock.mockResolvedValue([
+            {
+                id: 1,
+                loginName: 'admin',
+                email: 'admin@example.com',
+                superUser: true,
+                createdAt: '2024-01-01T00:00:00Z',
+            },
+            {
+                id: 2,
+                loginName: 'editor',
+                email: 'editor@example.com',
+                superUser: false,
+                createdAt: '2024-01-02T00:00:00Z',
+            },
+        ])
+
+        deleteAdministratorMock.mockResolvedValue()
+
+        vi.spyOn(window, 'confirm').mockImplementation(() => true)
+        vi.spyOn(window, 'alert').mockImplementation(() => {})
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('loads administrators on mount', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(fetchAllAdminsMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('admin')
+        expect(wrapper.text()).toContain('editor')
+    })
+
+    it('shows empty state', async () => {
+        fetchAllAdminsMock.mockResolvedValueOnce([])
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('No administrators found')
+    })
+
+    it('shows load error', async () => {
+        fetchAllAdminsMock.mockRejectedValueOnce(
+            new Error('Load failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Load failed')
+    })
+
+    it('opens the create modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text().includes('Add Admin'))
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findComponent({ name: 'CreateAdminModal' }).props('isOpen')).toBe(true)
+    })
+
+    it('opens the edit modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const editButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Edit')
+
+        await editButton.trigger('click')
+
+        const modal = wrapper.findComponent({ name: 'EditAdminModal' })
+
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('admin').loginName).toBe('admin')
+    })
+
+    it('deletes an administrator', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(window.confirm).toHaveBeenCalled()
+        expect(deleteAdministratorMock).toHaveBeenCalledWith(1)
+        expect(fetchAllAdminsMock).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not delete when confirmation is cancelled', async () => {
+        window.confirm.mockReturnValueOnce(false)
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(deleteAdministratorMock).not.toHaveBeenCalled()
+    })
+
+    it('shows alert when delete fails', async () => {
+        deleteAdministratorMock.mockRejectedValueOnce(
+            new Error('Delete failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+        await flushPromises()
+
+        expect(window.alert).toHaveBeenCalledWith(
+            'Failed to delete administrator: Delete failed'
+        )
+    })
+
+    it('formats the created date', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Jan')
+        expect(wrapper.text()).toContain('2024')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/SettingsConfigs.spec.js b/tests/Unit/assets/vue/components/settings/SettingsConfigs.spec.js
new file mode 100644
index 0000000..ba695ed
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/SettingsConfigs.spec.js
@@ -0,0 +1,194 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import SettingsConfigs from '../../../../../../assets/vue/components/settings/SettingsConfigs.vue'
+
+const {
+    getConfigsMock,
+    updateMock,
+} = vi.hoisted(() => ({
+    getConfigsMock: vi.fn(),
+    updateMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    default: {},
+    configClient: {
+        getConfigs: getConfigsMock,
+        update: updateMock,
+    },
+}))
+
+const mountComponent = () => mount(SettingsConfigs)
+
+describe('SettingsConfigs', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        vi.useFakeTimers()
+
+        getConfigsMock.mockResolvedValue({
+            items: [
+                {
+                    key: 'site_name',
+                    value: 'Newsletter',
+                    editable: true,
+                    description: 'Site title',
+                },
+                {
+                    key: 'version',
+                    value: '1.0.0',
+                    editable: false,
+                },
+            ],
+        })
+
+        updateMock.mockImplementation((key, value) =>
+            Promise.resolve({
+                key,
+                value,
+                editable: true,
+            })
+        )
+
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers()
+        vi.useRealTimers()
+    })
+
+    it('loads configs on mount', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(getConfigsMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('site_name')
+        expect(wrapper.text()).toContain('version')
+    })
+
+    it('refreshes configs', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        getConfigsMock.mockClear()
+
+        const refresh = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Refresh')
+
+        await refresh.trigger('click')
+        await flushPromises()
+
+        expect(getConfigsMock).toHaveBeenCalled()
+    })
+
+    it('filters configs', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        await wrapper.find('input[type="search"]').setValue('site')
+
+        expect(wrapper.text()).toContain('site_name')
+        expect(wrapper.text()).not.toContain('version')
+    })
+
+    it('saves a config', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const valueInput = wrapper.find('input[aria-label="Value for site_name"]')
+
+        await valueInput.setValue('New Name')
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Save')
+
+        await saveButton.trigger('click')
+        await flushPromises()
+
+        expect(updateMock).toHaveBeenCalledWith(
+            'site_name',
+            'New Name'
+        )
+
+        expect(wrapper.text()).toContain('Saved')
+    })
+
+    it('shows save error', async () => {
+        updateMock.mockRejectedValueOnce(
+            new Error('Update failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Save')
+
+        await saveButton.trigger('click')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Update failed')
+        expect(console.error).toHaveBeenCalled()
+    })
+
+    it('resets edited value', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const valueInput = wrapper.find('input[aria-label="Value for site_name"]')
+
+        await valueInput.setValue('Changed')
+
+        const resetButton = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Reset')
+
+        await resetButton.trigger('click')
+
+        expect(valueInput.element.value).toBe('Newsletter')
+    })
+
+    it('shows empty state', async () => {
+        getConfigsMock.mockResolvedValueOnce({
+            items: [],
+        })
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('No configuration keys found.')
+    })
+
+    it('shows load error', async () => {
+        getConfigsMock.mockRejectedValueOnce(
+            new Error('Load failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Load failed')
+        expect(console.error).toHaveBeenCalled()
+    })
+
+    it('renders readonly configs as disabled', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const input = wrapper.find('input[aria-label="Value for version"]')
+
+        expect(input.attributes('readonly')).toBeDefined()
+    })
+})
diff --git a/tests/Unit/assets/vue/components/settings/SettingsSubscriberAttributes.spec.js b/tests/Unit/assets/vue/components/settings/SettingsSubscriberAttributes.spec.js
new file mode 100644
index 0000000..491210a
--- /dev/null
+++ b/tests/Unit/assets/vue/components/settings/SettingsSubscriberAttributes.spec.js
@@ -0,0 +1,199 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import SettingsSubscriberAttributes from '../../../../../../assets/vue/components/settings/SettingsSubscriberAttributes.vue'
+
+const {
+    getAttributeDefinitionsMock,
+    deleteAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    getAttributeDefinitionsMock: vi.fn(),
+    deleteAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    subscriberAttributesClient: {
+        getAttributeDefinitions: getAttributeDefinitionsMock,
+        deleteAttributeDefinition: deleteAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+vi.mock('./CreateSubscriberAttributeModal.vue', () => ({
+    default: defineComponent({
+        name: 'CreateSubscriberAttributeModal',
+        props: ['isOpen'],
+        emits: ['close', 'created'],
+        template: '<div />',
+    }),
+}))
+
+vi.mock('./EditSubscriberAttributeModal.vue', () => ({
+    default: defineComponent({
+        name: 'EditSubscriberAttributeModal',
+        props: ['isOpen', 'attribute'],
+        emits: ['close', 'updated'],
+        template: '<div />',
+    }),
+}))
+
+const mountComponent = () => mount(SettingsSubscriberAttributes)
+
+describe('SettingsSubscriberAttributes', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        getAttributeDefinitionsMock.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    name: 'Email',
+                    type: 'textline',
+                    required: true,
+                },
+                {
+                    id: 2,
+                    name: 'Country',
+                    type: 'select',
+                    required: false,
+                },
+            ],
+        })
+
+        deleteAttributeDefinitionMock.mockResolvedValue()
+
+        vi.spyOn(window, 'confirm').mockImplementation(() => true)
+        vi.spyOn(window, 'alert').mockImplementation(() => {})
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('loads attributes on mount', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(getAttributeDefinitionsMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Email')
+        expect(wrapper.text()).toContain('Country')
+    })
+
+    it('shows empty state', async () => {
+        getAttributeDefinitionsMock.mockResolvedValueOnce({
+            items: [],
+        })
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('No attributes found.')
+    })
+
+    it('shows load error', async () => {
+        getAttributeDefinitionsMock.mockRejectedValueOnce(
+            new Error('Load failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Load failed')
+    })
+
+    it('opens create modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text().includes('Add Attribute'))
+
+        await addButton.trigger('click')
+
+        const modal = wrapper.findComponent({ name: 'CreateSubscriberAttributeModal' })
+
+        expect(modal.exists()).toBe(true)
+        expect(modal.props('isOpen')).toBe(true)
+    })
+
+    it('opens edit modal', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const editButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Edit')
+
+        await editButton.trigger('click')
+
+        const modal = wrapper.findComponent({ name: 'EditSubscriberAttributeModal' })
+
+        expect(modal.exists()).toBe(true)
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('attribute')).toEqual({
+            id: 1,
+            name: 'Email',
+            type: 'textline',
+            required: true,
+        })
+    })
+
+    it('deletes an attribute after confirmation', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(window.confirm).toHaveBeenCalled()
+        expect(deleteAttributeDefinitionMock).toHaveBeenCalledWith(1)
+        expect(getAttributeDefinitionsMock).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not delete when confirmation is cancelled', async () => {
+        window.confirm.mockReturnValueOnce(false)
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+
+        expect(deleteAttributeDefinitionMock).not.toHaveBeenCalled()
+    })
+
+    it('shows alert when delete fails', async () => {
+        deleteAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Delete failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const deleteButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Delete')
+
+        await deleteButton.trigger('click')
+        await flushPromises()
+
+        expect(window.alert).toHaveBeenCalledWith('Delete failed')
+        expect(console.error).toHaveBeenCalled()
+    })
+})
diff --git a/tests/Unit/assets/vue/components/sidebar/AppSidebar.spec.js b/tests/Unit/assets/vue/components/sidebar/AppSidebar.spec.js
new file mode 100644
index 0000000..619065e
--- /dev/null
+++ b/tests/Unit/assets/vue/components/sidebar/AppSidebar.spec.js
@@ -0,0 +1,174 @@
+// AppSidebar.spec.js
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import AppSidebar from '../../../../../../assets/vue/components/sidebar/AppSidebar.vue'
+
+const isSidebarOpen = ref(false)
+const closeSidebar = vi.fn()
+
+vi.mock('../../../../../../assets/vue/composables/useSidebar', () => ({
+    useSidebar: () => ({
+        isSidebarOpen,
+        closeSidebar,
+    }),
+}))
+
+const SidebarLogoStub = {
+    name: 'SidebarLogo',
+    template: '<div class="sidebar-logo" />',
+}
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    template: '<span class="base-icon" />',
+}
+
+const SidebarNavSectionStub = {
+    name: 'SidebarNavSection',
+    props: ['id', 'label', 'items'],
+    template: '<div class="sidebar-section">{{ label }}</div>',
+}
+
+describe('AppSidebar', () => {
+    const createWrapper = () =>
+        mount(AppSidebar, {
+            global: {
+                stubs: {
+                    SidebarLogo: SidebarLogoStub,
+                    BaseIcon: BaseIconStub,
+                    SidebarNavSection: SidebarNavSectionStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+        isSidebarOpen.value = false
+    })
+
+    it('renders logo', () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.findComponent(SidebarLogoStub).exists()
+        ).toBe(true)
+    })
+
+    it('renders all navigation sections', () => {
+        const wrapper = createWrapper()
+
+        const sections = wrapper.findAllComponents(
+            SidebarNavSectionStub
+        )
+
+        expect(sections).toHaveLength(4)
+
+        expect(sections.map(s => s.props('label')))
+            .toEqual([
+                'General',
+                'Marketing',
+                'Reports',
+                'System',
+            ])
+    })
+
+    it('passes items to navigation sections', () => {
+        const wrapper = createWrapper()
+
+        const generalSection =
+            wrapper.findAllComponents(
+                SidebarNavSectionStub
+            )[0]
+
+        expect(generalSection.props('items'))
+            .toHaveLength(3)
+
+        expect(generalSection.props('items')[0])
+            .toEqual({
+                label: 'Dashboard',
+                icon: 'grid',
+                route: '/',
+                badge: null,
+            })
+    })
+
+    it('hides backdrop when sidebar is closed', () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.find('.backdrop-blur-sm').exists()
+        ).toBe(false)
+    })
+
+    it('shows backdrop when sidebar is open', () => {
+        isSidebarOpen.value = true
+
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.find('.backdrop-blur-sm').exists()
+        ).toBe(true)
+    })
+
+    it('shows hidden class when sidebar is closed', () => {
+        const wrapper = createWrapper()
+
+        const aside = wrapper.find('aside')
+
+        expect(aside.classes())
+            .toContain('-translate-x-full')
+    })
+
+    it('shows visible class when sidebar is open', () => {
+        isSidebarOpen.value = true
+
+        const wrapper = createWrapper()
+
+        const aside = wrapper.find('aside')
+
+        expect(aside.classes())
+            .toContain('translate-x-0')
+    })
+
+    it('closes sidebar when backdrop is clicked', async () => {
+        isSidebarOpen.value = true
+
+        const wrapper = createWrapper()
+
+        await wrapper
+            .find('.backdrop-blur-sm')
+            .trigger('click')
+
+        expect(closeSidebar)
+            .toHaveBeenCalledTimes(1)
+    })
+
+    it('closes sidebar when close button is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        await buttons[0].trigger('click')
+
+        expect(closeSidebar)
+            .toHaveBeenCalledTimes(1)
+    })
+
+    it('reacts when sidebar state changes', async () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.find('aside').classes()
+        ).toContain('-translate-x-full')
+
+        isSidebarOpen.value = true
+
+        await wrapper.vm.$nextTick()
+
+        expect(
+            wrapper.find('aside').classes()
+        ).toContain('translate-x-0')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/sidebar/SidebarLogo.spec.js b/tests/Unit/assets/vue/components/sidebar/SidebarLogo.spec.js
new file mode 100644
index 0000000..84270cd
--- /dev/null
+++ b/tests/Unit/assets/vue/components/sidebar/SidebarLogo.spec.js
@@ -0,0 +1,80 @@
+// SidebarLogo.spec.js
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SidebarLogo from '../../../../../../assets/vue/components/sidebar/SidebarLogo.vue'
+
+vi.mock('../../../../../../assets/images/logo-48.png', () => ({
+    default: '/mock-logo.png',
+}))
+
+describe('SidebarLogo', () => {
+    const createWrapper = () =>
+        mount(SidebarLogo, {
+            global: {
+                stubs: {
+                    RouterLink: {
+                        name: 'RouterLink',
+                        props: ['to'],
+                        template: `
+              <a :href="to">
+                <slot />
+              </a>
+            `,
+                    },
+                },
+            },
+        })
+
+    it('renders a link to the dashboard', () => {
+        const wrapper = createWrapper()
+
+        const link = wrapper.find('a')
+
+        expect(link.attributes('href')).toBe('/')
+    })
+
+    it('renders the logo image', () => {
+        const wrapper = createWrapper()
+
+        const image = wrapper.find('img')
+
+        expect(image.exists()).toBe(true)
+        expect(image.attributes('src')).toBe('/mock-logo.png')
+    })
+
+    it('renders the correct alt text', () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.find('img').attributes('alt')
+        ).toBe('Logo')
+    })
+
+    it('renders the application name', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('phpList')
+        expect(wrapper.text()).toContain('4')
+    })
+
+    it('renders a RouterLink component', () => {
+        const wrapper = createWrapper()
+
+        const routerLink = wrapper.findComponent({
+            name: 'RouterLink',
+        })
+
+        expect(routerLink.exists()).toBe(true)
+        expect(routerLink.props('to')).toBe('/')
+    })
+
+    it('renders image inside the logo container', () => {
+        const wrapper = createWrapper()
+
+        const image = wrapper.find('img')
+
+        expect(image.classes()).toContain('w-full')
+        expect(image.classes()).toContain('block')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/sidebar/SidebarNavItem.spec.js b/tests/Unit/assets/vue/components/sidebar/SidebarNavItem.spec.js
new file mode 100644
index 0000000..2cc5fac
--- /dev/null
+++ b/tests/Unit/assets/vue/components/sidebar/SidebarNavItem.spec.js
@@ -0,0 +1,188 @@
+// SidebarNavItem.spec.js
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SidebarNavItem from '../../../../../../assets/vue/components/sidebar/SidebarNavItem.vue'
+
+const closeSidebar = vi.fn()
+
+vi.mock('../../../../../../assets/vue/composables/useSidebar', () => ({
+    useSidebar: () => ({
+        closeSidebar,
+    }),
+}))
+
+vi.mock('vue-router', () => ({
+    useRoute: () => ({
+        path: '/dashboard',
+    }),
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name', 'active'],
+    template: '<span class="base-icon" />',
+}
+
+const BaseBadgeStub = {
+    name: 'BaseBadge',
+    props: ['variant'],
+    template: '<span class="base-badge"><slot /></span>',
+}
+
+describe('SidebarNavItem', () => {
+    const item = {
+        label: 'Dashboard',
+        icon: 'grid',
+        route: '/',
+    }
+
+    const createWrapper = ({
+                               active = false,
+                               itemOverrides = {},
+                           } = {}) =>
+        mount(SidebarNavItem, {
+            props: {
+                item: {
+                    ...item,
+                    ...itemOverrides,
+                },
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                    BaseBadge: BaseBadgeStub,
+                    RouterLink: {
+                        name: 'RouterLink',
+                        props: ['to', 'custom'],
+                        template: `
+              <slot
+                :navigate="navigate"
+                :href="to"
+                :isActive="${active}"
+              />
+            `,
+                        methods: {
+                            navigate: vi.fn(),
+                        },
+                    },
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it('renders item label', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Dashboard')
+    })
+
+    it('renders item route as href', () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.find('a').attributes('href')
+        ).toBe('/')
+    })
+
+    it('passes icon name to BaseIcon', () => {
+        const wrapper = createWrapper()
+
+        const icon = wrapper.findComponent(BaseIconStub)
+
+        expect(icon.props('name')).toBe('grid')
+    })
+
+    it('passes active state to BaseIcon', () => {
+        const wrapper = createWrapper({
+            active: true,
+        })
+
+        const icon = wrapper.findComponent(BaseIconStub)
+
+        expect(icon.props('active')).toBe(true)
+    })
+
+    it('applies active styling when active', () => {
+        const wrapper = createWrapper({
+            active: true,
+        })
+
+        expect(wrapper.find('a').classes())
+            .toContain('bg-indigo-50')
+
+        expect(wrapper.find('a').classes())
+            .toContain('text-ext-wf3')
+    })
+
+    it('applies inactive styling when inactive', () => {
+        const wrapper = createWrapper({
+            active: false,
+        })
+
+        expect(wrapper.find('a').classes())
+            .toContain('text-slate-600')
+
+        expect(wrapper.find('a').classes())
+            .toContain('hover:bg-slate-50')
+    })
+
+    it('renders badge when present', () => {
+        const wrapper = createWrapper({
+            itemOverrides: {
+                badge: 12,
+            },
+        })
+
+        const badge =
+            wrapper.findComponent(BaseBadgeStub)
+
+        expect(badge.exists()).toBe(true)
+        expect(badge.props('variant'))
+            .toBe('counter')
+
+        expect(badge.text()).toBe('12')
+    })
+
+    it('does not render badge when badge is null', () => {
+        const wrapper = createWrapper()
+
+        expect(
+            wrapper.findComponent(BaseBadgeStub).exists()
+        ).toBe(false)
+    })
+
+    it('does not render badge when badge is undefined', () => {
+        const wrapper = createWrapper({
+            itemOverrides: {
+                badge: undefined,
+            },
+        })
+
+        expect(
+            wrapper.findComponent(BaseBadgeStub).exists()
+        ).toBe(false)
+    })
+
+    it('calls closeSidebar when clicked', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('a').trigger('click')
+
+        expect(closeSidebar)
+            .toHaveBeenCalledTimes(1)
+    })
+
+    it('renders RouterLink with item route', () => {
+        const wrapper = createWrapper()
+
+        const routerLink =
+            wrapper.findComponent({ name: 'RouterLink' })
+
+        expect(routerLink.props('to'))
+            .toBe('/')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/sidebar/SidebarNavSection.spec.js b/tests/Unit/assets/vue/components/sidebar/SidebarNavSection.spec.js
new file mode 100644
index 0000000..ed8cfc1
--- /dev/null
+++ b/tests/Unit/assets/vue/components/sidebar/SidebarNavSection.spec.js
@@ -0,0 +1,95 @@
+// SidebarNavSection.spec.js
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SidebarNavSection from '../../../../../../assets/vue/components/sidebar/SidebarNavSection.vue'
+
+const SidebarNavItemStub = {
+    name: 'SidebarNavItem',
+    props: ['item'],
+    template: '<div class="sidebar-nav-item">{{ item.label }}</div>',
+}
+
+describe('SidebarNavSection', () => {
+    const items = [
+        {
+            label: 'Dashboard',
+            icon: 'grid',
+            route: '/',
+        },
+        {
+            label: 'Subscribers',
+            icon: 'users',
+            route: '/subscribers',
+        },
+    ]
+
+    const createWrapper = (props = {}) =>
+        mount(SidebarNavSection, {
+            props: {
+                label: 'General',
+                items,
+                ...props,
+            },
+            global: {
+                stubs: {
+                    SidebarNavItem: SidebarNavItemStub,
+                },
+            },
+        })
+
+    it('renders section label', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('General')
+    })
+
+    it('renders a nav item for each item', () => {
+        const wrapper = createWrapper()
+
+        const navItems = wrapper.findAllComponents(
+            SidebarNavItemStub
+        )
+
+        expect(navItems).toHaveLength(2)
+    })
+
+    it('passes item props to SidebarNavItem', () => {
+        const wrapper = createWrapper()
+
+        const navItems = wrapper.findAllComponents(
+            SidebarNavItemStub
+        )
+
+        expect(navItems[0].props('item'))
+            .toEqual(items[0])
+
+        expect(navItems[1].props('item'))
+            .toEqual(items[1])
+    })
+
+    it('renders item labels through SidebarNavItem', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Dashboard')
+        expect(wrapper.text()).toContain('Subscribers')
+    })
+
+    it('renders no nav items when items is empty', () => {
+        const wrapper = createWrapper({
+            items: [],
+        })
+
+        expect(
+            wrapper.findAllComponents(SidebarNavItemStub)
+        ).toHaveLength(0)
+    })
+
+    it('renders label even when items is empty', () => {
+        const wrapper = createWrapper({
+            items: [],
+        })
+
+        expect(wrapper.text()).toContain('General')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/subscribers/ImportResult.spec.js b/tests/Unit/assets/vue/components/subscribers/ImportResult.spec.js
new file mode 100644
index 0000000..e00f120
--- /dev/null
+++ b/tests/Unit/assets/vue/components/subscribers/ImportResult.spec.js
@@ -0,0 +1,155 @@
+// ImportResult.spec.js
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ImportResult from '../../../../../../assets/vue/components/subscribers/ImportResult.vue'
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name'],
+    template: '<span class="base-icon" />',
+}
+
+describe('ImportResult', () => {
+    const createWrapper = (props = {}) =>
+        mount(ImportResult, {
+            props: {
+                isImportResultOpen: true,
+                importResult: {
+                    imported: 10,
+                    skipped: 2,
+                    errors: [],
+                },
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    it('renders when open', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Import Result')
+    })
+
+    it('does not render when closed', () => {
+        const wrapper = createWrapper({
+            isImportResultOpen: false,
+        })
+
+        expect(wrapper.text()).toBe('')
+    })
+
+    it('displays imported and skipped counts', () => {
+        const wrapper = createWrapper({
+            importResult: {
+                imported: 25,
+                skipped: 7,
+                errors: [],
+            },
+        })
+
+        expect(wrapper.text()).toContain('Imported')
+        expect(wrapper.text()).toContain('25')
+
+        expect(wrapper.text()).toContain('Skipped')
+        expect(wrapper.text()).toContain('7')
+    })
+
+    it('shows success message when there are no errors', () => {
+        const wrapper = createWrapper({
+            importResult: {
+                imported: 10,
+                skipped: 0,
+                errors: [],
+            },
+        })
+
+        expect(wrapper.text()).toContain(
+            'Import completed without errors.'
+        )
+    })
+
+    it('renders error list when errors exist', () => {
+        const wrapper = createWrapper({
+            importResult: {
+                imported: 5,
+                skipped: 1,
+                errors: [
+                    'Invalid email',
+                    'Missing name',
+                ],
+            },
+        })
+
+        expect(wrapper.text()).toContain('Errors')
+        expect(wrapper.text()).toContain('Invalid email')
+        expect(wrapper.text()).toContain('Missing name')
+    })
+
+    it('renders one list item per error', () => {
+        const wrapper = createWrapper({
+            importResult: {
+                imported: 5,
+                skipped: 1,
+                errors: [
+                    'Error 1',
+                    'Error 2',
+                    'Error 3',
+                ],
+            },
+        })
+
+        expect(wrapper.findAll('li'))
+            .toHaveLength(3)
+    })
+
+    it('emits close when header close button is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        await buttons[0].trigger('click')
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('emits close when footer close button is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        await buttons[1].trigger('click')
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('emits close when backdrop is clicked', async () => {
+        const wrapper = createWrapper()
+
+        const backdrop = wrapper.find('.fixed.inset-0')
+
+        await backdrop.trigger('click')
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('does not render error section when errors array is empty', () => {
+        const wrapper = createWrapper({
+            importResult: {
+                imported: 1,
+                skipped: 0,
+                errors: [],
+            },
+        })
+
+        expect(wrapper.text())
+            .not.toContain('Errors')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/subscribers/SubscriberDirectory.spec.js b/tests/Unit/assets/vue/components/subscribers/SubscriberDirectory.spec.js
new file mode 100644
index 0000000..b1c99cc
--- /dev/null
+++ b/tests/Unit/assets/vue/components/subscribers/SubscriberDirectory.spec.js
@@ -0,0 +1,289 @@
+// SubscriberDirectory.spec.js
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import SubscriberDirectory from '../../../../../../assets/vue/components/subscribers/SubscriberDirectory.vue'
+import { backendFetch, subscribersClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    backendFetch: vi.fn(),
+    subscribersClient: {
+        importSubscribers: vi.fn(),
+    },
+}))
+
+const BaseIconStub = {
+    template: '<span />',
+}
+
+const SubscriberFiltersStub = {
+    name: 'SubscriberFilters',
+    emits: ['filter-change'],
+    template: '<div />',
+}
+
+const SubscriberTableStub = {
+    name: 'SubscriberTable',
+    props: ['subscribers'],
+    emits: ['view'],
+    template: '<div />',
+}
+
+const SubscriberModalStub = {
+    name: 'SubscriberModal',
+    props: ['isOpen', 'subscriberId'],
+    emits: ['close', 'updated'],
+    template: '<div />',
+}
+
+const ImportResultStub = {
+    name: 'ImportResult',
+    props: ['isImportResultOpen', 'importResult'],
+    emits: ['close'],
+    template: '<div />',
+}
+
+const ListSubscribersExportPanelStub = {
+    name: 'ListSubscribersExportPanel',
+    props: ['directoryFilter'],
+    template: '<div />',
+}
+
+describe('SubscriberDirectory', () => {
+    const createSubscribers = () => ([
+        {
+            id: 1,
+            email: 'john@example.com',
+            confirmed: true,
+            blacklisted: false,
+            listCount: 2,
+        },
+    ])
+
+    const createPagination = () => ({
+        total: 1,
+        isFirstPage: true,
+        hasMore: false,
+        afterId: null,
+        prevId: null,
+    })
+
+
+    const createWrapper = () =>
+        mount(SubscriberDirectory, {
+            global: {
+                provide: {
+                    subscribers: createSubscribers(),
+                    pagination: createPagination(),
+                },
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                    SubscriberFilters: SubscriberFiltersStub,
+                    SubscriberTable: SubscriberTableStub,
+                    SubscriberModal: SubscriberModalStub,
+                    ImportResult: ImportResultStub,
+                    ListSubscribersExportPanel: ListSubscribersExportPanelStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        backendFetch.mockResolvedValue({
+            json: () =>
+                Promise.resolve({
+                    items: subscribers,
+                    pagination,
+                }),
+        })
+    })
+
+    it('fetches subscribers on mount', async () => {
+        createWrapper()
+
+        await flushPromises()
+
+        expect(backendFetch).toHaveBeenCalled()
+    })
+
+    it('passes subscribers to table', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const table = wrapper.findComponent(SubscriberTableStub)
+
+        expect(table.props('subscribers')).toEqual(
+            createSubscribers()
+        )
+    })
+
+    it('opens subscriber modal', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .findComponent(SubscriberTableStub)
+            .vm.$emit('view', 123)
+
+        const modal = wrapper.findComponent(
+            SubscriberModalStub
+        )
+
+        expect(modal.props('isOpen')).toBe(true)
+        expect(modal.props('subscriberId')).toBe(123)
+    })
+
+    it('closes subscriber modal', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .findComponent(SubscriberTableStub)
+            .vm.$emit('view', 123)
+
+        await wrapper
+            .findComponent(SubscriberModalStub)
+            .vm.$emit('close')
+
+        const modal = wrapper.findComponent(
+            SubscriberModalStub
+        )
+
+        expect(modal.props('isOpen')).toBe(false)
+        expect(modal.props('subscriberId')).toBe(null)
+    })
+
+    it('updates subscriber after edit', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .findComponent(SubscriberModalStub)
+            .vm.$emit('updated', {
+                id: 1,
+                email: 'updated@example.com',
+                confirmed: false,
+                blacklisted: true,
+                subscribedLists: [1, 2, 3],
+            })
+
+        const table = wrapper.findComponent(
+            SubscriberTableStub
+        )
+
+        expect(
+            table.props('subscribers')[0].email
+        ).toBe('updated@example.com')
+
+        expect(
+            table.props('subscribers')[0].listCount
+        ).toBe(3)
+    })
+
+    it('handles filter changes', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .findComponent(SubscriberFiltersStub)
+            .vm.$emit('filter-change', 'confirmed')
+
+        expect(backendFetch).toHaveBeenCalledTimes(2)
+    })
+
+    it('goes to next page', async () => {
+        backendFetch.mockResolvedValue({
+            json: () =>
+                Promise.resolve({
+                    items: createSubscribers(),
+                    pagination: {
+                        ...createPagination(),
+                        hasMore: true,
+                        afterId: 10,
+                    },
+                }),
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const buttons = wrapper.findAll('button')
+        const nextButton =
+            buttons[buttons.length - 1]
+
+        await nextButton.trigger('click')
+
+        expect(backendFetch).toHaveBeenCalledTimes(2)
+    })
+
+    it('opens file picker when import button clicked', async () => {
+        const wrapper = createWrapper()
+
+        const clickMock = vi.fn()
+
+        wrapper.vm.fileInput = {
+            click: clickMock,
+        }
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Import CSV')
+            )
+
+        await button.trigger('click')
+
+        expect(clickMock).toHaveBeenCalled()
+    })
+
+    it('imports subscribers', async () => {
+        subscribersClient.importSubscribers
+            .mockResolvedValue({
+                imported: 5,
+                skipped: 1,
+                errors: [],
+            })
+
+        const wrapper = createWrapper()
+
+        const file = new File(
+            ['test'],
+            'users.csv',
+            { type: 'text/csv' }
+        )
+
+        await wrapper.vm.handleFileChange({
+            target: {
+                files: [file],
+                value: 'users.csv',
+            },
+        })
+
+        expect(
+            subscribersClient.importSubscribers
+        ).toHaveBeenCalled()
+
+        const importModal =
+            wrapper.findComponent(ImportResultStub)
+
+        expect(
+            importModal.props('isImportResultOpen')
+        ).toBe(true)
+    })
+
+    it('passes current filter to export panel', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper
+            .findComponent(SubscriberFiltersStub)
+            .vm.$emit('filter-change', 'confirmed')
+
+        const exportPanel =
+            wrapper.findComponent(
+                ListSubscribersExportPanelStub
+            )
+
+        expect(
+            exportPanel.props('directoryFilter')
+        ).toBe('confirmed')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/subscribers/SubscriberFilters.spec.js b/tests/Unit/assets/vue/components/subscribers/SubscriberFilters.spec.js
new file mode 100644
index 0000000..654e6dc
--- /dev/null
+++ b/tests/Unit/assets/vue/components/subscribers/SubscriberFilters.spec.js
@@ -0,0 +1,160 @@
+// SubscriberFilters.spec.js
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SubscriberFilters from '../../../../../../assets/vue/components/subscribers/SubscriberFilters.vue'
+import { subscriberFilters } from '../../../../../../assets/vue/components/subscribers/subscriberFilters'
+
+describe('SubscriberFilters', () => {
+    const createWrapper = () =>
+        mount(SubscriberFilters)
+
+    it('renders all filters', () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        expect(buttons).toHaveLength(
+            subscriberFilters.length
+        )
+    })
+
+    it('renders filter labels', () => {
+        const wrapper = createWrapper()
+
+        subscriberFilters.forEach(filter => {
+            expect(wrapper.text())
+                .toContain(filter.label)
+        })
+    })
+
+    it('starts with "all" selected', () => {
+        const wrapper = createWrapper()
+
+        const allFilter = subscriberFilters.find(
+            filter => filter.id === 'all'
+        )
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes(allFilter.label)
+            )
+
+        expect(button.classes())
+            .toContain('bg-ext-wf2')
+
+        expect(button.classes())
+            .toContain('text-ext-wf1')
+    })
+
+    it('emits selected filter when clicked', async () => {
+        const wrapper = createWrapper()
+
+        const targetFilter = subscriberFilters.find(
+            filter => filter.id !== 'all'
+        )
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes(targetFilter.label)
+            )
+
+        await button.trigger('click')
+
+        expect(
+            wrapper.emitted('filter-change')
+        ).toEqual([
+            [targetFilter.id],
+        ])
+    })
+
+    it('changes active filter styling', async () => {
+        const wrapper = createWrapper()
+
+        const targetFilter = subscriberFilters.find(
+            filter => filter.id !== 'all'
+        )
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes(targetFilter.label)
+            )
+
+        await button.trigger('click')
+
+        expect(button.classes())
+            .toContain('bg-ext-wf2')
+
+        expect(button.classes())
+            .toContain('text-ext-wf1')
+    })
+
+    it('removes active filter when clicked twice', async () => {
+        const wrapper = createWrapper()
+
+        const targetFilter = subscriberFilters.find(
+            filter => filter.id !== 'all'
+        )
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes(targetFilter.label)
+            )
+
+        await button.trigger('click')
+        await button.trigger('click')
+
+        expect(
+            wrapper.emitted('filter-change')
+        ).toEqual([
+            [targetFilter.id],
+            [null],
+        ])
+    })
+
+    it('switches between filters', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        expect(buttons.length).toBeGreaterThan(2)
+
+        await buttons[1].trigger('click')
+        await buttons[2].trigger('click')
+
+        const emissions =
+            wrapper.emitted('filter-change')
+
+        expect(emissions[0]).toEqual([
+            subscriberFilters[1].id,
+        ])
+
+        expect(emissions[1]).toEqual([
+            subscriberFilters[2].id,
+        ])
+    })
+
+    it('only keeps one filter active at a time', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper.findAll('button')
+
+        expect(buttons.length).toBeGreaterThan(2)
+
+        await buttons[1].trigger('click')
+
+        expect(buttons[1].classes())
+            .toContain('bg-ext-wf2')
+
+        await buttons[2].trigger('click')
+
+        expect(buttons[2].classes())
+            .toContain('bg-ext-wf2')
+
+        expect(buttons[1].classes())
+            .not.toContain('bg-ext-wf2')
+    })
+})
diff --git a/tests/Unit/assets/vue/components/subscribers/SubscriberModal.spec.js b/tests/Unit/assets/vue/components/subscribers/SubscriberModal.spec.js
new file mode 100644
index 0000000..9c4c244
--- /dev/null
+++ b/tests/Unit/assets/vue/components/subscribers/SubscriberModal.spec.js
@@ -0,0 +1,312 @@
+// SubscriberModal.spec.js
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import SubscriberModal from '../../../../../../assets/vue/components/subscribers/SubscriberModal.vue'
+import { subscribersClient } from '../../../../../../assets/vue/api'
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    subscribersClient: {
+        getSubscriber: vi.fn(),
+        updateSubscriber: vi.fn(),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    template: '<span />',
+}
+
+describe('SubscriberModal', () => {
+    const subscriber = {
+        id: 123,
+        email: 'john@example.com',
+        confirmed: true,
+        blacklisted: false,
+        htmlEmail: true,
+        disabled: false,
+        bounceCount: 2,
+        uniqueId: 'ABC123',
+        uuid: 'uuid-123',
+        createdAt: '2025-01-01',
+        updatedAt: '2025-01-02',
+        subscribedLists: [
+            { id: 1, name: 'Newsletter' },
+            { id: 2, name: 'Customers' },
+        ],
+    }
+
+    const createWrapper = (props = {}) =>
+        mount(SubscriberModal, {
+            props: {
+                isOpen: true,
+                subscriberId: 123,
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        subscribersClient.getSubscriber.mockResolvedValue(
+            subscriber
+        )
+    })
+
+    it('does not render when closed', () => {
+        const wrapper = createWrapper({
+            isOpen: false,
+        })
+
+        expect(wrapper.find('[role="dialog"]').exists())
+            .toBe(false)
+    })
+
+    it('loads subscriber details when opened', async () => {
+        createWrapper()
+
+        await flushPromises()
+
+        expect(
+            subscribersClient.getSubscriber
+        ).toHaveBeenCalledWith(123)
+    })
+
+    it('renders subscriber details', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(
+            wrapper.find('input[type="email"]').element.value
+        ).toBe('john@example.com')
+
+        expect(wrapper.text())
+            .toContain('Subscriber Details ID: 123')
+    })
+
+    it('populates form fields', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(
+            wrapper.find('input[type="email"]')
+                .element.value
+        ).toBe('john@example.com')
+
+        expect(
+            wrapper.find('#confirmed').element.checked
+        ).toBe(true)
+
+        expect(
+            wrapper.find('#htmlEmail').element.checked
+        ).toBe(true)
+    })
+
+    it('renders subscribed lists', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Newsletter')
+
+        expect(wrapper.text())
+            .toContain('Customers')
+    })
+
+    it('shows "No lists" when subscriber has no subscriptions', async () => {
+        subscribersClient.getSubscriber.mockResolvedValue({
+            ...subscriber,
+            subscribedLists: [],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('No lists')
+    })
+
+    it('renders subscriber metadata', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Bounce Count: 2')
+
+        expect(wrapper.text())
+            .toContain('Unique ID: ABC123')
+
+        expect(wrapper.text())
+            .toContain('UUID: uuid-123')
+    })
+
+    it('shows fetch errors', async () => {
+        subscribersClient.getSubscriber
+            .mockRejectedValue(
+                new Error('Failed to load')
+            )
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Failed to load')
+    })
+
+    it('saves subscriber changes', async () => {
+        subscribersClient.updateSubscriber
+            .mockResolvedValue({
+                ...subscriber,
+                email: 'updated@example.com',
+            })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper
+            .find('input[type="email"]')
+            .setValue('updated@example.com')
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Save'))
+
+        await saveButton.trigger('click')
+
+        await flushPromises()
+
+        expect(
+            subscribersClient.updateSubscriber
+        ).toHaveBeenCalledWith(
+            123,
+            expect.objectContaining({
+                email: 'updated@example.com',
+            })
+        )
+    })
+
+    it('emits updated after successful save', async () => {
+        const updatedSubscriber = {
+            ...subscriber,
+            email: 'updated@example.com',
+        }
+
+        subscribersClient.updateSubscriber
+            .mockResolvedValue(updatedSubscriber)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Save'))
+
+        await saveButton.trigger('click')
+
+        await flushPromises()
+
+        expect(wrapper.emitted('updated'))
+            .toEqual([[updatedSubscriber]])
+    })
+
+    it('emits close after successful save', async () => {
+        subscribersClient.updateSubscriber
+            .mockResolvedValue(subscriber)
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Save'))
+
+        await saveButton.trigger('click')
+
+        await flushPromises()
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('shows save errors', async () => {
+        subscribersClient.updateSubscriber
+            .mockRejectedValue(
+                new Error('Save failed')
+            )
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const saveButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Save'))
+
+        await saveButton.trigger('click')
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Save failed')
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(btn => btn.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('emits close when backdrop is clicked', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const backdrop = wrapper.find(
+            '.bg-slate-900\\/50'
+        )
+
+        await backdrop.trigger('click')
+
+        expect(wrapper.emitted('close'))
+            .toHaveLength(1)
+    })
+
+    it('reloads when subscriberId changes', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        await wrapper.setProps({
+            subscriberId: 456,
+        })
+
+        await flushPromises()
+
+        expect(
+            subscribersClient.getSubscriber
+        ).toHaveBeenCalledWith(456)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/subscribers/SubscriberTable.spec.js b/tests/Unit/assets/vue/components/subscribers/SubscriberTable.spec.js
new file mode 100644
index 0000000..dbf4451
--- /dev/null
+++ b/tests/Unit/assets/vue/components/subscribers/SubscriberTable.spec.js
@@ -0,0 +1,147 @@
+// SubscriberTable.spec.js
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SubscriberTable from '../../../../../../assets/vue/components/subscribers/SubscriberTable.vue'
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name'],
+    template: '<span class="base-icon">{{ name }}</span>',
+}
+
+describe('SubscriberTable', () => {
+    const createSubscribers = () => ([
+        {
+            id: 1,
+            email: 'john@example.com',
+            confirmed: true,
+            blacklisted: false,
+            listCount: 3,
+            createdAt: '2025-01-01',
+        },
+        {
+            id: 2,
+            email: 'blocked@example.com',
+            confirmed: false,
+            blacklisted: true,
+            listCount: 1,
+            createdAt: '2025-01-02',
+        },
+    ])
+
+    const createWrapper = (props = {}) =>
+        mount(SubscriberTable, {
+            props: {
+                subscribers: createSubscribers(),
+                ...props,
+            },
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    it('renders subscriber emails', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('john@example.com')
+        expect(wrapper.text()).toContain('blocked@example.com')
+    })
+
+    it('renders subscriber ids', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('1')
+        expect(wrapper.text()).toContain('2')
+    })
+
+    it('renders list counts', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('3')
+        expect(wrapper.text()).toContain('1')
+    })
+
+    it('renders created dates', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('2025-01-01')
+        expect(wrapper.text()).toContain('2025-01-02')
+    })
+
+    it('renders confirmed status', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Confirmed')
+    })
+
+    it('renders unconfirmed status', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Unconfirmed')
+    })
+
+    it('renders blacklisted badge', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('Blacklisted')
+    })
+
+    it('does not render blacklisted badge for non-blacklisted subscriber', () => {
+        const wrapper = createWrapper({
+            subscribers: [
+                {
+                    id: 1,
+                    email: 'john@example.com',
+                    confirmed: true,
+                    blacklisted: false,
+                    listCount: 1,
+                    createdAt: '2025-01-01',
+                },
+            ],
+        })
+
+        expect(wrapper.text()).not.toContain('Blacklisted')
+    })
+
+    it('emits view event from desktop button', async () => {
+        const wrapper = createWrapper()
+
+        const buttons = wrapper
+            .findAll('button')
+            .filter(btn => btn.text().includes('View'))
+
+        await buttons[0].trigger('click')
+
+        expect(wrapper.emitted('view')).toEqual([[1]])
+    })
+
+    it('renders mobile username portion of email', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.text()).toContain('john')
+        expect(wrapper.text()).toContain('blocked')
+    })
+
+    it('passes eye icon to view buttons', () => {
+        const wrapper = createWrapper()
+
+        const icons = wrapper.findAllComponents(BaseIconStub)
+
+        expect(
+            icons.some(icon => icon.props('name') === 'eye')
+        ).toBe(true)
+    })
+
+    it('renders no table rows when subscribers is empty', () => {
+        const wrapper = createWrapper({
+            subscribers: [],
+        })
+
+        expect(
+            wrapper.findAll('tbody tr')
+        ).toHaveLength(0)
+    })
+})
diff --git a/tests/Unit/assets/vue/components/templates/TemplateLibrary.spec.js b/tests/Unit/assets/vue/components/templates/TemplateLibrary.spec.js
new file mode 100644
index 0000000..a6adc8e
--- /dev/null
+++ b/tests/Unit/assets/vue/components/templates/TemplateLibrary.spec.js
@@ -0,0 +1,463 @@
+// TemplateLibrary.spec.js
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import TemplateLibrary from '../../../../../../assets/vue/components/templates/TemplateLibrary.vue'
+import { templateClient } from '../../../../../../assets/vue/api'
+
+const pushMock = vi.fn()
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: pushMock,
+    }),
+}))
+
+vi.mock('../../../../../../assets/vue/api', () => ({
+    templateClient: {
+        getTemplates: vi.fn(),
+        deleteTemplate: vi.fn(),
+        getDefaultTemplates: vi.fn(),
+        createFromDefault: vi.fn(),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    template: '<span />',
+}
+
+describe('TemplateLibrary', () => {
+    const originalConfirm = window.confirm
+    beforeEach(() => {
+        vi.clearAllMocks()
+        window.confirm = vi.fn()
+
+        templateClient.getTemplates.mockResolvedValue({
+            items: [],
+        })
+    })
+
+    afterEach(() => {
+        window.confirm = originalConfirm
+    })
+
+    const createWrapper = () =>
+        mount(TemplateLibrary, {
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                },
+            },
+        })
+
+    it('loads templates on mount', async () => {
+        templateClient.getTemplates.mockResolvedValue({
+            items: [],
+        })
+
+        createWrapper()
+
+        await flushPromises()
+
+        expect(templateClient.getTemplates)
+            .toHaveBeenCalledWith(0, 1000)
+    })
+
+    it('shows empty state', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('No templates found.')
+    })
+
+    it('shows load error', async () => {
+        templateClient.getTemplates
+            .mockRejectedValue(new Error())
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Failed to load templates.')
+    })
+
+    it('renders templates', async () => {
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    title: 'Newsletter',
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Newsletter')
+    })
+
+    it('sorts templates by listOrder', async () => {
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                {
+                    id: 2,
+                    title: 'Second',
+                    listOrder: 2,
+                },
+                {
+                    id: 1,
+                    title: 'First',
+                    listOrder: 1,
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const titles = wrapper
+            .findAll('h3')
+            .map(node => node.text())
+
+        expect(titles).toEqual([
+            'First',
+            'Second',
+        ])
+    })
+
+    it('navigates to create template page', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('New Template')
+            )
+
+        await button.trigger('click')
+
+        expect(pushMock)
+            .toHaveBeenCalledWith('/templates/create')
+    })
+
+    it('navigates to edit template page', async () => {
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                {
+                    id: 123,
+                    title: 'Template',
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Edit'))
+
+        await button.trigger('click')
+
+        expect(pushMock)
+            .toHaveBeenCalledWith('/templates/123/edit')
+    })
+
+    it('deletes a template', async () => {
+        window.confirm.mockReturnValue(true)
+
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    title: 'Template',
+                },
+            ],
+        })
+
+        templateClient.deleteTemplate
+            .mockResolvedValue()
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Delete'))
+
+        await button.trigger('click')
+
+        expect(templateClient.deleteTemplate)
+            .toHaveBeenCalledWith(1)
+    })
+
+    it('does not delete when confirmation is cancelled', async () => {
+        window.confirm.mockReturnValue(false)
+
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                { id: 1, title: 'Template' },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn => btn.text().includes('Delete'))
+
+        await button.trigger('click')
+
+        expect(templateClient.deleteTemplate)
+            .not.toHaveBeenCalled()
+    })
+
+    it('opens default template modal', async () => {
+        templateClient.getDefaultTemplates
+            .mockResolvedValue([])
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Template From Default')
+            )
+
+        await button.trigger('click')
+
+        expect(
+            wrapper.find('#default-template-select')
+                .exists()
+        ).toBe(true)
+    })
+
+    it('loads default templates', async () => {
+        templateClient.getDefaultTemplates
+            .mockResolvedValue([
+                {
+                    key: 'newsletter',
+                    name: 'Newsletter',
+                },
+            ])
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Template From Default')
+            )
+
+        await button.trigger('click')
+
+        await flushPromises()
+
+        expect(
+            templateClient.getDefaultTemplates
+        ).toHaveBeenCalled()
+
+        expect(wrapper.text())
+            .toContain('Newsletter')
+    })
+
+    it('creates template from default', async () => {
+        templateClient.getDefaultTemplates
+            .mockResolvedValue([
+                {
+                    key: 'newsletter',
+                    name: 'Newsletter',
+                },
+            ])
+
+        templateClient.createFromDefault
+            .mockResolvedValue()
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const openButton = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Template From Default')
+            )
+
+        await openButton.trigger('click')
+        await flushPromises()
+
+        await wrapper
+            .find('#default-template-select')
+            .setValue('newsletter')
+
+        await wrapper.find('form')
+            .trigger('submit')
+
+        await flushPromises()
+
+        expect(templateClient.createFromDefault)
+            .toHaveBeenCalledWith('newsletter')
+    })
+
+    it('shows create from default validation error', async () => {
+        templateClient.getDefaultTemplates
+            .mockResolvedValue([
+                {
+                    key: 'newsletter',
+                    name: 'Newsletter',
+                },
+            ])
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const openButton = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Template From Default')
+            )
+
+        await openButton.trigger('click')
+        await flushPromises()
+
+        await wrapper.find('form')
+            .trigger('submit')
+
+        expect(wrapper.text())
+            .toContain(
+                'Please select a default template.'
+            )
+    })
+
+    it('shows create from default api errors', async () => {
+        templateClient.getDefaultTemplates
+            .mockResolvedValue([
+                {
+                    key: 'newsletter',
+                    name: 'Newsletter',
+                },
+            ])
+
+        templateClient.createFromDefault
+            .mockRejectedValue(
+                new Error('Failed to create')
+            )
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const openButton = wrapper
+            .findAll('button')
+            .find(btn =>
+                btn.text().includes('Add Template From Default')
+            )
+
+        await openButton.trigger('click')
+        await flushPromises()
+
+        await wrapper
+            .find('#default-template-select')
+            .setValue('newsletter')
+
+        await wrapper.find('form')
+            .trigger('submit')
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('Failed to create')
+    })
+
+    it('renders template image', async () => {
+        templateClient.getTemplates.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    images: [
+                        {
+                            mimetype: 'image/png',
+                            data: 'abc123',
+                        },
+                    ],
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        const image = wrapper.find('img')
+
+        expect(image.attributes('src'))
+            .toBe(
+                'data:image/png;base64,abc123'
+            )
+    })
+
+    it.each([
+        [
+            {
+                content: '<p>html</p>',
+                text: 'text',
+            },
+            'html + text',
+        ],
+        [
+            {
+                content: '<p>html</p>',
+            },
+            'html',
+        ],
+        [
+            {
+                text: 'text',
+            },
+            'text',
+        ],
+        [
+            {},
+            'empty',
+        ],
+    ])(
+        'renders template type %s',
+        async (template, expected) => {
+            templateClient.getTemplates
+                .mockResolvedValue({
+                    items: [
+                        {
+                            id: 1,
+                            ...template,
+                        },
+                    ],
+                })
+
+            const wrapper = createWrapper()
+
+            await flushPromises()
+
+            expect(wrapper.text())
+                .toContain(expected)
+        }
+    )
+})
diff --git a/tests/Unit/assets/vue/layouts/AdminLayout.spec.js b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
new file mode 100644
index 0000000..4f1806c
--- /dev/null
+++ b/tests/Unit/assets/vue/layouts/AdminLayout.spec.js
@@ -0,0 +1,337 @@
+// AdminLayout.spec.js
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import AdminLayout from '../../../../../assets/vue/layouts/AdminLayout.vue'
+import { backendFetch, subscribersClient, campaignClient } from '../../../../../assets/vue/api'
+
+const openSidebar = vi.fn()
+
+vi.mock('../../../../../assets/vue/composables/useSidebar', () => ({
+    useSidebar: () => ({
+        openSidebar,
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/api', () => ({
+    backendFetch: vi.fn(),
+    subscribersClient: {
+        getSubscribers: vi.fn(),
+    },
+    campaignClient: {
+        getCampaigns: vi.fn(),
+    },
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        SubscribersFilterRequest: vi.fn().mockImplementation(
+            (...args) => ({ args })
+        ),
+    },
+}))
+
+const BaseIconStub = {
+    name: 'BaseIcon',
+    props: ['name'],
+    template: '<span class="icon">{{ name }}</span>',
+}
+
+describe('AdminLayout', () => {
+    const mountedWrappers = []
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+        vi.useFakeTimers()
+
+        backendFetch.mockResolvedValue({
+            ok: true,
+            json: () =>
+                Promise.resolve({
+                    login_name: 'admin',
+                    super_user: true,
+                }),
+        })
+    })
+
+    afterEach(() => {
+        mountedWrappers.forEach((wrapper) => wrapper.unmount())
+        mountedWrappers.length = 0
+        vi.useRealTimers()
+    })
+
+    const createWrapper = () => {
+        const wrapper = mount(AdminLayout, {
+            global: {
+                stubs: {
+                    BaseIcon: BaseIconStub,
+                    RouterLink: {
+                        props: ['to'],
+                        template: '<a :href="to"><slot /></a>',
+                    },
+                },
+            },
+            slots: {
+                default: '<div>Page Content</div>',
+            },
+        })
+        mountedWrappers.push(wrapper)
+        return wrapper
+    }
+
+    it('renders slot content', () => {
+        const wrapper = createWrapper()
+
+        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()
+
+        expect(wrapper.text()).toContain('Admin User')
+    })
+
+    it('opens sidebar', async () => {
+        const wrapper = createWrapper()
+
+        const menuButton = wrapper.find('button')
+
+        await menuButton.trigger('click')
+
+        expect(openSidebar).toHaveBeenCalled()
+    })
+
+    it('toggles dropdown', async () => {
+        const wrapper = createWrapper()
+
+        await flushPromises()
+
+        expect(wrapper.text()).not.toContain('Logout')
+
+        const dropdownTrigger = wrapper.find('div.cursor-pointer')
+
+        await dropdownTrigger.trigger('click')
+
+        expect(wrapper.text()).toContain('Logout')
+    })
+
+    it('searches subscribers and campaigns', async () => {
+        subscribersClient.getSubscribers.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    email: 'john@example.com',
+                },
+            ],
+        })
+
+        campaignClient.getCampaigns.mockResolvedValue({
+            items: [
+                {
+                    id: 5,
+                    messageContent: {
+                        subject: 'Newsletter',
+                    },
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        const input = wrapper.find('input')
+
+        await input.setValue('john')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        expect(subscribersClient.getSubscribers)
+            .toHaveBeenCalled()
+
+        expect(campaignClient.getCampaigns)
+            .toHaveBeenCalled()
+
+        expect(wrapper.text())
+            .toContain('john@example.com')
+
+        expect(wrapper.text())
+            .toContain('Newsletter')
+    })
+
+    it('shows no results message', async () => {
+        subscribersClient.getSubscribers.mockResolvedValue({
+            items: [],
+        })
+
+        campaignClient.getCampaigns.mockResolvedValue({
+            items: [],
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').setValue('test')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        expect(wrapper.text())
+            .toContain('No results found')
+    })
+
+    it('clears results when query is empty', async () => {
+        const wrapper = createWrapper()
+
+        const input = wrapper.find('input')
+
+        await input.setValue('abc')
+        await input.setValue('')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        expect(
+            subscribersClient.getSubscribers
+        ).not.toHaveBeenCalled()
+    })
+
+    it('shows searching state', async () => {
+        subscribersClient.getSubscribers.mockImplementation(
+            () => new Promise(() => {})
+        )
+
+        campaignClient.getCampaigns.mockImplementation(
+            () => new Promise(() => {})
+        )
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').setValue('abc')
+
+        vi.advanceTimersByTime(300)
+
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.text())
+            .toContain('Searching...')
+    })
+
+    it('handles search errors', async () => {
+        const errorSpy = vi
+            .spyOn(console, 'error')
+            .mockImplementation(() => {})
+
+        subscribersClient.getSubscribers
+            .mockRejectedValue(new Error('boom'))
+
+        campaignClient.getCampaigns
+            .mockRejectedValue(new Error('boom'))
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').setValue('abc')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        expect(errorSpy).toHaveBeenCalled()
+
+        errorSpy.mockRestore()
+    })
+
+    it('closes search results on outside click', async () => {
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').trigger('focus')
+
+        document.body.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+            })
+        )
+
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.text())
+            .not.toContain('No results found')
+    })
+
+    it('renders subscriber search link', async () => {
+        subscribersClient.getSubscribers.mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    email: 'john@example.com',
+                },
+            ],
+        })
+
+        campaignClient.getCampaigns.mockResolvedValue({
+            items: [],
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').setValue('john')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        const link = wrapper
+            .findAll('a')
+            .find(a =>
+                a.attributes('href')?.includes(
+                    '/subscribers'
+                )
+            )
+
+        expect(link.attributes('href'))
+            .toContain('findValue=john%40example.com')
+    })
+
+    it('renders campaign search link', async () => {
+        subscribersClient.getSubscribers.mockResolvedValue({
+            items: [],
+        })
+
+        campaignClient.getCampaigns.mockResolvedValue({
+            items: [
+                {
+                    id: 7,
+                    messageContent: {
+                        subject: 'Campaign',
+                    },
+                },
+            ],
+        })
+
+        const wrapper = createWrapper()
+
+        await wrapper.find('input').setValue('camp')
+
+        vi.advanceTimersByTime(300)
+
+        await flushPromises()
+
+        expect(wrapper.html())
+            .toContain('/campaigns/7/edit')
+    })
+})
diff --git a/tests/Unit/assets/vue/views/AnalyticsView.spec.js b/tests/Unit/assets/vue/views/AnalyticsView.spec.js
new file mode 100644
index 0000000..1734abe
--- /dev/null
+++ b/tests/Unit/assets/vue/views/AnalyticsView.spec.js
@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+vi.mock('vue3-apexcharts', () => ({
+  default: {
+    name: 'VueApexCharts',
+    template: '<div class="apexchart-stub" />',
+  },
+}))
+
+const statisticsClient = {
+  getCampaignStatistics: vi.fn(),
+  getStatisticsOfViewOpens: vi.fn(),
+  getTopDomains: vi.fn(),
+  getDomainConfirmationStatistics: vi.fn(),
+  getTopLocalParts: vi.fn(),
+}
+
+vi.mock('../../../../../assets/vue/api', () => ({
+  statisticsClient,
+}))
+
+const layoutStub = {
+  name: 'AdminLayout',
+  template: '<div class="admin-layout"><slot /></div>',
+}
+
+describe('AnalyticsView', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.clearAllMocks()
+  })
+
+  it('loads analytics data from the statistics client and renders summary cards', async () => {
+    statisticsClient.getCampaignStatistics.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          dateSent: '2026-06-01',
+          sent: 200,
+          bounces: 4,
+          uniqueViews: 120,
+          totalClicks: 33,
+        },
+      ],
+    })
+    statisticsClient.getStatisticsOfViewOpens.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          sent: 200,
+          uniqueViews: 120,
+          rate: 60,
+        },
+      ],
+    })
+    statisticsClient.getTopDomains.mockResolvedValue({
+      items: [{ domain: 'example.com', subscribers: 42 }],
+    })
+    statisticsClient.getDomainConfirmationStatistics.mockResolvedValue({
+      domain: 'example.com',
+      total: 100,
+      confirmed: 80,
+      unconfirmed: 20,
+      confirmationRate: 80,
+    })
+    statisticsClient.getTopLocalParts.mockResolvedValue({
+      items: [{ localPart: 'alex', count: 12, percentage: 24 }],
+    })
+
+    vi.resetModules()
+
+    const { default: AnalyticsView } = await import('../../../../../assets/vue/views/AnalyticsView.vue')
+
+    const wrapper = mount(AnalyticsView, {
+      global: {
+        stubs: {
+          AdminLayout: layoutStub,
+        },
+      },
+    })
+
+    await flushPromises()
+
+    expect(statisticsClient.getCampaignStatistics).toHaveBeenCalledWith(null, 100)
+    expect(wrapper.text()).toContain('Campaigns tracked')
+    expect(wrapper.text()).toContain('Summer launch')
+    expect(wrapper.text()).toContain('example.com')
+    expect(wrapper.text()).toContain('alex')
+    expect(wrapper.text()).toContain('80.0%')
+  })
+})
diff --git a/tests/Unit/assets/vue/views/BouncesView.spec.js b/tests/Unit/assets/vue/views/BouncesView.spec.js
new file mode 100644
index 0000000..880732b
--- /dev/null
+++ b/tests/Unit/assets/vue/views/BouncesView.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import BouncesView from '../../../../../assets/vue/views/BouncesView.vue'
+
+vi.mock('../../../../../assets/vue/layouts/AdminLayout.vue', () => ({
+    default: defineComponent({
+        name: 'AdminLayout',
+        template: '<div><slot /></div>',
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/components/bounces/BouncesActionsPanel.vue', () => ({
+    default: defineComponent({
+        name: 'BouncesActionsPanel',
+        template: '<div>Bounces Actions Panel</div>',
+    }),
+}))
+
+const mountComponent = () => mount(BouncesView)
+
+describe('BouncesView', () => {
+    it('renders the admin layout', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.findComponent({ name: 'AdminLayout' }).exists()).toBe(true)
+    })
+
+    it('renders the bounces actions panel inside the layout', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.findComponent({ name: 'BouncesActionsPanel' }).exists()).toBe(true)
+        expect(wrapper.text()).toContain('Bounces Actions Panel')
+    })
+})
diff --git a/tests/Unit/assets/vue/views/CampaignEditView.spec.js b/tests/Unit/assets/vue/views/CampaignEditView.spec.js
new file mode 100644
index 0000000..14e2e8f
--- /dev/null
+++ b/tests/Unit/assets/vue/views/CampaignEditView.spec.js
@@ -0,0 +1,1069 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import CampaignEditView from '../../../../../assets/vue/views/CampaignEditView.vue'
+
+const {
+  routeMock,
+  pushMock,
+  replaceMock,
+  campaignClientMock,
+  listMessagesClientMock,
+  templateClientMock,
+  fetchAllListsMock,
+} = vi.hoisted(() => ({
+  routeMock: {
+    name: 'campaign-create',
+    params: { campaignId: '' },
+    query: {},
+  },
+  pushMock: vi.fn(() => Promise.resolve()),
+  replaceMock: vi.fn(() => Promise.resolve()),
+  campaignClientMock: {
+    getCampaign: vi.fn(),
+    createCampaign: vi.fn(),
+    updateCampaign: vi.fn(),
+    updateCampaignStatus: vi.fn(),
+    testSendCampaign: vi.fn(),
+  },
+  listMessagesClientMock: {
+    getListsByMessage: vi.fn(),
+    associateMessageWithList: vi.fn(),
+    dissociateMessageFromList: vi.fn(),
+  },
+  templateClientMock: {
+    getTemplates: vi.fn(),
+  },
+  fetchAllListsMock: vi.fn(),
+}))
+
+vi.mock('vue-router', () => ({
+  useRoute: () => routeMock,
+  useRouter: () => ({
+    push: pushMock,
+    replace: replaceMock,
+  }),
+  RouterLink: defineComponent({
+    name: 'RouterLink',
+    props: ['to'],
+    template: '<a><slot /></a>',
+  }),
+}))
+
+vi.mock('../../../../../assets/vue/layouts/AdminLayout.vue', () => ({
+  default: defineComponent({
+    name: 'AdminLayout',
+    template: '<div class="admin-layout"><slot /></div>',
+  }),
+}))
+
+vi.mock('../../../../../assets/vue/components/base/CkEditorField.vue', () => ({
+  default: defineComponent({
+    name: 'CkEditorField',
+    emits: ['update:modelValue'],
+    props: ['id', 'label', 'modelValue'],
+    template: `
+      <div>
+        <textarea 
+          :id="id"
+          :value="modelValue"
+          @input="$emit('update:modelValue', $event.target.value)"
+        ></textarea>
+      </div>
+    `,
+  }),
+}))
+
+vi.mock('../../../../../assets/vue/api', () => ({
+  campaignClient: campaignClientMock,
+  listMessagesClient: listMessagesClientMock,
+  templateClient: templateClientMock,
+  fetchAllLists: fetchAllListsMock,
+}))
+
+const mountComponent = () => mount(CampaignEditView)
+
+describe('CampaignEditView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = ''
+
+    routeMock.name = 'campaign-create'
+    routeMock.params = { campaignId: '' }
+    routeMock.query = {}
+
+    fetchAllListsMock.mockResolvedValue([
+      { id: 1, name: 'Newsletter' },
+      { id: 2, name: 'Promotions' },
+      { id: 3, name: 'Updates' },
+    ])
+
+    templateClientMock.getTemplates.mockResolvedValue({
+      items: [
+        { id: 1, title: 'Template 1' },
+        { id: 2, title: 'Template 2' },
+      ],
+    })
+
+    campaignClientMock.getCampaign.mockResolvedValue({
+      id: 42,
+      messageContent: {
+        subject: 'Existing Campaign',
+        text: 'Hello world',
+        footer: 'Footer text',
+      },
+      messageOptions: {
+        fromField: 'sender@example.com',
+        toField: '[EMAIL]',
+        replyTo: 'reply@example.com',
+        userSelection: '',
+      },
+      messageFormat: {
+        htmlFormated: true,
+        sendFormat: 'html',
+      },
+      messageSchedule: {
+        embargo: null,
+        repeatInterval: null,
+        repeatUntil: null,
+        requeueInterval: null,
+        requeueUntil: null,
+      },
+      messageMetadata: {
+        status: 'draft',
+      },
+      template: { id: 1 },
+    })
+
+    listMessagesClientMock.getListsByMessage.mockResolvedValue({
+      items: [
+        { id: 1, name: 'Newsletter' },
+        { id: 2, name: 'Promotions' },
+      ],
+    })
+
+    campaignClientMock.createCampaign.mockResolvedValue({
+      id: 100,
+      messageContent: {},
+      messageOptions: {},
+      messageFormat: {},
+      messageSchedule: {},
+      messageMetadata: { status: 'draft' },
+    })
+
+    campaignClientMock.updateCampaign.mockResolvedValue({
+      id: 42,
+      messageContent: {},
+      messageOptions: {},
+      messageFormat: {},
+      messageSchedule: {},
+      messageMetadata: { status: 'draft' },
+    })
+
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  describe('Create Mode', () => {
+    it('renders create page title in create mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Create Campaign')
+    })
+
+    it('loads mailing lists in create mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(fetchAllListsMock).toHaveBeenCalled()
+
+      // Navigate to lists tab to see the lists
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Newsletter')
+      expect(wrapper.text()).toContain('Promotions')
+      expect(wrapper.text()).toContain('Updates')
+    })
+
+    it('initializes form with default values in create mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const subjectInput = wrapper.find('#campaign-subject')
+      expect(subjectInput.element.value).toBe('')
+    })
+  })
+
+  describe('Edit Mode', () => {
+    beforeEach(() => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+    })
+
+    it('renders edit page title in edit mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Edit Campaign #42')
+    })
+
+    it('loads campaign data in edit mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(campaignClientMock.getCampaign).toHaveBeenCalledWith(42)
+      // Check that the form was populated
+      expect(wrapper.vm.form.subject).toBe('Existing Campaign')
+    })
+
+    it('populates form with campaign data', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const subjectInput = wrapper.find('#campaign-subject')
+      expect(subjectInput.element.value).toBe('Existing Campaign')
+    })
+
+    it('loads associated lists for the campaign', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(listMessagesClientMock.getListsByMessage).toHaveBeenCalledWith(42)
+    })
+
+    it('displays error message when campaign loading fails', async () => {
+      campaignClientMock.getCampaign.mockRejectedValue(new Error('Failed to load'))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Failed to load')
+    })
+  })
+
+  describe('Step Navigation', () => {
+    it('renders all step buttons', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('1')
+      expect(wrapper.text()).toContain('2')
+      expect(wrapper.text()).toContain('3')
+      expect(wrapper.text()).toContain('4')
+      expect(wrapper.text()).toContain('5')
+      expect(wrapper.text()).toContain('6')
+    })
+
+    it('starts on step 1', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Content')
+    })
+
+    it('navigates to next step when next button is clicked', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const nextButton = wrapper.findAll('button').find(
+        (btn) => btn.text().trim() === 'Next'
+      )
+      await nextButton.trigger('click')
+
+      expect(wrapper.text()).toContain('Format')
+    })
+
+    it('navigates to previous step when back button is clicked', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Go to step 2
+      let nextButton = wrapper.findAll('button').find(
+        (btn) => btn.text().trim() === 'Next'
+      )
+      await nextButton.trigger('click')
+
+      // Go back to step 1
+      let backButton = wrapper.findAll('button').find(
+        (btn) => btn.text().trim() === 'Back'
+      )
+      await backButton.trigger('click')
+
+      expect(wrapper.text()).toContain('Content')
+    })
+
+    it('navigates to specific step when step button is clicked', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+
+      expect(wrapper.text()).toContain('Lists')
+    })
+
+    it('disables back button on first step', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const backButton = wrapper.findAll('button').find(
+        (btn) => btn.text().trim() === 'Back'
+      )
+      expect(backButton.attributes('disabled')).toBeDefined()
+    })
+
+    it('updates route query when changing steps', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await flushPromises()
+
+      expect(replaceMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            section: 'format',
+          }),
+        })
+      )
+    })
+  })
+
+  describe('Content Tab (Step 1)', () => {
+    it('displays subject input field', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const subjectInput = wrapper.find('#campaign-subject')
+      expect(subjectInput.exists()).toBe(true)
+    })
+
+    it('displays compose mode selection radio buttons', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Send a webpage')
+      expect(wrapper.text()).toContain('Compose message')
+    })
+
+    it('shows webpage URL field when webpage mode is selected', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const webpageRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'webpage'
+      )
+      await webpageRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      const urlInput = wrapper.find('#campaign-webpage-url')
+      expect(urlInput.exists()).toBe(true)
+    })
+
+    it('shows compose HTML editor when compose mode is selected', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const composeRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'compose'
+      )
+      await composeRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.findComponent({ name: 'CkEditorField' }).exists()).toBe(true)
+    })
+
+    it('displays footer textarea', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const footerInput = wrapper.find('#campaign-footer')
+      expect(footerInput.exists()).toBe(true)
+    })
+  })
+
+  describe('Format Tab (Step 2)', () => {
+    beforeEach(async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+    })
+
+    it('displays template dropdown', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const templateSelect = wrapper.find('#campaign-template')
+      expect(templateSelect.exists()).toBe(true)
+    })
+
+    it('displays send format radio buttons', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('HTML')
+      expect(wrapper.text()).toContain('Text')
+      expect(wrapper.text()).toContain('Invite')
+    })
+
+    it('displays HTML formatted checkbox', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('HTML formatted')
+    })
+  })
+
+  describe('Scheduling Tab (Step 3)', () => {
+    it('displays embargo date/time input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step3Button = stepButtons.find((btn) => btn.text().includes('3'))
+      await step3Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const embargoInput = wrapper.find('#campaign-embargo')
+      expect(embargoInput.exists()).toBe(true)
+    })
+
+    it('displays repeat interval input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step3Button = stepButtons.find((btn) => btn.text().includes('3'))
+      await step3Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const repeatInput = wrapper.find('#campaign-repeat-interval')
+      expect(repeatInput.exists()).toBe(true)
+    })
+
+    it('displays repeat until date/time input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step3Button = stepButtons.find((btn) => btn.text().includes('3'))
+      await step3Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const repeatUntilInput = wrapper.find('#campaign-repeat-until')
+      expect(repeatUntilInput.exists()).toBe(true)
+    })
+
+    it('displays requeue interval and requeue until inputs', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step3Button = stepButtons.find((btn) => btn.text().includes('3'))
+      await step3Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const requeueIntervalInput = wrapper.find('#campaign-requeue-interval')
+      const requeueUntilInput = wrapper.find('#campaign-requeue-until')
+
+      expect(requeueIntervalInput.exists()).toBe(true)
+      expect(requeueUntilInput.exists()).toBe(true)
+    })
+  })
+
+  describe('Lists Tab (Step 4)', () => {
+    it('displays mailing lists with checkboxes', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Newsletter')
+      expect(wrapper.text()).toContain('Promotions')
+      expect(wrapper.text()).toContain('Updates')
+    })
+
+    it('allows selecting and deselecting lists', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const checkboxes = wrapper.findAll('input[type="checkbox"]')
+      expect(checkboxes.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Test Send Tab (Step 5)', () => {
+    it('displays test recipients textarea', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step5Button = stepButtons.find((btn) => btn.text().includes('5'))
+      await step5Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const testRecipientsInput = wrapper.find('#campaign-test-recipients')
+      expect(testRecipientsInput.exists()).toBe(true)
+    })
+
+    it('displays send test button', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step5Button = stepButtons.find((btn) => btn.text().includes('5'))
+      await step5Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const sendTestButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Send test')
+      )
+      expect(sendTestButton.exists()).toBe(true)
+    })
+
+    it('sends test campaign when button is clicked', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step5Button = stepButtons.find((btn) => btn.text().includes('5'))
+      await step5Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Fill test recipients
+      const testRecipientsInput = wrapper.find('#campaign-test-recipients')
+      await testRecipientsInput.setValue('test@example.com')
+
+      // Click send test button
+      const sendTestButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Send test')
+      )
+      await sendTestButton.trigger('click')
+      await flushPromises()
+
+      expect(campaignClientMock.testSendCampaign).toHaveBeenCalledWith(42, ['test@example.com'])
+    })
+
+    it('shows error when no test recipients are provided', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step5Button = stepButtons.find((btn) => btn.text().includes('5'))
+      await step5Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Click send test button without filling recipients
+      const sendTestButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Send test')
+      )
+      await sendTestButton.trigger('click')
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Please enter at least one test recipient email')
+    })
+  })
+
+  describe('Finish Tab (Step 6)', () => {
+    it('displays from field input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const fromInput = wrapper.find('#campaign-from')
+      expect(fromInput.exists()).toBe(true)
+    })
+
+    it('displays reply-to field input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const replyToInput = wrapper.find('#campaign-reply-to')
+      expect(replyToInput.exists()).toBe(true)
+    })
+
+    it('displays to field input', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const toFieldInput = wrapper.find('#campaign-to-field')
+      expect(toFieldInput.exists()).toBe(true)
+    })
+
+    it('displays campaign ready message when no warnings', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Select a list first to avoid warning
+      const stepButtons4 = wrapper.findAll('button')
+      const step4Button = stepButtons4.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const listCheckboxes = wrapper.findAll('input[type="checkbox"]')
+      if (listCheckboxes.length > 0) {
+        await listCheckboxes[0].setValue(true)
+      }
+
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Campaign is ready to save')
+    })
+  })
+
+  describe('Warnings', () => {
+    it('shows warning when no lists are selected', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Destination lists are missing')
+    })
+
+    it('shows warning when webpage URL is missing in webpage mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const webpageRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'webpage'
+      )
+      await webpageRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Webpage URL is required')
+    })
+
+    it('shows warning when compose HTML is empty in compose mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const composeRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'compose'
+      )
+      await composeRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Compose message mode requires HTML or text content')
+    })
+  })
+
+  describe('Save Campaign', () => {
+    it('creates new campaign when in create mode', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Fill in required fields
+      const subjectInput = wrapper.find('#campaign-subject')
+      await subjectInput.setValue('Test Campaign')
+
+      // Switch to compose mode
+      const composeRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'compose'
+      )
+      await composeRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      // Find and fill the CkEditorField (using the mock textarea)
+      const ckEditor = wrapper.findComponent({ name: 'CkEditorField' })
+      await ckEditor.vm.$emit('update:modelValue', '<p>Test content</p>')
+      await wrapper.vm.$nextTick()
+
+      // Go to lists step and select a list
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const listCheckboxes = wrapper.findAll('input[type="checkbox"]')
+      if (listCheckboxes.length > 0) {
+        await listCheckboxes[0].setValue(true)
+      }
+
+      // Save
+      const saveButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Save and continue editing')
+      )
+      await saveButton.trigger('click')
+      await flushPromises()
+
+      expect(campaignClientMock.createCampaign).toHaveBeenCalled()
+    })
+
+    it('updates existing campaign when in edit mode', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Modify subject
+      const subjectInput = wrapper.find('#campaign-subject')
+      await subjectInput.setValue('Updated Campaign')
+
+      // Save
+      const saveButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Save and continue editing')
+      )
+      await saveButton.trigger('click')
+      await flushPromises()
+
+      expect(campaignClientMock.updateCampaign).toHaveBeenCalledWith(42, expect.any(Object))
+    })
+
+    it('shows save error message when save fails', async () => {
+      campaignClientMock.createCampaign.mockRejectedValue(
+        new Error('Server error')
+      )
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Fill in minimal required fields
+      const subjectInput = wrapper.find('#campaign-subject')
+      await subjectInput.setValue('Test Campaign')
+
+      // Go to step 4 and select a list
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const listCheckboxes = wrapper.findAll('input[type="checkbox"]')
+      if (listCheckboxes.length > 0) {
+        await listCheckboxes[0].setValue(true)
+      }
+
+      // Try to save
+      const saveButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Save and continue editing')
+      )
+      await saveButton.trigger('click')
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Server error')
+    })
+
+    it('shows success message after saving', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const saveButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Save and continue editing')
+      )
+      await saveButton.trigger('click')
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Campaign saved successfully')
+    })
+  })
+
+  describe('Queue Campaign', () => {
+    it('queues campaign to send when button is clicked', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Navigate to finish step
+      const stepButtons = wrapper.findAll('button')
+      const step6Button = stepButtons.find((btn) => btn.text().includes('6'))
+      await step6Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Select lists
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const listCheckboxes = wrapper.findAll('input[type="checkbox"]')
+      if (listCheckboxes.length > 0) {
+        await listCheckboxes[0].setValue(true)
+      }
+
+      // Find queue button
+      const queueButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Place campaign in a queue to send')
+      )
+
+      if (queueButton) {
+        await queueButton.trigger('click')
+        await flushPromises()
+
+        expect(campaignClientMock.updateCampaignStatus).toHaveBeenCalledWith(42, 'submitted')
+      }
+    })
+
+    it('does not show queue button when campaign is already submitted', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      campaignClientMock.getCampaign.mockResolvedValueOnce({
+        id: 42,
+        messageContent: {},
+        messageOptions: {},
+        messageFormat: {},
+        messageSchedule: {},
+        messageMetadata: { status: 'submitted' },
+      })
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const queueButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Place campaign in a queue to send')
+      )
+
+      expect(queueButton).toBeUndefined()
+    })
+  })
+
+  describe('Form State Management', () => {
+    it('switches between webpage and compose modes', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Start in compose mode
+      expect(wrapper.findComponent({ name: 'CkEditorField' }).exists()).toBe(true)
+
+      // Switch to webpage mode
+      const webpageRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'webpage'
+      )
+      await webpageRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      const urlInput = wrapper.find('#campaign-webpage-url')
+      expect(urlInput.exists()).toBe(true)
+    })
+
+    it('caches HTML content when switching modes', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Add HTML content in compose mode
+      const ckEditor = wrapper.findComponent({ name: 'CkEditorField' })
+      await ckEditor.vm.$emit('update:modelValue', '<p>Cached content</p>')
+      await wrapper.vm.$nextTick()
+
+      // Switch to webpage mode
+      const webpageRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'webpage'
+      )
+      await webpageRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      // Switch back to compose mode
+      const composeRadio = wrapper.findAll('input[type="radio"]').find(
+        (input) => input.element.value === 'compose'
+      )
+      await composeRadio.setValue(true)
+      await wrapper.vm.$nextTick()
+
+      // Content should be restored (this tests the cache functionality)
+      expect(wrapper.vm.form.composeHtml).toBe('<p>Cached content</p>')
+    })
+
+    it('extracts webpage URL from [URL:...] token', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      campaignClientMock.getCampaign.mockResolvedValue({
+        id: 42,
+        messageContent: {
+          subject: 'Campaign',
+          text: '[URL:https://example.com/page]',
+          footer: '',
+        },
+        messageOptions: {},
+        messageFormat: { htmlFormated: false, sendFormat: 'html' },
+        messageSchedule: {},
+        messageMetadata: { status: 'draft' },
+      })
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.vm.form.webpageUrl).toBe('https://example.com/page')
+      expect(wrapper.vm.form.composeMode).toBe('webpage')
+    })
+  })
+
+  describe('Template Loading', () => {
+    it('loads templates on mount', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(templateClientMock.getTemplates).toHaveBeenCalledWith(0, 1000)
+    })
+
+    it('displays loaded templates in dropdown', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Navigate to format step where template dropdown is shown
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      const templateSelect = wrapper.find('#campaign-template')
+      expect(templateSelect.exists()).toBe(true)
+
+      const options = templateSelect.findAll('option')
+      expect(options.some((opt) => opt.text() === 'Template 1')).toBe(true)
+      expect(options.some((opt) => opt.text() === 'Template 2')).toBe(true)
+    })
+
+    it('handles template loading error gracefully', async () => {
+      templateClientMock.getTemplates.mockRejectedValue(new Error('Failed to load'))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Navigate to format step
+      const stepButtons = wrapper.findAll('button')
+      const step2Button = stepButtons.find((btn) => btn.text().includes('2'))
+      await step2Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Component should render without templates even if loading fails
+      const templateSelect = wrapper.find('#campaign-template')
+      expect(templateSelect.exists()).toBe(true)
+    })
+  })
+
+  describe('List Synchronization', () => {
+    it('associates selected lists with campaign on save', async () => {
+      routeMock.name = 'campaign-edit'
+      routeMock.params = { campaignId: '42' }
+
+      listMessagesClientMock.getListsByMessage.mockResolvedValue({
+        items: [],
+      })
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Go to lists step
+      const stepButtons = wrapper.findAll('button')
+      const step4Button = stepButtons.find((btn) => btn.text().includes('4'))
+      await step4Button.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      // Select a list
+      const listCheckboxes = wrapper.findAll('input[type="checkbox"]')
+      if (listCheckboxes.length > 0) {
+        await listCheckboxes[0].setValue(true)
+      }
+
+      // Save campaign
+      const saveButton = wrapper.findAll('button').find(
+        (btn) => btn.text().includes('Save and continue editing')
+      )
+      await saveButton.trigger('click')
+      await flushPromises()
+
+      expect(listMessagesClientMock.associateMessageWithList).toHaveBeenCalled()
+    })
+  })
+
+  describe('Back to Campaigns Link', () => {
+    it('displays back to campaigns link', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const backLink = wrapper.findComponent({ name: 'RouterLink' })
+      expect(backLink.exists()).toBe(true)
+      expect(backLink.text()).toContain('Back to Campaigns')
+    })
+
+    it('links to campaigns route', async () => {
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      const backLink = wrapper.findComponent({ name: 'RouterLink' })
+      expect(backLink.props('to')).toBe('/campaigns')
+    })
+  })
+})
+
diff --git a/tests/Unit/assets/vue/views/CampaignsView.spec.js b/tests/Unit/assets/vue/views/CampaignsView.spec.js
new file mode 100644
index 0000000..a0877bc
--- /dev/null
+++ b/tests/Unit/assets/vue/views/CampaignsView.spec.js
@@ -0,0 +1,48 @@
+// tests/views/CampaignsView.spec.js
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CampaignsView from '../../../../../assets/vue/views/CampaignsView.vue'
+
+const AdminLayoutStub = {
+  template: `
+    <div data-test="admin-layout">
+      <slot />
+    </div>
+  `,
+}
+
+const CampaignDirectoryStub = {
+  template: '<div data-test="campaign-directory" />',
+}
+
+describe('CampaignsView', () => {
+  it('renders the admin layout', () => {
+    const wrapper = mount(CampaignsView, {
+      global: {
+        stubs: {
+          AdminLayout: AdminLayoutStub,
+          CampaignDirectory: CampaignDirectoryStub,
+        },
+      },
+    })
+
+    expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+  })
+
+  it('renders the campaign directory inside the layout', () => {
+    const wrapper = mount(CampaignsView, {
+      global: {
+        stubs: {
+          AdminLayout: AdminLayoutStub,
+          CampaignDirectory: CampaignDirectoryStub,
+        },
+      },
+    })
+
+    const layout = wrapper.find('[data-test="admin-layout"]')
+
+    expect(layout.exists()).toBe(true)
+    expect(layout.find('[data-test="campaign-directory"]').exists()).toBe(true)
+  })
+})
diff --git a/tests/Unit/assets/vue/views/DashboardView.spec.js b/tests/Unit/assets/vue/views/DashboardView.spec.js
new file mode 100644
index 0000000..70e748f
--- /dev/null
+++ b/tests/Unit/assets/vue/views/DashboardView.spec.js
@@ -0,0 +1,63 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+vi.mock('../../../../../assets/vue/layouts/AdminLayout.vue', () => ({
+    default: defineComponent({
+        name: 'AdminLayout',
+        template: '<div class="admin-layout"><slot /></div>',
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/components/dashboard/KpiGrid.vue', () => ({
+    default: defineComponent({
+        name: 'KpiGrid',
+        template: '<div class="dashboard-block" />',
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/components/dashboard/PerformanceChartCard.vue', () => ({
+    default: defineComponent({
+        name: 'PerformanceChartCard',
+        template: '<div class="dashboard-block" />',
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/components/dashboard/QuickActionsCard.vue', () => ({
+    default: defineComponent({
+        name: 'QuickActionsCard',
+        template: '<div class="dashboard-block" />',
+    }),
+}))
+
+vi.mock('../../../../../assets/vue/components/dashboard/RecentCampaignsCard.vue', () => ({
+    default: defineComponent({
+        name: 'RecentCampaignsCard',
+        template: '<div class="dashboard-block" />',
+    }),
+}))
+
+describe('DashboardView', () => {
+    beforeEach(() => {
+        document.body.innerHTML = ''
+    })
+
+    it('renders the dashboard error banner when provided by the server', async () => {
+        document.body.innerHTML = `
+      <div
+        id="vue-app"
+        data-dashboard-stats="{}"
+        data-dashboard-error="Session expired"
+      ></div>
+    `
+
+        vi.resetModules()
+
+        const { default: DashboardView } = await import('../../../../../assets/vue/views/DashboardView.vue')
+
+        const wrapper = mount(DashboardView)
+
+        expect(wrapper.text()).toContain('Session expired')
+        expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/ListSubscribersView.spec.js b/tests/Unit/assets/vue/views/ListSubscribersView.spec.js
new file mode 100644
index 0000000..a395630
--- /dev/null
+++ b/tests/Unit/assets/vue/views/ListSubscribersView.spec.js
@@ -0,0 +1,106 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import ListSubscribersView from '../../../../../assets/vue/views/ListSubscribersView.vue'
+import * as api from '../../../../../assets/vue/api'
+
+vi.mock('vue-router', () => ({
+    useRoute: () => ({
+        params: {
+            listId: '1',
+        },
+        query: {
+            listName: 'Newsletter',
+        },
+    }),
+}))
+
+describe('ListSubscribersView', () => {
+    beforeEach(() => {
+        vi.restoreAllMocks()
+
+        vi.spyOn(api.subscriptionClient, 'getSubscriberList').mockResolvedValue({
+            id: 1,
+            name: 'Newsletter',
+        })
+
+        vi.spyOn(api.subscriptionClient, 'getSubscriberLists').mockResolvedValue({
+            items: [],
+            pagination: {
+                hasMore: false,
+                nextCursor: null,
+            },
+        })
+
+        vi.spyOn(api.subscriptionClient, 'getSubscribersOfList').mockResolvedValue({
+            items: [
+                {
+                    id: 1,
+                    email: 'john@example.com',
+                    confirmed: true,
+                    createdAt: '2024-01-01T00:00:00Z',
+                },
+            ],
+            pagination: {
+                total: 1,
+                nextCursor: null,
+            },
+        })
+    })
+
+    const mountComponent = async () => {
+        const wrapper = mount(ListSubscribersView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: '<div><slot /></div>',
+                    },
+                    RouterLink: true,
+                    BaseIcon: true,
+                    ListSubscribersExportPanel: true,
+                },
+            },
+        })
+
+        await flushPromises()
+
+        return wrapper
+    }
+
+    it('renders subscriber list', async () => {
+        const wrapper = await mountComponent()
+
+        expect(api.subscriptionClient.getSubscribersOfList).toHaveBeenCalled()
+        expect(api.subscriptionClient.getSubscriberList).toHaveBeenCalled()
+        expect(api.subscriptionClient.getSubscriberLists).toHaveBeenCalled()
+
+        expect(wrapper.text()).toContain('Newsletter')
+        expect(wrapper.text()).toContain('john@example.com')
+        expect(wrapper.text()).toContain('Confirmed')
+    })
+
+    it('shows an error when loading subscribers fails', async () => {
+        api.subscriptionClient.getSubscribersOfList.mockRejectedValueOnce(
+            new Error('API error')
+        )
+
+        const wrapper = await mountComponent()
+
+        expect(wrapper.text()).toContain(
+            'Failed to load subscribers for this list.'
+        )
+    })
+
+    it('shows empty state when there are no subscribers', async () => {
+        api.subscriptionClient.getSubscribersOfList.mockResolvedValueOnce({
+            items: [],
+            pagination: {
+                total: 0,
+                nextCursor: null,
+            },
+        })
+
+        const wrapper = await mountComponent()
+
+        expect(wrapper.text()).toContain('No subscribers for this filter.')
+    })
+})
diff --git a/tests/Unit/assets/vue/views/ListsView.spec.js b/tests/Unit/assets/vue/views/ListsView.spec.js
new file mode 100644
index 0000000..71285ec
--- /dev/null
+++ b/tests/Unit/assets/vue/views/ListsView.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ListView from '../../../../../assets/vue/views/ListsView.vue'
+
+describe('ListView', () => {
+    it('renders the AdminLayout and ListDirectory components', () => {
+        const wrapper = mount(ListView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    ListDirectory: {
+                        template: '<div data-test="list-directory" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="list-directory"]').exists()).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/PublicPageEditView.spec.js b/tests/Unit/assets/vue/views/PublicPageEditView.spec.js
new file mode 100644
index 0000000..fb882a5
--- /dev/null
+++ b/tests/Unit/assets/vue/views/PublicPageEditView.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PublicPageEditView from '../../../../../assets/vue/views/PublicPageEditView.vue'
+
+describe('PublicPageView', () => {
+    it('renders the AdminLayout and PublicPageEditor components', () => {
+        const wrapper = mount(PublicPageEditView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    PublicPageEditor: {
+                        template: '<div data-test="public-page-editor" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="public-page-editor"]').exists()).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/PublicPagesView.spec.js b/tests/Unit/assets/vue/views/PublicPagesView.spec.js
new file mode 100644
index 0000000..9522f3b
--- /dev/null
+++ b/tests/Unit/assets/vue/views/PublicPagesView.spec.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PublicPagesView from '../../../../../assets/vue/views/PublicPagesView.vue'
+
+describe('PublicPagesView', () => {
+    it('renders the AdminLayout and PublicPagesDirectory components', () => {
+        const wrapper = mount(PublicPagesView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    PublicPagesDirectory: {
+                        template: '<div data-test="public-pages-directory" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(
+            wrapper.find('[data-test="public-pages-directory"]').exists()
+        ).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/SettingsView.spec.js b/tests/Unit/assets/vue/views/SettingsView.spec.js
new file mode 100644
index 0000000..0351665
--- /dev/null
+++ b/tests/Unit/assets/vue/views/SettingsView.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SettingsView from '../../../../../assets/vue/views/SettingsView.vue'
+
+describe('SettingsView', () => {
+    it('renders the AdminLayout and SettingsActionsPanel components', () => {
+        const wrapper = mount(SettingsView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    SettingsActionsPanel: {
+                        template: '<div data-test="settings-actions-panel" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="settings-actions-panel"]').exists()).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/SubscribersView.spec.js b/tests/Unit/assets/vue/views/SubscribersView.spec.js
new file mode 100644
index 0000000..e04c7d7
--- /dev/null
+++ b/tests/Unit/assets/vue/views/SubscribersView.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SubscribersView from '../../../../../assets/vue/views/SubscribersView.vue'
+
+describe('SubscribersView', () => {
+    it('renders the AdminLayout and SubscriberDirectory components', () => {
+        const wrapper = mount(SubscribersView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    SubscriberDirectory: {
+                        template: '<div data-test="subscriber-directory" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="subscriber-directory"]').exists()).toBe(true)
+    })
+})
diff --git a/tests/Unit/assets/vue/views/TemplateEditorView.spec.js b/tests/Unit/assets/vue/views/TemplateEditorView.spec.js
new file mode 100644
index 0000000..4df6feb
--- /dev/null
+++ b/tests/Unit/assets/vue/views/TemplateEditorView.spec.js
@@ -0,0 +1,113 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import TemplateEditView from '../../../../../assets/vue/views/TemplateEditView.vue'
+import * as api from '../../../../../assets/vue/api'
+
+const mockRoute = {
+    name: 'template-edit',
+    params: {
+        templateId: '1',
+    },
+    query: {},
+}
+
+const replace = vi.fn()
+
+vi.mock('vue-router', () => ({
+    RouterLink: {
+        template: '<a><slot /></a>',
+    },
+    useRoute: () => mockRoute,
+    useRouter: () => ({
+        replace,
+    }),
+}))
+
+describe('TemplateEditView', () => {
+    beforeEach(() => {
+        vi.restoreAllMocks()
+
+        vi.spyOn(api.templateClient, 'getTemplate').mockResolvedValue({
+            id: 1,
+            title: 'Welcome Template',
+            listOrder: 1,
+            content: '<p>Hello World</p>',
+            text: 'Hello World',
+        })
+
+        vi.spyOn(api.templateClient, 'updateTemplate').mockResolvedValue({})
+        vi.spyOn(api.templateClient, 'createTemplate').mockResolvedValue({
+            id: 2,
+        })
+    })
+
+    const mountComponent = async () => {
+        const wrapper = mount(TemplateEditView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: '<div><slot /></div>',
+                    },
+                    CkEditorField: {
+                        props: ['modelValue', 'label'],
+                        emits: ['update:modelValue'],
+                        template:
+                            '<textarea :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+                    },
+                },
+            },
+        })
+
+        await flushPromises()
+
+        return wrapper
+    }
+
+    it('loads the template in edit mode', async () => {
+        const wrapper = await mountComponent()
+                expect(api.templateClient.getTemplate).toHaveBeenCalledWith(1)
+
+                // The heading shows a generic "Edit Template #<id>" title; the
+                // actual template title is rendered inside the title input below.
+                const title = wrapper.find('#template-title')
+
+                expect(title.element.value).toBe('Welcome Template')
+    })
+
+    it('shows validation when title is empty', async () => {
+        const wrapper = await mountComponent()
+
+        await wrapper.find('#template-title').setValue('')
+        await wrapper.find('form').trigger('submit.prevent')
+
+        expect(wrapper.text()).toContain('Title is required.')
+    })
+
+    it('updates the template', async () => {
+        const wrapper = await mountComponent()
+
+        await wrapper.find('#template-title').setValue('Updated Template')
+
+        await wrapper.find('form').trigger('submit.prevent')
+
+        expect(api.templateClient.updateTemplate).toHaveBeenCalledTimes(1)
+
+        expect(wrapper.text()).toContain(
+            'Template updated successfully.'
+        )
+    })
+
+    it('creates a template in create mode', async () => {
+        mockRoute.name = 'template-create'
+        mockRoute.params.templateId = ''
+
+        const wrapper = await mountComponent()
+
+        await wrapper.find('#template-title').setValue('New Template')
+
+        await wrapper.find('form').trigger('submit.prevent')
+
+        expect(api.templateClient.createTemplate).toHaveBeenCalledTimes(1)
+        expect(replace).toHaveBeenCalledWith('/templates/2/edit')
+    })
+})
diff --git a/tests/Unit/assets/vue/views/TemplatesView.spec.js b/tests/Unit/assets/vue/views/TemplatesView.spec.js
new file mode 100644
index 0000000..95be121
--- /dev/null
+++ b/tests/Unit/assets/vue/views/TemplatesView.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TemplatesView from '../../../../../assets/vue/views/TemplatesView.vue'
+
+describe('TemplatesView', () => {
+    it('renders the AdminLayout and TemplateLibrary components', () => {
+        const wrapper = mount(TemplatesView, {
+            global: {
+                stubs: {
+                    AdminLayout: {
+                        template: `
+              <div data-test="admin-layout">
+                <slot />
+              </div>
+            `,
+                    },
+                    TemplateLibrary: {
+                        template: '<div data-test="template-library" />',
+                    },
+                },
+            },
+        })
+
+        expect(wrapper.find('[data-test="admin-layout"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="template-library"]').exists()).toBe(true)
+    })
+})
diff --git a/translations/messages.en.phplist b/translations/messages.en.phplist
new file mode 100644
index 0000000..e69de29
diff --git a/translations/messages.es.phplist b/translations/messages.es.phplist
new file mode 100644
index 0000000..e69de29
diff --git a/vitest.config.mjs b/vitest.config.mjs
index dca4365..6bd1776 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -6,6 +6,10 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    include: ['assets/vue/**/*.spec.js'],
+    include: [
+      'assets/vue/**/*.spec.js',
+      'tests/Unit/assets/vue/**/*.spec.js',
+      'tests/Unit/assets/editor/**/*.spec.js',
+    ],
   },
 })
diff --git a/webpack.config.js b/webpack.config.js
index a5fd7d6..a9b9d83 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,8 @@ Encore
     .setPublicPath('/build')
     .addEntry('app', './assets/app.js')
     .addStyleEntry('styles', './assets/styles/app.css')
+    .addStyleEntry('color', './assets/styles/color.css')
+    .addStyleEntry('subscribe', './assets/styles/subscribe.css')
     .enableVueLoader(() => {}, { version: 3 })
     .enableSingleRuntimeChunk()
     .enablePostCssLoader()
diff --git a/yarn.lock b/yarn.lock
index 19956d6..af05d36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2119,10 +2119,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^2.1.7":
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.7.tgz#7765e4c3d95dc3854415be392ec76a5f985ec7e3"
-  integrity sha512-xHyRzRCHfJ0YhGJi3JB+Hib2+dkd3+JaioYarHgv/WSGLmzxgimYwUBGDm4KDiSP0CkgGi/TvUVuLU3suZokgg==
+"@tatevikgr/rest-api-client@^2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.16.tgz#bcbc25a6177705e7c629b508dc333689d21f5c92"
+  integrity sha512-VOVp+Z/iXqozgRIDKzZfsevAkmzJ0OwxpnXZt9N9uwz+Xlg+nYBKyb6kJjrBtAJjKDmHQY3LWG4/B9gr2XgRbA==
   dependencies:
     axios "^1.6.0"