diff --git a/package.json b/package.json
index 298865b..4893a7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated \u00e2\u20ac\u201d the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
diff --git a/src/components/EscalatedLayout.vue b/src/components/EscalatedLayout.vue
index 8496a02..19ea367 100644
--- a/src/components/EscalatedLayout.vue
+++ b/src/components/EscalatedLayout.vue
@@ -26,6 +26,7 @@ const isPanel = computed(() => isAdminSection.value || isAgentSection.value);
 const isDark = computed(() => isPanel.value && panelConfig.mode !== 'light');
 const showPoweredBy = computed(() => page.props.escalated?.show_powered_by !== false);
 const kbEnabled = computed(() => page.props.escalated?.knowledge_base_enabled !== false);
+const newslettersEnabled = computed(() => page.props.escalated?.features?.newsletters === true);
 const kbPublic = computed(() => page.props.escalated?.knowledge_base_public !== false);
 const chatEnabled = computed(() => page.props.escalated?.chat_enabled === true);
 const activeChats = computed(() => page.props.escalated?.active_chats || []);
@@ -116,6 +117,16 @@ const adminLinks = computed(() => {
             icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
             position: 80,
         },
+        ...(newslettersEnabled.value
+            ? [
+                  {
+                      href: `${p}/admin/newsletters`,
+                      label: 'Newsletters',
+                      icon: 'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75',
+                      position: 81,
+                  },
+              ]
+            : []),
         {
             href: `${p}/admin/skills`,
             label: 'Skills',
diff --git a/src/components/admin/newsletters/AnalyticsTiles.stories.js b/src/components/admin/newsletters/AnalyticsTiles.stories.js
new file mode 100644
index 0000000..98e57e7
--- /dev/null
+++ b/src/components/admin/newsletters/AnalyticsTiles.stories.js
@@ -0,0 +1,14 @@
+import AnalyticsTiles from './AnalyticsTiles.vue';
+
+export default { title: 'Admin/Newsletters/AnalyticsTiles', component: AnalyticsTiles };
+
+export const Default = {
+    args: {
+        summary: { total: 1000, sent: 990, opened: 400, clicked: 80, bounced: 10, complained: 1 },
+        topClicks: [
+            { url: 'https://example.com/launch', clicks: 42 },
+            { url: 'https://example.com/blog/post', clicks: 18 },
+            { url: 'https://example.com/pricing', clicks: 7 },
+        ],
+    },
+};
diff --git a/src/components/admin/newsletters/AnalyticsTiles.vue b/src/components/admin/newsletters/AnalyticsTiles.vue
new file mode 100644
index 0000000..66246b9
--- /dev/null
+++ b/src/components/admin/newsletters/AnalyticsTiles.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="analytics-tiles">
+        <SummaryTiles :summary="summary" />
+        <section v-if="topClicks?.length" class="analytics-tiles__top-clicks">
+            <h3>Top clicked URLs</h3>
+            <ol>
+                <li v-for="row in topClicks" :key="row.url">
+                    <span class="analytics-tiles__url">{{ row.url }}</span>
+                    <span class="analytics-tiles__count">{{ row.clicks }}</span>
+                </li>
+            </ol>
+        </section>
+    </div>
+</template>
+
+<script setup>
+import SummaryTiles from './SummaryTiles.vue';
+
+defineProps({
+    summary: { type: Object, required: true },
+    topClicks: { type: Array, default: () => [] },
+});
+</script>
+
+<style scoped>
+.analytics-tiles {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+.analytics-tiles__top-clicks h3 {
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--escalated-text-muted, #64748b);
+    margin: 0 0 8px;
+}
+.analytics-tiles__top-clicks ol {
+    margin: 0;
+    padding-left: 20px;
+}
+.analytics-tiles__top-clicks li {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 4px 0;
+}
+.analytics-tiles__url {
+    word-break: break-all;
+}
+.analytics-tiles__count {
+    font-variant-numeric: tabular-nums;
+    color: var(--escalated-text-muted, #64748b);
+}
+</style>
diff --git a/src/components/admin/newsletters/DeliveriesTable.stories.js b/src/components/admin/newsletters/DeliveriesTable.stories.js
new file mode 100644
index 0000000..30505bd
--- /dev/null
+++ b/src/components/admin/newsletters/DeliveriesTable.stories.js
@@ -0,0 +1,28 @@
+import DeliveriesTable from './DeliveriesTable.vue';
+
+export default { title: 'Admin/Newsletters/DeliveriesTable', component: DeliveriesTable };
+
+export const Default = {
+    args: {
+        rows: [
+            {
+                id: 1,
+                contact: { name: 'Maria', email: 'maria@example.com' },
+                status: 'sent',
+                sent_at: '2026-05-19T12:00:00Z',
+                opened_at: '2026-05-19T13:00:00Z',
+                last_clicked_at: '2026-05-19T13:05:00Z',
+                bounce_reason: null,
+            },
+            {
+                id: 2,
+                contact: { name: null, email: 'x@example.com' },
+                status: 'bounced',
+                sent_at: '2026-05-19T12:00:00Z',
+                opened_at: null,
+                last_clicked_at: null,
+                bounce_reason: '550 mailbox not found',
+            },
+        ],
+    },
+};
diff --git a/src/components/admin/newsletters/DeliveriesTable.vue b/src/components/admin/newsletters/DeliveriesTable.vue
new file mode 100644
index 0000000..d8d5730
--- /dev/null
+++ b/src/components/admin/newsletters/DeliveriesTable.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="deliveries-table">
+        <div class="deliveries-table__toolbar">
+            <select
+                class="deliveries-table__filter"
+                :value="statusFilter"
+                @change="$emit('filter', $event.target.value)"
+            >
+                <option value="">All statuses</option>
+                <option v-for="s in statuses" :key="s" :value="s">{{ s }}</option>
+            </select>
+            <button type="button" class="deliveries-table__export" @click="$emit('export')">Export CSV</button>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Contact</th>
+                    <th>Status</th>
+                    <th>Sent</th>
+                    <th>Opened</th>
+                    <th>Last clicked</th>
+                    <th>Bounce reason</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="row in rows" :key="row.id">
+                    <td>
+                        <div>{{ row.contact.name ?? '—' }}</div>
+                        <div class="deliveries-table__email">{{ row.contact.email }}</div>
+                    </td>
+                    <td>
+                        <span :class="`status status--${row.status}`">{{ row.status }}</span>
+                    </td>
+                    <td>{{ row.sent_at ? new Date(row.sent_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.opened_at ? new Date(row.opened_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.last_clicked_at ? new Date(row.last_clicked_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.bounce_reason ?? '—' }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    rows: { type: Array, required: true },
+    statusFilter: { type: String, default: '' },
+});
+defineEmits(['filter', 'export']);
+const statuses = ['pending', 'queued', 'sent', 'bounced', 'complained', 'suppressed', 'failed'];
+</script>
+
+<style scoped>
+.deliveries-table {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.deliveries-table__toolbar {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.deliveries-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.deliveries-table th,
+.deliveries-table td {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.deliveries-table__email {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--sent {
+    background: #e0f2fe;
+}
+.status--bounced {
+    background: #fee2e2;
+}
+.status--complained {
+    background: #fef3c7;
+}
+.status--pending,
+.status--queued {
+    background: #f1f5f9;
+}
+.status--failed {
+    background: #fecaca;
+}
+.status--suppressed {
+    background: #ede9fe;
+}
+</style>
diff --git a/src/components/admin/newsletters/DynamicFilterBuilder.stories.js b/src/components/admin/newsletters/DynamicFilterBuilder.stories.js
new file mode 100644
index 0000000..30569cd
--- /dev/null
+++ b/src/components/admin/newsletters/DynamicFilterBuilder.stories.js
@@ -0,0 +1,11 @@
+import DynamicFilterBuilder from './DynamicFilterBuilder.vue';
+
+export default { title: 'Admin/Newsletters/DynamicFilterBuilder', component: DynamicFilterBuilder };
+
+export const Empty = { args: { modelValue: { rules: [] }, matchCount: 0 } };
+export const WithRules = {
+    args: {
+        modelValue: { rules: [{ field: 'tickets_count', op: '>=', value: 3 }] },
+        matchCount: 142,
+    },
+};
diff --git a/src/components/admin/newsletters/DynamicFilterBuilder.vue b/src/components/admin/newsletters/DynamicFilterBuilder.vue
new file mode 100644
index 0000000..30a8dc9
--- /dev/null
+++ b/src/components/admin/newsletters/DynamicFilterBuilder.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="dynamic-filter-builder">
+        <textarea
+            class="dynamic-filter-builder__fallback"
+            :value="JSON.stringify(modelValue, null, 2)"
+            rows="10"
+            spellcheck="false"
+            @input="onInput"
+        />
+        <p class="dynamic-filter-builder__help">
+            Edit the saved filter JSON. A visual builder is planned for a follow-up.
+        </p>
+        <div class="dynamic-filter-builder__count">{{ matchCount }} contacts match</div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: Object, required: true },
+    matchCount: { type: Number, default: 0 },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function onInput(event) {
+    try {
+        emit('update:modelValue', JSON.parse(event.target.value));
+    } catch {
+        // Invalid JSON during typing — ignore until it parses cleanly.
+    }
+}
+</script>
+
+<style scoped>
+.dynamic-filter-builder__fallback {
+    width: 100%;
+    font-family: ui-monospace, monospace;
+    font-size: 13px;
+    padding: 12px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+}
+.dynamic-filter-builder__help {
+    margin: 4px 0 0;
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+.dynamic-filter-builder__count {
+    margin-top: 8px;
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 13px;
+}
+</style>
diff --git a/src/components/admin/newsletters/ListMemberTable.stories.js b/src/components/admin/newsletters/ListMemberTable.stories.js
new file mode 100644
index 0000000..86c1ae8
--- /dev/null
+++ b/src/components/admin/newsletters/ListMemberTable.stories.js
@@ -0,0 +1,12 @@
+import ListMemberTable from './ListMemberTable.vue';
+
+export default { title: 'Admin/Newsletters/ListMemberTable', component: ListMemberTable };
+
+export const Default = {
+    args: {
+        members: [
+            { id: 1, contact: { id: 10, name: 'Maria', email: 'maria@example.com' }, added_at: '2026-05-10T00:00:00Z' },
+            { id: 2, contact: { id: 11, name: null, email: 'noname@example.com' }, added_at: '2026-05-12T00:00:00Z' },
+        ],
+    },
+};
diff --git a/src/components/admin/newsletters/ListMemberTable.vue b/src/components/admin/newsletters/ListMemberTable.vue
new file mode 100644
index 0000000..467fc56
--- /dev/null
+++ b/src/components/admin/newsletters/ListMemberTable.vue
@@ -0,0 +1,53 @@
+<template>
+    <table class="list-member-table">
+        <thead>
+            <tr>
+                <th>Contact</th>
+                <th>Added</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="m in members" :key="m.id">
+                <td>
+                    <div>{{ m.contact.name ?? '—' }}</div>
+                    <div class="list-member-table__email">{{ m.contact.email }}</div>
+                </td>
+                <td>{{ new Date(m.added_at).toLocaleDateString() }}</td>
+                <td>
+                    <button
+                        type="button"
+                        data-action="remove"
+                        :data-contact-id="m.contact.id"
+                        @click="$emit('remove', m.contact.id)"
+                    >
+                        Remove
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup>
+defineProps({ members: { type: Array, required: true } });
+defineEmits(['remove']);
+</script>
+
+<style scoped>
+.list-member-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.list-member-table th,
+.list-member-table td {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.list-member-table__email {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>
diff --git a/src/components/admin/newsletters/MarkdownEditor.stories.js b/src/components/admin/newsletters/MarkdownEditor.stories.js
new file mode 100644
index 0000000..4d8b9a3
--- /dev/null
+++ b/src/components/admin/newsletters/MarkdownEditor.stories.js
@@ -0,0 +1,6 @@
+import MarkdownEditor from './MarkdownEditor.vue';
+
+export default { title: 'Admin/Newsletters/MarkdownEditor', component: MarkdownEditor };
+
+export const Empty = { args: { modelValue: '' } };
+export const WithContent = { args: { modelValue: '# Welcome\n\nThanks for being a customer.' } };
diff --git a/src/components/admin/newsletters/MarkdownEditor.vue b/src/components/admin/newsletters/MarkdownEditor.vue
new file mode 100644
index 0000000..a0c5069
--- /dev/null
+++ b/src/components/admin/newsletters/MarkdownEditor.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="markdown-editor">
+        <textarea
+            ref="ta"
+            :value="modelValue"
+            :rows="rows"
+            class="markdown-editor__textarea"
+            :placeholder="placeholder"
+            @input="$emit('update:modelValue', $event.target.value)"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    rows: { type: Number, default: 20 },
+    placeholder: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const ta = ref(null);
+
+function insertMergeField(path) {
+    const el = ta.value;
+    const token = `{{ ${path} }}`;
+    if (!el) {
+        emit('update:modelValue', `${props.modelValue}${token}`);
+        return;
+    }
+    const start = el.selectionStart ?? props.modelValue.length;
+    const end = el.selectionEnd ?? props.modelValue.length;
+    const next = props.modelValue.slice(0, start) + token + props.modelValue.slice(end);
+    emit('update:modelValue', next);
+}
+
+defineExpose({ insertMergeField });
+</script>
+
+<style scoped>
+.markdown-editor__textarea {
+    width: 100%;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 12px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    resize: vertical;
+}
+</style>
diff --git a/src/components/admin/newsletters/MergeFieldDropdown.stories.js b/src/components/admin/newsletters/MergeFieldDropdown.stories.js
new file mode 100644
index 0000000..a0c629a
--- /dev/null
+++ b/src/components/admin/newsletters/MergeFieldDropdown.stories.js
@@ -0,0 +1,6 @@
+import MergeFieldDropdown from './MergeFieldDropdown.vue';
+
+export default { title: 'Admin/Newsletters/MergeFieldDropdown', component: MergeFieldDropdown };
+
+export const Default = {};
+export const WithMetadataKeys = { args: { metadataKeys: ['tier', 'plan', 'lifecycle_stage'] } };
diff --git a/src/components/admin/newsletters/MergeFieldDropdown.vue b/src/components/admin/newsletters/MergeFieldDropdown.vue
new file mode 100644
index 0000000..d2f849e
--- /dev/null
+++ b/src/components/admin/newsletters/MergeFieldDropdown.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="merge-field-dropdown">
+        <button type="button" class="merge-field-dropdown__toggle" @click="open = !open">
+            {{ $t('newsletters.merge_fields.label') }} ▾
+        </button>
+        <ul v-if="open" class="merge-field-dropdown__menu">
+            <li v-for="opt in options" :key="opt.path" :data-path="opt.path" @click="pick(opt.path)">
+                <code>{{ tokenFor(opt.path) }}</code>
+                <span class="merge-field-dropdown__hint">{{ opt.label }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    metadataKeys: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['insert']);
+const open = ref(false);
+
+const options = computed(() => [
+    { path: 'contact.name', label: 'Contact full name' },
+    { path: 'contact.first_name', label: 'Contact first name' },
+    { path: 'contact.email', label: 'Contact email' },
+    { path: 'unsubscribe_url', label: 'Unsubscribe URL' },
+    { path: 'view_in_browser_url', label: 'View-in-browser URL' },
+    ...props.metadataKeys.map((k) => ({ path: `contact.metadata.${k}`, label: `Metadata: ${k}` })),
+]);
+
+function pick(path) {
+    emit('insert', path);
+    open.value = false;
+}
+
+function tokenFor(path) {
+    return `{{ ${path} }}`;
+}
+</script>
+
+<style scoped>
+.merge-field-dropdown {
+    position: relative;
+    display: inline-block;
+}
+.merge-field-dropdown__toggle {
+    padding: 6px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    background: white;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.merge-field-dropdown__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    margin: 4px 0 0;
+    padding: 4px 0;
+    min-width: 280px;
+    list-style: none;
+    background: white;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.merge-field-dropdown__menu li {
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+}
+.merge-field-dropdown__menu li:hover {
+    background: var(--escalated-bg-hover, #f7fafc);
+}
+.merge-field-dropdown__hint {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>
diff --git a/src/components/admin/newsletters/PreviewIframe.stories.js b/src/components/admin/newsletters/PreviewIframe.stories.js
new file mode 100644
index 0000000..052fe33
--- /dev/null
+++ b/src/components/admin/newsletters/PreviewIframe.stories.js
@@ -0,0 +1,7 @@
+import PreviewIframe from './PreviewIframe.vue';
+
+export default { title: 'Admin/Newsletters/PreviewIframe', component: PreviewIframe };
+
+export const Empty = { args: { html: '<p>(empty)</p>' } };
+export const Rendered = { args: { html: '<h1>Newsletter</h1><p>Hello Maria,</p><p>Welcome aboard.</p>' } };
+export const Loading = { args: { html: '<h1>Newsletter</h1>', loading: true } };
diff --git a/src/components/admin/newsletters/PreviewIframe.vue b/src/components/admin/newsletters/PreviewIframe.vue
new file mode 100644
index 0000000..4de0735
--- /dev/null
+++ b/src/components/admin/newsletters/PreviewIframe.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="preview-iframe">
+        <div v-if="loading" class="preview-iframe__loading">Rendering preview…</div>
+        <iframe :srcdoc="html" sandbox="allow-same-origin" class="preview-iframe__frame" title="Newsletter preview" />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    html: { type: String, default: '' },
+    loading: { type: Boolean, default: false },
+});
+</script>
+
+<style scoped>
+.preview-iframe {
+    position: relative;
+    height: 100%;
+    min-height: 480px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+.preview-iframe__frame {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+.preview-iframe__loading {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 12px;
+    color: var(--escalated-text-muted, #64748b);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+</style>
diff --git a/src/components/admin/newsletters/SummaryTiles.stories.js b/src/components/admin/newsletters/SummaryTiles.stories.js
new file mode 100644
index 0000000..62628c3
--- /dev/null
+++ b/src/components/admin/newsletters/SummaryTiles.stories.js
@@ -0,0 +1,8 @@
+import SummaryTiles from './SummaryTiles.vue';
+
+export default { title: 'Admin/Newsletters/SummaryTiles', component: SummaryTiles };
+
+export const Healthy = {
+    args: { summary: { total: 1000, sent: 990, opened: 400, clicked: 80, bounced: 10, complained: 1 } },
+};
+export const Empty = { args: { summary: { total: 0, sent: 0, opened: 0, clicked: 0, bounced: 0, complained: 0 } } };
diff --git a/src/components/admin/newsletters/SummaryTiles.vue b/src/components/admin/newsletters/SummaryTiles.vue
new file mode 100644
index 0000000..34685b0
--- /dev/null
+++ b/src/components/admin/newsletters/SummaryTiles.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="summary-tiles">
+        <div v-for="tile in tiles" :key="tile.key" class="summary-tiles__tile">
+            <div class="summary-tiles__label">{{ tile.label }}</div>
+            <div class="summary-tiles__value">{{ tile.value }}</div>
+            <div v-if="tile.rate !== null" class="summary-tiles__rate">{{ tile.rate }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    summary: { type: Object, required: true },
+});
+
+function rate(num, denom) {
+    if (!denom) return '—';
+    return `${((num / denom) * 100).toFixed(1)}%`;
+}
+
+const tiles = computed(() => {
+    const s = props.summary;
+    return [
+        { key: 'sent', label: 'Sent', value: s.sent, rate: null },
+        { key: 'opened', label: 'Opened', value: s.opened, rate: rate(s.opened, s.sent) },
+        { key: 'clicked', label: 'Clicked', value: s.clicked, rate: rate(s.clicked, s.sent) },
+        { key: 'bounced', label: 'Bounced', value: s.bounced, rate: rate(s.bounced, s.sent) },
+        { key: 'complained', label: 'Complained', value: s.complained, rate: rate(s.complained, s.sent) },
+    ];
+});
+</script>
+
+<style scoped>
+.summary-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 12px;
+}
+.summary-tiles__tile {
+    background: white;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 8px;
+    padding: 16px;
+}
+.summary-tiles__label {
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--escalated-text-muted, #64748b);
+    letter-spacing: 0.04em;
+}
+.summary-tiles__value {
+    font-size: 28px;
+    font-weight: 600;
+    margin-top: 4px;
+}
+.summary-tiles__rate {
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+    margin-top: 2px;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9555d67..949037b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -725,5 +725,164 @@
             "update": "Update Workflow",
             "create": "Create Workflow"
         }
+    },
+    "newsletters": {
+        "nav": {
+            "newsletters": "Newsletters"
+        },
+        "index": {
+            "title": "Newsletters",
+            "new": "New newsletter",
+            "tabs": {
+                "drafts": "Drafts",
+                "scheduled": "Scheduled",
+                "sent": "Sent"
+            },
+            "empty": {
+                "drafts": "No drafts yet.",
+                "scheduled": "No scheduled sends.",
+                "sent": "No newsletters sent yet."
+            },
+            "columns": {
+                "subject": "Subject",
+                "list": "List",
+                "status": "Status",
+                "scheduled": "Scheduled",
+                "sent": "Sent",
+                "recipients": "Recipients"
+            }
+        },
+        "compose": {
+            "title": "New newsletter",
+            "subject": "Subject",
+            "from_name": "From name",
+            "from_email": "From email",
+            "reply_to": "Reply-To",
+            "list": "Target list",
+            "schedule": "Schedule send",
+            "schedule_at": "Send at",
+            "template": "Start from template",
+            "body": "Body (Markdown)",
+            "preview": "Preview",
+            "actions": {
+                "save_draft": "Save draft",
+                "test_send": "Send test to me",
+                "schedule": "Schedule",
+                "send_now": "Send now"
+            },
+            "mail_not_configured": "Configure outbound mail before sending newsletters."
+        },
+        "detail": {
+            "tabs": {
+                "overview": "Overview",
+                "deliveries": "Deliveries",
+                "analytics": "Analytics"
+            },
+            "status": {
+                "draft": "Draft",
+                "scheduled": "Scheduled",
+                "sending": "Sending",
+                "sent": "Sent",
+                "paused": "Paused",
+                "failed": "Failed"
+            },
+            "actions": {
+                "edit": "Edit",
+                "pause": "Pause",
+                "resume": "Resume",
+                "duplicate": "Duplicate"
+            }
+        },
+        "deliveries": {
+            "columns": {
+                "contact": "Contact",
+                "status": "Status",
+                "sent_at": "Sent",
+                "opened_at": "Opened",
+                "clicked_at": "Last clicked",
+                "bounce_reason": "Bounce reason"
+            },
+            "status": {
+                "pending": "Pending",
+                "queued": "Queued",
+                "sent": "Sent",
+                "bounced": "Bounced",
+                "complained": "Complained",
+                "suppressed": "Suppressed",
+                "failed": "Failed"
+            },
+            "filter": "Filter by status",
+            "export": "Export CSV"
+        },
+        "analytics": {
+            "tiles": {
+                "sent": "Sent",
+                "delivered": "Delivered",
+                "opened": "Opened",
+                "clicked": "Clicked",
+                "bounced": "Bounced"
+            },
+            "top_clicked": "Top clicked URLs"
+        },
+        "lists": {
+            "title": "Lists",
+            "new": "New list",
+            "kind": {
+                "static": "Static",
+                "dynamic": "Dynamic"
+            },
+            "columns": {
+                "name": "Name",
+                "kind": "Kind",
+                "members": "Members",
+                "opted_out": "Opted out"
+            },
+            "create": {
+                "static_help": "Manually add contacts or import a CSV.",
+                "dynamic_help": "Saved filter that re-evaluates on every send."
+            },
+            "members": {
+                "add": "Add contact",
+                "remove": "Remove",
+                "import_csv": "Import CSV"
+            },
+            "filter_builder": {
+                "matches": "{count} contacts match"
+            }
+        },
+        "templates": {
+            "title": "Templates",
+            "new": "New template",
+            "columns": {
+                "name": "Name",
+                "theme": "Theme",
+                "last_used": "Last used"
+            },
+            "theme": "Theme",
+            "subject_template": "Default subject",
+            "body": "Body (Markdown)"
+        },
+        "settings": {
+            "title": "Newsletter settings",
+            "default_from": "Default From address",
+            "default_reply_to": "Default Reply-To",
+            "default_theme": "Default theme",
+            "rate_limit": "Rate limit (sends per minute)",
+            "batch_size": "Dispatcher batch size",
+            "tracking_enabled": "Enable open & click tracking",
+            "tracking_help": "When off, pixel and click-rewriting are skipped. Bounces and complaints from your ESP still update delivery status."
+        },
+        "merge_fields": {
+            "label": "Insert merge field",
+            "contact_name": "Contact's full name",
+            "contact_first_name": "Contact's first name",
+            "contact_email": "Contact's email",
+            "unsubscribe_url": "Unsubscribe URL",
+            "view_in_browser_url": "View-in-browser URL"
+        },
+        "permissions": {
+            "no_manage": "You need the newsletters.manage permission to view this page.",
+            "no_send": "You need the newsletters.send permission to send or schedule."
+        }
     }
 }
diff --git a/src/pages/Admin/Newsletters/Compose.vue b/src/pages/Admin/Newsletters/Compose.vue
new file mode 100644
index 0000000..3460081
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Compose.vue
@@ -0,0 +1,184 @@
+<template>
+    <EscalatedLayout title="Newsletters">
+        <div class="compose">
+            <div v-if="!mailConfigured" class="compose__banner">
+                {{ $t('newsletters.compose.mail_not_configured') }}
+            </div>
+
+            <header class="compose__header">
+                <h1>{{ $t('newsletters.compose.title') }}</h1>
+                <div class="compose__actions">
+                    <button type="button" @click="save('draft')">
+                        {{ $t('newsletters.compose.actions.save_draft') }}
+                    </button>
+                    <button type="button" @click="testSend">
+                        {{ $t('newsletters.compose.actions.test_send') }}
+                    </button>
+                    <template v-if="canSend">
+                        <button type="button" :disabled="!mailConfigured || !form.scheduled_at" @click="schedule">
+                            {{ $t('newsletters.compose.actions.schedule') }}
+                        </button>
+                        <button type="button" class="button--primary" :disabled="!mailConfigured" @click="sendNow">
+                            {{ $t('newsletters.compose.actions.send_now') }}
+                        </button>
+                    </template>
+                </div>
+            </header>
+
+            <div class="compose__panes">
+                <section class="compose__metadata">
+                    <label>
+                        {{ $t('newsletters.compose.subject') }}
+                        <input v-model="form.subject" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.from_name') }}
+                        <input v-model="form.from_name" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.from_email') }}
+                        <input v-model="form.from_email" type="email" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.reply_to') }}
+                        <input v-model="form.reply_to" type="email" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.list') }}
+                        <select v-model="form.target_list_id">
+                            <option v-for="l in lists" :key="l.id" :value="l.id">
+                                {{ l.name }} ({{ l.member_count }})
+                            </option>
+                        </select>
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.template') }}
+                        <select v-model="form.template_id">
+                            <option :value="null">— none —</option>
+                            <option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
+                        </select>
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.schedule_at') }}
+                        <input v-model="form.scheduled_at" type="datetime-local" />
+                    </label>
+                </section>
+
+                <section class="compose__editor">
+                    <div class="compose__editor-toolbar">
+                        <MergeFieldDropdown @insert="insertField" />
+                    </div>
+                    <MarkdownEditor ref="editorRef" v-model="form.body_markdown" />
+                </section>
+
+                <section class="compose__preview">
+                    <PreviewIframe :html="previewHtml" :loading="previewLoading" />
+                </section>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import MarkdownEditor from '../../../components/admin/newsletters/MarkdownEditor.vue';
+import MergeFieldDropdown from '../../../components/admin/newsletters/MergeFieldDropdown.vue';
+import PreviewIframe from '../../../components/admin/newsletters/PreviewIframe.vue';
+import { reactive, ref, toRef } from 'vue';
+import { router } from '@inertiajs/vue3';
+import { usePreview } from './usePreview.js';
+
+const props = defineProps({
+    lists: { type: Array, required: true },
+    templates: { type: Array, required: true },
+    themes: { type: Array, required: true },
+    mailConfigured: { type: Boolean, required: true },
+    canSend: { type: Boolean, required: true },
+    defaultFromEmail: { type: String, default: '' },
+    defaultReplyTo: { type: String, default: '' },
+    defaultTheme: { type: String, default: 'default' },
+});
+
+const form = reactive({
+    subject: '',
+    from_name: '',
+    from_email: props.defaultFromEmail,
+    reply_to: props.defaultReplyTo,
+    target_list_id: props.lists[0]?.id ?? null,
+    template_id: null,
+    theme: props.defaultTheme,
+    body_markdown: '',
+    scheduled_at: '',
+});
+
+const editorRef = ref(null);
+const { html: previewHtml, loading: previewLoading } = usePreview(toRef(form), '/admin/newsletters/preview');
+
+function insertField(path) {
+    editorRef.value?.insertMergeField(path);
+}
+function save(status) {
+    router.post('/admin/newsletters', { ...form, status });
+}
+function testSend() {
+    router.post('/admin/newsletters/test', form);
+}
+function schedule() {
+    save('scheduled');
+}
+function sendNow() {
+    save('sending');
+}
+</script>
+
+<style scoped>
+.compose__banner {
+    background: #fef3c7;
+    padding: 12px 16px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+}
+.compose__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.compose__actions {
+    display: flex;
+    gap: 8px;
+}
+.compose__panes {
+    display: grid;
+    grid-template-columns: 280px 1fr 1fr;
+    gap: 16px;
+    align-items: start;
+}
+.compose__metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.compose__metadata label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+}
+.compose__metadata input,
+.compose__metadata select {
+    padding: 8px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    font-size: 14px;
+    color: var(--escalated-text, #0f172a);
+}
+.compose__editor-toolbar {
+    margin-bottom: 8px;
+}
+.compose__preview {
+    height: 100%;
+    min-height: 480px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Edit.vue b/src/pages/Admin/Newsletters/Edit.vue
new file mode 100644
index 0000000..4e42b57
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Edit.vue
@@ -0,0 +1,24 @@
+<template>
+    <Compose v-bind="composeProps" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Compose from './Compose.vue';
+
+const props = defineProps({
+    newsletter: { type: Object, required: true },
+    lists: { type: Array, required: true },
+    templates: { type: Array, required: true },
+    themes: { type: Array, required: true },
+    mailConfigured: { type: Boolean, required: true },
+    canSend: { type: Boolean, required: true },
+});
+
+const composeProps = computed(() => ({
+    ...props,
+    defaultFromEmail: props.newsletter.from_email,
+    defaultReplyTo: props.newsletter.reply_to,
+    defaultTheme: props.newsletter.theme,
+}));
+</script>
diff --git a/src/pages/Admin/Newsletters/Index.vue b/src/pages/Admin/Newsletters/Index.vue
new file mode 100644
index 0000000..450db96
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Index.vue
@@ -0,0 +1,142 @@
+<template>
+    <EscalatedLayout title="Newsletters">
+        <div class="newsletters-index">
+            <header>
+                <h1>{{ $t('newsletters.index.title') }}</h1>
+                <Link href="/admin/newsletters/new" class="button button--primary">
+                    {{ $t('newsletters.index.new') }}
+                </Link>
+            </header>
+            <nav class="newsletters-index__tabs">
+                <Link
+                    v-for="t in tabs"
+                    :key="t.key"
+                    :href="`/admin/newsletters?tab=${t.key}`"
+                    :class="{ active: tab === t.key }"
+                >
+                    {{ t.label }}
+                </Link>
+            </nav>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Subject</th>
+                        <th>List</th>
+                        <th>Status</th>
+                        <th>Scheduled</th>
+                        <th>Sent</th>
+                        <th>Recipients</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-if="!filtered.length">
+                        <td colspan="6" class="empty">{{ emptyMessage }}</td>
+                    </tr>
+                    <tr v-for="n in filtered" :key="n.id">
+                        <td>
+                            <Link :href="`/admin/newsletters/${n.id}`">{{ n.subject }}</Link>
+                        </td>
+                        <td>{{ n.target_list.name }}</td>
+                        <td>
+                            <span :class="`status status--${n.status}`">{{ n.status }}</span>
+                        </td>
+                        <td>{{ n.scheduled_at ? new Date(n.scheduled_at).toLocaleString() : '—' }}</td>
+                        <td>{{ n.sent_at ? new Date(n.sent_at).toLocaleString() : '—' }}</td>
+                        <td>{{ n.summary_total ?? '—' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    newsletters: { type: Array, required: true },
+    tab: { type: String, default: 'drafts' },
+});
+
+const tabs = [
+    { key: 'drafts', label: 'Drafts', statuses: ['draft'] },
+    { key: 'scheduled', label: 'Scheduled', statuses: ['scheduled', 'sending', 'paused'] },
+    { key: 'sent', label: 'Sent', statuses: ['sent', 'failed'] },
+];
+
+const filtered = computed(() => {
+    const active = tabs.find((t) => t.key === props.tab) ?? tabs[0];
+    return props.newsletters.filter((n) => active.statuses.includes(n.status));
+});
+
+const emptyMessage = computed(() => {
+    if (props.tab === 'scheduled') return 'No scheduled sends.';
+    if (props.tab === 'sent') return 'No newsletters sent yet.';
+    return 'No drafts yet.';
+});
+</script>
+
+<style scoped>
+.newsletters-index header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.newsletters-index__tabs {
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    margin-bottom: 12px;
+}
+.newsletters-index__tabs a {
+    padding: 8px 4px;
+    color: var(--escalated-text-muted, #64748b);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+}
+.newsletters-index__tabs a.active {
+    color: var(--escalated-text, #0f172a);
+    border-bottom-color: var(--escalated-accent, #2563eb);
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    text-align: left;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.empty {
+    color: var(--escalated-text-muted, #64748b);
+    text-align: center;
+    padding: 32px;
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--draft {
+    background: #f1f5f9;
+}
+.status--scheduled,
+.status--sending {
+    background: #e0f2fe;
+}
+.status--sent {
+    background: #dcfce7;
+}
+.status--paused {
+    background: #fef3c7;
+}
+.status--failed {
+    background: #fee2e2;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Lists/Create.vue b/src/pages/Admin/Newsletters/Lists/Create.vue
new file mode 100644
index 0000000..db17f7d
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Lists/Create.vue
@@ -0,0 +1,64 @@
+<template>
+    <EscalatedLayout title="New list">
+        <form class="lists-create" @submit.prevent="submit">
+            <h1>{{ $t('newsletters.lists.new') }}</h1>
+            <label>
+                Name
+                <input v-model="form.name" required />
+            </label>
+            <label>
+                Description
+                <textarea v-model="form.description" />
+            </label>
+            <fieldset>
+                <legend>Kind</legend>
+                <label class="radio">
+                    <input v-model="form.kind" type="radio" value="static" />
+                    {{ $t('newsletters.lists.kind.static') }}
+                </label>
+                <p class="help">{{ $t('newsletters.lists.create.static_help') }}</p>
+                <label class="radio">
+                    <input v-model="form.kind" type="radio" value="dynamic" />
+                    {{ $t('newsletters.lists.kind.dynamic') }}
+                </label>
+                <p class="help">{{ $t('newsletters.lists.create.dynamic_help') }}</p>
+            </fieldset>
+            <button type="submit">Create</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { reactive } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const form = reactive({ name: '', description: '', kind: 'static' });
+function submit() {
+    router.post('/admin/newsletters/lists', form);
+}
+</script>
+
+<style scoped>
+.lists-create {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 480px;
+}
+.lists-create label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.lists-create label.radio {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+.help {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+    margin: 0 0 8px 24px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Lists/Index.vue b/src/pages/Admin/Newsletters/Lists/Index.vue
new file mode 100644
index 0000000..69f3965
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Lists/Index.vue
@@ -0,0 +1,59 @@
+<template>
+    <EscalatedLayout title="Lists">
+        <div class="lists-index">
+            <header>
+                <h1>{{ $t('newsletters.lists.title') }}</h1>
+                <Link href="/admin/newsletters/lists/new" class="button button--primary">
+                    {{ $t('newsletters.lists.new') }}
+                </Link>
+            </header>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Kind</th>
+                        <th>Members</th>
+                        <th>Opted out</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="l in lists" :key="l.id">
+                        <td>
+                            <Link :href="`/admin/newsletters/lists/${l.id}`">{{ l.name }}</Link>
+                        </td>
+                        <td>{{ l.kind }}</td>
+                        <td>{{ l.member_count }}</td>
+                        <td>{{ l.opted_out_count }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({ lists: { type: Array, required: true } });
+</script>
+
+<style scoped>
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    text-align: left;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Lists/Show.vue b/src/pages/Admin/Newsletters/Lists/Show.vue
new file mode 100644
index 0000000..0df1c9e
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Lists/Show.vue
@@ -0,0 +1,53 @@
+<template>
+    <EscalatedLayout title="List">
+        <div class="lists-show">
+            <header>
+                <h1>{{ list.name }}</h1>
+                <div class="lists-show__meta">
+                    {{ list.kind }} list · {{ list.member_count }} members · {{ list.opted_out_count }} opted out
+                </div>
+            </header>
+            <section v-if="list.kind === 'static'">
+                <ListMemberTable :members="members.data" @remove="onRemove" />
+            </section>
+            <section v-else>
+                <DynamicFilterBuilder
+                    :model-value="list.filter_json ?? { rules: [] }"
+                    :match-count="matchCount"
+                    @update:model-value="onFilterChange"
+                />
+            </section>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import ListMemberTable from '../../../../components/admin/newsletters/ListMemberTable.vue';
+import DynamicFilterBuilder from '../../../../components/admin/newsletters/DynamicFilterBuilder.vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    list: { type: Object, required: true },
+    members: { type: Object, required: true },
+    matchCount: { type: Number, default: 0 },
+});
+
+function onRemove(contactId) {
+    router.delete(`/admin/newsletters/lists/${props.list.id}/members/${contactId}`);
+}
+function onFilterChange(filter) {
+    router.put(`/admin/newsletters/lists/${props.list.id}`, { filter_json: filter });
+}
+</script>
+
+<style scoped>
+header {
+    margin-bottom: 16px;
+}
+.lists-show__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 13px;
+    margin-top: 4px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Settings.vue b/src/pages/Admin/Newsletters/Settings.vue
new file mode 100644
index 0000000..c53d691
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Settings.vue
@@ -0,0 +1,85 @@
+<template>
+    <EscalatedLayout title="Newsletter settings">
+        <form class="settings" @submit.prevent="save">
+            <h1>{{ $t('newsletters.settings.title') }}</h1>
+            <label>
+                {{ $t('newsletters.settings.default_from') }}
+                <input v-model="form.default_from" name="default_from" type="email" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.default_reply_to') }}
+                <input v-model="form.default_reply_to" name="default_reply_to" type="email" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.default_theme') }}
+                <select v-model="form.default_theme" name="default_theme">
+                    <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+                </select>
+            </label>
+            <label>
+                {{ $t('newsletters.settings.rate_limit') }}
+                <input v-model.number="form.rate_limit_per_minute" type="number" min="1" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.batch_size') }}
+                <input v-model.number="form.batch_size" type="number" min="1" />
+            </label>
+            <label class="checkbox">
+                <input v-model="form.tracking_enabled" name="tracking_enabled" type="checkbox" />
+                {{ $t('newsletters.settings.tracking_enabled') }}
+            </label>
+            <p class="help">{{ $t('newsletters.settings.tracking_help') }}</p>
+            <button type="submit">Save</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { reactive } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    settings: { type: Object, required: true },
+    themes: { type: Array, required: true },
+});
+
+const form = reactive({ ...props.settings });
+function save() {
+    router.put('/admin/newsletters/settings', form);
+}
+</script>
+
+<style scoped>
+.settings {
+    max-width: 480px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.settings label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+}
+.settings label.checkbox {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--escalated-text, #0f172a);
+}
+.settings input,
+.settings select {
+    padding: 8px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    font-size: 14px;
+}
+.help {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Show.vue b/src/pages/Admin/Newsletters/Show.vue
new file mode 100644
index 0000000..0e100ee
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Show.vue
@@ -0,0 +1,140 @@
+<template>
+    <EscalatedLayout title="Newsletter">
+        <div class="show">
+            <header>
+                <div>
+                    <h1>{{ newsletter.subject }}</h1>
+                    <div class="show__meta">
+                        From
+                        {{
+                            newsletter.from_name
+                                ? `${newsletter.from_name} <${newsletter.from_email}>`
+                                : newsletter.from_email
+                        }}
+                        → {{ newsletter.target_list.name }}
+                    </div>
+                </div>
+                <div class="show__status">
+                    <span :class="`status status--${newsletter.status}`">{{ newsletter.status }}</span>
+                </div>
+            </header>
+
+            <nav class="show__tabs">
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=overview`"
+                    :class="{ active: tab === 'overview' }"
+                >
+                    Overview
+                </Link>
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=deliveries`"
+                    :class="{ active: tab === 'deliveries' }"
+                >
+                    Deliveries
+                </Link>
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=analytics`"
+                    :class="{ active: tab === 'analytics' }"
+                >
+                    Analytics
+                </Link>
+            </nav>
+
+            <section v-if="tab === 'overview'">
+                <SummaryTiles :summary="summary" />
+            </section>
+
+            <section v-else-if="tab === 'deliveries'">
+                <DeliveriesTable :rows="deliveries.data" @filter="onFilter" @export="onExport" />
+            </section>
+
+            <section v-else-if="tab === 'analytics'">
+                <AnalyticsTiles :summary="summary" :top-clicks="topClicks" />
+            </section>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import SummaryTiles from '../../../components/admin/newsletters/SummaryTiles.vue';
+import DeliveriesTable from '../../../components/admin/newsletters/DeliveriesTable.vue';
+import AnalyticsTiles from '../../../components/admin/newsletters/AnalyticsTiles.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    newsletter: { type: Object, required: true },
+    deliveries: { type: Object, required: true },
+    topClicks: { type: Array, default: () => [] },
+    tab: { type: String, default: 'overview' },
+});
+
+const summary = computed(() => ({
+    total: props.newsletter.summary_total ?? 0,
+    sent: props.newsletter.summary_sent ?? 0,
+    opened: props.newsletter.summary_opened ?? 0,
+    clicked: props.newsletter.summary_clicked ?? 0,
+    bounced: props.newsletter.summary_bounced ?? 0,
+    complained: props.newsletter.summary_complained ?? 0,
+}));
+
+function onFilter(status) {
+    router.get(`/admin/newsletters/${props.newsletter.id}?tab=deliveries&status=${status}`);
+}
+function onExport() {
+    window.location.href = `/admin/newsletters/${props.newsletter.id}/deliveries.csv`;
+}
+</script>
+
+<style scoped>
+.show header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+}
+.show__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 14px;
+    margin-top: 4px;
+}
+.show__tabs {
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    margin-bottom: 16px;
+}
+.show__tabs a {
+    padding: 8px 4px;
+    color: var(--escalated-text-muted, #64748b);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+}
+.show__tabs a.active {
+    color: var(--escalated-text, #0f172a);
+    border-bottom-color: var(--escalated-accent, #2563eb);
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--draft {
+    background: #f1f5f9;
+}
+.status--scheduled,
+.status--sending {
+    background: #e0f2fe;
+}
+.status--sent {
+    background: #dcfce7;
+}
+.status--paused {
+    background: #fef3c7;
+}
+.status--failed {
+    background: #fee2e2;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Templates/Create.vue b/src/pages/Admin/Newsletters/Templates/Create.vue
new file mode 100644
index 0000000..05dbe09
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Templates/Create.vue
@@ -0,0 +1,11 @@
+<template>
+    <TemplateShow :template="emptyTemplate" :themes="themes" :is-new="true" />
+</template>
+
+<script setup>
+import TemplateShow from './Show.vue';
+
+defineProps({ themes: { type: Array, required: true } });
+
+const emptyTemplate = { id: null, name: '', theme: 'default', subject_template: '', body_markdown: '' };
+</script>
diff --git a/src/pages/Admin/Newsletters/Templates/Index.vue b/src/pages/Admin/Newsletters/Templates/Index.vue
new file mode 100644
index 0000000..6aecb8b
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Templates/Index.vue
@@ -0,0 +1,54 @@
+<template>
+    <EscalatedLayout title="Templates">
+        <div class="templates-index">
+            <header>
+                <h1>{{ $t('newsletters.templates.title') }}</h1>
+                <Link href="/admin/newsletters/templates/new" class="button button--primary">
+                    {{ $t('newsletters.templates.new') }}
+                </Link>
+            </header>
+            <div class="templates-index__grid">
+                <Link v-for="t in templates" :key="t.id" :href="`/admin/newsletters/templates/${t.id}`" class="card">
+                    <h3>{{ t.name }}</h3>
+                    <div class="card__meta">Theme: {{ t.theme }}</div>
+                    <div class="card__meta">Updated: {{ new Date(t.updated_at).toLocaleDateString() }}</div>
+                </Link>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({ templates: { type: Array, required: true } });
+</script>
+
+<style scoped>
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.templates-index__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 12px;
+}
+.card {
+    display: block;
+    padding: 16px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 8px;
+    background: white;
+    text-decoration: none;
+    color: inherit;
+}
+.card__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+    margin-top: 4px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/Templates/Show.vue b/src/pages/Admin/Newsletters/Templates/Show.vue
new file mode 100644
index 0000000..926b1d3
--- /dev/null
+++ b/src/pages/Admin/Newsletters/Templates/Show.vue
@@ -0,0 +1,65 @@
+<template>
+    <EscalatedLayout :title="isNew ? 'New template' : template.name">
+        <form class="templates-show" @submit.prevent="save">
+            <header>
+                <h1>{{ isNew ? $t('newsletters.templates.new') : template.name }}</h1>
+            </header>
+            <label>
+                Name
+                <input v-model="form.name" required />
+            </label>
+            <label>
+                {{ $t('newsletters.templates.theme') }}
+                <select v-model="form.theme">
+                    <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+                </select>
+            </label>
+            <label>
+                {{ $t('newsletters.templates.subject_template') }}
+                <input v-model="form.subject_template" />
+            </label>
+            <div class="editor-section">
+                <div class="editor-toolbar"><MergeFieldDropdown @insert="onInsert" /></div>
+                <MarkdownEditor ref="editorRef" v-model="form.body_markdown" />
+            </div>
+            <button type="submit">Save</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import MarkdownEditor from '../../../../components/admin/newsletters/MarkdownEditor.vue';
+import MergeFieldDropdown from '../../../../components/admin/newsletters/MergeFieldDropdown.vue';
+import { reactive, ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    template: { type: Object, required: true },
+    themes: { type: Array, required: true },
+    isNew: { type: Boolean, default: false },
+});
+
+const form = reactive({ ...props.template });
+const editorRef = ref(null);
+
+function save() {
+    if (props.isNew) router.post('/admin/newsletters/templates', form);
+    else router.put(`/admin/newsletters/templates/${props.template.id}`, form);
+}
+function onInsert(path) {
+    editorRef.value?.insertMergeField(path);
+}
+</script>
+
+<style scoped>
+.templates-show {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 800px;
+}
+.editor-toolbar {
+    margin-bottom: 8px;
+}
+</style>
diff --git a/src/pages/Admin/Newsletters/usePreview.js b/src/pages/Admin/Newsletters/usePreview.js
new file mode 100644
index 0000000..e0b077e
--- /dev/null
+++ b/src/pages/Admin/Newsletters/usePreview.js
@@ -0,0 +1,44 @@
+import { ref, watch } from 'vue';
+
+/**
+ * Debounced HTTP preview composable for the newsletter compose form.
+ *
+ * @param {import('vue').Ref<object>} formRef — reactive form snapshot to POST as the preview payload
+ * @param {string} endpoint — POST URL that returns `{ html: string }`
+ */
+export function usePreview(formRef, endpoint) {
+    const html = ref('<p>(empty)</p>');
+    const loading = ref(false);
+    let timer = null;
+
+    watch(
+        formRef,
+        () => {
+            clearTimeout(timer);
+            loading.value = true;
+            timer = setTimeout(async () => {
+                try {
+                    const res = await fetch(endpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                        body: JSON.stringify(formRef.value),
+                    });
+                    if (res.ok) {
+                        const data = await res.json();
+                        html.value = data.html;
+                    }
+                } catch {
+                    // Swallow — preview is best-effort
+                } finally {
+                    loading.value = false;
+                }
+            }, 500);
+        },
+        { deep: true, immediate: true },
+    );
+
+    return { html, loading };
+}
diff --git a/tests/components/admin/newsletters/AnalyticsTiles.test.js b/tests/components/admin/newsletters/AnalyticsTiles.test.js
new file mode 100644
index 0000000..1c725b2
--- /dev/null
+++ b/tests/components/admin/newsletters/AnalyticsTiles.test.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AnalyticsTiles from '../../../../src/components/admin/newsletters/AnalyticsTiles.vue';
+
+describe('AnalyticsTiles', () => {
+    it('renders summary tiles and top-clicked URL list', () => {
+        const wrapper = mount(AnalyticsTiles, {
+            props: {
+                summary: { total: 100, sent: 100, opened: 50, clicked: 20, bounced: 1, complained: 0 },
+                topClicks: [
+                    { url: 'https://example.com/a', clicks: 12 },
+                    { url: 'https://example.com/b', clicks: 5 },
+                ],
+            },
+        });
+        expect(wrapper.text()).toContain('https://example.com/a');
+        expect(wrapper.text()).toContain('12');
+    });
+
+    it('omits the top-clicks section when topClicks is empty', () => {
+        const wrapper = mount(AnalyticsTiles, {
+            props: {
+                summary: { total: 0, sent: 0, opened: 0, clicked: 0, bounced: 0, complained: 0 },
+                topClicks: [],
+            },
+        });
+        expect(wrapper.find('.analytics-tiles__top-clicks').exists()).toBe(false);
+    });
+});
diff --git a/tests/components/admin/newsletters/DeliveriesTable.test.js b/tests/components/admin/newsletters/DeliveriesTable.test.js
new file mode 100644
index 0000000..44fc017
--- /dev/null
+++ b/tests/components/admin/newsletters/DeliveriesTable.test.js
@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DeliveriesTable from '../../../../src/components/admin/newsletters/DeliveriesTable.vue';
+
+const rows = [
+    {
+        id: 1,
+        contact: { name: 'Maria', email: 'maria@example.com' },
+        status: 'sent',
+        sent_at: '2026-05-19T12:00:00Z',
+        opened_at: '2026-05-19T13:00:00Z',
+        last_clicked_at: null,
+        bounce_reason: null,
+    },
+    {
+        id: 2,
+        contact: { name: null, email: 'x@example.com' },
+        status: 'bounced',
+        sent_at: '2026-05-19T12:00:00Z',
+        opened_at: null,
+        last_clicked_at: null,
+        bounce_reason: '550 mailbox not found',
+    },
+];
+
+describe('DeliveriesTable', () => {
+    it('renders all delivery rows', () => {
+        const wrapper = mount(DeliveriesTable, { props: { rows } });
+        expect(wrapper.text()).toContain('maria@example.com');
+        expect(wrapper.text()).toContain('x@example.com');
+        expect(wrapper.text()).toContain('550 mailbox not found');
+    });
+
+    it('emits filter on status filter change', async () => {
+        const wrapper = mount(DeliveriesTable, { props: { rows } });
+        await wrapper.find('select.deliveries-table__filter').setValue('bounced');
+        expect(wrapper.emitted('filter')[0]).toEqual(['bounced']);
+    });
+
+    it('emits export on export button click', async () => {
+        const wrapper = mount(DeliveriesTable, { props: { rows } });
+        await wrapper.find('button.deliveries-table__export').trigger('click');
+        expect(wrapper.emitted('export')).toHaveLength(1);
+    });
+});
diff --git a/tests/components/admin/newsletters/DynamicFilterBuilder.test.js b/tests/components/admin/newsletters/DynamicFilterBuilder.test.js
new file mode 100644
index 0000000..62b12b5
--- /dev/null
+++ b/tests/components/admin/newsletters/DynamicFilterBuilder.test.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DynamicFilterBuilder from '../../../../src/components/admin/newsletters/DynamicFilterBuilder.vue';
+
+describe('DynamicFilterBuilder', () => {
+    it('renders the matches counter', () => {
+        const wrapper = mount(DynamicFilterBuilder, {
+            props: { modelValue: { rules: [] }, matchCount: 42 },
+        });
+        expect(wrapper.text()).toContain('42 contacts match');
+    });
+
+    it('emits update:modelValue when JSON is edited', async () => {
+        const wrapper = mount(DynamicFilterBuilder, {
+            props: { modelValue: { rules: [] }, matchCount: 0 },
+        });
+        const newValue = JSON.stringify({ rules: [{ field: 'email', op: 'contains', value: '@' }] });
+        await wrapper.find('textarea').setValue(newValue);
+        expect(wrapper.emitted('update:modelValue')[0][0].rules).toHaveLength(1);
+    });
+
+    it('ignores invalid JSON edits without emitting', async () => {
+        const wrapper = mount(DynamicFilterBuilder, {
+            props: { modelValue: { rules: [] }, matchCount: 0 },
+        });
+        await wrapper.find('textarea').setValue('{invalid');
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+    });
+});
diff --git a/tests/components/admin/newsletters/ListMemberTable.test.js b/tests/components/admin/newsletters/ListMemberTable.test.js
new file mode 100644
index 0000000..d1cc2a2
--- /dev/null
+++ b/tests/components/admin/newsletters/ListMemberTable.test.js
@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ListMemberTable from '../../../../src/components/admin/newsletters/ListMemberTable.vue';
+
+const members = [
+    { id: 1, contact: { id: 10, name: 'A', email: 'a@example.com' }, added_at: '2026-05-19T00:00:00Z' },
+    { id: 2, contact: { id: 11, name: 'B', email: 'b@example.com' }, added_at: '2026-05-19T00:00:00Z' },
+];
+
+describe('ListMemberTable', () => {
+    it('renders all members', () => {
+        const wrapper = mount(ListMemberTable, { props: { members } });
+        expect(wrapper.text()).toContain('a@example.com');
+        expect(wrapper.text()).toContain('b@example.com');
+    });
+
+    it('emits remove with contact id on Remove click', async () => {
+        const wrapper = mount(ListMemberTable, { props: { members } });
+        await wrapper.find('[data-action="remove"][data-contact-id="10"]').trigger('click');
+        expect(wrapper.emitted('remove')[0]).toEqual([10]);
+    });
+});
diff --git a/tests/components/admin/newsletters/MarkdownEditor.test.js b/tests/components/admin/newsletters/MarkdownEditor.test.js
new file mode 100644
index 0000000..1f6f19d
--- /dev/null
+++ b/tests/components/admin/newsletters/MarkdownEditor.test.js
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MarkdownEditor from '../../../../src/components/admin/newsletters/MarkdownEditor.vue';
+
+describe('MarkdownEditor', () => {
+    it('renders the v-model value', () => {
+        const wrapper = mount(MarkdownEditor, { props: { modelValue: '# Hello' } });
+        expect(wrapper.find('textarea').element.value).toBe('# Hello');
+    });
+
+    it('emits update:modelValue on input', async () => {
+        const wrapper = mount(MarkdownEditor, { props: { modelValue: '' } });
+        await wrapper.find('textarea').setValue('hi');
+        expect(wrapper.emitted('update:modelValue')[0]).toEqual(['hi']);
+    });
+
+    it('inserts merge field at cursor on insertMergeField()', async () => {
+        const wrapper = mount(MarkdownEditor, { props: { modelValue: 'Hello ' } });
+        const ta = wrapper.find('textarea').element;
+        ta.setSelectionRange(6, 6);
+        wrapper.vm.insertMergeField('contact.first_name');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('update:modelValue').at(-1)[0]).toBe('Hello {{ contact.first_name }}');
+    });
+
+    it('falls back to appending when there is no textarea ref', () => {
+        const wrapper = mount(MarkdownEditor, { props: { modelValue: 'existing' } });
+        wrapper.vm.insertMergeField('contact.email');
+        const last = wrapper.emitted('update:modelValue').at(-1)[0];
+        expect(last).toContain('{{ contact.email }}');
+    });
+});
diff --git a/tests/components/admin/newsletters/MergeFieldDropdown.test.js b/tests/components/admin/newsletters/MergeFieldDropdown.test.js
new file mode 100644
index 0000000..2d3bb28
--- /dev/null
+++ b/tests/components/admin/newsletters/MergeFieldDropdown.test.js
@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MergeFieldDropdown from '../../../../src/components/admin/newsletters/MergeFieldDropdown.vue';
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+};
+
+describe('MergeFieldDropdown', () => {
+    it('emits insert with selected path on selection', async () => {
+        const wrapper = mount(MergeFieldDropdown, { global: globalConfig });
+        await wrapper.find('button.merge-field-dropdown__toggle').trigger('click');
+        await wrapper.find('[data-path="contact.first_name"]').trigger('click');
+        expect(wrapper.emitted('insert')[0]).toEqual(['contact.first_name']);
+    });
+
+    it('shows configured metadata keys when provided', async () => {
+        const wrapper = mount(MergeFieldDropdown, {
+            props: { metadataKeys: ['tier', 'plan'] },
+            global: globalConfig,
+        });
+        await wrapper.find('button.merge-field-dropdown__toggle').trigger('click');
+        expect(wrapper.text()).toContain('contact.metadata.tier');
+        expect(wrapper.text()).toContain('contact.metadata.plan');
+    });
+
+    it('closes the menu after selection', async () => {
+        const wrapper = mount(MergeFieldDropdown, { global: globalConfig });
+        await wrapper.find('button.merge-field-dropdown__toggle').trigger('click');
+        expect(wrapper.find('ul.merge-field-dropdown__menu').exists()).toBe(true);
+        await wrapper.find('[data-path="contact.email"]').trigger('click');
+        expect(wrapper.find('ul.merge-field-dropdown__menu').exists()).toBe(false);
+    });
+});
diff --git a/tests/components/admin/newsletters/PreviewIframe.test.js b/tests/components/admin/newsletters/PreviewIframe.test.js
new file mode 100644
index 0000000..dc0a420
--- /dev/null
+++ b/tests/components/admin/newsletters/PreviewIframe.test.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import PreviewIframe from '../../../../src/components/admin/newsletters/PreviewIframe.vue';
+
+describe('PreviewIframe', () => {
+    it('writes the provided HTML into the iframe srcdoc', async () => {
+        const html = '<p>preview body</p>';
+        const wrapper = mount(PreviewIframe, { props: { html } });
+        await flushPromises();
+        expect(wrapper.find('iframe').attributes('srcdoc')).toContain('preview body');
+    });
+
+    it('updates srcdoc when the html prop changes', async () => {
+        const wrapper = mount(PreviewIframe, { props: { html: '<p>a</p>' } });
+        await wrapper.setProps({ html: '<p>b</p>' });
+        await flushPromises();
+        expect(wrapper.find('iframe').attributes('srcdoc')).toContain('<p>b</p>');
+    });
+
+    it('renders a loading state while loading prop is true', () => {
+        const wrapper = mount(PreviewIframe, { props: { html: '', loading: true } });
+        expect(wrapper.find('.preview-iframe__loading').exists()).toBe(true);
+    });
+
+    it('hides loading state when loading is false', () => {
+        const wrapper = mount(PreviewIframe, { props: { html: '<p>x</p>', loading: false } });
+        expect(wrapper.find('.preview-iframe__loading').exists()).toBe(false);
+    });
+});
diff --git a/tests/components/admin/newsletters/SummaryTiles.test.js b/tests/components/admin/newsletters/SummaryTiles.test.js
new file mode 100644
index 0000000..f57e5b2
--- /dev/null
+++ b/tests/components/admin/newsletters/SummaryTiles.test.js
@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import SummaryTiles from '../../../../src/components/admin/newsletters/SummaryTiles.vue';
+
+describe('SummaryTiles', () => {
+    it('renders absolute counts and rate percentages', () => {
+        const wrapper = mount(SummaryTiles, {
+            props: {
+                summary: { total: 1000, sent: 990, opened: 400, clicked: 80, bounced: 10, complained: 1 },
+            },
+        });
+        expect(wrapper.text()).toContain('990');
+        expect(wrapper.text()).toContain('40.4%');
+        expect(wrapper.text()).toContain('8.1%');
+        expect(wrapper.text()).toContain('1.0%');
+    });
+
+    it('shows dashes when summary.sent is zero', () => {
+        const wrapper = mount(SummaryTiles, {
+            props: { summary: { total: 0, sent: 0, opened: 0, clicked: 0, bounced: 0, complained: 0 } },
+        });
+        expect(wrapper.text()).toContain('—');
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Compose.test.js b/tests/pages/Admin/Newsletters/Compose.test.js
new file mode 100644
index 0000000..961c4f9
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Compose.test.js
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Compose from '../../../../src/pages/Admin/Newsletters/Compose.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    router: { post: vi.fn() },
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    usePage: () => ({ props: { escalated: { is_admin: true, prefix: 'support', features: { newsletters: true } } } }),
+}));
+
+vi.mock('../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const lists = [{ id: 1, name: 'All customers', member_count: 1200 }];
+const templates = [];
+const themes = ['default', 'branded'];
+
+beforeEach(() => {
+    vi.stubGlobal(
+        'fetch',
+        vi.fn(async () => ({ ok: true, json: async () => ({ html: '<p>preview</p>' }) })),
+    );
+});
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Compose page', () => {
+    it('renders the three-pane layout', () => {
+        const wrapper = mount(Compose, {
+            props: { lists, templates, themes, mailConfigured: true, canSend: true },
+            global: globalConfig,
+        });
+        expect(wrapper.find('.compose__metadata').exists()).toBe(true);
+        expect(wrapper.find('.compose__editor').exists()).toBe(true);
+        expect(wrapper.find('.compose__preview').exists()).toBe(true);
+    });
+
+    it('shows mail-not-configured banner when mail is unconfigured', () => {
+        const wrapper = mount(Compose, {
+            props: { lists, templates, themes, mailConfigured: false, canSend: true },
+            global: globalConfig,
+        });
+        expect(wrapper.text()).toContain('newsletters.compose.mail_not_configured');
+    });
+
+    it('hides Send Now and Schedule when canSend is false', () => {
+        const wrapper = mount(Compose, {
+            props: { lists, templates, themes, mailConfigured: true, canSend: false },
+            global: globalConfig,
+        });
+        const text = wrapper.text();
+        expect(text).not.toContain('newsletters.compose.actions.send_now');
+        expect(text).not.toContain('newsletters.compose.actions.schedule');
+        expect(text).toContain('newsletters.compose.actions.save_draft');
+        expect(text).toContain('newsletters.compose.actions.test_send');
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Index.test.js b/tests/pages/Admin/Newsletters/Index.test.js
new file mode 100644
index 0000000..0c1f6d5
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Index.test.js
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Index from '../../../../src/pages/Admin/Newsletters/Index.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    usePage: () => ({
+        props: { escalated: { prefix: 'support', is_admin: true, is_agent: true, features: { newsletters: true } } },
+    }),
+}));
+
+vi.mock('../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const newsletters = [
+    {
+        id: 1,
+        subject: 'Welcome',
+        status: 'draft',
+        target_list: { name: 'All customers' },
+        scheduled_at: null,
+        sent_at: null,
+        summary_total: null,
+    },
+    {
+        id: 2,
+        subject: 'Update',
+        status: 'scheduled',
+        target_list: { name: 'All customers' },
+        scheduled_at: '2026-06-01T10:00:00Z',
+        sent_at: null,
+        summary_total: 1200,
+    },
+    {
+        id: 3,
+        subject: 'Announcement',
+        status: 'sent',
+        target_list: { name: 'All customers' },
+        scheduled_at: null,
+        sent_at: '2026-05-01T10:00:00Z',
+        summary_total: 1100,
+    },
+];
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Newsletters Index page', () => {
+    it('shows drafts tab content by default', () => {
+        const wrapper = mount(Index, { props: { newsletters, tab: 'drafts' }, global: globalConfig });
+        expect(wrapper.text()).toContain('Welcome');
+        expect(wrapper.text()).not.toContain('Update');
+    });
+
+    it('renders sent tab with sent items', () => {
+        const wrapper = mount(Index, { props: { newsletters, tab: 'sent' }, global: globalConfig });
+        expect(wrapper.text()).toContain('Announcement');
+        expect(wrapper.text()).not.toContain('Welcome');
+    });
+
+    it('shows empty message when no rows match the tab', () => {
+        const wrapper = mount(Index, { props: { newsletters: [], tab: 'drafts' }, global: globalConfig });
+        expect(wrapper.text()).toContain('No drafts yet.');
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Lists/Show.test.js b/tests/pages/Admin/Newsletters/Lists/Show.test.js
new file mode 100644
index 0000000..dce2820
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Lists/Show.test.js
@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Show from '../../../../../src/pages/Admin/Newsletters/Lists/Show.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    router: { delete: vi.fn(), put: vi.fn() },
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    usePage: () => ({ props: { escalated: { is_admin: true, prefix: 'support' } } }),
+}));
+
+vi.mock('../../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Lists Show', () => {
+    it('shows member table for static lists', () => {
+        const wrapper = mount(Show, {
+            props: {
+                list: {
+                    id: 1,
+                    name: 'All',
+                    kind: 'static',
+                    description: '',
+                    member_count: 2,
+                    opted_out_count: 0,
+                    filter_json: null,
+                },
+                members: {
+                    data: [
+                        {
+                            id: 1,
+                            contact: { id: 10, name: 'A', email: 'a@example.com' },
+                            added_at: '2026-05-19T00:00:00Z',
+                        },
+                    ],
+                    links: [],
+                    meta: {},
+                },
+                matchCount: 0,
+            },
+            global: globalConfig,
+        });
+        expect(wrapper.find('.list-member-table').exists()).toBe(true);
+        expect(wrapper.find('.dynamic-filter-builder').exists()).toBe(false);
+    });
+
+    it('shows filter builder for dynamic lists', () => {
+        const wrapper = mount(Show, {
+            props: {
+                list: {
+                    id: 1,
+                    name: 'Active',
+                    kind: 'dynamic',
+                    description: '',
+                    member_count: 0,
+                    opted_out_count: 0,
+                    filter_json: { rules: [] },
+                },
+                members: { data: [], links: [], meta: {} },
+                matchCount: 42,
+            },
+            global: globalConfig,
+        });
+        expect(wrapper.find('.dynamic-filter-builder').exists()).toBe(true);
+        expect(wrapper.find('.list-member-table').exists()).toBe(false);
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Settings.test.js b/tests/pages/Admin/Newsletters/Settings.test.js
new file mode 100644
index 0000000..36a54b2
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Settings.test.js
@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Settings from '../../../../src/pages/Admin/Newsletters/Settings.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    router: { put: vi.fn() },
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    usePage: () => ({ props: { escalated: { is_admin: true, prefix: 'support' } } }),
+}));
+
+vi.mock('../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Settings page', () => {
+    it('renders all setting fields with current values', () => {
+        const wrapper = mount(Settings, {
+            props: {
+                settings: {
+                    default_from: 'hi@example.com',
+                    default_reply_to: 'replies@example.com',
+                    default_theme: 'branded',
+                    rate_limit_per_minute: 60,
+                    batch_size: 50,
+                    tracking_enabled: true,
+                },
+                themes: ['default', 'branded'],
+            },
+            global: globalConfig,
+        });
+        expect(wrapper.find('input[name="default_from"]').element.value).toBe('hi@example.com');
+        expect(wrapper.find('select[name="default_theme"]').element.value).toBe('branded');
+        expect(wrapper.find('input[name="tracking_enabled"]').element.checked).toBe(true);
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Show.test.js b/tests/pages/Admin/Newsletters/Show.test.js
new file mode 100644
index 0000000..2378e95
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Show.test.js
@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Show from '../../../../src/pages/Admin/Newsletters/Show.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    router: { get: vi.fn() },
+    usePage: () => ({ props: { escalated: { is_admin: true, prefix: 'support', features: { newsletters: true } } } }),
+}));
+
+vi.mock('../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const newsletter = {
+    id: 1,
+    subject: 'Welcome',
+    status: 'sent',
+    from_email: 'a@example.com',
+    from_name: 'Acme',
+    target_list: { name: 'All' },
+    sent_at: '2026-05-19T12:00:00Z',
+    summary_total: 100,
+    summary_sent: 99,
+    summary_opened: 50,
+    summary_clicked: 20,
+    summary_bounced: 1,
+    summary_complained: 0,
+};
+const deliveries = { data: [], links: [], meta: {} };
+const topClicks = [];
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Show page', () => {
+    it('renders overview by default', () => {
+        const wrapper = mount(Show, {
+            props: { newsletter, deliveries, topClicks, tab: 'overview' },
+            global: globalConfig,
+        });
+        expect(wrapper.text()).toContain('Welcome');
+        expect(wrapper.text()).toContain('99');
+    });
+
+    it('shows deliveries table on deliveries tab', () => {
+        const wrapper = mount(Show, {
+            props: { newsletter, deliveries, topClicks, tab: 'deliveries' },
+            global: globalConfig,
+        });
+        expect(wrapper.find('.deliveries-table').exists()).toBe(true);
+    });
+
+    it('shows analytics tiles on analytics tab', () => {
+        const wrapper = mount(Show, {
+            props: { newsletter, deliveries, topClicks, tab: 'analytics' },
+            global: globalConfig,
+        });
+        expect(wrapper.find('.analytics-tiles').exists()).toBe(true);
+    });
+});
diff --git a/tests/pages/Admin/Newsletters/Templates/Show.test.js b/tests/pages/Admin/Newsletters/Templates/Show.test.js
new file mode 100644
index 0000000..7adb908
--- /dev/null
+++ b/tests/pages/Admin/Newsletters/Templates/Show.test.js
@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Show from '../../../../../src/pages/Admin/Newsletters/Templates/Show.vue';
+
+vi.mock('@inertiajs/vue3', () => ({
+    router: { post: vi.fn(), put: vi.fn() },
+    Link: { props: ['href'], template: '<a :href="href"><slot /></a>' },
+    usePage: () => ({ props: { escalated: { is_admin: true, prefix: 'support' } } }),
+}));
+
+vi.mock('../../../../../src/composables/usePluginExtensions', () => ({
+    usePluginExtensions: () => ({ menuItems: { value: [] } }),
+}));
+
+const globalConfig = {
+    mocks: { $t: (key) => key },
+    stubs: { EscalatedLayout: { template: '<div><slot /></div>' } },
+};
+
+describe('Templates Show', () => {
+    it('renders the template name and body for an existing template', () => {
+        const wrapper = mount(Show, {
+            props: {
+                template: {
+                    id: 1,
+                    name: 'Monthly',
+                    theme: 'branded',
+                    subject_template: 'Monthly update',
+                    body_markdown: '# Hi',
+                },
+                themes: ['default', 'branded'],
+                isNew: false,
+            },
+            global: globalConfig,
+        });
+        const inputs = wrapper.findAll('input');
+        expect(inputs[0].element.value).toBe('Monthly');
+        expect(wrapper.find('textarea').element.value).toBe('# Hi');
+    });
+});