diff --git a/app/src/pages/DirectoryListPage.jsx b/app/src/pages/DirectoryListPage.jsx
new file mode 100644
index 0000000..d10434a
--- /dev/null
+++ b/app/src/pages/DirectoryListPage.jsx
@@ -0,0 +1,67 @@
+import { useState, useMemo } from 'react';
+import { TeknavData } from '../../teknav-data.js';
+import { useNav, EmptyState, inputStyle } from '../../teknav-ui.jsx';
+
+export function DirectoryListPage() {
+  const { navigate } = useNav();
+  const [companies] = useState(() => TeknavData.companies ?? []);
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return companies;
+    const q = search.trim().toLocaleLowerCase('fa-IR');
+    return companies.filter((c) =>
+      c.name.toLocaleLowerCase('fa-IR').includes(q) ||
+      c.description.toLocaleLowerCase('fa-IR').includes(q) ||
+      (c.techStack || []).some((t) => t.toLocaleLowerCase('en-US').includes(q)),
+    );
+  }, [companies, search]);
+
+  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, alignItems: 'center' }}>
+        <span style={{ cursor: 'pointer', color: '#0F6B73' }} onClick={() => navigate('/')}>تکناو</span>
+        <span>›</span>
+        <span>دایرکتوری شرکت‌های فناوری</span>
+      </nav>
+      <h1 style={{ fontSize: 'clamp(22px,4vw,30px)', fontWeight: 800, color: '#0C1E22', marginBottom: 8 }}>
+        دایرکتوری شرکت‌های فناوری ایران
+      </h1>
+      <p style={{ fontSize: 15, color: '#5F6B6D', lineHeight: 1.8, marginBottom: 28 }}>
+        پروفایل شرکت‌های فناوری ایران همراه با استک فنی، اطلاعات تماس و نشان تأیید.
+      </p>
+      <input
+        type="search"
+        placeholder="جست‌وجو در شرکت‌ها…"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        style={{ ...inputStyle, marginBottom: 24, width: '100%', maxWidth: 400 }}
+      />
+      {filtered.length === 0 && (
+        <EmptyState title="شرکتی یافت نشد" subtitle="جست‌وجوی دیگری امتحان کنید" />
+      )}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 16 }}>
+        {filtered.map((company) => (
+          <div
+            key={company.slug}
+            onClick={() => navigate(`/directory/${company.slug}`)}
+            style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 20, cursor: 'pointer', transition: 'box-shadow 0.2s' }}
+            onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.1)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.boxShadow = ''; }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
+              <span style={{ fontSize: 18, fontWeight: 700, color: '#0C1E22' }}>{company.name}</span>
+              {company.verified && <span style={{ fontSize: 11, background: '#E8F5E9', color: '#2E7D32', padding: '2px 8px', borderRadius: 20, fontWeight: 600 }}>✓ تأیید</span>}
+            </div>
+            <p style={{ fontSize: 13, color: '#5F6B6D', lineHeight: 1.7, marginBottom: 12 }}>{company.description.slice(0, 100)}…</p>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+              {(company.techStack || []).slice(0, 4).map((t) => (
+                <span key={t} style={{ background: '#F4EFE6', color: '#263238', fontSize: 11, padding: '2px 8px', borderRadius: 20 }}>{t}</span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}