feat: Introduce PageLayout component to standardize page headers and overall structure across various application pages.

web/studio/src/app/courses/[id]/files/page.tsx

@@ -80,13 +80,11 @@ export default function CourseFilesPage() {
     };
 
     return (
-        <CourseEditorLayout activeTab="files">
+        <CourseEditorLayout
-            <div className="space-y-6">
+            activeTab="files"
-                <div className="flex justify-between items-center">
+            pageTitle="Archivos y Recursos"
-                    <div>
+            pageDescription="Gestiona los archivos específicos de este curso. Estos se incluirán en las exportaciones."
-                        <h1 className="text-2xl font-bold">Course Files & Assets</h1>
+            pageActions={
-                        <p className="text-gray-400 mt-1">Manage files specific to this course. These will be included in exports.</p>
-                    </div>
                 <div className="relative">
                     <input
                         type="file"
@@ -97,13 +95,15 @@ export default function CourseFilesPage() {
                     />
                     <label
                         htmlFor="file-upload"
-                            className={`btn btn-primary gap-2 cursor-pointer ${isUploading ? 'loading' : ''}`}
+                        className={`flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all cursor-pointer active:scale-95 ${isUploading ? 'opacity-50 cursor-wait' : ''}`}
                     >
                         {!isUploading && <Upload className="w-4 h-4" />}
-                            {isUploading ? `Uploading ${uploadProgress}%` : 'Upload File'}
+                        {isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
                     </label>
                 </div>
-                </div>
+            }
+        >
+            <div className="space-y-6">
 
                 <div className="glass rounded-xl overflow-hidden">
                     <table className="w-full text-left">

web/studio/src/app/courses/[id]/grading/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useCallback } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { cmsApi, GradingCategory } from "@/lib/api";
 import {
     Plus,
@@ -9,7 +9,6 @@ import {
     Percent,
     AlertCircle,
     CheckCircle2,
-    ArrowLeft,
     TrendingUp,
     Settings
 } from "lucide-react";
@@ -23,7 +22,6 @@ function cn(...inputs: ClassValue[]) {
 
 export default function GradingPolicyPage() {
     const { id } = useParams() as { id: string };
-    const router = useRouter();
     const [categories, setCategories] = useState<GradingCategory[]>([]);
     const [loading, setLoading] = useState(true);
     const [newName, setNewName] = useState("");
@@ -80,25 +78,11 @@ export default function GradingPolicyPage() {
     );
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
+        <CourseEditorLayout
-            <div className="max-w-4xl mx-auto">
+            activeTab="grading"
-                {/* Header */}
+            pageTitle="Política de Notas"
-                <div className="flex items-center justify-between mb-12">
+            pageDescription="Configura los tipos de evaluación y la distribución de pesos del curso."
-                    <div className="flex items-center gap-4">
+            pageActions={
-                        <button
-                            onClick={() => router.back()}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
-                        >
-                            <ArrowLeft className="w-6 h-6" />
-                        </button>
-                        <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
-                                Grading Policy
-                            </h1>
-                            <p className="text-gray-400 mt-1">Configure assessment types and weight distribution</p>
-                        </div>
-                    </div>
-
                 <div className={cn(
                     "flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-500",
                     isBalanced ? "bg-green-500/10 border-green-500/30 text-green-400 shadow-lg shadow-green-500/5"
@@ -108,10 +92,9 @@ export default function GradingPolicyPage() {
                     <span className="font-bold text-lg">{totalWeight}%</span>
                     <span className="text-sm opacity-70">Total Weight</span>
                 </div>
-                </div>
+            }
-
+        >
-                <CourseEditorLayout activeTab="grading">
+            <div className="p-0">
-                    <div className="p-8">
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Categories List */}
                     <div className="lg:col-span-2 space-y-4">
@@ -218,7 +201,5 @@ export default function GradingPolicyPage() {
                 </div>
             </div>
         </CourseEditorLayout>
-            </div>
-        </div>
     );
 }

web/studio/src/app/courses/[id]/page.tsx

@@ -222,30 +222,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
     if (error) return <div className="py-20 text-center text-red-400">{error}</div>;
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
+        <>
-            <div className="max-w-6xl mx-auto">
+            <CourseEditorLayout
-                {/* Header */}
+                activeTab="outline"
-                <div className="flex items-center justify-between mb-12">
+                pageTitle="Editor de Curso"
-                    <div className="flex items-center gap-4">
+                pageDescription={`Diseña la estructura de tu curso y el contenido de las lecciones.`}
-                        <button
+                pageActions={
-                            onClick={() => router.push('/')}
+                    <>
-                            className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-gray-700 dark:text-gray-300"
-                        >
-                            <ArrowLeft className="w-6 h-6" />
-                        </button>
-                        <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
-                                Course Editor
-                            </h1>
-                            <div className="flex items-center gap-3 mt-1">
-                                <p className="text-gray-600 dark:text-gray-400">Design your course structure and lesson content for {course?.title}</p>
-                                <span className={`text-xs uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400' : 'bg-green-500/10 dark:bg-green-500/20 text-green-600 dark:text-green-400'}`}>
-                                    {course?.pacing_mode?.replace('_', ' ') || 'Self Paced'}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex gap-3">
                         <button
                             onClick={async () => {
                                 try {
@@ -257,27 +240,26 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                     alert("Failed to start preview.");
                                 }
                             }}
-                            className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/20 transition-all rounded-xl text-sm font-bold shadow-lg active:scale-95"
+                            className="flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95"
                         >
-                            <PlayCircle size={18} /> Preview
+                            <PlayCircle size={18} /> Previsualizar
                         </button>
                         <button
                             onClick={handlePublish}
                             disabled={saving}
-                            className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold transition-all shadow-lg shadow-blue-500/20 active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
+                            className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
                         >
                             {saving ? (
                                 <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
                             ) : (
                                 <Send size={18} />
                             )}
-                            {saving ? 'Publishing...' : 'Publish Course'}
+                            {saving ? 'Publicando...' : 'Publicar Curso'}
                         </button>
-                    </div>
+                    </>
-                </div>
+                }
-
+            >
-                <CourseEditorLayout activeTab="outline">
+                <div className="space-y-6">
-                    <div className="p-8 space-y-6">
                     {modules.map((module: FullModule, mIndex: number) => (
                         <div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
                             <div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5">
@@ -441,7 +423,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                     </button>
                 </div>
             </CourseEditorLayout>
-            </div>
             {/* Organization Selector Modal */}
             <OrganizationSelector
                 isOpen={isOrgModalOpen}
@@ -451,6 +432,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                 actionLabel="Publish Course"
                 onConfirm={(orgId) => publishCourse(orgId)}
             />
-        </div>
+        </>
     );
 }

web/studio/src/app/courses/[id]/rubrics/page.tsx

@@ -1,45 +1,29 @@
 "use client";
 
 import React, { useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import CourseEditorLayout from "@/components/CourseEditorLayout";
 import RubricList from "@/components/Rubrics/RubricList";
 import RubricEditor from "@/components/Rubrics/RubricEditor";
-import { ArrowLeft, FileText, Info } from "lucide-react";
+import { FileText, Info } from "lucide-react";
 
 export default function RubricsPage() {
     const { id } = useParams() as { id: string };
-    const router = useRouter();
     const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
+        <CourseEditorLayout
-            <div className="max-w-7xl mx-auto">
+            activeTab="rubrics"
-                {/* Header */}
+            pageTitle="Gestión de Rúbricas"
-                <div className="flex items-center justify-between mb-12">
+            pageDescription="Crea y gestiona rúbricas de evaluación para tu curso."
-                    <div className="flex items-center gap-4">
+            pageActions={
-                        <button
-                            onClick={() => router.back()}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
-                        >
-                            <ArrowLeft className="w-6 h-6" />
-                        </button>
-                        <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
-                                Rubrics Management
-                            </h1>
-                            <p className="text-gray-400 mt-1">Create and manage evaluation rubrics for your course</p>
-                        </div>
-                    </div>
-
                 <div className="hidden md:flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-2xl text-blue-400 text-sm">
                     <Info className="w-4 h-4" />
-                        <span>Rubrics can be assigned to multiple lessons across the course.</span>
+                    <span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
                 </div>
-                </div>
+            }
-
+        >
-                <CourseEditorLayout activeTab="rubrics">
+            <div className="p-0">
-                    <div className="p-8">
                 {editingRubricId ? (
                     <RubricEditor
                         rubricId={editingRubricId}
@@ -54,7 +38,5 @@ export default function RubricsPage() {
                 )}
             </div>
         </CourseEditorLayout>
-            </div>
-        </div>
     );
 }

web/studio/src/app/courses/[id]/sessions/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { lmsApi, cmsApi, Course, Meeting } from "@/lib/api";
 import {
     Video,
@@ -9,7 +9,6 @@ import {
     Calendar as CalendarIcon,
     Clock,
     Trash2,
-    ArrowLeft,
     Loader2,
     Globe,
     Link as LinkIcon,
@@ -19,7 +18,6 @@ import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 export default function LiveSessionsPage() {
     const { id } = useParams() as { id: string };
-    const router = useRouter();
     const [meetings, setMeetings] = useState<Meeting[]>([]);
     const [loading, setLoading] = useState(true);
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -81,30 +79,21 @@ export default function LiveSessionsPage() {
     }
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
+        <>
-            <div className="max-w-7xl mx-auto">
+            <CourseEditorLayout
-                <div className="flex items-center justify-between mb-8">
+                activeTab="sessions"
-                    <div className="flex items-center gap-4">
+                pageTitle="Sesiones en Vivo"
-                        <button onClick={() => router.back()} className="p-2 hover:bg-white/10 rounded-full transition-colors">
+                pageDescription="Programa y gestiona reuniones virtuales y sesiones en vivo."
-                            <ArrowLeft className="w-6 h-6" />
+                pageActions={
-                        </button>
-                        <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
-                                Live Learning Sessions
-                            </h1>
-                            <p className="text-gray-400 mt-1">Schedule and manage virtual meetings and live sessions</p>
-                        </div>
-                    </div>
                     <button
                         onClick={() => setIsCreateModalOpen(true)}
-                        className="btn-premium px-6 py-3 flex items-center gap-2"
+                        className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95"
                     >
-                        <Plus size={18} />
+                        <Plus size={16} />
-                        Schedule Session
+                        Programar Sesión
                     </button>
-                </div>
+                }
-
+            >
-                <CourseEditorLayout activeTab="sessions">
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {meetings.length === 0 ? (
                         <div className="col-span-full py-20 bg-white/[0.02] border border-dashed border-white/10 rounded-3xl text-center">
@@ -177,7 +166,6 @@ export default function LiveSessionsPage() {
                     )}
                 </div>
             </CourseEditorLayout>
-            </div>
 
             {/* Create Meeting Modal */}
             {isCreateModalOpen && (
@@ -246,6 +234,6 @@ export default function LiveSessionsPage() {
                     </div>
                 </div>
             )}
-        </div>
+        </>
     );
 }

web/studio/src/app/library/assets/page.tsx

@@ -3,12 +3,12 @@
 import React, { useEffect, useState, useCallback } from "react";
 import {
     Search, Image as ImageIcon, FileText, Film, File as FileIcon,
-    Loader2, Upload, Trash2, ExternalLink, Filter, Plus, ChevronLeft
+    Loader2, Upload, Trash2, ExternalLink, Filter, Plus
 } from "lucide-react";
 import { cmsApi, Asset, AssetFilters, getImageUrl } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
 import { useTranslation } from "@/context/I18nContext";
-import Link from "next/link";
+import PageLayout from "@/components/PageLayout";
 
 export default function AssetLibraryPage() {
     const { t } = useTranslation();
@@ -86,25 +86,13 @@ export default function AssetLibraryPage() {
     };
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white pt-24 pb-12 px-6 transition-colors duration-300">
+        <PageLayout
-            <div className="max-w-7xl mx-auto space-y-8">
+            title="Biblioteca de Recursos"
-                {/* Header */}
+            description="Gestiona y reutiliza archivos de medios en todos tus cursos."
-                <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+            actions={
-                    <div className="space-y-1">
+                <label className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm transition-all cursor-pointer shadow-md shadow-blue-600/20 active:scale-95">
-                        <Link href="/" className="flex items-center gap-2 text-gray-500 hover:text-blue-400 transition-colors text-xs uppercase font-bold tracking-widest mb-2">
+                    <Upload className="w-4 h-4" />
-                            <ChevronLeft className="w-4 h-4" />
+                    Subir Archivos
-                            Back to Dashboard
-                        </Link>
-                        <h1 className="text-4xl font-black tracking-tight flex items-center gap-4">
-                            Global <span className="gradient-text">Asset Library</span>
-                        </h1>
-                        <p className="text-gray-600 dark:text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
-                    </div>
-
-                    <div className="flex gap-3">
-                        <label className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold transition-all cursor-pointer shadow-lg shadow-blue-600/20 active:scale-95">
-                            <Upload className="w-5 h-5" />
-                            Upload Files
                     <input
                         type="file"
                         multiple
@@ -113,10 +101,9 @@ export default function AssetLibraryPage() {
                         disabled={isUploading}
                     />
                 </label>
-                    </div>
+            }
-                </div>
+        >
-
+            <div className="space-y-6">
-                {/* Upload Progress Bar */}
                 {isUploading && (
                     <div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
                         <div className="flex justify-between items-center mb-2">
@@ -251,6 +238,6 @@ export default function AssetLibraryPage() {
                     </div>
                 )}
             </div>
-        </div>
+        </PageLayout>
     );
 }

web/studio/src/app/page.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "@/context/I18nContext";
 import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
 import OrganizationSelector from "@/components/OrganizationSelector";
 import Modal from "@/components/Modal";
+import PageLayout from "@/components/PageLayout";
 
 export default function StudioDashboard() {
   const { t } = useTranslation();
@@ -158,38 +159,33 @@ export default function StudioDashboard() {
   };
 
   return (
-    <div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
+    <PageLayout
-      <div className="max-w-7xl mx-auto">
+      title={t('nav.courses')}
-        {/* Header */}
+      description={t('dashboard.title') || 'Panel de Control'}
-        <div className="flex justify-between items-center mb-12">
+      actions={
-          <div>
+        <>
-            <h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight">
+          <label className="flex items-center gap-2 px-5 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold text-sm transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
-              {t('nav.courses')}
+            <Upload size={16} />
-            </h1>
-            <p className="text-gray-600 dark:text-gray-400 mt-2">{t('dashboard.title')}</p>
-          </div>
-          <div className="flex items-center gap-3">
-            <label className="flex items-center gap-2 px-6 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
-              <Upload size={18} />
             Importar
             <input type="file" accept=".json" onChange={handleImport} className="hidden" />
           </label>
           <button
             onClick={() => setIsAIModalOpen(true)}
-              className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 rounded-xl font-bold shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
+            className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
           >
-              <Sparkles size={18} className="text-amber-300 group-hover:rotate-12 transition-transform" />
+            <Sparkles size={16} className="text-amber-300 group-hover:rotate-12 transition-transform" />
             AI Wizard
           </button>
           <button
             onClick={handleCreateCourse}
-              className="flex items-center gap-2 px-6 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95 text-slate-900 dark:text-white"
+            className="flex items-center gap-2 px-5 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold text-sm transition-all active:scale-95 text-slate-900 dark:text-white"
           >
-              <Plus size={20} />
+            <Plus size={18} />
             Manual
           </button>
-          </div>
+        </>
-        </div>
+      }
+    >
 
       {loading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -238,7 +234,6 @@ export default function StudioDashboard() {
           ))}
         </div>
       )}
-      </div>
 
       {/* New Course Title Modal */}
       <Modal
@@ -345,6 +340,6 @@ export default function StudioDashboard() {
         actionLabel="Create Course"
         onConfirm={(orgId) => createCourse(orgId)}
       />
-    </div >
+    </PageLayout>
   );
 }

web/studio/src/app/profile/page.tsx

@@ -17,6 +17,7 @@ import {
     Trash2
 } from "lucide-react";
 import Image from "next/image";
+import PageLayout from "@/components/PageLayout";
 
 export default function ProfilePage() {
     const { t, setLanguage: setContextLanguage } = useTranslation();
@@ -89,12 +90,11 @@ export default function ProfilePage() {
     if (!user) return null;
 
     return (
-        <div className="max-w-5xl mx-auto py-12 px-6">
+        <PageLayout
-            <div className="mb-12">
+            title="Perfil de Usuario"
-                <h1 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white mb-2 transition-colors">User Profile</h1>
+            description="Gestiona tu identidad y preferencias en la plataforma."
-                <p className="text-slate-500 dark:text-gray-400 transition-colors">Manage your identity and preferences across the platform.</p>
+            maxWidth="narrow"
-            </div>
+        >
-
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 {/* Left Column: Profile Card */}
                 <div className="lg:col-span-1 space-y-6">
@@ -285,6 +285,6 @@ export default function ProfilePage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </PageLayout>
     );
 }

web/studio/src/app/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import BrandingSettings from "@/components/BrandingSettings";
+import PageLayout from "@/components/PageLayout";
 import { useAuth } from "@/context/AuthContext";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -16,16 +17,15 @@ export default function SettingsPage() {
     }, [user, loading, router]);
 
     if (loading) return null;
-
     if (!user || user.role !== "admin") return null;
 
     return (
-        <div className="pt-24 px-8 pb-12 min-h-screen bg-transparent transition-colors duration-300">
+        <PageLayout
-            <div className="max-w-4xl mx-auto mb-8">
+            title="Configuración de Organización"
-                <h1 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Organization Settings</h1>
+            description="Gestiona el branding y la identidad de tu plataforma."
-                <p className="text-gray-600 dark:text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
+            maxWidth="narrow"
-            </div>
+        >
             <BrandingSettings />
-        </div>
+        </PageLayout>
     );
 }

web/studio/src/components/CourseEditorLayout.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import {
     Layout, CheckCircle2, BarChart2, Settings, Folder,
     GraduationCap, Megaphone, Users, Award, Video,
-    BookOpen, ShieldCheck, Radio, TrendingUp
+    BookOpen, ShieldCheck, Radio, TrendingUp, ChevronLeft
 } from "lucide-react";
+import { cmsApi, Course } from "@/lib/api";
 
 type TabKey =
     | "outline"
@@ -27,6 +28,12 @@ type TabKey =
 interface CourseEditorLayoutProps {
     children: React.ReactNode;
     activeTab: TabKey;
+    /** Título de la sección específica (ej: "Grading Policy"). Si se omite, usa el nombre del curso. */
+    pageTitle?: string;
+    /** Descripción de la sección específica. */
+    pageDescription?: string;
+    /** Acciones extra que van a la derecha del header (Preview, Publish, etc.) */
+    pageActions?: React.ReactNode;
 }
 
 interface Tab {
@@ -43,8 +50,21 @@ interface Group {
     tabs: Tab[];
 }
 
-export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
+export default function CourseEditorLayout({
-    const { id } = useParams() as { id: string };
+    children,
+    activeTab,
+    pageTitle,
+    pageDescription,
+    pageActions,
+}: CourseEditorLayoutProps) {
+    const params = useParams() as { id: string };
+    const id = params.id;
+    const router = useRouter();
+    const [course, setCourse] = useState<Course | null>(null);
+
+    useEffect(() => {
+        cmsApi.getCourse(id).then(setCourse).catch(console.error);
+    }, [id]);
 
     const groups: Group[] = [
         {
@@ -101,18 +121,58 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
     const activeGroup = groups.find((g) => g.tabs.some((t) => t.key === activeTab));
     const subTabs = activeGroup?.tabs ?? [];
 
+    // Determine header text
+    const displayTitle = pageTitle || "Course Editor";
+    const displayDescription = pageDescription
+        || (course ? `${course.title}` : "Cargando curso...");
+
     return (
-        <div className="space-y-0">
+        <div className="min-h-screen bg-transparent">
-            {/* PRIMARY GROUP NAV */}
+            <div className="max-w-7xl mx-auto px-6 pt-8 pb-12">
+
+                {/* ── PAGE HEADER ── */}
+                <div className="flex items-center justify-between gap-4 mb-6">
+                    <div className="flex items-center gap-3">
+                        <button
+                            onClick={() => router.push("/")}
+                            className="p-1.5 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
+                            aria-label="Volver al inicio"
+                        >
+                            <ChevronLeft className="w-5 h-5" />
+                        </button>
+                        <div>
+                            <h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
+                                {displayTitle}
+                            </h1>
+                            <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">
+                                {displayDescription}
+                                {course?.pacing_mode && (
+                                    <span className={`ml-2 text-xs font-bold px-1.5 py-0.5 rounded ${course.pacing_mode === "instructor_led"
+                                            ? "bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400"
+                                            : "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400"
+                                        }`}>
+                                        {course.pacing_mode.replace("_", " ").toUpperCase()}
+                                    </span>
+                                )}
+                            </p>
+                        </div>
+                    </div>
+                    {pageActions && (
+                        <div className="flex items-center gap-3 shrink-0">
+                            {pageActions}
+                        </div>
+                    )}
+                </div>
+
+                {/* ── TAB NAVIGATION ── */}
                 <nav
-                className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-t-xl overflow-hidden"
+                    className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-xl overflow-hidden mb-6"
                     aria-label="Grupos del editor de cursos"
                 >
                     <ul className="flex border-b border-black/8 dark:border-white/8">
                         {groups.map((group) => {
                             const Icon = group.icon;
                             const isGroupActive = group.key === activeGroup?.key;
-                        // When clicking a group, go to its first tab
                             const groupHref = group.tabs[0].href;
                             return (
                                 <li key={group.key} className="flex-shrink-0">
@@ -133,7 +193,10 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
 
                     {/* SECONDARY SUB-TAB NAV */}
                     {subTabs.length > 1 && (
-                    <ul className="flex bg-slate-50 dark:bg-white/[0.03] border-b border-black/5 dark:border-white/5 px-2 gap-1" aria-label="Sub-secciones">
+                        <ul
+                            className="flex bg-slate-50 dark:bg-white/[0.03] px-2 gap-1"
+                            aria-label="Sub-secciones"
+                        >
                             {subTabs.map((tab) => {
                                 const Icon = tab.icon;
                                 const isActive = tab.key === activeTab;
@@ -157,10 +220,11 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
                     )}
                 </nav>
 
-            {/* Content */}
+                {/* ── PAGE CONTENT ── */}
-            <div className="pt-6 space-y-6">
+                <div className="space-y-6">
                     {children}
                 </div>
             </div>
+        </div>
     );
 }

web/studio/src/components/PageLayout.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { ChevronLeft } from "lucide-react";
+
+interface PageLayoutProps {
+    /** Título principal de la página */
+    title: string;
+    /** Descripción/subtítulo opcional */
+    description?: string;
+    /** Acciones que van a la derecha del título (botones, etc.) */
+    actions?: React.ReactNode;
+    /** Componente de navegación secundaria (ej: pestañas del editor) */
+    navigation?: React.ReactNode;
+    /** Link de "volver atrás" — mostrar solo cuando sea necesario */
+    backHref?: string;
+    backLabel?: string;
+    /** Contenido principal de la página */
+    children: React.ReactNode;
+    /** Ancho máximo del contenedor: 'default' (max-w-7xl) o 'narrow' (max-w-5xl) */
+    maxWidth?: "default" | "narrow" | "wide";
+}
+
+const MAX_WIDTH_CLASS = {
+    default: "max-w-7xl",
+    narrow: "max-w-5xl",
+    wide: "max-w-screen-2xl",
+};
+
+/**
+ * Componente de layout estándar para todas las páginas del Studio.
+ * Garantiza: mismo padding superior, misma jerarquía tipográfica, mismo max-width.
+ */
+export default function PageLayout({
+    title,
+    description,
+    actions,
+    navigation,
+    backHref,
+    backLabel = "Volver",
+    children,
+    maxWidth = "default",
+}: PageLayoutProps) {
+    const containerClass = MAX_WIDTH_CLASS[maxWidth];
+
+    return (
+        <div className="min-h-screen bg-transparent">
+            <div className={`${containerClass} mx-auto px-6 pt-10 pb-12`}>
+
+                {/* Back link */}
+                {backHref && (
+                    <Link
+                        href={backHref}
+                        className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 transition-colors mb-5"
+                    >
+                        <ChevronLeft className="w-4 h-4" />
+                        {backLabel}
+                    </Link>
+                )}
+
+                {/* Page header */}
+                <div className="flex items-start justify-between gap-4 mb-8">
+                    <div>
+                        <h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
+                            {title}
+                        </h1>
+                        {description && (
+                            <p className="mt-1.5 text-sm text-slate-500 dark:text-gray-400">
+                                {description}
+                            </p>
+                        )}
+                    </div>
+                    {actions && (
+                        <div className="flex items-center gap-3 shrink-0">
+                            {actions}
+                        </div>
+                    )}
+                </div>
+
+                {/* Optional secondary navigation (tabs, breadcrumbs, etc.) */}
+                {navigation && (
+                    <div className="mb-6">
+                        {navigation}
+                    </div>
+                )}
+
+                {/* Main content */}
+                {children}
+            </div>
+        </div>
+    );
+}