diff --git a/e2e/newsletter.spec.ts b/e2e/newsletter.spec.ts
new file mode 100644
index 0000000..1f31a5d
--- /dev/null
+++ b/e2e/newsletter.spec.ts
@@ -0,0 +1,99 @@
+/**
+ * e2e/newsletter.spec.ts
+ *
+ * Acceptance criterion: zero *newsletter-specific* third-party network requests
+ * on /newsletter.
+ *
+ * The test intercepts every request made while the page loads and asserts that
+ * none of them target a cross-origin host *other than* the site's own analytics
+ * (Plausible), which is loaded on every page and was already present before this
+ * feature.  The criterion is that the newsletter signup itself introduces no
+ * additional third-party scripts or resources.
+ *
+ * Allowed origins in preview mode:
+ *   - localhost / 127.0.0.1 (Vite preview server)
+ *   - plausible.io          (site-wide cookieless analytics, pre-existing)
+ *
+ * data:, blob:, and other non-HTTP schemes are ignored.
+ */
+
+import { test, expect } from '@playwright/test';
+
+// Origins that are allowed on every page (pre-existing, not added by newsletter feature).
+const SITE_WIDE_ALLOWED = new Set(['plausible.io']);
+
+test.describe('/newsletter — zero cross-origin requests', () => {
+  test('loads the /newsletter page without any newsletter-specific third-party network requests', async ({
+    page,
+    baseURL,
+  }) => {
+    const crossOriginRequests: string[] = [];
+
+    const allowedHostnames = new Set(['localhost', '127.0.0.1', ...SITE_WIDE_ALLOWED]);
+
+    // Extract the hostname from the base URL so the test is portable.
+    if (baseURL) {
+      try {
+        allowedHostnames.add(new URL(baseURL).hostname);
+      } catch {
+        // ignore malformed baseURL
+      }
+    }
+
+    // Listen to every request the page fires.
+    page.on('request', (request) => {
+      const url = request.url();
+
+      // Ignore non-HTTP schemes (data:, blob:, about:, chrome-extension:, etc.)
+      if (!url.startsWith('http://') && !url.startsWith('https://')) return;
+
+      try {
+        const { hostname } = new URL(url);
+        if (!allowedHostnames.has(hostname)) {
+          crossOriginRequests.push(url);
+        }
+      } catch {
+        // Ignore unparseable URLs
+      }
+    });
+
+    await page.goto('/newsletter', { waitUntil: 'networkidle' });
+
+    // Assert no unexpected cross-origin requests were fired.
+    expect(
+      crossOriginRequests,
+      `Unexpected cross-origin requests detected on /newsletter:\n${crossOriginRequests.join('\n')}`,
+    ).toHaveLength(0);
+  });
+
+  test('renders the newsletter signup form with correct elements', async ({ page }) => {
+    await page.goto('/newsletter');
+
+    // Page heading is present
+    await expect(page.getByRole('heading', { name: /newsletter/i, level: 1 })).toBeVisible();
+
+    // Main page email input (not the footer widget) — identified by its id
+    await expect(page.locator('#newsletter-email')).toBeVisible();
+
+    // Submit button in the main form — scope to the section
+    await expect(page.getByRole('main').getByRole('button', { name: /subscribe/i })).toBeVisible();
+
+    // Privacy note links to /privacy
+    const privacyLink = page.getByRole('main').getByRole('link', { name: /privacy policy/i });
+    await expect(privacyLink).toBeVisible();
+    await expect(privacyLink).toHaveAttribute('href', '/privacy');
+  });
+
+  test('shows inline validation error for an invalid email', async ({ page }) => {
+    await page.goto('/newsletter');
+
+    // Fill the main newsletter form input (not the footer widget)
+    await page.locator('#newsletter-email').fill('not-an-email');
+    await page
+      .getByRole('main')
+      .getByRole('button', { name: /subscribe/i })
+      .click();
+
+    await expect(page.getByRole('alert').first()).toBeVisible();
+  });
+});
diff --git a/package.json b/package.json
index 8ac6ea1..af17847 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "og:generate": "tsx scripts/og.ts",
     "preview": "vite preview",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "test:a11y": "vitest run src/__tests__/a11y.test.tsx",
     "test:a11y:playwright": "playwright test tests/a11y",
     "format": "prettier --write .",
diff --git a/scripts/og.ts b/scripts/og.ts
index fc698a0..51693bc 100644
--- a/scripts/og.ts
+++ b/scripts/og.ts
@@ -74,6 +74,12 @@ const routes: RouteConfig[] = [
     title: 'Blog',
     subtitle: 'Updates, guides, and deep dives from the Wraith team',
   },
