diff --git a/app/src/pages/NewsletterArchivePage.jsx b/app/src/pages/NewsletterArchivePage.jsx
new file mode 100644
index 0000000..56db3e7
--- /dev/null
+++ b/app/src/pages/NewsletterArchivePage.jsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { useNav, EmptyState, pillBtn } from '../../teknav-ui.jsx';
+import { contentApi } from '../../src/lib/content-api.js';
+
+export function NewsletterArchivePage() {
+  const { navigate } = useNav();
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    contentApi.listNewsletterArchive()
+      .then((rows) => { if (!cancelled) setItems(rows); })
+      .catch(() => { if (!cancelled) setItems([]); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, []);
+
+  return (
+    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <div style={{ maxWidth: 900, margin: '0 auto', padding: '40px 24px' }}>
+        <h1 style={{ fontSize: 32, fontWeight: 900, color: '#263238', margin: '0 0 10px' }}>آرشیو خبرنامه تکنـاو</h1>
+        <p style={{ color: '#5F6B6D', lineHeight: 1.9, margin: '0 0 28px' }}>نسخه‌های ارسال‌شده خبرنامه برای دنبال کردن روندهای مهم فناوری، هوش مصنوعی و امنیت.</p>
+        {loading ? <div style={{ color: '#5F6B6D' }}>در حال بارگذاری...</div> : items.length === 0 ? <EmptyState title="هنوز خبرنامه‌ای منتشر نشده است" /> : (
+          <div style={{ display: 'grid', gap: 14 }}>
+            {items.map((item) => (
+              <button key={item.id} onClick={() => navigate(`/newsletter/${item.slug}`)} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 10, padding: 18, textAlign: 'right', cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
+                <div style={{ fontSize: 18, fontWeight: 800, color: '#263238', marginBottom: 6 }}>{item.subject}</div>
+                <div style={{ color: '#5F6B6D', fontSize: 12 }}>{item.sentAt ? new Date(item.sentAt).toLocaleDateString('fa-IR') : 'منتشر نشده'}</div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}