diff --git a/app/src/components/DirectoryPanel.jsx b/app/src/components/DirectoryPanel.jsx
new file mode 100644
index 0000000..7fa1e6d
--- /dev/null
+++ b/app/src/components/DirectoryPanel.jsx
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+
+export function DirectoryPanel() {
+  const [companies, setCompanies] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchDirectory() {
+      try {
+        const res = await fetch('/api/directory/companies').then(r => r.json());
+        if (res.companies) setCompanies(res.companies);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchDirectory();
+  }, []);
+
+  if (loading) return <div className="p-8 text-center text-brand-muted">در حال بارگذاری دایرکتوری...</div>;
+
+  return (
+    <div className="directory-panel" style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto', direction: 'rtl' }}>
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-brand">دایرکتوری فناوری و استارتاپ‌ها</h1>
+        <button className="px-4 py-2 bg-brand text-white rounded-lg hover:bg-brand-hover transition-colors font-medium">
+          ثبت شرکت جدید
+        </button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {companies.map(company => (
+          <div key={company.id} className="p-6 bg-bg-surface border border-border rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col">
+            <div className="flex items-center gap-4 mb-4">
+              {company.logoUrl ? (
+                <img src={company.logoUrl} alt={company.name} className="w-16 h-16 rounded-lg object-cover" />
+              ) : (
+                <div className="w-16 h-16 rounded-lg bg-brand/10 flex items-center justify-center text-brand font-bold text-xl">
+                  {company.name.charAt(0)}
+                </div>
+              )}
+              <div>
+                <h3 className="text-xl font-bold">{company.name}</h3>
+                {company.industry && <div className="text-sm text-brand-muted">{company.industry}</div>}
+              </div>
+            </div>
+            
+            <p className="text-sm mb-6 flex-grow">{company.description}</p>
+            
+            <div className="flex flex-wrap gap-2 mb-4">
+              {company.website && (
+                <a href={company.website} target="_blank" rel="noopener noreferrer" className="text-xs px-2 py-1 bg-border rounded hover:bg-brand hover:text-white transition-colors">وب‌سایت</a>
+              )}
+            </div>
+            
+            {company.claims?.length > 0 && (
+              <div className="mt-auto pt-4 border-t border-border/50 text-xs text-brand-muted flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                تایید شده توسط نمایندگان شرکت
+              </div>
+            )}
+          </div>
+        ))}
+        {companies.length === 0 && (
+          <div className="col-span-full py-12 text-center text-brand-muted border-2 border-dashed border-border rounded-xl">
+            هیچ شرکتی در دایرکتوری یافت نشد. اولین شرکت را ثبت کنید!
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}