+  {
+    slug: 'newsletter',
+    routePath: '/newsletter',
+    title: 'Newsletter',
+    subtitle: 'Mainnet updates, security advisories, and grant news — no tracking',
+  },
 ];
 
 function ogCard({ title, subtitle, chainBadge }: RouteConfig) {
diff --git a/src/App.tsx b/src/App.tsx
index f7cf24a..afc574d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ const Footer = lazy(() => import('./components/Footer'));
 // Lazy load pages
 const Faq = lazy(() => import('./pages/Faq'));
 const Privacy = lazy(() => import('./pages/Privacy'));
+const Newsletter = lazy(() => import('./pages/Newsletter'));
 const UseCases = lazy(() => import('./pages/UseCases'));
 const Stellar = lazy(() => import('./pages/Stellar'));
 const Roadmap = lazy(() => import('./pages/Roadmap'));
diff --git a/src/__tests__/newsletter.test.tsx b/src/__tests__/newsletter.test.tsx
new file mode 100644
index 0000000..d843712
--- /dev/null
+++ b/src/__tests__/newsletter.test.tsx
@@ -0,0 +1,255 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import Newsletter from '../pages/Newsletter';
+import Footer from '../components/Footer';
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * NOTE: react-i18next is not initialised in the Vitest environment, so
+ * t('some.key') returns the raw key string.  All queries below are written
+ * against the rendered HTML rather than translated strings so the suite
+ * remains fast and self-contained.
+ */
+
+function renderNewsletter() {
+  return render(
+    <MemoryRouter>
+      <Newsletter />
+    </MemoryRouter>,
+  );
+}
+
+function renderFooter() {
+  return render(
+    <MemoryRouter>
+      <Footer />
+    </MemoryRouter>,
+  );
+}
+
+// ─── Newsletter page ──────────────────────────────────────────────────────────
+
+describe('Newsletter page', () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        status: 201,
+        json: async () => ({ ok: true }),
+      }),
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the page heading and form elements', () => {
+    renderNewsletter();
+
+    // h1 heading is present (renders the raw i18n key)
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+    // email input is present (identified by its HTML id)
+    expect(document.getElementById('newsletter-email')).toBeInTheDocument();
+    // submit button is present
+    expect(
+      screen.getAllByRole('button', { name: /newsletter\.submit/i }).length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows an error message when submitting an empty email', async () => {
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+    expect(vi.mocked(fetch)).not.toHaveBeenCalled();
+  });
+
+  it('shows an error message when submitting a malformed email', async () => {
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    // Use the input directly via its id
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'not-an-email');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+    expect(vi.mocked(fetch)).not.toHaveBeenCalled();
+  });
+
+  it('calls /api/subscribe with the email on valid submission', async () => {
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    await waitFor(() => {
+      expect(vi.mocked(fetch)).toHaveBeenCalledWith(
+        '/api/subscribe',
+        expect.objectContaining({
+          method: 'POST',
+          body: JSON.stringify({ email: 'test@example.com' }),
+        }),
+      );
+    });
+  });
+
+  it('shows success state after a 201 response', async () => {
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('status')).toBeInTheDocument();
+    // Form should no longer be visible
+    expect(screen.queryByRole('button', { name: /newsletter\.submit/i })).not.toBeInTheDocument();
+  });
+
+  it('shows an "already subscribed" error on 409 response', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: false,
+      status: 409,
+      json: async () => ({ error: 'already_subscribed' }),
+    } as Response);
+
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'existing@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+  });
+
+  it('shows a generic error on 500 response', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      json: async () => ({}),
+    } as Response);
+
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+  });
+
+  it('shows a generic error when fetch throws a network error', async () => {
+    vi.mocked(fetch).mockRejectedValueOnce(new Error('Network error'));
+
+    const user = userEvent.setup();
+    renderNewsletter();
+
+    const emailInput = document.getElementById('newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.submit/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+  });
+
+  it('does not load any third-party scripts or resources', () => {
+    renderNewsletter();
+    // Confirm there are no <script> tags or iframes in the rendered output
+    expect(document.querySelectorAll('script[src]')).toHaveLength(0);
+    expect(document.querySelectorAll('iframe')).toHaveLength(0);
+  });
+
+  it('links to the privacy policy', () => {
+    renderNewsletter();
+    const privacyLink = screen.getByRole('link', { name: /privacy policy/i });
+    expect(privacyLink).toBeInTheDocument();
+    expect(privacyLink).toHaveAttribute('href', '/privacy');
+  });
+});
+
+// ─── Footer newsletter widget ─────────────────────────────────────────────────
+
+describe('Footer NewsletterWidget', () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        status: 201,
+        json: async () => ({ ok: true }),
+      }),
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the newsletter widget with an email input and subscribe button', () => {
+    renderFooter();
+    // The footer widget has id="footer-newsletter-email"
+    expect(document.getElementById('footer-newsletter-email')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /newsletter\.footerwidget\.subscribe/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a link to the /newsletter page', () => {
+    renderFooter();
+    const newsletterLinks = screen
+      .getAllByRole('link')
+      .filter((el) => el.getAttribute('href') === '/newsletter');
+    expect(newsletterLinks.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows a short error message on invalid email submission', async () => {
+    const user = userEvent.setup();
+    renderFooter();
+
+    const emailInput = document.getElementById('footer-newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'bad-email');
+    await user.click(screen.getByRole('button', { name: /newsletter\.footerwidget\.subscribe/i }));
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+    expect(vi.mocked(fetch)).not.toHaveBeenCalled();
+  });
+
+  it('shows success message after successful subscription', async () => {
+    const user = userEvent.setup();
+    renderFooter();
+
+    const emailInput = document.getElementById('footer-newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'user@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.footerwidget\.subscribe/i }));
+
+    expect(await screen.findByRole('status')).toBeInTheDocument();
+  });
+
+  it('treats a 409 (already subscribed) as success to avoid user-enumeration', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: false,
+      status: 409,
+      json: async () => ({ error: 'already_subscribed' }),
+    } as Response);
+
+    const user = userEvent.setup();
+    renderFooter();
+
+    const emailInput = document.getElementById('footer-newsletter-email') as HTMLInputElement;
+    await user.type(emailInput, 'existing@example.com');
+    await user.click(screen.getByRole('button', { name: /newsletter\.footerwidget\.subscribe/i }));
+
+    expect(await screen.findByRole('status')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 54bf1d1..bc4fb6d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
@@ -32,6 +32,120 @@ function normalizeStatus(payload: unknown): StatusState {
   return { label: 'Status unavailable', tone: 'neutral' };
 }
 
+// ─── Newsletter widget ────────────────────────────────────────────────────────
+
+const EMAIL_RE = /^[^\s@]+@[^\s@][^@]*\.[^\s@]+$/;
+type WidgetState = 'idle' | 'submitting' | 'success' | 'error';
+
+function NewsletterWidget() {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [state, setState] = useState<WidgetState>('idle');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const trimmed = email.trim().toLowerCase();
+
+    if (!trimmed || !EMAIL_RE.test(trimmed)) {
+      setState('error');
+      inputRef.current?.focus();
+      return;
+    }
+
+    setState('submitting');
+
+    try {
+      const res = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: trimmed }),
+      });
+
+      // 201 = queued; 409 = already subscribed (treat as success to avoid user-enumeration)
+      if (res.status === 201 || res.status === 409) {
+        setState('success');
+        return;
+      }
+
+      setState('error');
+    } catch {
+      setState('error');
+    }
+  };
+
+  const isSubmitting = state === 'submitting';
+
+  return (
+    <div className="flex max-w-72 flex-col gap-3">
+      <span className="font-mono text-[10px] font-semibold tracking-[1.5px] text-outline">
+        {t('newsletter.footerWidget.label')}
+      </span>
+
+      {state === 'success' ? (
+        <p
+          role="status"
+          aria-live="polite"
+          className="font-body text-[13px] leading-[1.5] text-[#22c55e]"
+        >
+          {t('newsletter.footerWidget.successShort')}
+        </p>
+      ) : (
+        <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-2">
+          <div className="flex">
+            <label htmlFor="footer-newsletter-email" className="sr-only">
+              {t('newsletter.labelEmail')}
+            </label>
+            <input
+              id="footer-newsletter-email"
+              ref={inputRef}
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (state === 'error') setState('idle');
+              }}
+              placeholder={t('newsletter.footerWidget.placeholder')}
+              disabled={isSubmitting}
+              aria-label={t('newsletter.labelEmail')}
+              aria-describedby={state === 'error' ? 'footer-newsletter-error' : undefined}
+              aria-invalid={state === 'error' ? 'true' : undefined}
+              className="min-w-0 flex-1 border border-r-0 border-outline-variant bg-surface-container px-3 py-2 font-body text-[12px] text-on-surface placeholder:text-outline focus:border-outline focus:outline-none disabled:opacity-60"
+            />
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="border border-outline-variant bg-surface-bright px-3 py-2 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-on-surface transition-colors hover:border-outline disabled:cursor-wait disabled:opacity-60"
+            >
+              {isSubmitting
+                ? t('newsletter.footerWidget.subscribing')
+                : t('newsletter.footerWidget.subscribe')}
+            </button>
+          </div>
+
+          {state === 'error' && (
+            <p
+              id="footer-newsletter-error"
+              role="alert"
+              className="font-body text-[11px] text-[#ee7d77]"
+            >
+              {t('newsletter.footerWidget.errorShort')}
+            </p>
+          )}
+        </form>
+      )}
+
+      <Link
+        to="/newsletter"
+        className="font-body text-[11px] text-outline transition-colors hover:text-on-surface-variant"
+      >
+        {t('newsletter.footerWidget.label').toLowerCase()} →
+      </Link>
+    </div>
+  );
+}
+
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export default function Footer() {
@@ -206,6 +320,8 @@ export default function Footer() {
                 <span>{t('footer.acknowledgmentsText')}</span>
               </a>
             </div>
+
+            <NewsletterWidget />
           </div>
         </div>
 
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 31828a2..cd75ad8 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -344,5 +344,28 @@
     "description": "Historias de producción de equipos usando Wraith.",
     "viewAll": "VER TODOS",
     "readMore": "Leer Más"
+  },
+  "newsletter": {
+    "eyebrow": "MANTENTE AL DÍA",
+    "heading": "Boletín",
+    "description": "Actualizaciones de mainnet, avisos de seguridad y noticias de becas — directo a tu bandeja de entrada. Sin rastreo, sin scripts de terceros. Cancela cuando quieras.",
+    "privacyNote": "Doble confirmación. Usamos Buttondown. Sin cookies ni píxeles de seguimiento.",
+    "labelEmail": "Correo electrónico",
+    "placeholder": "tu@ejemplo.com",
+    "submit": "SUSCRIBIRSE",
+    "submitting": "SUSCRIBIENDO…",
+    "successHeading": "Revisa tu bandeja",
+    "successBody": "Enviamos un correo de confirmación. Haz clic en el enlace para completar tu suscripción.",
+    "errorGeneric": "Algo salió mal. Intenta de nuevo.",
+    "errorInvalidEmail": "Ingresa un correo electrónico válido.",
+    "errorAlreadySubscribed": "Este correo ya está suscrito.",
+    "footerWidget": {
+      "label": "BOLETÍN",
+      "placeholder": "tu@email.com",
+      "subscribe": "SUSCRIBIRSE",
+      "subscribing": "…",
+      "successShort": "Revisa tu bandeja",
+      "errorShort": "Intenta de nuevo"
+    }
   }
 }
