diff --git a/studio-v2/app/learn/[unitId]/flashcards/page.tsx b/studio-v2/app/learn/[unitId]/flashcards/page.tsx
index dfb5e74..076d729 100644
--- a/studio-v2/app/learn/[unitId]/flashcards/page.tsx
+++ b/studio-v2/app/learn/[unitId]/flashcards/page.tsx
@@ -101,7 +101,7 @@ export default function FlashcardsPage() {
   }
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/listen/page.tsx b/studio-v2/app/learn/[unitId]/listen/page.tsx
index 4d81d87..1613dfc 100644
--- a/studio-v2/app/learn/[unitId]/listen/page.tsx
+++ b/studio-v2/app/learn/[unitId]/listen/page.tsx
@@ -74,7 +74,7 @@ export default function ListenPage() {
   const currentItem = items[currentIndex]
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-green-50 to-emerald-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/match/page.tsx b/studio-v2/app/learn/[unitId]/match/page.tsx
index b08cb04..648823d 100644
--- a/studio-v2/app/learn/[unitId]/match/page.tsx
+++ b/studio-v2/app/learn/[unitId]/match/page.tsx
@@ -95,7 +95,7 @@ export default function MatchPage() {
   const matchedTotal = round * 6 + matched.size
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-indigo-50 to-violet-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/pronounce/page.tsx b/studio-v2/app/learn/[unitId]/pronounce/page.tsx
index d1bf820..d4a9cbe 100644
--- a/studio-v2/app/learn/[unitId]/pronounce/page.tsx
+++ b/studio-v2/app/learn/[unitId]/pronounce/page.tsx
@@ -67,7 +67,7 @@ export default function PronouncePage() {
   }
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-rose-50 to-red-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/quiz/page.tsx b/studio-v2/app/learn/[unitId]/quiz/page.tsx
index b79d46e..51c21e0 100644
--- a/studio-v2/app/learn/[unitId]/quiz/page.tsx
+++ b/studio-v2/app/learn/[unitId]/quiz/page.tsx
@@ -73,7 +73,7 @@ export default function QuizPage() {
   }
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/story/page.tsx b/studio-v2/app/learn/[unitId]/story/page.tsx
index 9a97660..bd1ebac 100644
--- a/studio-v2/app/learn/[unitId]/story/page.tsx
+++ b/studio-v2/app/learn/[unitId]/story/page.tsx
@@ -65,7 +65,7 @@ export default function StoryPage() {
   }
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-amber-50 to-orange-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/[unitId]/type/page.tsx b/studio-v2/app/learn/[unitId]/type/page.tsx
index f7750a1..432cca7 100644
--- a/studio-v2/app/learn/[unitId]/type/page.tsx
+++ b/studio-v2/app/learn/[unitId]/type/page.tsx
@@ -94,7 +94,7 @@ export default function TypePage() {
   }
 
   return (
-    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+    <>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
diff --git a/studio-v2/app/learn/layout.tsx b/studio-v2/app/learn/layout.tsx
new file mode 100644
index 0000000..45c84fd
--- /dev/null
+++ b/studio-v2/app/learn/layout.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { Sidebar } from '@/components/Sidebar'
+import { useTheme } from '@/lib/ThemeContext'
+
+/**
+ * Shared layout for ALL /learn/* pages.
+ * Provides: Sidebar + gradient background + flex container.
+ * Individual pages only need to render their content.
+ */
+export default function LearnLayout({ children }: { children: React.ReactNode }) {
+  const { isDark } = useTheme()
+
+  return (
+    <div className={`min-h-screen flex relative overflow-hidden ${
+      isDark
+        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
+        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'
+    }`}>
+      <div className="relative z-10 p-4 flex-shrink-0">
+        <Sidebar />
+      </div>
+      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/studio-v2/app/onboarding/page.tsx b/studio-v2/app/onboarding/page.tsx
index fb9d64a..4e8d186 100644
--- a/studio-v2/app/onboarding/page.tsx
+++ b/studio-v2/app/onboarding/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import { useTheme } from '@/lib/ThemeContext'
 import { useLanguage } from '@/lib/LanguageContext'
 import type { Language } from '@/lib/i18n'
+import { LearnLayout } from '@/components/learn/LearnLayout'
 
 interface LangOption {
   code: string
diff --git a/studio-v2/app/parent/layout.tsx b/studio-v2/app/parent/layout.tsx
new file mode 100644
index 0000000..b25b5ba
--- /dev/null
+++ b/studio-v2/app/parent/layout.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { Sidebar } from '@/components/Sidebar'
+import { useTheme } from '@/lib/ThemeContext'
+
+/**
+ * Shared layout for ALL /parent/* pages.
+ * Same design as learn layout — Sidebar + gradient.
+ */
+export default function ParentLayout({ children }: { children: React.ReactNode }) {
+  const { isDark } = useTheme()
+
+  return (
+    <div className={`min-h-screen flex relative overflow-hidden ${
+      isDark
+        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
+        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'
+    }`}>
+      <div className="relative z-10 p-4 flex-shrink-0">
+        <Sidebar />
+      </div>
+      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/studio-v2/app/parent/page.tsx b/studio-v2/app/parent/page.tsx
index 437b23b..a8b8a95 100644
--- a/studio-v2/app/parent/page.tsx
+++ b/studio-v2/app/parent/page.tsx
@@ -46,9 +46,7 @@ export default function ParentPage() {
   }, [])
 
   return (
-    <div className={`min-h-screen ${isDark ? 'bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900' : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'}`}
-      dir={language === 'ar' ? 'rtl' : 'ltr'}>
-
+    <div dir={language === 'ar' ? 'rtl' : 'ltr'}>
       {/* Header */}
       <div className={`${glassCard} border-0 border-b`}>
         <div className="max-w-lg mx-auto px-6 py-5">
diff --git a/studio-v2/app/parent/quiz/[unitId]/page.tsx b/studio-v2/app/parent/quiz/[unitId]/page.tsx
index 567c615..e15fdad 100644
--- a/studio-v2/app/parent/quiz/[unitId]/page.tsx
+++ b/studio-v2/app/parent/quiz/[unitId]/page.tsx
@@ -5,6 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { useTheme } from '@/lib/ThemeContext'
 import { useLanguage } from '@/lib/LanguageContext'
 import { AudioButton } from '@/components/learn/AudioButton'
+import { LearnLayout } from '@/components/learn/LearnLayout'
 
 interface QAItem {
   id: string; question: string; answer: string
@@ -65,7 +66,7 @@ export default function ParentQuizPage() {
   const nativeTranslation = currentItem?.translations?.[language]?.text || ''
 
   if (isLoading) {
-    return <div className={`min-h-screen flex items-center justify-center ${isDark ? 'bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900' : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'}`}>
+    return <LearnLayout>
       <div className="w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full animate-spin" />
     </div>
   }
diff --git a/studio-v2/components/learn/LearnLayout.tsx b/studio-v2/components/learn/LearnLayout.tsx
new file mode 100644
index 0000000..0068432
--- /dev/null
+++ b/studio-v2/components/learn/LearnLayout.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import React from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { Sidebar } from '@/components/Sidebar'
+
+interface LearnLayoutProps {
+  children: React.ReactNode
+  gradient?: string
+}
+
+/**
+ * Shared layout for all learn sub-pages.
+ * Adds Sidebar + consistent gradient background.
+ */
+export function LearnLayout({ children, gradient }: LearnLayoutProps) {
+  const { isDark } = useTheme()
+
+  const bg = gradient || (isDark
+    ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
+    : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100')
+
+  return (
+    <div className={`min-h-screen flex relative overflow-hidden ${bg}`}>
+      <div className="relative z-10 p-4 flex-shrink-0">
+        <Sidebar />
+      </div>
+      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  )
+}