diff --git a/app/src/pages/StoriesListPage.jsx b/app/src/pages/StoriesListPage.jsx
new file mode 100644
index 0000000..6c7f421
--- /dev/null
+++ b/app/src/pages/StoriesListPage.jsx
@@ -0,0 +1,53 @@
+import { TeknavData } from '../../teknav-data.js';
+import { useNav } from '../../teknav-ui.jsx';
+
+export function StoriesListPage() {
+  const { navigate } = useNav();
+  const today = new Date().toISOString().slice(0, 10);
+  const stories = (TeknavData.articles ?? []).filter((a) => {
+    if (a.status !== 'منتشرشده' && a.status) return false;
+    const d = String(a.dateEn || '').slice(0, 10);
+    return /^\d{4}-\d{2}-\d{2}$/.test(d) && d <= today;
+  });
+
+  return (
+    <div style={{ maxWidth: 960, margin: '0 auto', padding: '24px 16px 80px', direction: 'rtl', fontFamily: 'Vazirmatn,sans-serif' }}>
+      <nav style={{ fontSize: 13, color: '#5F6B6D', marginBottom: 24, display: 'flex', gap: 8 }}>
+        <span style={{ cursor: 'pointer', color: '#0F6B73' }} onClick={() => navigate('/')}>تکناو</span>
+        <span>›</span><span>استوری‌ها</span>
+      </nav>
+      <h1 style={{ fontSize: 'clamp(22px,4vw,32px)', fontWeight: 800, color: '#0C1E22', marginBottom: 8 }}>استوری‌های تکناو</h1>
+      <p style={{ fontSize: 15, color: '#5F6B6D', lineHeight: 1.8, marginBottom: 28 }}>
+        مقالات تکناو در قالب استوری‌های بصری — سریع، قابل اسوایپ و بهینه برای موبایل.
+      </p>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 14 }}>
+        {stories.map((a) => {
+          const img = a.ogImage || `/images/og/${a.slug}.jpg`;
+          return (
+            <div
+              key={a.id}
+              onClick={() => { window.open(`/stories/${a.slug}`, '_blank'); }}
+              style={{ borderRadius: 14, overflow: 'hidden', cursor: 'pointer', position: 'relative', paddingBottom: '177%', background: '#0C1E22' }}
+              onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.25)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
+            >
+              <img
+                src={img}
+                alt={a.title}
+                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.55)' }}
+                loading="lazy"
+              />
+              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '12px 10px', background: 'linear-gradient(to top, rgba(5,20,25,0.95), transparent)' }}>
+                <div style={{ fontSize: 11, color: '#D49A2A', fontWeight: 700, marginBottom: 4 }}>{a.categoryName}</div>
+                <div style={{ fontSize: 12, color: '#fff', lineHeight: 1.4, fontWeight: 600 }}>{a.title.slice(0, 55)}{a.title.length > 55 ? '…' : ''}</div>
+              </div>
+              <div style={{ position: 'absolute', top: 10, right: 10, background: 'rgba(15,107,115,0.85)', borderRadius: 20, padding: '3px 8px', fontSize: 10, color: '#fff', fontWeight: 700 }}>
+                ▶ استوری
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}