diff --git a/src/pages/Newsletter.tsx b/src/pages/Newsletter.tsx
new file mode 100644
index 0000000..4b0f06a
--- /dev/null
+++ b/src/pages/Newsletter.tsx
@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import Footer from '../components/Footer';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type FormState =
+  | 'idle'
+  | 'submitting'
+  | 'success'
+  | 'error_invalid'
+  | 'error_duplicate'
+  | 'error_generic';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const EMAIL_RE = /^[^\s@]+@[^\s@][^@]*\.[^\s@]+$/;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function Newsletter() {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [formState, setFormState] = useState<FormState>('idle');
+
+  const errorMessage = (): string | null => {
+    switch (formState) {
+      case 'error_invalid':
+        return t('newsletter.errorInvalidEmail');
+      case 'error_duplicate':
+        return t('newsletter.errorAlreadySubscribed');
+      case 'error_generic':
+        return t('newsletter.errorGeneric');
+      default:
+        return null;
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const trimmed = email.trim().toLowerCase();
+
+    if (!trimmed || !EMAIL_RE.test(trimmed)) {
+      setFormState('error_invalid');
+      return;
+    }
+
+    setFormState('submitting');
+
+    try {
+      const res = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: trimmed }),
+      });
+
+      if (res.status === 201) {
+        setFormState('success');
+        return;
+      }
+
+      if (res.status === 409) {
+        setFormState('error_duplicate');
+        return;
+      }
+
+      if (res.status === 422) {
+        setFormState('error_invalid');
+        return;
+      }
+
+      setFormState('error_generic');
+    } catch {
+      setFormState('error_generic');
+    }
+  };
+
+  const isSubmitting = formState === 'submitting';
+  const errMsg = errorMessage();
+
+  return (
+    <div className="min-h-screen bg-surface text-on-surface">
+      {/* minimal nav */}
+      <header className="flex items-center justify-between px-6 py-5 md:px-12">
+        <Link to="/" className="flex items-center gap-3">
+          <img src="/logo.png" alt="Wraith" width={30} height={24} className="h-6 opacity-90" />
+          <span className="font-heading text-[13px] font-bold tracking-[2px] text-on-surface">
+            WRAITH PROTOCOL
+          </span>
+        </Link>
+        <Link
+          to="/"
+          className="font-body text-[13px] text-outline transition-colors hover:text-on-surface"
+        >
+          Back home
+        </Link>
+      </header>
+
+      <main className="mx-auto max-w-[720px] px-6 py-16 md:px-12" id="main-content" tabIndex={-1}>
+        <div className="flex flex-col gap-12">
+          {/* page header */}
+          <div className="flex flex-col gap-4 border-b border-outline-variant pb-10">
+            <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+              {t('newsletter.eyebrow')}
+            </span>
+            <h1 className="font-heading text-[36px] font-bold tracking-[-1.5px] text-on-surface sm:text-[48px]">
+              {t('newsletter.heading')}
+            </h1>
+            <p className="max-w-[540px] font-body text-[15px] leading-[1.7] text-on-surface-variant">
+              {t('newsletter.description')}
+            </p>
+          </div>
+
+          {/* sign-up form or success state */}
+          {formState === 'success' ? (
+            <div
+              role="status"
+              aria-live="polite"
+              className="flex flex-col gap-4 border border-outline-variant bg-surface-container px-6 py-8"
+            >
+              <span
+                className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-[#22c55e]"
+                aria-hidden="true"
+              >
+                ✓ CONFIRMED
+              </span>
+              <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
+                {t('newsletter.successHeading')}
+              </h2>
+              <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
+                {t('newsletter.successBody')}
+              </p>
+            </div>
+          ) : (
+            <section aria-label={t('newsletter.heading')}>
+              <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-6">
+                <div className="flex flex-col gap-2">
+                  <label
+                    htmlFor="newsletter-email"
+                    className="font-mono text-[10px] font-semibold uppercase tracking-[1.5px] text-outline"
+                  >
+                    {t('newsletter.labelEmail')}
+                  </label>
+
+                  <div className="flex flex-col gap-3 sm:flex-row">
+                    <input
+                      id="newsletter-email"
+                      type="email"
+                      autoComplete="email"
+                      value={email}
+                      onChange={(e) => {
+                        setEmail(e.target.value);
+                        if (formState !== 'idle' && formState !== 'submitting') {
+                          setFormState('idle');
+                        }
+                      }}
+                      placeholder={t('newsletter.placeholder')}
+                      disabled={isSubmitting}
+                      aria-describedby={errMsg ? 'newsletter-error' : 'newsletter-hint'}
+                      aria-invalid={errMsg ? 'true' : undefined}
+                      className="w-full border border-outline-variant bg-surface-container px-4 py-3 font-body text-[14px] text-on-surface placeholder:text-outline focus:border-outline focus:outline-none disabled:opacity-60"
+                    />
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      className="border border-outline-variant bg-surface-bright px-6 py-3 font-mono text-[11px] font-semibold uppercase tracking-[1.6px] text-on-surface transition-colors hover:border-outline disabled:cursor-wait disabled:opacity-60"
+                    >
+                      {isSubmitting ? t('newsletter.submitting') : t('newsletter.submit')}
+                    </button>
+                  </div>
+
+                  {errMsg && (
+                    <p
+                      id="newsletter-error"
+                      role="alert"
+                      className="font-body text-[13px] text-[#ee7d77]"
+                    >
+                      {errMsg}
+                    </p>
+                  )}
+                </div>
+
+                <p
+                  id="newsletter-hint"
+                  className="max-w-[480px] font-body text-[12px] leading-[1.6] text-outline"
+                >
+                  {t('newsletter.privacyNote')}{' '}
+                  <Link
+                    to="/privacy"
+                    className="text-on-surface-variant underline transition-colors hover:text-on-surface"
+                  >
+                    Privacy Policy
+                  </Link>
+                  .
+                </p>
+              </form>
+            </section>
+          )}
+
+          {/* back link */}
+          <div className="border-t border-outline-variant pt-8">
+            <Link
+              to="/"
+              className="font-heading text-[11px] font-semibold tracking-[1.5px] text-on-surface-variant transition-colors hover:text-on-surface"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/vercel.json b/vercel.json
index 88d9d59..f63ff06 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,3 +1,3 @@
 {
-  "rewrites": [{ "source": "/((?!press-kit/).*)", "destination": "/index.html" }]
+  "rewrites": [{ "source": "/((?!api/|press-kit/).*)", "destination": "/index.html" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index ecca98e..cfa4c7f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,5 +9,6 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     setupFiles: './src/test/setup.ts',
+    exclude: ['**/node_modules/**', '**/e2e/**'],
   },
 });