diff --git a/app/src/pages/ComparisonsListPage.jsx b/app/src/pages/ComparisonsListPage.jsx
new file mode 100644
index 0000000..0fcc20e
--- /dev/null
+++ b/app/src/pages/ComparisonsListPage.jsx
@@ -0,0 +1,72 @@
+import { useState, useMemo } from 'react';
+import { TeknavData } from '../../teknav-data.js';
+import { useNav, EmptyState, inputStyle } from '../../teknav-ui.jsx';
+
+const CATEGORY_COLORS = { ai: '#0F6B73', data: '#2F8F6B', security: '#C62828', software: '#1565C0', hardware: '#6A1B9A' };
+
+export function ComparisonsListPage() {
+  const { navigate } = useNav();
+  const comparisons = TeknavData.comparisons ?? [];
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return comparisons;
+    const q = search.trim().toLocaleLowerCase('fa-IR');
+    return comparisons.filter((c) =>
+      c.title.toLocaleLowerCase('fa-IR').includes(q) ||
+      c.item1.name.toLocaleLowerCase('en-US').includes(q) ||
+      c.item2.name.toLocaleLowerCase('en-US').includes(q) ||
+      (c.tags || []).some((t) => t.toLocaleLowerCase().includes(q)),
+    );
+  }, [comparisons, 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 }}>
+        <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>
+      <input
+        type="search"
+        placeholder="جست‌وجو در مقایسه‌ها…"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        style={{ ...inputStyle, marginBottom: 28, width: '100%', maxWidth: 400 }}
+      />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        {filtered.map((c) => (
+          <div
+            key={c.slug}
+            onClick={() => navigate(`/compare/${c.slug}`)}
+            style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: '20px 24px', cursor: 'pointer', display: 'flex', gap: 20, alignItems: 'center' }}
+            onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.09)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.boxShadow = ''; }}
+          >
+            <div style={{ flex: 1 }}>
+              <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8, flexWrap: 'wrap' }}>
+                <span style={{ background: CATEGORY_COLORS[c.category] || '#0F6B73', color: '#fff', fontSize: 11, fontWeight: 700, padding: '2px 10px', borderRadius: 20 }}>
+                  {c.category}
+                </span>
+                {(c.tags || []).slice(0, 3).map((t) => (
+                  <span key={t} style={{ background: '#F4EFE6', color: '#5F6B6D', fontSize: 11, padding: '2px 8px', borderRadius: 20 }}>{t}</span>
+                ))}
+              </div>
+              <h2 style={{ fontSize: 17, fontWeight: 700, color: '#0C1E22', margin: '0 0 8px', lineHeight: 1.5 }}>{c.title}</h2>
+              <div style={{ display: 'flex', gap: 16, fontSize: 13 }}>
+                <span style={{ background: '#E8F5E9', color: '#2E7D32', padding: '3px 12px', borderRadius: 20, fontWeight: 600 }}>{c.item1.name}</span>
+                <span style={{ color: '#5F6B6D', alignSelf: 'center' }}>در برابر</span>
+                <span style={{ background: '#FFF3E0', color: '#E65100', padding: '3px 12px', borderRadius: 20, fontWeight: 600 }}>{c.item2.name}</span>
+              </div>
+            </div>
+            <span style={{ fontSize: 22, color: '#0F6B73' }}>←</span>
+          </div>
+        ))}
+        {filtered.length === 0 && <EmptyState title="مقایسه‌ای یافت نشد" subtitle="جست‌وجوی دیگری امتحان کنید" />}
+      </div>
+    </div>
+  );
+}