diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 77bcc3b..0e19725 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -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/assets/router/index.js b/assets/router/index.js
index f1d66d3..a9cbdf0 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -8,6 +8,8 @@ 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 PublicPagesView from '../vue/views/PublicPagesView.vue'
+import PublicPageEditView from '../vue/views/PublicPageEditView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
@@ -23,6 +25,9 @@ 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: '/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: '/: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/api.js b/assets/vue/api.js
index 43e2e12..d2de813 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -1,9 +1,11 @@
 import {
+    AdminClient,
     CampaignClient,
     Client,
     ListMessagesClient,
     ListClient,
     StatisticsClient,
+    SubscribePagesClient,
     SubscribersClient,
     SubscriptionClient,
     SubscriberAttributesClient,
@@ -27,7 +29,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');
@@ -59,11 +63,13 @@ client.axiosInstance?.interceptors?.response?.use(
 );
 
 export const subscribersClient = new SubscribersClient(client);
+export const adminClient = new AdminClient(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);
@@ -100,4 +106,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
index df0507a..3728e8a 100644
--- a/assets/vue/components/base/BaseBadge.spec.js
+++ b/assets/vue/components/base/BaseBadge.spec.js
@@ -2,6 +2,19 @@ import { mount } from '@vue/test-utils'
 import BaseBadge from './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: {
@@ -28,6 +41,30 @@ describe('BaseBadge', () => {
     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/BaseCard.spec.js b/assets/vue/components/base/BaseCard.spec.js
new file mode 100644
index 0000000..eaaad91
--- /dev/null
+++ b/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 './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/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.spec.js b/assets/vue/components/base/CkEditorField.spec.js
new file mode 100644
index 0000000..ea92648
--- /dev/null
+++ b/assets/vue/components/base/CkEditorField.spec.js
@@ -0,0 +1,184 @@
+// CkEditorField.spec.js
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CkEditorField from './CkEditorField.vue'
+
+vi.mock('ckeditor5', () => ({
+    ClassicEditor: {},
+    Essentials: {},
+    Paragraph: {},
+    Bold: {},
+    Italic: {},
+    Heading: {},
+    Link: {},
+    List: {},
+    BlockQuote: {},
+    Table: {},
+    TableToolbar: {},
+    HorizontalLine: {},
+    Image: {},
+    ImageToolbar: {},
+    ImageCaption: {},
+    ImageStyle: {},
+    ImageResize: {},
+    AutoImage: {},
+    PictureEditing: {},
+}))
+
+const CkeditorStub = {
+    name: 'ckeditor',
+    props: [
+        'modelValue',
+        'editor',
+        'config',
+        'id',
+    ],
+    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 instance to ckeditor', () => {
+        const wrapper = createWrapper()
+
+        const editor =
+            wrapper.findComponent(CkeditorStub)
+
+        expect(editor.props('editor'))
+            .toBeDefined()
+    })
+
+    it('passes editor config to ckeditor', () => {
+        const wrapper = createWrapper()
+
+        const editor =
+            wrapper.findComponent(CkeditorStub)
+
+        const config = editor.props('config')
+
+        expect(config.licenseKey)
+            .toBe('GPL')
+
+        expect(config.toolbar)
+            .toContain('bold')
+
+        expect(config.toolbar)
+            .toContain('italic')
+
+        expect(config.toolbar)
+            .toContain('insertTable')
+    })
+
+    it('contains image toolbar configuration', () => {
+        const wrapper = createWrapper()
+
+        const config =
+            wrapper.findComponent(CkeditorStub)
+                .props('config')
+
+        expect(config.image.toolbar)
+            .toContain('toggleImageCaption')
+
+        expect(config.image.toolbar)
+            .toContain('imageTextAlternative')
+    })
+})
diff --git a/assets/vue/components/bounces/BounceOverview.spec.js b/assets/vue/components/bounces/BounceOverview.spec.js
new file mode 100644
index 0000000..82d85ad
--- /dev/null
+++ b/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 './BounceOverview.vue'
+import { bouncesClient } from '../../api'
+
+vi.mock('../../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/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/BouncePer.spec.js b/assets/vue/components/bounces/BouncePer.spec.js
new file mode 100644
index 0000000..c1dd8a6
--- /dev/null
+++ b/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 './BouncePer.vue'
+import { bouncesClient } from '../../api'
+
+vi.mock('../../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/assets/vue/components/bounces/BounceRules.spec.js b/assets/vue/components/bounces/BounceRules.spec.js
new file mode 100644
index 0000000..aea0505
--- /dev/null
+++ b/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 './BounceRules.vue'
+import { bouncesClient } from '../../api'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/bounces/BouncesActionsPanel.spec.js
new file mode 100644
index 0000000..dfc0b92
--- /dev/null
+++ b/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 './BouncesActionsPanel.vue'
+
+vi.mock('./BounceOverview.vue', () => ({ default: { template: '<div data-testid="bounce-overview" />' } }))
+vi.mock('./BounceRules.vue',    () => ({ default: { template: '<div data-testid="bounce-rules" />' } }))
+vi.mock('./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/assets/vue/components/bounces/BouncesActionsPanel.vue b/assets/vue/components/bounces/BouncesActionsPanel.vue
index 46ffba8..c79604b 100644
--- a/assets/vue/components/bounces/BouncesActionsPanel.vue
+++ b/assets/vue/components/bounces/BouncesActionsPanel.vue
@@ -20,7 +20,7 @@
         type="button"
         class="px-4 py-2.5 rounded-lg text-sm font-medium transition-all whitespace-nowrap flex-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.spec.js b/assets/vue/components/campaigns/CampaignDirectory.spec.js
new file mode 100644
index 0000000..74a9063
--- /dev/null
+++ b/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 './CampaignDirectory.vue'
+import {
+    campaignClient,
+    fetchAllLists,
+    listMessagesClient,
+    statisticsClient,
+} from '../../api'
+
+vi.mock('../../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/assets/vue/components/campaigns/CampaignDirectory.vue b/assets/vue/components/campaigns/CampaignDirectory.vue
index 43ad4aa..de4b5c2 100644
--- a/assets/vue/components/campaigns/CampaignDirectory.vue
+++ b/assets/vue/components/campaigns/CampaignDirectory.vue
@@ -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)"
               >
@@ -270,7 +270,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 +279,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 +309,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 +317,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/campaigns/ViewCampaignModal.spec.js b/assets/vue/components/campaigns/ViewCampaignModal.spec.js
new file mode 100644
index 0000000..dd21ab4
--- /dev/null
+++ b/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 './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/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/CampaignsTable.spec.js b/assets/vue/components/dashboard/CampaignsTable.spec.js
new file mode 100644
index 0000000..a8952e3
--- /dev/null
+++ b/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 './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/assets/vue/components/dashboard/KpiCard.spec.js b/assets/vue/components/dashboard/KpiCard.spec.js
new file mode 100644
index 0000000..384eab5
--- /dev/null
+++ b/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 './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/assets/vue/components/dashboard/KpiGrid.spec.js b/assets/vue/components/dashboard/KpiGrid.spec.js
new file mode 100644
index 0000000..4f4f0f3
--- /dev/null
+++ b/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('./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('./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('./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('./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/assets/vue/components/dashboard/PerformanceChartCard.spec.js b/assets/vue/components/dashboard/PerformanceChartCard.spec.js
new file mode 100644
index 0000000..86022c5
--- /dev/null
+++ b/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 './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/assets/vue/components/dashboard/QuickActionsCard.spec.js b/assets/vue/components/dashboard/QuickActionsCard.spec.js
new file mode 100644
index 0000000..9db9981
--- /dev/null
+++ b/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 './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/assets/vue/components/dashboard/RecentCampaignsCard.spec.js b/assets/vue/components/dashboard/RecentCampaignsCard.spec.js
new file mode 100644
index 0000000..5cf7a30
--- /dev/null
+++ b/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 './RecentCampaignsCard.vue'
+
+vi.mock('./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/assets/vue/components/lists/AddSubscribersModal.spec.js b/assets/vue/components/lists/AddSubscribersModal.spec.js
new file mode 100644
index 0000000..f4169bd
--- /dev/null
+++ b/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 './AddSubscribersModal.vue'
+import { subscriptionClient } from '../../api'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/lists/CreateListModal.spec.js
new file mode 100644
index 0000000..3cff125
--- /dev/null
+++ b/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 './CreateListModal.vue'
+import { listClient } from '../../api'
+import { Requests } from '@tatevikgr/rest-api-client'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/lists/EditListModal.spec.js
new file mode 100644
index 0000000..ee6e383
--- /dev/null
+++ b/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 './EditListModal.vue'
+import { listClient } from '../../api'
+import { Requests } from '@tatevikgr/rest-api-client'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/lists/ListDirectory.spec.js
new file mode 100644
index 0000000..ad06e5e
--- /dev/null
+++ b/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 './ListDirectory.vue'
+import { fetchAllLists, listClient } from '../../api'
+
+const pushMock = vi.fn()
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: pushMock,
+    }),
+}))
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/lists/ListSubscribersExportPanel.spec.js
new file mode 100644
index 0000000..6393baa
--- /dev/null
+++ b/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 './ListSubscribersExportPanel.vue'
+import client from '../../api'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/public-pages/PublicPageEditor.spec.js
new file mode 100644
index 0000000..9dcf755
--- /dev/null
+++ b/assets/vue/components/public-pages/PublicPageEditor.spec.js
@@ -0,0 +1,142 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import PublicPageEditor from './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('../../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/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.spec.js b/assets/vue/components/public-pages/PublicPagesDirectory.spec.js
new file mode 100644
index 0000000..58895c6
--- /dev/null
+++ b/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 './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('../../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/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/sidebar/AppSidebar.spec.js b/assets/vue/components/sidebar/AppSidebar.spec.js
new file mode 100644
index 0000000..9a07666
--- /dev/null
+++ b/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 './AppSidebar.vue'
+
+const isSidebarOpen = ref(false)
+const closeSidebar = vi.fn()
+
+vi.mock('../../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/assets/vue/components/sidebar/SidebarLogo.spec.js b/assets/vue/components/sidebar/SidebarLogo.spec.js
new file mode 100644
index 0000000..dff246f
--- /dev/null
+++ b/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 './SidebarLogo.vue'
+
+vi.mock('../../../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/assets/vue/components/sidebar/SidebarNavItem.spec.js b/assets/vue/components/sidebar/SidebarNavItem.spec.js
new file mode 100644
index 0000000..fe1b03e
--- /dev/null
+++ b/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 './SidebarNavItem.vue'
+
+const closeSidebar = vi.fn()
+
+vi.mock('../../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/assets/vue/components/sidebar/SidebarNavSection.spec.js b/assets/vue/components/sidebar/SidebarNavSection.spec.js
new file mode 100644
index 0000000..6ed774c
--- /dev/null
+++ b/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 './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/assets/vue/components/subscribers/ImportResult.spec.js b/assets/vue/components/subscribers/ImportResult.spec.js
new file mode 100644
index 0000000..cdf98bf
--- /dev/null
+++ b/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 './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/assets/vue/components/subscribers/SubscriberDirectory.spec.js b/assets/vue/components/subscribers/SubscriberDirectory.spec.js
new file mode 100644
index 0000000..e0689a2
--- /dev/null
+++ b/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 './SubscriberDirectory.vue'
+import { backendFetch, subscribersClient } from '../../api'
+
+vi.mock('../../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/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/SubscriberFilters.spec.js b/assets/vue/components/subscribers/SubscriberFilters.spec.js
new file mode 100644
index 0000000..9cca47e
--- /dev/null
+++ b/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 './SubscriberFilters.vue'
+import { subscriberFilters } from './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/assets/vue/components/subscribers/SubscriberModal.spec.js b/assets/vue/components/subscribers/SubscriberModal.spec.js
new file mode 100644
index 0000000..8608e66
--- /dev/null
+++ b/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 './SubscriberModal.vue'
+import { subscribersClient } from '../../api'
+
+vi.mock('../../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/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.spec.js b/assets/vue/components/subscribers/SubscriberTable.spec.js
new file mode 100644
index 0000000..2203f71
--- /dev/null
+++ b/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 './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/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.spec.js b/assets/vue/components/templates/TemplateLibrary.spec.js
new file mode 100644
index 0000000..3ce49a7
--- /dev/null
+++ b/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 './TemplateLibrary.vue'
+import { templateClient } from '../../api'
+
+const pushMock = vi.fn()
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: pushMock,
+    }),
+}))
+
+vi.mock('../../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/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/layouts/AdminLayout.spec.js b/assets/vue/layouts/AdminLayout.spec.js
new file mode 100644
index 0000000..ea0bd93
--- /dev/null
+++ b/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 './AdminLayout.vue'
+import { backendFetch, subscribersClient, campaignClient } from '../api'
+
+const openSidebar = vi.fn()
+
+vi.mock('../composables/useSidebar', () => ({
+    useSidebar: () => ({
+        openSidebar,
+    }),
+}))
+
+vi.mock('../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/assets/vue/views/CampaignEditView.vue b/assets/vue/views/CampaignEditView.vue
index 7c8efb9..55a3acd 100644
--- a/assets/vue/views/CampaignEditView.vue
+++ b/assets/vue/views/CampaignEditView.vue
@@ -161,7 +161,7 @@
                   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>
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/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..2b1dd66 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,13 @@
     },
     "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"
     },
     "require-dev": {
         "phpunit/phpunit": "^9.5",
@@ -91,13 +97,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..7d1dad5 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",
@@ -1393,10 +1393,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"
                                 }
                             }
                         }
