diff --git a/app/src/pages/GlossaryPage.jsx b/app/src/pages/GlossaryPage.jsx
new file mode 100644
index 0000000..38fd3c4
--- /dev/null
+++ b/app/src/pages/GlossaryPage.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { TeknavData } from '../../teknav-data.js';
+import { useNav, EmptyState, pillBtn } from '../../teknav-ui.jsx';
+import { ArticleRow } from '../../teknav-articles.jsx';
+import { contentApi } from '../../src/lib/content-api.js';
+
+export function GlossaryPage({ slug }) {
+  const { navigate } = useNav();
+  const term = TeknavData.glossary?.find((item) => item.slug === slug);
+  const articles = contentApi.fallbackArticles().filter((article) => (
+    article.tags?.some((tag) => tag.toLowerCase() === term?.term?.toLowerCase() || tag.toLowerCase() === term?.english?.toLowerCase())
+    || article.summary?.toLowerCase().includes(term?.english?.toLowerCase() || '')
+    || article.title?.toLowerCase().includes(term?.english?.toLowerCase() || '')
+  )).slice(0, 6);
+
+  if (!term) return <EmptyState title="واژه پیدا نشد" />;
+
+  const related = (term.related ?? []).map((item) => TeknavData.glossary?.find((g) => g.slug === item)).filter(Boolean);
+  const topic = TeknavData.topicHubs?.find((item) => item.slug === term.topic);
+
+  return (
+    <main style={{ paddingTop: 76, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <section style={{ borderBottom: '1px solid #E4DDD2', background: 'linear-gradient(135deg,#FFFFFF 0%,#F4EFE6 100%)', padding: '44px 24px' }}>
+        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
+          <button onClick={() => navigate('/articles')} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', marginBottom: 18 }}>بازگشت به مقاله‌ها</button>
+          <div style={{ color: '#0F6B73', fontSize: 12, fontWeight: 900, marginBottom: 8 }}>فرهنگ واژگان تکنّاو</div>
+          <h1 style={{ fontSize: 'clamp(30px,5vw,48px)', color: '#263238', margin: '0 0 6px', fontWeight: 900 }}>{term.term}</h1>
+          <div style={{ color: '#5F6B6D', fontSize: 18, direction: 'ltr', textAlign: 'right', marginBottom: 18 }}>{term.english}</div>
+          <p style={{ maxWidth: 720, color: '#263238', lineHeight: 2, fontSize: 17, margin: 0 }}>{term.summary}</p>
+        </div>
+      </section>
+      <section style={{ maxWidth: 1040, margin: '0 auto', padding: '32px 24px', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 24 }} className="glossary-grid">
+        <div style={{ display: 'grid', gap: 18 }}>
+          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ margin: '0 0 14px', color: '#263238', fontSize: 20 }}>پرسش‌های رایج</h2>
+            {(term.faqs ?? []).map(([q, a]) => (
+              <div key={q} style={{ borderTop: '1px solid #E4DDD2', padding: '14px 0' }}>
+                <strong style={{ color: '#0F6B73' }}>{q}</strong>
+                <p style={{ margin: '8px 0 0', color: '#5F6B6D', lineHeight: 1.9 }}>{a}</p>
+              </div>
+            ))}
+          </div>
+          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 20 }}>
+            <h2 style={{ margin: '0 0 14px', color: '#263238', fontSize: 20 }}>مقاله‌های مرتبط</h2>
+            {articles.length === 0 ? <EmptyState title="هنوز مقاله مرتبطی پیدا نشد" /> : articles.map((article, index) => <ArticleRow key={article.id} article={article} idx={index} />)}
+          </div>
+        </div>
+        <aside style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
+          {topic && (
+            <button onClick={() => navigate(`/topics/${topic.slug}`)} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 18, textAlign: 'right', cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
+              <div style={{ fontSize: 12, color: '#5F6B6D' }}>خوشه موضوعی</div>
+              <div style={{ fontSize: 18, color: '#0F6B73', fontWeight: 900 }}>{topic.title}</div>
+            </button>
+          )}
+          <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: 18 }}>
+            <h3 style={{ margin: '0 0 12px', color: '#263238', fontSize: 16 }}>واژه‌های مرتبط</h3>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+              {related.map((item) => (
+                <button key={item.slug} onClick={() => navigate(`/glossary/${item.slug}`)} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', fontSize: 12 }}>{item.term}</button>
+              ))}
+            </div>
+          </div>
+        </aside>
+      </section>
+      <style>{`@media(max-width:850px){.glossary-grid{grid-template-columns:1fr!important}}`}</style>
+    </main>
+  );
+}