diff --git a/app/src/pages/shared.jsx b/app/src/pages/shared.jsx
new file mode 100644
index 0000000..3627b81
--- /dev/null
+++ b/app/src/pages/shared.jsx
@@ -0,0 +1,32 @@
+import { TeknavData } from '../../teknav-data.js';
+
+export function authorProfilePath(author) {
+  const username = author.username || TeknavData.authors.find(a => a.slug === author.slug)?.username;
+  return username ? `/profile/@${username}` : `/author/${author.slug}`;
+}
+
+export function LegalPage({ title, subtitle, children }) {
+  return (
+    <div style={{ paddingTop: 88, paddingBottom: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <div style={{ maxWidth: 820, margin: '0 auto', padding: '0 24px' }}>
+        <div style={{ marginBottom: 40 }}>
+          <h1 style={{ fontSize: 28, fontWeight: 800, color: '#0F2A2E', marginBottom: 8, fontFamily: "'PelakFA','Vazirmatn',sans-serif" }}>{title}</h1>
+          {subtitle && <p style={{ fontSize: 14, color: '#5F6B6D', lineHeight: 1.8 }}>{subtitle}</p>}
+          <div style={{ height: 3, width: 48, background: '#D49A2A', borderRadius: 2, marginTop: 16 }} />
+        </div>
+        <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: '36px 40px', lineHeight: 1.95, color: '#374549', fontSize: 14 }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LegalSection({ title, children }) {
+  return (
+    <section style={{ marginBottom: 32 }}>
+      <h2 style={{ fontSize: 16, fontWeight: 700, color: '#0F2A2E', marginBottom: 10, borderRight: '3px solid #0F6B73', paddingRight: 10 }}>{title}</h2>
+      {children}
+    </section>
+  );
+}