@@ -4715,14 +4723,14 @@
                 }
             }
         },
-        "/api/v2/subscribe-pages/{id}": {
+        "/api/v2/subscribe-pages": {
             "get": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Get subscribe page",
+                "summary": "Get subscribe pages list",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "390db83b1de32e07d2d52b310eb0c1ea",
+                "operationId": "1a89921fa5f82ce43daf2ca40dc3f954",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -4734,12 +4742,26 @@
                         }
                     },
                     {
-                        "name": "id",
-                        "in": "path",
-                        "description": "Subscribe page 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": "limit",
+                        "in": "query",
+                        "description": "Number of results per page",
+                        "required": false,
+                        "schema": {
+                            "type": "integer",
+                            "default": 25,
+                            "maximum": 100,
+                            "minimum": 1
                         }
                     }
                 ],
@@ -4749,7 +4771,18 @@
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/SubscribePage"
+                                    "properties": {
+                                        "items": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/components/schemas/SubscribePage"
+                                            }
+                                        },
+                                        "pagination": {
+                                            "$ref": "#/components/schemas/CursorPagination"
+                                        }
+                                    },
+                                    "type": "object"
                                 }
                             }
                         }
@@ -4776,13 +4809,13 @@
                     }
                 }
             },
-            "put": {
+            "post": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Update subscribe page",
+                "summary": "Create subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "a82a0cbe52063758b55279ce7b96657b",
+                "operationId": "314286c5d8ef80c845f5dfd2d671bad3",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -4792,15 +4825,6 @@
                         "schema": {
                             "type": "string"
                         }
-                    },
-                    {
-                        "name": "id",
-                        "in": "path",
-                        "description": "Subscribe page ID",
-                        "required": true,
-                        "schema": {
-                            "type": "integer"
-                        }
                     }
                 ],
                 "requestBody": {
@@ -4810,12 +4834,26 @@
                             "schema": {
                                 "properties": {
                                     "title": {
-                                        "type": "string",
-                                        "nullable": true
+                                        "type": "string"
                                     },
                                     "active": {
                                         "type": "boolean",
                                         "nullable": true
+                                    },
+                                    "data": {
+                                        "type": "array",
+                                        "items": {
+                                            "properties": {
+                                                "key": {
+                                                    "type": "string"
+                                                },
+                                                "value": {
+                                                    "type": "string"
+                                                }
+                                            },
+                                            "type": "object"
+                                        },
+                                        "nullable": true
                                     }
                                 },
                                 "type": "object"
@@ -4824,8 +4862,8 @@
                     }
                 },
                 "responses": {
-                    "200": {
-                        "description": "Success",
+                    "201": {
+                        "description": "Created",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -4844,25 +4882,27 @@
                             }
                         }
                     },
