diff --git a/app/src/pages/NewsletterIssuePage.jsx b/app/src/pages/NewsletterIssuePage.jsx
new file mode 100644
index 0000000..5a17200
--- /dev/null
+++ b/app/src/pages/NewsletterIssuePage.jsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { useNav, EmptyState, pillBtn } from '../../teknav-ui.jsx';
+import { contentApi } from '../../src/lib/content-api.js';
+
+export function NewsletterIssuePage({ slug }) {
+  const { navigate } = useNav();
+  const [issue, setIssue] = useState(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(false);
+    contentApi.getNewsletterIssue(slug)
+      .then((row) => { if (!cancelled) setIssue(row); })
+      .catch(() => { if (!cancelled) setError(true); });
+    return () => { cancelled = true; };
+  }, [slug]);
+
+  if (error) return <div style={{ paddingTop: 100, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}><EmptyState title="خبرنامه پیدا نشد" /></div>;
+  if (!issue) return <div style={{ paddingTop: 120, textAlign: 'center', color: '#5F6B6D', fontFamily: 'Vazirmatn,sans-serif' }}>در حال بارگذاری...</div>;
+
+  return (
+    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <article style={{ maxWidth: 760, margin: '0 auto', padding: '40px 24px' }}>
+        <button onClick={() => navigate('/newsletter')} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', marginBottom: 18 }}>آرشیو خبرنامه</button>
+        <h1 style={{ fontSize: 30, fontWeight: 900, color: '#263238', lineHeight: 1.45, margin: '0 0 10px' }}>{issue.subject}</h1>
+        <div style={{ color: '#5F6B6D', fontSize: 12, marginBottom: 28 }}>{issue.sentAt ? new Date(issue.sentAt).toLocaleDateString('fa-IR') : ''}</div>
+        <div className="article-content" style={{ fontSize: 16, lineHeight: 2, color: '#263238', background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 24 }} dangerouslySetInnerHTML={{ __html: issue.bodyHtml }} />
+      </article>
+    </div>
+  );
+}