diff --git a/assets/router/index.js b/assets/router/index.js
index 0ca5d30..702e426 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -8,6 +8,7 @@ import CampaignEditView from '../vue/views/CampaignEditView.vue'
 import TemplatesView from '../vue/views/TemplatesView.vue'
 import TemplateEditView from '../vue/views/TemplateEditView.vue'
 import BouncesView from '../vue/views/BouncesView.vue'
+import AnalyticsView from '../vue/views/AnalyticsView.vue'
 import PublicPagesView from '../vue/views/PublicPagesView.vue'
 import PublicPageEditView from '../vue/views/PublicPageEditView.vue'
 import SettingsView from '../vue/views/SettingsView.vue'
@@ -26,6 +27,7 @@ export const router = createRouter({
         { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
         { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
         { path: '/bounces', name: 'bounces', component: BouncesView, meta: { title: 'Bounces' } },
+        { path: '/analytics', name: 'analytics', component: AnalyticsView, meta: { title: 'Analytics' } },
         { path: '/public', name: 'public-pages', component: PublicPagesView, meta: { title: 'Public Pages' } },
         { path: '/public/create', name: 'public-page-create', component: PublicPageEditView, meta: { title: 'Create Public Page' } },
         { path: '/public/:pageId/edit', name: 'public-page-edit', component: PublicPageEditView, meta: { title: 'Edit Public Page' } },
diff --git a/assets/vue/api.js b/assets/vue/api.js
index 31d22f8..f4e44ba 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -11,7 +11,8 @@ import {
     SubscriberAttributesClient,
     TemplatesClient,
     BouncesClient,
-    ConfigClient, AdminAttributeClient,
+    ConfigClient,
+    AdminAttributeClient,
 } from '@tatevikgr/rest-api-client';
 
 const AUTHENTICATION_REDIRECT_PATH = '/login';
diff --git a/assets/vue/components/settings/CreateAdminAttributeModal.spec.js b/assets/vue/components/settings/CreateAdminAttributeModal.spec.js
new file mode 100644
index 0000000..e658cfa
--- /dev/null
+++ b/assets/vue/components/settings/CreateAdminAttributeModal.spec.js
@@ -0,0 +1,119 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateAdminAttributeModal from './CreateAdminAttributeModal.vue'
+
+const {
+    createAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    createAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../api', () => ({
+    adminAttributeClient: {
+        createAttributeDefinition: createAttributeDefinitionMock,
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateAdminAttributeModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('CreateAdminAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create Attribute')
+        expect(wrapper.find('input').exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+        expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    })
+
+    it('resets form each time the modal opens', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('input').element.value).toBe('')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(false)
+    })
+
+    it('creates an attribute and emits created', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('input').setValue('Email')
+        await wrapper.find('select').setValue('hidden')
+        await wrapper.find('input[type="checkbox"]').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Email',
+            type: 'hidden',
+            required: true,
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to save')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('input').setValue('Email')
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to save')
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find((button) => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const closeButton = wrapper.findAll('button')[0]
+
+        await closeButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/CreateAdminModal.spec.js b/assets/vue/components/settings/CreateAdminModal.spec.js
new file mode 100644
index 0000000..cec4ebb
--- /dev/null
+++ b/assets/vue/components/settings/CreateAdminModal.spec.js
@@ -0,0 +1,180 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateAdminModal from './CreateAdminModal.vue'
+
+const {
+    createAdministratorMock,
+} = vi.hoisted(() => ({
+    createAdministratorMock: vi.fn(),
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        CreateAdministratorRequest: class {
+            constructor(login_name, password, email, super_user, privileges) {
+                this.login_name = login_name
+                this.password = password
+                this.email = email
+                this.super_user = super_user
+                this.privileges = privileges
+            }
+        },
+    },
+}))
+
+vi.mock('../../api', () => ({
+    adminClient: {
+        createAdministrator: createAdministratorMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateAdminModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+    })
+
+describe('CreateAdminModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAdministratorMock.mockResolvedValue({
+            id: 1,
+            login_name: 'admin',
+        })
+
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create New Administrator')
+        expect(wrapper.find('#admin-login-name').exists()).toBe(true)
+        expect(wrapper.find('#admin-email').exists()).toBe(true)
+        expect(wrapper.find('#admin-password').exists()).toBe(true)
+    })
+
+    it('resets form whenever opened', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('#admin-login-name').element.value).toBe('')
+        expect(wrapper.find('#admin-email').element.value).toBe('')
+        expect(wrapper.find('#admin-password').element.value).toBe('')
+        expect(wrapper.find('#admin-super-user').element.checked).toBe(false)
+    })
+
+    it('creates an administrator', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).toHaveBeenCalledTimes(1)
+
+        const request = createAdministratorMock.mock.calls[0][0]
+
+        expect(request.login_name).toBe('admin')
+        expect(request.email).toBe('admin@example.com')
+        expect(request.password).toBe('password123')
+        expect(request.super_user).toBe(false)
+        expect(request.privileges).toEqual({
+            subscribers: false,
+            campaigns: false,
+            statistics: false,
+            settings: false,
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('creates a super user without privileges', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+        await wrapper.find('#admin-super-user').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        const request = createAdministratorMock.mock.calls[0][0]
+
+        expect(request.super_user).toBe(true)
+        expect(request.privileges).toBeUndefined()
+    })
+
+    it('does not submit when form is invalid', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('ab')
+        await wrapper.find('#admin-email').setValue('invalid')
+        await wrapper.find('#admin-password').setValue('123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).not.toHaveBeenCalled()
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAdministratorMock.mockRejectedValueOnce(
+            new Error('Create failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('#admin-login-name').setValue('admin')
+        await wrapper.find('#admin-email').setValue('admin@example.com')
+        await wrapper.find('#admin-password').setValue('password123')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAdministratorMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Create failed')
+        expect(console.error).toHaveBeenCalled()
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find((button) => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the close button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('button[type="button"]').trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js b/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js
new file mode 100644
index 0000000..089a47e
--- /dev/null
+++ b/assets/vue/components/settings/CreateSubscriberAttributeModal.spec.js
@@ -0,0 +1,189 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import CreateSubscriberAttributeModal from './CreateSubscriberAttributeModal.vue'
+
+const {
+    createAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    createAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../api', () => ({
+    subscriberAttributesClient: {
+        createAttributeDefinition: createAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const mountComponent = (props = {}) =>
+    mount(CreateSubscriberAttributeModal, {
+        props: {
+            isOpen: true,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('CreateSubscriberAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        createAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Create Subscriber Attribute')
+        expect(wrapper.findAll('input')[0].exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('resets the form when reopened', async () => {
+        const wrapper = mountComponent({
+            isOpen: false,
+        })
+
+        await wrapper.setProps({
+            isOpen: true,
+        })
+
+        await flushPromises()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(inputs[2].element.checked).toBe(false)
+    })
+
+    it('creates a subscriber attribute', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Country')
+        await wrapper.find('select').setValue('textline')
+        await inputs[1].setValue('10')
+        await inputs[2].setValue('Default')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Country',
+            type: 'textline',
+            order: 10,
+            default_value: 'Default',
+            required: false,
+            options: [],
+        })
+
+        expect(wrapper.emitted('created')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('adds and removes options', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('select').setValue('select')
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBeGreaterThan(4)
+
+        const removeButton = wrapper
+            .findAll('button')
+            .find(button => !button.text().trim())
+
+        await removeButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(4)
+    })
+
+    it('submits options for selectable types', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('input')[0].setValue('Status')
+        await wrapper.find('select').setValue('select')
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[4].setValue('Active')
+        await inputs[5].setValue('1')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalledWith({
+            name: 'Status',
+            type: 'select',
+            order: null,
+            default_value: '',
+            required: false,
+            options: [
+                {
+                    name: 'Active',
+                    list_order: 1,
+                },
+            ],
+        })
+    })
+
+    it('shows an error when creation fails', async () => {
+        createAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to save')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('input')[0].setValue('Country')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(createAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to save')
+        expect(wrapper.emitted('created')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/EditAdminAttributeModal.spec.js b/assets/vue/components/settings/EditAdminAttributeModal.spec.js
new file mode 100644
index 0000000..8bd3920
--- /dev/null
+++ b/assets/vue/components/settings/EditAdminAttributeModal.spec.js
@@ -0,0 +1,140 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditAdminAttributeModal from './EditAdminAttributeModal.vue'
+
+const {
+    updateAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    updateAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../api', () => ({
+    adminAttributeClient: {
+        updateAttributeDefinition: updateAttributeDefinitionMock,
+    },
+}))
+
+const attribute = {
+    id: 1,
+    name: 'Email',
+    type: 'textline',
+    required: true,
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditAdminAttributeModal, {
+        props: {
+            isOpen: true,
+            attribute,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('EditAdminAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Attribute')
+        expect(wrapper.find('input').exists()).toBe(true)
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('populates the form from the attribute prop', () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Email')
+        expect(wrapper.find('select').element.value).toBe('textline')
+        expect(inputs[1].element.checked).toBe(true)
+    })
+
+    it('updates the form when the attribute prop changes', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.setProps({
+            attribute: {
+                id: 2,
+                name: 'Country',
+                type: 'hidden',
+                required: false,
+            },
+        })
+
+        await flushPromises()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Country')
+        expect(wrapper.find('select').element.value).toBe('hidden')
+        expect(inputs[1].element.checked).toBe(false)
+    })
+
+    it('updates an attribute and emits updated', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Full Name')
+        await wrapper.find('select').setValue('hidden')
+        await inputs[1].setValue(false)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalledWith(1, {
+            name: 'Full Name',
+            type: 'hidden',
+            required: false,
+        })
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Unable to update')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Unable to update')
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/EditAdminModal.spec.js b/assets/vue/components/settings/EditAdminModal.spec.js
new file mode 100644
index 0000000..de82e94
--- /dev/null
+++ b/assets/vue/components/settings/EditAdminModal.spec.js
@@ -0,0 +1,196 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditAdminModal from './EditAdminModal.vue'
+
+const {
+    updateAdministratorMock,
+} = vi.hoisted(() => ({
+    updateAdministratorMock: vi.fn(),
+}))
+
+vi.mock('@tatevikgr/rest-api-client', () => ({
+    Requests: {
+        UpdateAdministratorRequest: class {
+            constructor(loginName, password, email, superUser, privileges) {
+                this.loginName = loginName
+                this.password = password
+                this.email = email
+                this.superUser = superUser
+                this.privileges = privileges
+            }
+        },
+    },
+}))
+
+vi.mock('../../api', () => ({
+    adminClient: {
+        updateAdministrator: updateAdministratorMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const admin = {
+    id: 7,
+    loginName: 'admin',
+    email: 'admin@example.com',
+    superUser: false,
+    privileges: {
+        subscribers: true,
+        campaigns: false,
+        statistics: true,
+        settings: false,
+    },
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditAdminModal, {
+        props: {
+            isOpen: true,
+            admin,
+            ...props,
+        },
+    })
+
+describe('EditAdminModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAdministratorMock.mockResolvedValue({
+            id: 7,
+        })
+
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Administrator')
+        expect(wrapper.text()).toContain('7')
+        expect(wrapper.find('#edit-admin-login-name').exists()).toBe(true)
+        expect(wrapper.find('#edit-admin-email').exists()).toBe(true)
+        expect(wrapper.find('#edit-admin-password').exists()).toBe(true)
+    })
+
+    it('populates the form from the admin prop', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.find('#edit-admin-login-name').element.value).toBe('admin')
+        expect(wrapper.find('#edit-admin-email').element.value).toBe('admin@example.com')
+        expect(wrapper.find('#edit-admin-password').element.value).toBe('')
+        expect(wrapper.find('#edit-admin-super-user').element.checked).toBe(false)
+        expect(wrapper.find('#edit-priv-subscribers').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-statistics').element.checked).toBe(true)
+    })
+
+    it('updates the form when the admin prop changes', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.setProps({
+            admin: {
+                id: 9,
+                loginName: 'root',
+                email: 'root@example.com',
+                superUser: true,
+                privileges: {
+                    subscribers: false,
+                    campaigns: true,
+                    statistics: false,
+                    settings: true,
+                },
+            },
+        })
+
+        await flushPromises()
+
+        expect(wrapper.find('#edit-admin-login-name').element.value).toBe('root')
+        expect(wrapper.find('#edit-admin-email').element.value).toBe('root@example.com')
+        expect(wrapper.find('#edit-admin-super-user').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-campaigns').element.checked).toBe(true)
+        expect(wrapper.find('#edit-priv-settings').element.checked).toBe(true)
+    })
+
+    it('updates an administrator', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('#edit-admin-login-name').setValue('new-admin')
+        await wrapper.find('#edit-admin-email').setValue('new@example.com')
+        await wrapper.find('#edit-admin-password').setValue('password123')
+        await wrapper.find('#edit-admin-super-user').setValue(true)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).toHaveBeenCalledTimes(1)
+        expect(updateAdministratorMock.mock.calls[0][0]).toBe(7)
+
+        const request = updateAdministratorMock.mock.calls[0][1]
+
+        expect(request.loginName).toBe('new-admin')
+        expect(request.email).toBe('new@example.com')
+        expect(request.password).toBe('password123')
+        expect(request.superUser).toBe(true)
+        expect(request.privileges).toEqual({
+            subscribers: true,
+            campaigns: false,
+            statistics: true,
+            settings: false,
+        })
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('does not submit without an admin', async () => {
+        const wrapper = mountComponent({
+            admin: null,
+        })
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).not.toHaveBeenCalled()
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAdministratorMock.mockRejectedValueOnce(
+            new Error('Update failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAdministratorMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Update failed')
+        expect(console.error).toHaveBeenCalled()
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the close button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.find('button[aria-label="Close edit administrator modal"]').trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/EditAdminModal.vue b/assets/vue/components/settings/EditAdminModal.vue
index ccce1a7..f989f61 100644
--- a/assets/vue/components/settings/EditAdminModal.vue
+++ b/assets/vue/components/settings/EditAdminModal.vue
@@ -212,10 +212,11 @@ const resetForm = () => {
 watch(
   () => [props.isOpen, props.admin?.id],
   ([isOpen]) => {
-    if (isOpen) {
-      resetForm()
-    }
-  }
+      if (isOpen) {
+        resetForm()
+      }
+    },
+    { immediate: true }
 )
 
 const close = () => {
diff --git a/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js b/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js
new file mode 100644
index 0000000..90e023a
--- /dev/null
+++ b/assets/vue/components/settings/EditSubscriberAttributeModal.spec.js
@@ -0,0 +1,185 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import EditSubscriberAttributeModal from './EditSubscriberAttributeModal.vue'
+
+const {
+    updateAttributeDefinitionMock,
+} = vi.hoisted(() => ({
+    updateAttributeDefinitionMock: vi.fn(),
+}))
+
+vi.mock('../../api', () => ({
+    subscriberAttributesClient: {
+        updateAttributeDefinition: updateAttributeDefinitionMock,
+    },
+}))
+
+vi.mock('../base/BaseIcon.vue', () => ({
+    default: {
+        template: '<span />',
+    },
+}))
+
+const attribute = {
+    id: 1,
+    name: 'Country',
+    type: 'select',
+    order: 5,
+    default_value: 'USA',
+    required: true,
+    options: [
+        {
+            name: 'USA',
+            list_order: 1,
+        },
+        {
+            name: 'Canada',
+            list_order: 2,
+        },
+    ],
+}
+
+const mountComponent = (props = {}) =>
+    mount(EditSubscriberAttributeModal, {
+        props: {
+            isOpen: true,
+            attribute,
+            ...props,
+        },
+        global: {
+            stubs: {
+                teleport: true,
+            },
+        },
+    })
+
+describe('EditSubscriberAttributeModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        updateAttributeDefinitionMock.mockResolvedValue({
+            id: 1,
+        })
+    })
+
+    it('renders when open', () => {
+        const wrapper = mountComponent()
+
+        expect(wrapper.text()).toContain('Edit Subscriber Attribute')
+        expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('populates the form from the attribute prop', () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        expect(inputs[0].element.value).toBe('Country')
+        expect(wrapper.find('select').element.value).toBe('select')
+        expect(inputs[1].element.value).toBe('5')
+        expect(inputs[2].element.value).toBe('USA')
+        expect(inputs[3].element.checked).toBe(true)
+    })
+
+    it('updates the attribute', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[0].setValue('Status')
+        await inputs[1].setValue('10')
+        await inputs[2].setValue('Active')
+        await inputs[3].setValue(false)
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalledWith(
+            1,
+            expect.objectContaining({
+                id: 1,
+                name: 'Status',
+                type: 'select',
+                order: 10,
+                default_value: 'Active',
+                required: false,
+            })
+        )
+
+        expect(wrapper.emitted('updated')).toHaveLength(1)
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('adds and removes options', async () => {
+        const wrapper = mountComponent()
+
+        const addButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Add')
+
+        await addButton.trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(10)
+
+        const removeButtons = wrapper
+            .findAll('button')
+            .filter(button => button.text().trim() === '')
+
+        await removeButtons[0].trigger('click')
+
+        expect(wrapper.findAll('input').length).toBe(8)
+    })
+
+    it('updates option values', async () => {
+        const wrapper = mountComponent()
+
+        const inputs = wrapper.findAll('input')
+
+        await inputs[4].setValue('UK')
+        await inputs[5].setValue('3')
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        const payload = updateAttributeDefinitionMock.mock.calls[0][1]
+
+        expect(payload.options[0]).toEqual({
+            name: 'UK',
+            list_order: 3,
+        })
+    })
+
+    it('shows an error when update fails', async () => {
+        updateAttributeDefinitionMock.mockRejectedValueOnce(
+            new Error('Update failed')
+        )
+
+        const wrapper = mountComponent()
+
+        await wrapper.find('form').trigger('submit.prevent')
+        await flushPromises()
+
+        expect(updateAttributeDefinitionMock).toHaveBeenCalled()
+        expect(wrapper.text()).toContain('Update failed')
+        expect(wrapper.emitted('updated')).toBeUndefined()
+    })
+
+    it('emits close when cancel is clicked', async () => {
+        const wrapper = mountComponent()
+
+        const cancelButton = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Cancel')
+
+        await cancelButton.trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when the X button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await wrapper.findAll('button')[0].trigger('click')
+
+        expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+})
diff --git a/assets/vue/components/settings/SettingsActionsPanel.spec.js b/assets/vue/components/settings/SettingsActionsPanel.spec.js
new file mode 100644
index 0000000..d2deeb7
--- /dev/null
+++ b/assets/vue/components/settings/SettingsActionsPanel.spec.js
@@ -0,0 +1,163 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import SettingsActionsPanel from './SettingsActionsPanel.vue'
+
+const {
+    routeMock,
+    replaceMock,
+} = vi.hoisted(() => ({
+    routeMock: {
+        query: {},
+    },
+    replaceMock: vi.fn(() => Promise.resolve()),
+}))
+
+vi.mock('vue-router', () => ({
+    useRoute: () => routeMock,
+    useRouter: () => ({
+        replace: replaceMock,
+    }),
+}))
+
+vi.mock('./SettingsConfigs.vue', () => ({
+    default: {
+        template: '<div>Configs Panel</div>',
+    },
+}))
+
+vi.mock('./SettingsAdmins.vue', () => ({
+    default: {
+        template: '<div>Admins Panel</div>',
+    },
+}))
+
+vi.mock('./SettingsAdminAttributes.vue', () => ({
+    default: {
+        template: '<div>Admin Attributes Panel</div>',
+    },
+}))
+
+vi.mock('./SettingsSubscriberAttributes.vue', () => ({
+    default: {
+        template: '<div>Subscriber Attributes Panel</div>',
+    },
+}))
+
+const mountComponent = () => mount(SettingsActionsPanel)
+
+describe('SettingsActionsPanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        routeMock.query = {}
+    })
+
+    it('renders configs tab by default', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Settings')
+        expect(wrapper.text()).toContain('Configs Panel')
+
+        expect(replaceMock).toHaveBeenCalledWith({
+            query: {
+                tab: 'configs',
+            },
+        })
+    })
+
+    it('renders admins tab from route query', async () => {
+        routeMock.query = {
+            tab: 'admins',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+        expect(replaceMock).not.toHaveBeenCalled()
+    })
+
+    it('falls back to configs for an invalid tab', async () => {
+        routeMock.query = {
+            tab: 'invalid',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Configs Panel')
+
+        expect(replaceMock).toHaveBeenCalledWith({
+            query: {
+                tab: 'configs',
+            },
+        })
+    })
+
+    it('changes tabs when a tab button is clicked', async () => {
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        const button = wrapper
+            .findAll('button')
+            .find(button => button.text() === 'Admins')
+
+        await button.trigger('click')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+
+        expect(replaceMock).toHaveBeenLastCalledWith({
+            query: {
+                tab: 'admins',
+            },
+        })
+    })
+
+    it('renders the admin attributes tab', async () => {
+        routeMock.query = {
+            tab: 'admin_attributes',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admin Attributes Panel')
+    })
+
+    it('renders the subscriber attributes tab', async () => {
+        routeMock.query = {
+            tab: 'subscriber_attributes',
+        }
+
+        const wrapper = mountComponent()
+
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Subscriber Attributes Panel')
+    })
+
+    it('updates the displayed panel when the route query changes', async () => {
+        const wrapper = mountComponent()
+        await flushPromises()
+
+        const adminsButton = wrapper
+            .findAll('button')
+            .find(b => b.text() === 'Admins')
+
+        await adminsButton.trigger('click')
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('Admins Panel')
+        expect(replaceMock).toHaveBeenLastCalledWith({
+            query: {
+                tab: 'admins',
+            },
+        })
+    })
+})
diff --git a/assets/vue/views/AnalyticsView.spec.js b/assets/vue/views/AnalyticsView.spec.js
new file mode 100644
index 0000000..18bcfa7
--- /dev/null
+++ b/assets/vue/views/AnalyticsView.spec.js
@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+vi.mock('vue3-apexcharts', () => ({
+  default: {
+    name: 'VueApexCharts',
+    template: '<div class="apexchart-stub" />',
+  },
+}))
+
+const statisticsClient = {
+  getCampaignStatistics: vi.fn(),
+  getStatisticsOfViewOpens: vi.fn(),
+  getTopDomains: vi.fn(),
+  getDomainConfirmationStatistics: vi.fn(),
+  getTopLocalParts: vi.fn(),
+}
+
+vi.mock('../api', () => ({
+  statisticsClient,
+}))
+
+const layoutStub = {
+  name: 'AdminLayout',
+  template: '<div class="admin-layout"><slot /></div>',
+}
+
+describe('AnalyticsView', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.clearAllMocks()
+  })
+
+  it('loads analytics data from the statistics client and renders summary cards', async () => {
+    statisticsClient.getCampaignStatistics.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          dateSent: '2026-06-01',
+          sent: 200,
+          bounces: 4,
+          uniqueViews: 120,
+          totalClicks: 33,
+        },
+      ],
+    })
+    statisticsClient.getStatisticsOfViewOpens.mockResolvedValue({
+      items: [
+        {
+          campaignId: 7,
+          subject: 'Summer launch',
+          sent: 200,
+          uniqueViews: 120,
+          rate: 60,
+        },
+      ],
+    })
+    statisticsClient.getTopDomains.mockResolvedValue({
+      items: [{ domain: 'example.com', subscribers: 42 }],
+    })
+    statisticsClient.getDomainConfirmationStatistics.mockResolvedValue({
+      domain: 'example.com',
+      total: 100,
+      confirmed: 80,
+      unconfirmed: 20,
+      confirmationRate: 80,
+    })
+    statisticsClient.getTopLocalParts.mockResolvedValue({
+      items: [{ localPart: 'alex', count: 12, percentage: 24 }],
+    })
+
+    vi.resetModules()
+
+    const { default: AnalyticsView } = await import('./AnalyticsView.vue')
+
+    const wrapper = mount(AnalyticsView, {
+      global: {
+        stubs: {
+          AdminLayout: layoutStub,
+        },
+      },
+    })
+
+    await flushPromises()
+
+    expect(statisticsClient.getCampaignStatistics).toHaveBeenCalledWith(null, 100)
+    expect(wrapper.text()).toContain('Campaigns tracked')
+    expect(wrapper.text()).toContain('Summer launch')
+    expect(wrapper.text()).toContain('example.com')
+    expect(wrapper.text()).toContain('alex')
+    expect(wrapper.text()).toContain('80.0%')
+  })
+})
diff --git a/assets/vue/views/AnalyticsView.vue b/assets/vue/views/AnalyticsView.vue
new file mode 100644
index 0000000..025c5a7
--- /dev/null
+++ b/assets/vue/views/AnalyticsView.vue
@@ -0,0 +1,497 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <div
+        v-if="errorMessage"
+        class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        role="alert"
+      >
+        {{ errorMessage }}
+      </div>
+
+      <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <BaseCard v-for="metric in metrics" :key="metric.id" class="h-full">
+          <header class="mb-2 flex items-center gap-3">
+            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600">
+              <BaseIcon :name="metric.icon" />
+            </span>
+            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+              {{ metric.label }}
+            </p>
+          </header>
+          <p class="mb-1 text-2xl font-bold text-slate-900">
+            {{ metric.value }}
+          </p>
+          <p class="text-sm text-slate-500">
+            {{ metric.description }}
+          </p>
+        </BaseCard>
+      </section>
+
+      <section class="grid grid-cols-1 gap-6 xl:grid-cols-3">
+        <BaseCard class="xl:col-span-2">
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Campaign performance</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Top campaigns ranked by unique views and click volume.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(campaignStatistics.length) }} campaigns
+            </p>
+          </header>
+
+          <div v-if="isLoading" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            Loading analytics...
+          </div>
+
+          <div v-else-if="hasLoaded && campaignChartItems.length === 0" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            No campaign statistics found.
+          </div>
+
+          <div v-else class="min-h-[260px]">
+            <VueApexCharts
+              type="bar"
+              height="320"
+              :options="campaignChartOptions"
+              :series="campaignChartSeries"
+            />
+          </div>
+        </BaseCard>
+
+        <BaseCard>
+          <header class="mb-4">
+            <h2 class="text-sm font-bold text-slate-900">Domain confirmation</h2>
+            <p class="mt-1 text-xs text-slate-500">
+              Confirmation coverage for the configured sending domain.
+            </p>
+          </header>
+
+          <div v-if="domainConfirmation" class="space-y-4">
+            <div>
+              <p class="text-xs uppercase tracking-wide text-slate-500">Domain</p>
+              <p class="mt-1 break-all text-sm font-semibold text-slate-900">
+                {{ domainConfirmation.domain || 'Unknown domain' }}
+              </p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3 text-sm">
+              <div class="rounded-lg bg-emerald-50 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-emerald-700">Confirmed</p>
+                <p class="mt-1 text-lg font-bold text-emerald-900">
+                  {{ formatCount(domainConfirmation.confirmed) }}
+                </p>
+              </div>
+              <div class="rounded-lg bg-amber-50 px-3 py-3">
+                <p class="text-xs uppercase tracking-wide text-amber-700">Unconfirmed</p>
+                <p class="mt-1 text-lg font-bold text-amber-900">
+                  {{ formatCount(domainConfirmation.unconfirmed) }}
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <div class="mb-2 flex items-center justify-between text-xs text-slate-500">
+                <span>Confirmation rate</span>
+                <span>{{ formatPercentage(domainConfirmation.confirmationRate) }}</span>
+              </div>
+              <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+                <div
+                  class="h-full rounded-full bg-emerald-500"
+                  :style="{ width: `${clampPercentage(domainConfirmation.confirmationRate)}%` }"
+                />
+              </div>
+            </div>
+
+            <dl class="grid grid-cols-3 gap-3 text-sm">
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Total</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.total) }}</dd>
+              </div>
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Confirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.confirmed) }}</dd>
+              </div>
+              <div class="rounded-lg bg-slate-50 px-3 py-3">
+                <dt class="text-xs uppercase tracking-wide text-slate-500">Unconfirmed</dt>
+                <dd class="mt-1 font-semibold text-slate-900">{{ formatCount(domainConfirmation.unconfirmed) }}</dd>
+              </div>
+            </dl>
+          </div>
+
+          <div v-else-if="hasLoaded" class="flex min-h-[260px] items-center justify-center text-sm text-slate-500">
+            No confirmation data found.
+          </div>
+        </BaseCard>
+      </section>
+
+      <section class="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        <BaseCard>
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Top domains</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Subscriber counts by email domain.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(topDomains.length) }} domains
+            </p>
+          </header>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-sm">
+              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th class="px-4 py-3">Domain</th>
+                  <th class="px-4 py-3 text-right">Subscribers</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-100">
+                <tr v-if="hasLoaded && topDomains.length === 0">
+                  <td colspan="2" class="px-4 py-6 text-center text-slate-500">
+                    No domain statistics found.
+                  </td>
+                </tr>
+                <tr v-for="domain in topDomains" :key="domain.domain">
+                  <td class="px-4 py-3 font-medium text-slate-900">
+                    {{ domain.domain || 'Unknown domain' }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-700">
+                    {{ formatCount(domain.subscribers) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </BaseCard>
+
+        <BaseCard>
+          <header class="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-bold text-slate-900">Top local parts</h2>
+              <p class="mt-1 text-xs text-slate-500">
+                Most common subscriber usernames.
+              </p>
+            </div>
+            <p class="text-xs text-slate-400">
+              {{ formatCount(topLocalParts.length) }} values
+            </p>
+          </header>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-sm">
+              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th class="px-4 py-3">Local part</th>
+                  <th class="px-4 py-3 text-right">Count</th>
+                  <th class="px-4 py-3 text-right">Share</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-100">
+                <tr v-if="hasLoaded && topLocalParts.length === 0">
+                  <td colspan="3" class="px-4 py-6 text-center text-slate-500">
+                    No local-part statistics found.
+                  </td>
+                </tr>
+                <tr v-for="part in topLocalParts" :key="part.localPart">
+                  <td class="px-4 py-3 font-medium text-slate-900">
+                    {{ part.localPart || 'Unknown' }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-700">
+                    {{ formatCount(part.count) }}
+                  </td>
+                  <td class="px-4 py-3 text-right text-slate-600">
+                    {{ formatPercentage(part.percentage) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </BaseCard>
+      </section>
+
+      <BaseCard>
+        <header class="mb-4 flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-sm font-bold text-slate-900">Campaign breakdown</h2>
+            <p class="mt-1 text-xs text-slate-500">
+              Open and click activity by campaign.
+            </p>
+          </div>
+          <p class="text-xs text-slate-400">
+            {{ formatCount(campaignStatistics.length) }} records
+          </p>
+        </header>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <tr>
+                <th class="px-4 py-3">Campaign</th>
+                <th class="px-4 py-3 text-right">Sent</th>
+                <th class="px-4 py-3 text-right">Views</th>
+                <th class="px-4 py-3 text-right">Open rate</th>
+                <th class="px-4 py-3 text-right">Clicks</th>
+                <th class="px-4 py-3 text-right">Bounce</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              <tr v-if="hasLoaded && campaignStatistics.length === 0">
+                <td colspan="6" class="px-4 py-6 text-center text-slate-500">
+                  No campaign statistics found.
+                </td>
+              </tr>
+              <tr v-for="campaign in campaignStatistics" :key="campaign.campaignId">
+                <td class="px-4 py-3">
+                  <div class="font-medium text-slate-900">
+                    {{ campaign.subject || `Campaign #${campaign.campaignId}` }}
+                  </div>
+                  <div class="mt-1 text-xs text-slate-500">
+                    Sent {{ campaign.dateSent ? formatDate(campaign.dateSent) : 'unknown date' }}
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.sent) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.uniqueViews) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatPercentage(calcRate(campaign.uniqueViews, campaign.sent)) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.totalClicks) }}
+                </td>
+                <td class="px-4 py-3 text-right text-slate-700">
+                  {{ formatCount(campaign.bounces) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </BaseCard>
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import BaseCard from '../components/base/BaseCard.vue'
+import BaseIcon from '../components/base/BaseIcon.vue'
+import { statisticsClient } from '../api'
+
+const isLoading = ref(false)
+const hasLoaded = ref(false)
+const errorMessage = ref('')
+const campaignStatistics = ref([])
+const viewOpens = ref([])
+const topDomains = ref([])
+const domainConfirmation = ref(null)
+const topLocalParts = ref([])
+
+const formatCount = (value) => new Intl.NumberFormat().format(Number(value) || 0)
+
+const toPercent = (value) => {
+  const numericValue = Number(value) || 0
+  return numericValue <= 1 ? numericValue * 100 : numericValue
+}
+
+const formatPercentage = (value) => `${toPercent(value).toFixed(1)}%`
+
+const clampPercentage = (value) => Math.max(0, Math.min(100, toPercent(value)))
+
+const formatDate = (dateValue) => {
+  if (!dateValue) {
+    return 'Unknown date'
+  }
+
+  let date
+
+  if (typeof dateValue === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateValue)) {
+    const [year, month, day] = dateValue.split('-').map(Number)
+    date = new Date(year, month - 1, day)
+  } else {
+    date = new Date(dateValue)
+  }
+
+  if (Number.isNaN(date.getTime())) {
+    return 'Unknown date'
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  }).format(date)
+}
+
+const calcRate = (numerator, denominator) => {
+  const total = Number(denominator) || 0
+  if (total <= 0) {
+    return 0
+  }
+
+  return ((Number(numerator) || 0) / total) * 100
+}
+
+const averageOpenRate = computed(() => {
+  if (!viewOpens.value.length) {
+    return 0
+  }
+
+  const totalRate = viewOpens.value.reduce((sum, item) => sum + (Number(item.rate) || 0), 0)
+  return totalRate / viewOpens.value.length
+})
+
+const metrics = computed(() => {
+  const totalCampaigns = campaignStatistics.value.length
+  const totalSent = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.sent) || 0), 0)
+  const totalViews = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.uniqueViews) || 0), 0)
+  const totalClicks = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.totalClicks) || 0), 0)
+  const totalBounces = campaignStatistics.value.reduce((sum, item) => sum + (Number(item.bounces) || 0), 0)
+
+  return [
+    {
+      id: 'campaigns',
+      label: 'Campaigns tracked',
+      value: formatCount(totalCampaigns),
+      description: 'Campaign records returned by the analytics service.',
+      icon: 'plane',
+    },
+    {
+      id: 'sent',
+      label: 'Messages sent',
+      value: formatCount(totalSent),
+      description: 'Total messages represented in the campaign stats feed.',
+      icon: 'time',
+    },
+    {
+      id: 'views',
+      label: 'Unique views',
+      value: formatCount(totalViews),
+      description: `Average ${formatPercentage(averageOpenRate.value)} across view-open analytics rows.`,
+      icon: 'rate',
+    },
+    {
+      id: 'clicks',
+      label: 'Total clicks',
+      value: formatCount(totalClicks),
+      description: `Bounces recorded: ${formatCount(totalBounces)}.`,
+      icon: 'chart',
+    },
+  ]
+})
+
+const campaignChartItems = computed(() =>
+  [...campaignStatistics.value]
+    .sort((left, right) => (Number(right.uniqueViews) || 0) - (Number(left.uniqueViews) || 0))
+    .slice(0, 8)
+)
+
+const campaignChartSeries = computed(() => [
+  {
+    name: 'Unique views',
+    data: campaignChartItems.value.map((item) => Number(item.uniqueViews) || 0),
+  },
+  {
+    name: 'Clicks',
+    data: campaignChartItems.value.map((item) => Number(item.totalClicks) || 0),
+  },
+])
+
+const campaignChartOptions = computed(() => ({
+  chart: {
+    type: 'bar',
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    fontFamily: 'inherit',
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: '44%',
+      borderRadius: 4,
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  colors: ['#2563eb', '#10b981'],
+  grid: {
+    borderColor: '#e5e7eb',
+    strokeDashArray: 4,
+  },
+  legend: {
+    show: true,
+    position: 'top',
+    horizontalAlign: 'right',
+    fontSize: '12px',
+  },
+  xaxis: {
+    categories: campaignChartItems.value.map((item) => item.subject || `#${item.campaignId}`),
+    labels: {
+      rotate: -30,
+      trim: true,
+      style: {
+        colors: '#64748b',
+        fontSize: '12px',
+      },
+    },
+  },
+  yaxis: {
+    labels: {
+      style: {
+        colors: '#64748b',
+        fontSize: '12px',
+      },
+      formatter: (value) => Math.round(value).toLocaleString(),
+    },
+  },
+  tooltip: {
+    shared: true,
+    intersect: false,
+    y: {
+      formatter: (value) => new Intl.NumberFormat().format(Number(value) || 0),
+    },
+  },
+}))
+
+const loadAnalytics = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const [
+      campaignResponse,
+      viewOpensResponse,
+      topDomainsResponse,
+      domainConfirmationResponse,
+      topLocalPartsResponse,
+    ] = await Promise.all([
+      statisticsClient.getCampaignStatistics(null, 100),
+      statisticsClient.getStatisticsOfViewOpens(null, 100),
+      statisticsClient.getTopDomains(20, 5),
+      statisticsClient.getDomainConfirmationStatistics(50),
+      statisticsClient.getTopLocalParts(25),
+    ])
+
+    campaignStatistics.value = campaignResponse?.items ?? []
+    viewOpens.value = viewOpensResponse?.items ?? []
+    topDomains.value = topDomainsResponse?.items ?? []
+    domainConfirmation.value = domainConfirmationResponse ?? null
+    topLocalParts.value = topLocalPartsResponse?.items ?? []
+  } catch (error) {
+    errorMessage.value = 'Failed to load analytics.'
+    console.error('Failed to load analytics:', error)
+  } finally {
+    isLoading.value = false
+    hasLoaded.value = true
+  }
+}
+
+onMounted(loadAnalytics)
+</script>
diff --git a/src/Controller/AnalyticsController.php b/src/Controller/AnalyticsController.php
new file mode 100644
index 0000000..d8486ff
--- /dev/null
+++ b/src/Controller/AnalyticsController.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/analytics', name: 'analytics_')]
+class AnalyticsController extends AbstractController
+{
+    #[Route('/', name: 'list', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Analytics',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/tests/Integration/Controller/AnalyticsControllerTest.php b/tests/Integration/Controller/AnalyticsControllerTest.php
new file mode 100644
index 0000000..5691010
--- /dev/null
+++ b/tests/Integration/Controller/AnalyticsControllerTest.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PhpList\WebFrontend\Controller\AnalyticsController;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Session\Session;
+use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
+use Symfony\Component\Routing\RouterInterface;
+
+class AnalyticsControllerTest extends KernelTestCase
+{
+    public function testAnalyticsRouteIsRegistered(): void
+    {
+        self::bootKernel();
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/analytics/', $router->generate('analytics_list'));
+    }
+
+    public function testAnalyticsPageRendersExpectedSpaPayload(): void
+    {
+        self::bootKernel();
+        /** @var AnalyticsController $controller */
+        $controller = static::getContainer()->get(AnalyticsController::class);
+        $apiBaseUrl = (string) static::getContainer()->getParameter('api_base_url');
+
+        $request = Request::create('/analytics/');
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        $response = $controller->index($request);
+        $content = (string) $response->getContent();
+
+        self::assertSame(200, $response->getStatusCode());
+        self::assertStringContainsString('<title>phpList - Analytics</title>', $content);
+        self::assertStringContainsString('data-api-token="integration-token"', $content);
+        self::assertStringContainsString(sprintf('data-api-base-url="%s"', $apiBaseUrl), $content);
+    }
+}