-                    "404": {
-                        "description": "Not Found",
+                    "422": {
+                        "description": "Validation failed",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
                                 }
                             }
                         }
                     }
                 }
-            },
-            "delete": {
+            }
+        },
+        "/api/v2/subscribe-pages/{id}": {
+            "get": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Delete subscribe page",
+                "summary": "Get subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "2881b5de1d076caa070f2b9a1c8487fe",
+                "operationId": "390db83b1de32e07d2d52b310eb0c1ea",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -4884,8 +4924,15 @@
                     }
                 ],
                 "responses": {
-                    "204": {
-                        "description": "No Content"
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/SubscribePage"
+                                }
+                            }
+                        }
                     },
                     "403": {
                         "description": "Failure",
@@ -4908,16 +4955,14 @@
                         }
                     }
                 }
-            }
-        },
-        "/api/v2/subscribe-pages": {
-            "post": {
+            },
+            "put": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Create subscribe page",
+                "summary": "Update subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "314286c5d8ef80c845f5dfd2d671bad3",
+                "operationId": "a82a0cbe52063758b55279ce7b96657b",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -4927,6 +4972,15 @@
                         "schema": {
                             "type": "string"
                         }
+                    },
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "description": "Subscribe page ID",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
                     }
                 ],
                 "requestBody": {
@@ -4936,11 +4990,27 @@
                             "schema": {
                                 "properties": {
                                     "title": {
-                                        "type": "string"
+                                        "type": "string",
+                                        "nullable": true
                                     },
                                     "active": {
                                         "type": "boolean",
                                         "nullable": true
+                                    },
+                                    "data": {
+                                        "type": "array",
+                                        "items": {
+                                            "properties": {
+                                                "key": {
+                                                    "type": "string"
+                                                },
+                                                "value": {
+                                                    "type": "string"
+                                                }
+                                            },
+                                            "type": "object"
+                                        },
+                                        "nullable": true
                                     }
                                 },
                                 "type": "object"
@@ -4949,8 +5019,8 @@
                     }
                 },
                 "responses": {
-                    "201": {
-                        "description": "Created",
+                    "200": {
+                        "description": "Success",
                         "content": {
                             "application/json": {
                                 "schema": {
@@ -4969,27 +5039,25 @@
                             }
                         }
                     },
-                    "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": {
+            },
+            "delete": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Get subscribe page data",
+                "summary": "Delete subscribe page",
                 "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "ffe22f26936614a0e853e7c44e5a0fca",
+                "operationId": "2881b5de1d076caa070f2b9a1c8487fe",
                 "parameters": [
                     {
                         "name": "php-auth-pw",
@@ -5011,37 +5079,58 @@
                     }
                 ],
                 "responses": {
-                    "200": {
-                        "description": "Success",
+                    "204": {
+                        "description": "No Content"
+                    },
+                    "403": {
+                        "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/UnauthorizedResponse"
                                 }
                             }
                         }
                     },
-                    "403": {
-                        "description": "Failure",
+                    "404": {
+                        "description": "Not Found",
                         "content": {
                             "application/json": {
                                 "schema": {
-                                    "$ref": "#/components/schemas/UnauthorizedResponse"
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/v2/public/subscribe-pages/{pageId}": {
+            "get": {
+                "tags": [
+                    "subscribe-pages"
+                ],
+                "summary": "Get public subscribe page (placeholders replaced with actual values)",
+                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
+                "operationId": "0ce8d9a7201bd20911aede0e4b62f479",
+                "parameters": [
+                    {
+                        "name": "pageId",
+                        "in": "path",
+                        "description": "Subscribe page ID",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Success",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/SubscribePagePublic"
                                 }
                             }
                         }
@@ -5058,25 +5147,81 @@
                     }
                 }
             },
-            "put": {
+            "post": {
                 "tags": [
-                    "subscriptions"
+                    "subscribe-pages"
                 ],
-                "summary": "Set subscribe page data item",
-                "description": "🚧 **Status: Beta** – This method is under development. Avoid using in production.",
-                "operationId": "a71571132947a19d862eac4baf7a98a7",
+                "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",
+                        "name": "pageId",
+                        "in": "path",
+                        "description": "Subscribe page ID",
                         "required": true,
                         "schema": {
-                            "type": "string"
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "requestBody": {
+                    "description": "",
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/PublicSubscriptionRequest"
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "204": {
+                        "description": "Success"
+                    },
+                    "400": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/BadRequestResponse"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/NotFoundErrorResponse"
+                                }
+                            }
                         }
                     },
+                    "422": {
+                        "description": "Failure",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/ValidationErrorResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "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 +5231,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"
                                 }
                             }
                         }
@@ -8247,6 +8375,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 +8680,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 +8709,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"
@@ -8790,6 +9076,10 @@
             "name": "subscriptions",
             "description": "subscriptions"
         },
+        {
+            "name": "subscribe-pages",
+            "description": "subscribe-pages"
+        },
         {
             "name": "subscriber-attributes",
             "description": "subscriber-attributes"
diff --git a/package.json b/package.json
index a0bd099..d50dee4 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.8",
     "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/AuthController.php b/src/Controller/AuthController.php
index 1a1408d..ef3c7b3 100755
--- a/src/Controller/AuthController.php
+++ b/src/Controller/AuthController.php
@@ -25,8 +25,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 +45,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 +56,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 +66,7 @@ public function login(Request $request): Response
 
         return $this->render('@PhpListFrontend/auth/login.html.twig', [
             'error' => $error,
+            'redirect' => $redirectTarget,
         ]);
     }
 
@@ -92,4 +96,44 @@ public function about(): JsonResponse
 
         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;
+    }
+
+    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 = (string) preg_replace('#^/(?:app|app_test)\.php#', '', $path, 1);
+
+        return $normalizedPath !== '/login' && !str_starts_with($normalizedPath, '/login');
+    }
 }
diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php
new file mode 100644
index 0000000..2cd7b78
--- /dev/null
+++ b/src/Controller/BaseController.php
@@ -0,0 +1,30 @@
+<?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 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) {
+            $admin = null;
+        }
+
+        return $admin;
+    }
+}
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..c0ef1ec
--- /dev/null
+++ b/src/Controller/PublicSubscribeController.php
@@ -0,0 +1,177 @@
+<?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\ApiException;
+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 | ApiException $exception) {
+                    $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/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/EventSubscriber/AuthGateSubscriber.php b/src/EventSubscriber/AuthGateSubscriber.php
index 5fa61fd..6c51ce4 100644
--- a/src/EventSubscriber/AuthGateSubscriber.php
+++ b/src/EventSubscriber/AuthGateSubscriber.php
@@ -20,6 +20,8 @@ class AuthGateSubscriber implements EventSubscriberInterface
 {
     private const ALLOW_LIST = [
         '/api/v2',
+        '/subscribe/',
+        '/unsubscribe/',
         '/build/',
         '/assets/',
         '/css/',
@@ -55,7 +57,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 +78,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;
             }
         }
@@ -88,4 +90,42 @@ private function normalizePath(string $path): string
     {
         return (string) preg_replace('#^/(?:app|app_test)\.php#', '', $path, 1);
     }
+
+    private function buildLoginUrl(Request $request): string
+    {
+        $loginUrl = $this->urlGenerator->generate('login');
+        $redirectTarget = $request->getRequestUri();
+
+        if (!$this->isSafeRedirectTarget($redirectTarget)) {
+            return $loginUrl;
+        }
+
+        return $loginUrl . '?' . http_build_query(['redirect' => $redirectTarget]);
+    }
+
+    private function 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 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..dc73e03 100755
--- a/src/EventSubscriber/UnauthorizedSubscriber.php
+++ b/src/EventSubscriber/UnauthorizedSubscriber.php
@@ -38,7 +38,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 +61,31 @@ 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]);
+    }
+
+    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 = (string) preg_replace('#^/(?:app|app_test)\.php#', '', $path, 1);
+
+        return $normalizedPath !== '/login' && !str_starts_with($normalizedPath, '/login');
+    }
 }
