diff --git a/app/src/pages/CoursesPage.jsx b/app/src/pages/CoursesPage.jsx
new file mode 100644
index 0000000..1854a70
--- /dev/null
+++ b/app/src/pages/CoursesPage.jsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { contentApi } from '../../src/lib/content-api.js';
+
+export function CoursesPage() {
+  const [items, setItems] = useState([]);
+  useEffect(() => { contentApi.listCourses().then(setItems).catch(() => setItems([])); }, []);
+  return (
+    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <div style={{ maxWidth: 1040, margin: '0 auto', padding: '40px 24px' }}>
+        <h1 style={{ fontSize: 32, fontWeight: 900, color: '#263238', margin: '0 0 8px' }}>دوره‌های تخصصی تکناو</h1>
+        <p style={{ color: '#5F6B6D', lineHeight: 1.9, margin: '0 0 28px' }}>مسیرهای آموزشی فارسی برای تیم‌هایی که فناوری را در محصول و عملیات واقعی به کار می‌گیرند.</p>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 16 }}>
+          {items.map(course => (
+            <article key={course.id} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 20 }}>
+              <div style={{ color: '#0F6B73', fontSize: 12, fontWeight: 800, marginBottom: 8 }}>{course.level}</div>
+              <h2 style={{ margin: '0 0 10px', color: '#263238', fontSize: 19 }}>{course.title}</h2>
+              <p style={{ color: '#5F6B6D', lineHeight: 1.9, fontSize: 13 }}>{course.summary}</p>
+              <div style={{ marginTop: 16, color: '#D49A2A', fontWeight: 900 }}>{course.price ? `${course.price.toLocaleString('fa-IR')} تومان` : 'به‌زودی'}</div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}