diff --git a/app/src/pages/JobsPage.jsx b/app/src/pages/JobsPage.jsx
new file mode 100644
index 0000000..c483cdc
--- /dev/null
+++ b/app/src/pages/JobsPage.jsx
@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import { useToast, EmptyState, inputStyle, pillBtn } from '../../teknav-ui.jsx';
+import { contentApi } from '../../src/lib/content-api.js';
+
+export function JobsPage() {
+  const toast = useToast();
+  const [items, setItems] = useState([]);
+  const [form, setForm] = useState({ company: '', title: '', location: 'Remote', remote: true, url: '', contactEmail: '', description: '' });
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    contentApi.listJobs().then(setItems).catch(() => setItems([]));
+  }, []);
+  const set = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+  const submit = async (event) => {
+    event.preventDefault();
+    setBusy(true);
+    try {
+      await contentApi.submitJob(form);
+      setForm({ company: '', title: '', location: 'Remote', remote: true, url: '', contactEmail: '', description: '' });
+      toast('آگهی شغلی برای بررسی ارسال شد');
+    } catch {
+      toast('ارسال آگهی ناموفق بود', 'error');
+    } finally {
+      setBusy(false);
+    }
+  };
+  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: '1fr 360px', gap: 22 }} className="jobs-grid">
+          <section style={{ display: 'grid', gap: 12 }}>
+            {items.length === 0 ? <EmptyState title="هنوز آگهی منتشرشده‌ای وجود ندارد" /> : items.map((job) => (
+              <article key={job.id} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 18 }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+                  <div>
+                    <h2 style={{ margin: '0 0 6px', fontSize: 18, color: '#263238' }}>{job.title}</h2>
+                    <div style={{ color: '#0F6B73', fontWeight: 800, fontSize: 13 }}>{job.company}</div>
+                  </div>
+                  <span style={{ color: '#5F6B6D', fontSize: 12 }}>{job.remote ? 'Remote' : job.location}</span>
+                </div>
+                <p style={{ color: '#5F6B6D', lineHeight: 1.8, fontSize: 13 }}>{job.description}</p>
+                {job.url && <a href={job.url} target="_blank" rel="noreferrer" style={{ color: '#0F6B73', fontWeight: 800 }}>مشاهده و ارسال رزومه</a>}
+              </article>
+            ))}
+          </section>
+          <form onSubmit={submit} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 18, alignSelf: 'start', display: 'grid', gap: 10 }}>
+            <h2 style={{ margin: 0, fontSize: 17, color: '#263238' }}>ثبت آگهی شرکت</h2>
+            <input required value={form.company} onChange={e => set('company', e.target.value)} placeholder="نام شرکت" style={inputStyle} />
+            <input required value={form.title} onChange={e => set('title', e.target.value)} placeholder="عنوان شغل" style={inputStyle} />
+            <input value={form.location} onChange={e => set('location', e.target.value)} placeholder="موقعیت" style={inputStyle} />
+            <input value={form.contactEmail} onChange={e => set('contactEmail', e.target.value)} placeholder="ایمیل تماس" style={inputStyle} dir="ltr" />
+            <input value={form.url} onChange={e => set('url', e.target.value)} placeholder="لینک درخواست" style={inputStyle} dir="ltr" />
+            <label style={{ display: 'flex', gap: 8, fontSize: 13, color: '#263238' }}><input type="checkbox" checked={form.remote} onChange={e => set('remote', e.target.checked)} /> امکان دورکاری</label>
+            <textarea required value={form.description} onChange={e => set('description', e.target.value)} placeholder="شرح موقعیت" style={{ ...inputStyle, minHeight: 110, resize: 'vertical' }} />
+            <button disabled={busy} style={{ ...pillBtn, background: '#0F6B73', color: '#fff', justifyContent: 'center' }}>{busy ? 'در حال ارسال...' : 'ارسال برای بررسی'}</button>
+          </form>
+        </div>
+      </div>
+      <style>{`@media(max-width:850px){.jobs-grid{grid-template-columns:1fr!important}}`}</style>
+    </div>
+  );
+}