diff --git a/src/Security/SessionAuthenticator.php b/src/Security/SessionAuthenticator.php
index 6393241..00498d2 100644
--- a/src/Security/SessionAuthenticator.php
+++ b/src/Security/SessionAuthenticator.php
@@ -21,6 +21,8 @@ class SessionAuthenticator extends AbstractAuthenticator implements Authenticati
 {
     private const NOT_SUPPORTED_PATHS = [
         '/login',
+        '/subscribe/',
+        '/unsubscribe/',
         '/_profiler',
         '/_wdt',
         '/build/',
@@ -41,7 +43,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 +87,44 @@ 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 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 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/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/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/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..dced01b 100644
--- a/tests/Unit/Controller/AuthControllerTest.php
+++ b/tests/Unit/Controller/AuthControllerTest.php
@@ -141,6 +141,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 +230,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);
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..719cc1e 100644
--- a/tests/Unit/EventSubscriber/UnauthorizedSubscriberTest.php
+++ b/tests/Unit/EventSubscriber/UnauthorizedSubscriberTest.php
@@ -55,6 +55,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 +75,7 @@ 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 testOnKernelExceptionWithOtherException(): void
@@ -106,6 +108,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 +131,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 +140,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 +160,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/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/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..af7b1cf 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.8":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.9.tgz#72dea37787fc31543a5f7a448b1e387e64c36466"
+  integrity sha512-4/9h3Bg2yRYiICMhr5uX6ZoRnnD/gNE/cFb7w1IycekEBjWaTyfsz4C4MB724gvWRPwUTRxxoqox3XoEW3xgHQ==
   dependencies:
     axios "^1.6.0"