From 1987acd734379cbd87ef859b283736f2f5c19897 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Mon, 2 Mar 2026 17:32:48 -0300
Subject: [PATCH] feat: Refactor course editor layout to support dynamic page
 headers and standardize styling with new utility classes, including some
 localization.

---
 .../src/app/courses/[id]/analytics/page.tsx   | 319 +++++----
 .../app/courses/[id]/announcements/page.tsx   | 227 ++++---
 .../src/app/courses/[id]/calendar/page.tsx    | 148 ++---
 .../src/app/courses/[id]/grades/page.tsx      | 306 +++++----
 .../[id]/settings/TeamManagementSection.tsx   |   4 +-
 .../src/app/courses/[id]/settings/page.tsx    | 610 +++++++++---------
 .../src/app/courses/[id]/students/page.tsx    | 321 +++++----
 web/studio/src/app/courses/[id]/team/page.tsx | 290 +++++----
 web/studio/src/app/globals.css                |  24 +
 .../src/components/CourseEditorLayout.tsx     |  18 +-
 10 files changed, 1106 insertions(+), 1161 deletions(-)

diff --git a/web/studio/src/app/courses/[id]/analytics/page.tsx b/web/studio/src/app/courses/[id]/analytics/page.tsx
index 7028a0a..e2ed49e 100644
--- a/web/studio/src/app/courses/[id]/analytics/page.tsx
+++ b/web/studio/src/app/courses/[id]/analytics/page.tsx
@@ -9,16 +9,15 @@ import {
     Users,
     TrendingUp,
     AlertTriangle,
-    ArrowLeft,
     CheckCircle2,
     BookOpen,
     Layers,
     ShieldAlert
 } from "lucide-react";
-import CourseEditorLayout from "@/components/CourseEditorLayout";
 import DropoutRiskDashboard from "@/components/Analytics/DropoutRiskDashboard";
 import LiveSessions from "@/components/Courses/LiveSessions";
 import { Video } from "lucide-react";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 export default function AnalyticsPage() {
     const { id } = useParams() as { id: string };
@@ -34,19 +33,13 @@ export default function AnalyticsPage() {
 
     useEffect(() => {
         const fetchData = async () => {
-            // Wait for auth to load
-            if (!user) {
-                return;
-            }
-
-            // Check authorization
+            if (!user) return;
             if (user.role !== 'admin' && user.role !== 'instructor') {
                 router.push('/');
                 return;
             }
 
             try {
-                // Fetch cohorts once
                 const cohortsData = await lmsApi.getCohorts();
                 setCohorts(cohortsData);
 
@@ -94,185 +87,171 @@ export default function AnalyticsPage() {
         .sort((a, b) => a.average_score - b.average_score);
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-7xl mx-auto">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-12">
-                    <div className="flex items-center gap-4">
-                        <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">
-                                Course Analytics
-                            </h1>
-                            <p className="text-gray-600 dark:text-gray-400 mt-1">Performance insights and student progress for {course?.title}</p>
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-4">
-                        <select
-                            value={selectedCohortId}
-                            onChange={(e) => setSelectedCohortId(e.target.value)}
-                            className="bg-black/5 dark:bg-white/5 text-gray-900 dark:text-white border border-black/10 dark:border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-                        >
-                            <option value="">All Students</option>
-                            {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-                        </select>
-                        <button
-                            onClick={() => router.push(`/courses/${id}/analytics/advanced`)}
-                            className="btn-premium !bg-purple-600/10 !text-purple-400 border border-purple-500/20 hover:!bg-purple-600/20 !shadow-none gap-2 text-xs py-2"
-                        >
-                            <Layers size={14} /> Advanced Insights
-                        </button>
-                        <div className="bg-blue-500/20 text-blue-400 text-[10px] font-black uppercase tracking-wider px-2 py-1 rounded border border-blue-500/30">
-                            {user?.role} View
-                        </div>
+        <CourseEditorLayout
+            activeTab="analytics"
+            pageTitle="Análisis del Curso"
+            pageDescription={`Insights de rendimiento y progreso para ${course?.title}`}
+            pageActions={
+                <div className="flex items-center gap-3">
+                    <select
+                        value={selectedCohortId}
+                        onChange={(e) => setSelectedCohortId(e.target.value)}
+                        className="bg-white/5 text-gray-900 dark:text-white border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[160px]"
+                    >
+                        <option value="">Todos los Estudiantes</option>
+                        {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+                    </select>
+                    <button
+                        onClick={() => router.push(`/courses/${id}/analytics/advanced`)}
+                        className="flex items-center gap-2 px-4 py-2 bg-purple-600/10 hover:bg-purple-600/20 text-purple-400 border border-purple-500/20 rounded-xl font-bold text-xs transition-all active:scale-95"
+                    >
+                        <Layers size={14} /> Insights Avanzados
+                    </button>
+                    <div className="bg-blue-500/10 text-blue-400 text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-lg border border-blue-500/20">
+                        {user?.role} View
                     </div>
                 </div>
+            }
+        >
+            <div className="space-y-12">
+                {/* Tab Selector */}
+                <div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
+                    <button
+                        onClick={() => setActiveAnalyticsTab("overview")}
+                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                    >
+                        <BarChart3 size={16} /> Overview
+                    </button>
+                    <button
+                        onClick={() => setActiveAnalyticsTab("risks")}
+                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? "bg-red-600 text-white shadow-lg shadow-red-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                    >
+                        <ShieldAlert size={16} /> Predictive Risks
+                    </button>
+                    <button
+                        onClick={() => setActiveAnalyticsTab("live")}
+                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                    >
+                        <Video size={16} /> Live Sessions
+                    </button>
+                </div>
 
-                <CourseEditorLayout activeTab="analytics">
-                    <div className="p-8">
-                        {/* Tab Selector */}
-                        <div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
-                            <button
-                                onClick={() => setActiveAnalyticsTab("overview")}
-                                className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
-                            >
-                                <BarChart3 size={16} /> Overview
-                            </button>
-                            <button
-                                onClick={() => setActiveAnalyticsTab("risks")}
-                                className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? 'bg-red-600 text-gray-900 dark:text-white shadow-lg shadow-red-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
-                            >
-                                <ShieldAlert size={16} /> Predictive Risks
-                            </button>
-                            <button
-                                onClick={() => setActiveAnalyticsTab("live")}
-                                className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
-                            >
-                                <Video size={16} /> Live Sessions
-                            </button>
+                {activeAnalyticsTab === "overview" && (
+                    <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                                <div className="flex items-center gap-4 mb-4">
+                                    <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
+                                        <Users size={24} />
+                                    </div>
+                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
+                                </div>
+                                <div className="text-4xl font-black">{analytics.total_enrollments}</div>
+                                <div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
+                            </div>
+
+                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                                <div className="flex items-center gap-4 mb-4">
+                                    <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
+                                        <TrendingUp size={24} />
+                                    </div>
+                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
+                                </div>
+                                <div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
+                                <div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
+                            </div>
+
+                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                                <div className="flex items-center gap-4 mb-4">
+                                    <div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
+                                        <AlertTriangle size={24} />
+                                    </div>
+                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
+                                </div>
+                                <div className="text-4xl font-black">{difficultLessons.length}</div>
+                                <div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
+                            </div>
                         </div>
 
-                        {activeAnalyticsTab === "overview" ? (
-                            <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
-                                {/* Stats Grid */}
-                                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                                    <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
-                                        <div className="flex items-center gap-4 mb-4">
-                                            <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
-                                                <Users size={24} />
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                            <section>
+                                <h2 className="section-title mb-6">
+                                    <BarChart3 className="text-blue-500" />
+                                    Rendimiento de Lecciones
+                                </h2>
+                                <div className="space-y-4">
+                                    {analytics.lessons.map((lesson) => (
+                                        <div key={lesson.lesson_id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl p-6 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
+                                            <div className="flex items-start justify-between mb-4">
+                                                <div>
+                                                    <h3 className="font-bold">{lesson.lesson_title}</h3>
+                                                    <p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
+                                                </div>
+                                                <div className={`text-xl font-black ${lesson.average_score < 0.6 ? "text-red-400" : lesson.average_score < 0.8 ? "text-orange-400" : "text-green-400"}`}>
+                                                    {Math.round(lesson.average_score * 100)}%
+                                                </div>
                                             </div>
-                                            <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
-                                        </div>
-                                        <div className="text-4xl font-black">{analytics.total_enrollments}</div>
-                                        <div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
-                                    </div>
-
-                                    <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
-                                        <div className="flex items-center gap-4 mb-4">
-                                            <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
-                                                <TrendingUp size={24} />
+                                            <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
+                                                <div
+                                                    className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? "bg-red-500" : lesson.average_score < 0.8 ? "bg-orange-500" : "bg-green-500"}`}
+                                                    style={{ width: `${lesson.average_score * 100}%` }}
+                                                />
                                             </div>
-                                            <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
                                         </div>
-                                        <div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
-                                        <div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
-                                    </div>
-
-                                    <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
-                                        <div className="flex items-center gap-4 mb-4">
-                                            <div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
-                                                <AlertTriangle size={24} />
-                                            </div>
-                                            <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
-                                        </div>
-                                        <div className="text-4xl font-black">{difficultLessons.length}</div>
-                                        <div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
-                                    </div>
+                                    ))}
                                 </div>
+                            </section>
 
-                                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-                                    {/* Lesson Breakdown */}
-                                    <section>
-                                        <h2 className="text-2xl font-black mb-6 flex items-center gap-3">
-                                            <BarChart3 className="text-blue-500" />
-                                            Lesson Performance
-                                        </h2>
+                            <section className="space-y-8">
+                                <div>
+                                    <h2 className="section-title mb-6">
+                                        <AlertTriangle className="text-orange-500" />
+                                        Lecciones con Dificultad
+                                    </h2>
+                                    {difficultLessons.length > 0 ? (
                                         <div className="space-y-4">
-                                            {analytics.lessons.map((lesson) => (
-                                                <div key={lesson.lesson_id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl p-6 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
-                                                    <div className="flex items-start justify-between mb-4">
-                                                        <div>
-                                                            <h3 className="font-bold">{lesson.lesson_title}</h3>
-                                                            <p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
-                                                        </div>
-                                                        <div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
-                                                            {Math.round(lesson.average_score * 100)}%
-                                                        </div>
-                                                    </div>
-                                                    <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
-                                                        <div
-                                                            className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
-                                                            style={{ width: `${lesson.average_score * 100}%` }}
-                                                        />
+                                            {difficultLessons.map(l => (
+                                                <div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
+                                                    <div>
+                                                        <h4 className="font-bold text-red-400">{l.lesson_title}</h4>
+                                                        <p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
+                                                            Average score is below 70%. Consider reviewing the material or difficulty of questions.
+                                                        </p>
                                                     </div>
+                                                    <div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
                                                 </div>
                                             ))}
                                         </div>
-                                    </section>
-
-                                    {/* Actionable Insights */}
-                                    <section className="space-y-8">
-                                        <div>
-                                            <h2 className="text-2xl font-black mb-6 flex items-center gap-3">
-                                                <AlertTriangle className="text-orange-500" />
-                                                Struggling Lessons
-                                            </h2>
-                                            {difficultLessons.length > 0 ? (
-                                                <div className="space-y-4">
-                                                    {difficultLessons.map(l => (
-                                                        <div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
-                                                            <div>
-                                                                <h4 className="font-bold text-red-400">{l.lesson_title}</h4>
-                                                                <p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
-                                                                    Average score is below 70%. Consider reviewing the material or difficulty of questions.
-                                                                </p>
-                                                            </div>
-                                                            <div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
-                                                        </div>
-                                                    ))}
-                                                </div>
-                                            ) : (
-                                                <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
-                                                    <CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
-                                                    <h4 className="font-bold text-green-400">All set!</h4>
-                                                    <p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
-                                                </div>
-                                            )}
+                                    ) : (
+                                        <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
+                                            <CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
+                                            <h4 className="font-bold text-green-400">All set!</h4>
+                                            <p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
                                         </div>
-
-                                        <div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
-                                            <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
-                                                <BookOpen className="text-blue-400" />
-                                                Content Strategy Tip
-                                            </h3>
-                                            <p className="text-sm text-blue-200/70 leading-relaxed">
-                                                High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
-                                            </p>
-                                        </div>
-                                    </section>
+                                    )}
                                 </div>
-                            </div>
-                        ) : (
-                            <DropoutRiskDashboard courseId={id} />
-                        )}
+                                <div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
+                                    <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
+                                        <BookOpen className="text-blue-400" />
+                                        Content Strategy Tip
+                                    </h3>
+                                    <p className="text-sm text-blue-200/70 leading-relaxed">
+                                        High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
+                                    </p>
+                                </div>
+                            </section>
+                        </div>
                     </div>
-                </CourseEditorLayout>
+                )}
+
+                {activeAnalyticsTab === "risks" && (
+                    <DropoutRiskDashboard courseId={id} />
+                )}
+
+                {activeAnalyticsTab === "live" && (
+                    <LiveSessions courseId={id} />
+                )}
             </div>
-        </div>
+        </CourseEditorLayout>
     );
 }
diff --git a/web/studio/src/app/courses/[id]/announcements/page.tsx b/web/studio/src/app/courses/[id]/announcements/page.tsx
index 94a77c6..463cd93 100644
--- a/web/studio/src/app/courses/[id]/announcements/page.tsx
+++ b/web/studio/src/app/courses/[id]/announcements/page.tsx
@@ -25,7 +25,7 @@ export default function AnnouncementsPage() {
                 lmsApi.getCohorts()
             ]);
             setAnnouncements(annData);
-            setCohorts(cohortData.filter(c => c.course_id === id));
+            setCohorts(cohortData.filter((c: any) => c.course_id === id));
         } catch (error) {
             console.error("Error fetching announcements:", error);
         } finally {
@@ -54,136 +54,127 @@ export default function AnnouncementsPage() {
     );
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-5xl mx-auto">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-8">
-                    <div className="flex items-center gap-4">
-                        <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-orange-400 to-red-400 bg-clip-text text-transparent">
-                                Announcements
-                            </h1>
-                            <p className="text-gray-400 mt-1">Manage course communications and cohort segments</p>
-                        </div>
-                    </div>
+        <>
+            <CourseEditorLayout
+                activeTab="announcements"
+                pageTitle="Anuncios"
+                pageDescription="Gestiona las comunicaciones del curso y segmentos de cohortes."
+                pageActions={
                     <button
                         onClick={() => setShowNewModal(true)}
-                        className="flex items-center gap-2 px-6 py-3 bg-orange-600 hover:bg-orange-500 rounded-xl font-bold shadow-lg shadow-orange-500/20 transition-all active:scale-95"
+                        className="flex items-center gap-2 px-6 py-2.5 bg-orange-600 hover:bg-orange-500 text-white rounded-xl font-bold text-sm shadow-md shadow-orange-500/20 transition-all active:scale-95"
                     >
                         <Plus size={18} />
-                        New Announcement
+                        Nuevo Anuncio
                     </button>
-                </div>
-
-                <CourseEditorLayout activeTab="announcements">
-                    <div className="space-y-6">
-                        {/* Search Bar */}
-                        <div className="glass p-4 rounded-2xl flex items-center gap-4">
-                            <div className="relative flex-1">
-                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-                                <input
-                                    type="text"
-                                    placeholder="Search announcements..."
-                                    value={searchTerm}
-                                    onChange={(e) => setSearchTerm(e.target.value)}
-                                    className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all"
-                                />
-                            </div>
+                }
+            >
+                <div className="space-y-8">
+                    <h2 className="section-title">
+                        <Megaphone className="text-orange-500" />
+                        Comunicados del Curso
+                    </h2>
+                    {/* Search Bar */}
+                    <div className="glass p-4 rounded-2xl flex items-center gap-4">
+                        <div className="relative flex-1">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                            <input
+                                type="text"
+                                placeholder="Search announcements..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all"
+                            />
                         </div>
+                    </div>
 
-                        {/* Announcements List */}
-                        {loading ? (
-                            <div className="flex flex-col items-center justify-center py-20 gap-4">
-                                <Loader2 className="w-10 h-10 text-orange-500 animate-spin" />
-                                <p className="text-gray-400">Loading announcements...</p>
-                            </div>
-                        ) : filteredAnnouncements.length > 0 ? (
-                            <div className="grid gap-6">
-                                {filteredAnnouncements.map((a) => (
-                                    <div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-white/5 border-white/10 hover:border-white/20'}`}>
-                                        <div className="flex items-start justify-between mb-4">
-                                            <div className="flex items-center gap-3">
-                                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
-                                                    {a.author_avatar ? (
-                                                        <img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
-                                                    ) : (
-                                                        a.author_name.charAt(0)
+                    {/* Announcements List */}
+                    {loading ? (
+                        <div className="flex flex-col items-center justify-center py-20 gap-4">
+                            <Loader2 className="w-10 h-10 text-orange-500 animate-spin" />
+                            <p className="text-gray-400">Loading announcements...</p>
+                        </div>
+                    ) : filteredAnnouncements.length > 0 ? (
+                        <div className="grid gap-6">
+                            {filteredAnnouncements.map((a) => (
+                                <div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-white/5 border-white/10 hover:border-white/20'}`}>
+                                    <div className="flex items-start justify-between mb-4">
+                                        <div className="flex items-center gap-3">
+                                            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
+                                                {a.author_avatar ? (
+                                                    <img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
+                                                ) : (
+                                                    a.author_name.charAt(0)
+                                                )}
+                                            </div>
+                                            <div>
+                                                <h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4>
+                                                <div className="flex items-center gap-2 text-sm text-gray-400">
+                                                    <span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
+                                                    {a.cohort_ids && a.cohort_ids.length > 0 && (
+                                                        <>
+                                                            <span>•</span>
+                                                            <div className="flex items-center gap-1 text-blue-400 font-medium">
+                                                                <Users className="w-3 h-3" />
+                                                                <span>{a.cohort_ids.length} Cohorts</span>
+                                                            </div>
+                                                        </>
                                                     )}
                                                 </div>
-                                                <div>
-                                                    <h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4>
-                                                    <div className="flex items-center gap-2 text-sm text-gray-400">
-                                                        <span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
-                                                        {a.cohort_ids && a.cohort_ids.length > 0 && (
-                                                            <>
-                                                                <span>•</span>
-                                                                <div className="flex items-center gap-1 text-blue-400 font-medium">
-                                                                    <Users className="w-3 h-3" />
-                                                                    <span>{a.cohort_ids.length} Cohorts</span>
-                                                                </div>
-                                                            </>
-                                                        )}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                                {a.is_pinned && <Pin className="w-4 h-4 text-orange-400 fill-current" />}
-                                                <button
-                                                    onClick={() => handleDelete(a.id)}
-                                                    className="p-2 rounded-lg hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
-                                                >
-                                                    <Trash2 className="w-4 h-4" />
-                                                </button>
                                             </div>
                                         </div>
-                                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3>
-                                        <p className="text-gray-300 whitespace-pre-wrap">{a.content}</p>
-
-                                        {/* Display Target Cohort Names if segmented */}
-                                        {a.cohort_ids && a.cohort_ids.length > 0 && (
-                                            <div className="mt-4 flex flex-wrap gap-2">
-                                                {a.cohort_ids.map(cid => {
-                                                    const cohort = cohorts.find(c => c.id === cid);
-                                                    return (
-                                                        <span key={cid} className="px-2 py-1 bg-blue-500/10 border border-blue-500/20 rounded-md text-[10px] text-blue-400 font-bold uppercase tracking-wider">
-                                                            {cohort?.name || 'Unknown Cohort'}
-                                                        </span>
-                                                    );
-                                                })}
-                                            </div>
-                                        )}
+                                        <div className="flex items-center gap-2">
+                                            {a.is_pinned && <Pin className="w-4 h-4 text-orange-400 fill-current" />}
+                                            <button
+                                                onClick={() => handleDelete(a.id)}
+                                                className="p-2 rounded-lg hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
+                                            >
+                                                <Trash2 className="w-4 h-4" />
+                                            </button>
+                                        </div>
                                     </div>
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center">
-                                <Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-                                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">No announcements found</h3>
-                                <p className="text-gray-400">Start by creating a new announcement for your students.</p>
-                            </div>
-                        )}
-                    </div>
-                </CourseEditorLayout>
-            </div>
+                                    <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3>
+                                    <p className="text-gray-300 whitespace-pre-wrap">{a.content}</p>
 
-            {showNewModal && (
-                <NewAnnouncementModal
-                    courseId={id}
-                    cohorts={cohorts}
-                    onClose={() => setShowNewModal(false)}
-                    onSuccess={() => {
-                        setShowNewModal(false);
-                        fetchData();
-                    }}
-                />
-            )}
-        </div>
+                                    {/* Display Target Cohort Names if segmented */}
+                                    {a.cohort_ids && a.cohort_ids.length > 0 && (
+                                        <div className="mt-4 flex flex-wrap gap-2">
+                                            {a.cohort_ids.map(cid => {
+                                                const cohort = cohorts.find(c => c.id === cid);
+                                                return (
+                                                    <span key={cid} className="px-2 py-1 bg-blue-500/10 border border-blue-500/20 rounded-md text-[10px] text-blue-400 font-bold uppercase tracking-wider">
+                                                        {cohort?.name || 'Unknown Cohort'}
+                                                    </span>
+                                                );
+                                            })}
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center">
+                            <Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">No announcements found</h3>
+                            <p className="text-gray-400">Start by creating a new announcement for your students.</p>
+                        </div>
+                    )}
+                </div>
+            </CourseEditorLayout>
+
+            {
+                showNewModal && (
+                    <NewAnnouncementModal
+                        courseId={id}
+                        cohorts={cohorts}
+                        onClose={() => setShowNewModal(false)}
+                        onSuccess={() => {
+                            setShowNewModal(false);
+                            fetchData();
+                        }}
+                    />
+                )}
+        </>
     );
 }
 
diff --git a/web/studio/src/app/courses/[id]/calendar/page.tsx b/web/studio/src/app/courses/[id]/calendar/page.tsx
index 5e53c91..fa7e56f 100644
--- a/web/studio/src/app/courses/[id]/calendar/page.tsx
+++ b/web/studio/src/app/courses/[id]/calendar/page.tsx
@@ -98,98 +98,80 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
     const year = currentDate.getFullYear();
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-6xl mx-auto">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-12">
-                    <div className="flex items-center gap-4">
-                        <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">
-                                Course Calendar
-                            </h1>
-                            <p className="text-gray-400 mt-1">Manage important dates and deadlines for {course?.title}</p>
+        <CourseEditorLayout
+            activeTab="calendar"
+            pageTitle="Calendario del Curso"
+            pageDescription={`Gestiona fechas importantes y plazos para ${course?.title || 'este curso'}.`}
+        >
+            <div className="p-8">
+                <div className="flex items-center justify-between mb-8">
+                    <div className="flex items-center gap-6">
+                        <h3 className="text-2xl font-black uppercase tracking-tight">{monthName} <span className="text-blue-500">{year}</span></h3>
+                        <div className="flex items-center gap-2 bg-white/5 rounded-xl p-1 border border-white/10">
+                            <button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronLeft className="w-5 h-5" /></button>
+                            <button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest hover:text-blue-400 transition-colors">Hoy</button>
+                            <button onClick={nextMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronRight className="w-5 h-5" /></button>
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4">
+                        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                            <span className="w-2 h-2 rounded-full bg-red-500"></span> Examen
+                        </div>
+                        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                            <span className="w-2 h-2 rounded-full bg-blue-500"></span> Tarea
+                        </div>
+                        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                            <span className="w-2 h-2 rounded-full bg-purple-500"></span> En Vivo
+                        </div>
+                        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                            <span className="w-2 h-2 rounded-full bg-green-500"></span> Lección
                         </div>
                     </div>
                 </div>
 
-                <CourseEditorLayout activeTab="calendar">
-                    <div className="p-8">
-                        <div className="flex items-center justify-between mb-8">
-                            <div className="flex items-center gap-6">
-                                <h3 className="text-2xl font-black uppercase tracking-tight">{monthName} <span className="text-blue-500">{year}</span></h3>
-                                <div className="flex items-center gap-2 bg-white/5 rounded-xl p-1 border border-white/10">
-                                    <button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronLeft className="w-5 h-5" /></button>
-                                    <button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest hover:text-blue-400 transition-colors">Today</button>
-                                    <button onClick={nextMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronRight className="w-5 h-5" /></button>
-                                </div>
-                            </div>
-
-                            <div className="flex gap-4">
-                                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
-                                    <span className="w-2 h-2 rounded-full bg-red-500"></span> Exam
-                                </div>
-                                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
-                                    <span className="w-2 h-2 rounded-full bg-blue-500"></span> Assignment
-                                </div>
-                                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
-                                    <span className="w-2 h-2 rounded-full bg-purple-500"></span> Live
-                                </div>
-                                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
-                                    <span className="w-2 h-2 rounded-full bg-green-500"></span> Lesson
-                                </div>
-                            </div>
+                <div className="grid grid-cols-7 border-t border-l border-white/5 rounded-xl overflow-hidden shadow-2xl overflow-hidden">
+                    {['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(day => (
+                        <div key={day} className="bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-gray-500 border-r border-b border-white/5">
+                            {day}
                         </div>
+                    ))}
+                    {renderCalendar()}
+                </div>
 
-                        <div className="grid grid-cols-7 border-t border-l border-white/5 rounded-xl overflow-hidden shadow-2xl overflow-hidden">
-                            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
-                                <div key={day} className="bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-gray-500 border-r border-b border-white/5">
-                                    {day}
-                                </div>
-                            ))}
-                            {renderCalendar()}
-                        </div>
-
-                        <div className="mt-12 space-y-4">
-                            <h4 className="text-lg font-bold flex items-center gap-2">
-                                <AlertCircle className="w-5 h-5 text-blue-500" />
-                                Upcoming Deadlines
-                            </h4>
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                                {lessons
-                                    .filter(l => l.due_date && new Date(l.due_date) >= new Date())
-                                    .sort((a, b) => new Date(a.due_date!).getTime() - new Date(b.due_date!).getTime())
-                                    .slice(0, 6)
-                                    .map(lesson => (
-                                        <div key={lesson.id} className="glass p-4 border-white/5 hover:border-blue-500/30 transition-all group">
-                                            <div className="flex justify-between items-start">
-                                                <div>
-                                                    <div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
-                                                        lesson.important_date_type === 'assignment' ? 'text-blue-400' :
-                                                            'text-green-400'
-                                                        }`}>
-                                                        {lesson.important_date_type || 'Activity'}
-                                                    </div>
-                                                    <h5 className="font-bold group-hover:text-blue-400 transition-colors">{lesson.title}</h5>
-                                                </div>
-                                                <div className="text-right">
-                                                    <div className="text-sm font-black">{new Date(lesson.due_date!).toLocaleDateString()}</div>
-                                                    <div className="text-[10px] text-gray-500 uppercase font-bold">Due Date</div>
-                                                </div>
+                <div className="mt-12 space-y-4">
+                    <h4 className="text-lg font-bold flex items-center gap-2">
+                        <AlertCircle className="w-5 h-5 text-blue-500" />
+                        Upcoming Deadlines
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        {lessons
+                            .filter(l => l.due_date && new Date(l.due_date) >= new Date())
+                            .sort((a, b) => new Date(a.due_date!).getTime() - new Date(b.due_date!).getTime())
+                            .slice(0, 6)
+                            .map(lesson => (
+                                <div key={lesson.id} className="glass p-4 border-white/5 hover:border-blue-500/30 transition-all group">
+                                    <div className="flex justify-between items-start">
+                                        <div>
+                                            <div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
+                                                lesson.important_date_type === 'assignment' ? 'text-blue-400' :
+                                                    'text-green-400'
+                                                }`}>
+                                                {lesson.important_date_type || 'Activity'}
                                             </div>
+                                            <h5 className="font-bold group-hover:text-blue-400 transition-colors">{lesson.title}</h5>
                                         </div>
-                                    ))
-                                }
-                            </div>
-                        </div>
+                                        <div className="text-right">
+                                            <div className="text-sm font-black">{new Date(lesson.due_date!).toLocaleDateString()}</div>
+                                            <div className="text-[10px] text-gray-500 uppercase font-bold">Due Date</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
                     </div>
-                </CourseEditorLayout>
+                </div>
             </div>
-        </div>
+        </CourseEditorLayout>
     );
 }
diff --git a/web/studio/src/app/courses/[id]/grades/page.tsx b/web/studio/src/app/courses/[id]/grades/page.tsx
index 4fa728c..d60ef59 100644
--- a/web/studio/src/app/courses/[id]/grades/page.tsx
+++ b/web/studio/src/app/courses/[id]/grades/page.tsx
@@ -6,7 +6,6 @@ import { lmsApi, cmsApi, StudentGradeReport, Cohort } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
 import CourseEditorLayout from "@/components/CourseEditorLayout";
 import {
-    ArrowLeft,
     Search,
     GraduationCap,
     Download,
@@ -142,39 +141,28 @@ export default function GradebookPage() {
     );
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-7xl mx-auto">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-12">
-                    <div className="flex items-center gap-4">
-                        <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">
-                                Gradebook
-                            </h1>
-                            <p className="text-gray-400 mt-1">Student, progress, and performance tracking</p>
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-4">
-                        <button
-                            onClick={() => setShowBulkEnroll(true)}
-                            className="bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-medium"
-                        >
-                            <Users size={16} /> Bulk Enroll
-                        </button>
-                        <button
-                            onClick={exportCSV}
-                            className="btn-premium px-4 flex items-center gap-2"
-                        >
-                            <Download size={16} /> Export CSV
-                        </button>
-                    </div>
+        <CourseEditorLayout
+            activeTab="grades"
+            pageTitle="Libro de Calificaciones"
+            pageDescription="Seguimiento del progreso, calificaciones y rendimiento de los estudiantes."
+            pageActions={
+                <div className="flex items-center gap-3">
+                    <button
+                        onClick={() => setShowBulkEnroll(true)}
+                        className="bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-medium text-sm"
+                    >
+                        <Users size={16} /> Inscripción Masiva
+                    </button>
+                    <button
+                        onClick={exportCSV}
+                        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"
+                    >
+                        <Download size={16} /> Exportar CSV
+                    </button>
                 </div>
+            }
+        >
+            <>
 
                 {/* Bulk Enroll Modal */}
                 {showBulkEnroll && (
@@ -182,7 +170,7 @@ export default function GradebookPage() {
                         <div className="bg-[#1a1d23] border border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
                             <div className="p-6 border-b border-white/5 flex items-center justify-between">
                                 <h3 className="text-xl font-bold flex items-center gap-2">
-                                    <Users className="text-blue-400" /> Bulk Student Enrollment
+                                    <Users className="text-blue-400" /> Inscripción Masiva de Estudiantes
                                 </h3>
                                 <button
                                     onClick={() => {
@@ -201,7 +189,7 @@ export default function GradebookPage() {
                                     <>
                                         <div>
                                             <label className="block text-sm font-medium text-gray-400 mb-2">
-                                                Enter email addresses (separated by commas or new lines)
+                                                Ingresa las direcciones de correo (separadas por comas o saltos de línea)
                                             </label>
                                             <textarea
                                                 value={bulkEmails}
@@ -212,7 +200,7 @@ export default function GradebookPage() {
                                         </div>
                                         <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400">
                                             <AlertTriangle size={18} className="shrink-0" />
-                                            Students must already have an account in this organization to be enrolled.
+                                            Los estudiantes deben tener una cuenta en esta organización para ser inscritos.
                                         </div>
                                     </>
                                 ) : (
@@ -260,7 +248,7 @@ export default function GradebookPage() {
                                             disabled={bulkLoading || !bulkEmails.trim()}
                                             className="btn-premium px-8 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                                         >
-                                            {bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : 'Process Enrollment'}
+                                            {bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : 'Procesar Inscripción'}
                                         </button>
                                     </>
                                 ) : (
@@ -280,133 +268,135 @@ export default function GradebookPage() {
                     </div>
                 )}
 
-                <CourseEditorLayout activeTab="grades">
-                    <div className="p-8 space-y-8">
-                        {/* Controls & Stats */}
-                        <div className="flex flex-col md:flex-row gap-6 justify-between items-center bg-white/5 border border-white/10 rounded-2xl p-6">
-                            <div className="flex items-center gap-4 w-full md:w-auto">
-                                <div className="relative">
-                                    <select
-                                        value={selectedCohortId}
-                                        onChange={(e) => setSelectedCohortId(e.target.value)}
-                                        className="appearance-none bg-black/20 text-gray-900 dark:text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
-                                    >
-                                        <option value="">All Cohorts</option>
-                                        {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-                                    </select>
-                                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-500">
-                                        ▼
-                                    </div>
-                                </div>
-                                <div className="relative flex-1 md:w-64">
-                                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
-                                    <input
-                                        type="text"
-                                        placeholder="Search students..."
-                                        value={searchQuery}
-                                        onChange={(e) => setSearchQuery(e.target.value)}
-                                        className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600"
-                                    />
+                <div className="space-y-8">
+                    <h2 className="section-title">
+                        <Users className="text-blue-500" />
+                        Registro de Calificaciones
+                    </h2>
+                    {/* Controls & Stats */}
+                    <div className="flex flex-col md:flex-row gap-6 justify-between items-center bg-white/5 border border-white/10 rounded-2xl p-6">
+                        <div className="flex items-center gap-4 w-full md:w-auto">
+                            <div className="relative">
+                                <select
+                                    value={selectedCohortId}
+                                    onChange={(e) => setSelectedCohortId(e.target.value)}
+                                    className="appearance-none bg-black/20 text-gray-900 dark:text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
+                                >
+                                    <option value="">All Cohorts</option>
+                                    {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+                                </select>
+                                <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-500">
+                                    ▼
                                 </div>
                             </div>
-
-                            <div className="flex gap-8 border-l border-white/10 pl-8">
-                                <div>
-                                    <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Students</p>
-                                    <p className="text-2xl font-black">{filteredStudents.length}</p>
-                                </div>
-                                <div>
-                                    <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
-                                    <p className={`text-2xl font-black ${averageScore < 0.7 ? 'text-orange-400' : 'text-green-400'}`}>
-                                        {(averageScore * 100).toFixed(0)}%
-                                    </p>
-                                </div>
+                            <div className="relative flex-1 md:w-64">
+                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
+                                <input
+                                    type="text"
+                                    placeholder="Search students..."
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600"
+                                />
                             </div>
                         </div>
 
-                        {/* Student List */}
-                        <div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
-                            <table className="w-full text-left border-collapse">
-                                <thead>
-                                    <tr className="bg-white/5 border-b border-white/5">
-                                        <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Student</th>
-                                        <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Progress</th>
-                                        <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Score</th>
-                                        <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Last Active</th>
-                                        <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500 text-right">Status</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-white/5">
-                                    {filteredStudents.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={5} className="p-12 text-center text-gray-600 italic">No students found.</td>
-                                        </tr>
-                                    ) : filteredStudents.map((s) => (
-                                        <tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
-                                            <td className="p-6">
-                                                <div className="flex items-center gap-4">
-                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
-                                                        {s.full_name.charAt(0)}
-                                                    </div>
-                                                    <div>
-                                                        <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
-                                                        <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
-                                                            <Mail size={10} /> {s.email}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td className="p-6 align-middle">
-                                                <div className="w-full max-w-[140px]">
-                                                    <div className="flex justify-between text-xs mb-1 font-bold text-gray-400">
-                                                        <span>{(s.progress * 100).toFixed(0)}%</span>
-                                                    </div>
-                                                    <div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
-                                                        <div
-                                                            className="h-full bg-blue-500 rounded-full"
-                                                            style={{ width: `${s.progress * 100}%` }}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td className="p-6 align-middle">
-                                                {s.average_score !== null ? (
-                                                    <span className={`font-black ${(s.average_score || 0) >= 0.8 ? 'text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-yellow-400' : 'text-red-400'}`}>
-                                                        {((s.average_score || 0) * 100).toFixed(0)}%
-                                                    </span>
-                                                ) : (
-                                                    <span className="text-gray-600 text-xs italic">No grades</span>
-                                                )}
-                                            </td>
-                                            <td className="p-6 align-middle">
-                                                <div className="text-sm text-gray-400 flex items-center gap-2">
-                                                    <Clock size={14} />
-                                                    {s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'Never'}
-                                                </div>
-                                            </td>
-                                            <td className="p-6 text-right align-middle">
-                                                {s.progress >= 1 ? (
-                                                    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-green-500/10 text-green-400 border border-green-500/20">
-                                                        <CheckCircle size={12} /> Completed
-                                                    </span>
-                                                ) : s.last_active_at && (Date.now() - new Date(s.last_active_at).getTime() > 7 * 24 * 60 * 60 * 1000) ? (
-                                                    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-red-500/10 text-red-400 border border-red-500/20">
-                                                        <AlertCircle size={12} /> Inactive
-                                                    </span>
-                                                ) : (
-                                                    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-500/10 text-blue-400 border border-blue-500/20">
-                                                        <GraduationCap size={12} /> Active
-                                                    </span>
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
+                        <div className="flex gap-8 border-l border-white/10 pl-8">
+                            <div>
+                                <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Students</p>
+                                <p className="text-2xl font-black">{filteredStudents.length}</p>
+                            </div>
+                            <div>
+                                <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
+                                <p className={`text-2xl font-black ${averageScore < 0.7 ? 'text-orange-400' : 'text-green-400'}`}>
+                                    {(averageScore * 100).toFixed(0)}%
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </CourseEditorLayout>
-            </div>
-        </div>
+
+                    {/* Student List */}
+                    <div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
+                        <table className="w-full text-left border-collapse">
+                            <thead>
+                                <tr className="bg-white/5 border-b border-white/5">
+                                    <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Student</th>
+                                    <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Progress</th>
+                                    <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Score</th>
+                                    <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Last Active</th>
+                                    <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500 text-right">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-white/5">
+                                {filteredStudents.length === 0 ? (
+                                    <tr>
+                                        <td colSpan={5} className="p-12 text-center text-gray-600 italic">No students found.</td>
+                                    </tr>
+                                ) : filteredStudents.map((s) => (
+                                    <tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
+                                        <td className="p-6">
+                                            <div className="flex items-center gap-4">
+                                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
+                                                    {s.full_name.charAt(0)}
+                                                </div>
+                                                <div>
+                                                    <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
+                                                    <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
+                                                        <Mail size={10} /> {s.email}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="p-6 align-middle">
+                                            <div className="w-full max-w-[140px]">
+                                                <div className="flex justify-between text-xs mb-1 font-bold text-gray-400">
+                                                    <span>{(s.progress * 100).toFixed(0)}%</span>
+                                                </div>
+                                                <div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
+                                                    <div
+                                                        className="h-full bg-blue-500 rounded-full"
+                                                        style={{ width: `${s.progress * 100}%` }}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="p-6 align-middle">
+                                            {s.average_score !== null ? (
+                                                <span className={`font-black ${(s.average_score || 0) >= 0.8 ? 'text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-yellow-400' : 'text-red-400'}`}>
+                                                    {((s.average_score || 0) * 100).toFixed(0)}%
+                                                </span>
+                                            ) : (
+                                                <span className="text-gray-600 text-xs italic">No grades</span>
+                                            )}
+                                        </td>
+                                        <td className="p-6 align-middle">
+                                            <div className="text-sm text-gray-400 flex items-center gap-2">
+                                                <Clock size={14} />
+                                                {s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'Never'}
+                                            </div>
+                                        </td>
+                                        <td className="p-6 text-right align-middle">
+                                            {s.progress >= 1 ? (
+                                                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-green-500/10 text-green-400 border border-green-500/20">
+                                                    <CheckCircle size={12} /> Completed
+                                                </span>
+                                            ) : s.last_active_at && (Date.now() - new Date(s.last_active_at).getTime() > 7 * 24 * 60 * 60 * 1000) ? (
+                                                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-red-500/10 text-red-400 border border-red-500/20">
+                                                    <AlertCircle size={12} /> Inactive
+                                                </span>
+                                            ) : (
+                                                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                                                    <GraduationCap size={12} /> Active
+                                                </span>
+                                            )}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </>
+        </CourseEditorLayout>
     );
 }
diff --git a/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx b/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
index c5ff71b..b2abea6 100644
--- a/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
+++ b/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
@@ -79,8 +79,8 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
                         <Users size={24} />
                     </div>
                     <div>
-                        <h2 className="text-2xl font-black">Course Team</h2>
-                        <p className="text-sm text-gray-400">Manage instructors and assistants for this course</p>
+                        <h2 className="section-title">Equipo del Curso</h2>
+                        <p className="text-sm text-gray-400">Gestiona los instructores y asistentes de este curso</p>
                     </div>
                 </div>
             </div>
diff --git a/web/studio/src/app/courses/[id]/settings/page.tsx b/web/studio/src/app/courses/[id]/settings/page.tsx
index a7a45ee..ee265dd 100644
--- a/web/studio/src/app/courses/[id]/settings/page.tsx
+++ b/web/studio/src/app/courses/[id]/settings/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { cmsApi, Course } from "@/lib/api";
-import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock, Download, Upload } from "lucide-react";
+import { Save, Settings as SettingsIcon, BookOpen, Calendar, Clock, Download, Upload } from "lucide-react";
 
 const DEFAULT_CERTIFICATE_TEMPLATE = `
 <div style="width: 800px; height: 600px; padding: 40px; text-align: center; border: 10px solid #787878; font-family: 'Times New Roman', serif; background-color: #fff; color: #333;">
@@ -129,327 +129,305 @@ export default function CourseSettingsPage() {
         </div>
     );
 
-    if (!course) return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center">
-            Course not found.
-        </div>
-    );
-
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-5xl mx-auto">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-12">
-                    <div className="flex items-center gap-4">
-                        <button
-                            onClick={() => router.back()}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
-                        >
-                            <ArrowLeft className="w-6 h-6" />
-                        </button>
+        <CourseEditorLayout
+            activeTab="settings"
+            pageTitle="Configuración del Curso"
+            pageDescription="Configura las propiedades generales del curso y las plantillas de certificados."
+            pageActions={
+                <button
+                    onClick={handleSave}
+                    disabled={saving}
+                    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-75 cursor-wait" : ""}`}
+                >
+                    <Save size={18} />
+                    {saving ? "Guardando..." : "Guardar Cambios"}
+                </button>
+            }
+        >
+            <div className="space-y-8">
+                <TeamManagementSection courseId={id} />
+
+                {/* Passing Percentage Section */}
+                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
+                            <SettingsIcon size={24} />
+                        </div>
+                        <h2 className="section-title">Configuración de Calificaciones</h2>
+                    </div>
+
+                    <div className="space-y-6">
                         <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
-                                Course Settings
-                            </h1>
-                            <p className="text-gray-400 mt-1">Configure general course properties and certificates for {course?.title}</p>
+                            <label className="block text-sm font-bold text-gray-300 mb-3">
+                                Passing Percentage
+                            </label>
+                            <div className="flex items-center gap-6">
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="100"
+                                    value={passingPercentage}
+                                    onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
+                                    className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
+                                />
+                                <div className="text-4xl font-black text-blue-400 w-24 text-right">
+                                    {passingPercentage}%
+                                </div>
+                            </div>
+                            <p className="text-xs text-gray-500 mt-3">
+                                Students must achieve at least this percentage to pass the course.
+                            </p>
+                        </div>
+
+                        {/* Performance Tiers Preview */}
+                        <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
+                            <h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
+                            <div className="space-y-3 text-xs">
+                                <div className="flex items-center gap-3">
+                                    <div className="w-16 h-4 bg-red-500 rounded"></div>
+                                    <span className="text-red-400 font-bold">Reprobado:</span>
+                                    <span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-16 h-4 bg-orange-500 rounded"></div>
+                                    <span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
+                                    <span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-16 h-4 bg-yellow-500 rounded"></div>
+                                    <span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
+                                    <span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-16 h-4 bg-green-500 rounded"></div>
+                                    <span className="text-green-400 font-bold">Buen Rendimiento:</span>
+                                    <span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-16 h-4 bg-blue-500 rounded"></div>
+                                    <span className="text-blue-400 font-bold">Excelente:</span>
+                                    <span className="text-gray-400">91% - 100%</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <button
-                        onClick={handleSave}
-                        disabled={saving}
-                        className={`flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold shadow-lg shadow-blue-500/20 transition-all active:scale-95 ${saving ? "opacity-75 cursor-wait" : ""}`}
-                    >
-                        <Save size={18} />
-                        {saving ? "Saving..." : "Save Changes"}
-                    </button>
-                </div>
+                </section>
 
-                <CourseEditorLayout activeTab="settings">
-                    <div className="space-y-8">
-                        <TeamManagementSection courseId={id} />
-
-                        {/* Passing Percentage Section */}
-                        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
-                            <div className="flex items-center gap-3 mb-6">
-                                <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
-                                    <SettingsIcon size={24} />
-                                </div>
-                                <h2 className="text-2xl font-black">Grading Configuration</h2>
-                            </div>
-
-                            <div className="space-y-6">
-                                <div>
-                                    <label className="block text-sm font-bold text-gray-300 mb-3">
-                                        Passing Percentage
-                                    </label>
-                                    <div className="flex items-center gap-6">
-                                        <input
-                                            type="range"
-                                            min="0"
-                                            max="100"
-                                            value={passingPercentage}
-                                            onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
-                                            className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
-                                        />
-                                        <div className="text-4xl font-black text-blue-400 w-24 text-right">
-                                            {passingPercentage}%
-                                        </div>
-                                    </div>
-                                    <p className="text-xs text-gray-500 mt-3">
-                                        Students must achieve at least this percentage to pass the course.
-                                    </p>
-                                </div>
-
-                                {/* Performance Tiers Preview */}
-                                <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
-                                    <h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
-                                    <div className="space-y-3 text-xs">
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-16 h-4 bg-red-500 rounded"></div>
-                                            <span className="text-red-400 font-bold">Reprobado:</span>
-                                            <span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
-                                        </div>
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-16 h-4 bg-orange-500 rounded"></div>
-                                            <span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
-                                            <span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
-                                        </div>
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-16 h-4 bg-yellow-500 rounded"></div>
-                                            <span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
-                                            <span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
-                                        </div>
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-16 h-4 bg-green-500 rounded"></div>
-                                            <span className="text-green-400 font-bold">Buen Rendimiento:</span>
-                                            <span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
-                                        </div>
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-16 h-4 bg-blue-500 rounded"></div>
-                                            <span className="text-blue-400 font-bold">Excelente:</span>
-                                            <span className="text-gray-400">91% - 100%</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        {/* Course Pacing Section */}
-                        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
-                            <div className="flex items-center gap-3 mb-6">
-                                <div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-400">
-                                    <Clock size={24} />
-                                </div>
-                                <h2 className="text-2xl font-black">Course Pacing & Schedule</h2>
-                            </div>
-
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                <div className="space-y-4">
-                                    <label className="block text-sm font-bold text-gray-300">Pacing Mode</label>
-                                    <div className="flex gap-4">
-                                        <button
-                                            onClick={() => setPacingMode('self_paced')}
-                                            className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'self_paced' ? 'border-blue-500 bg-blue-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
-                                        >
-                                            <div className="font-bold">Self-Paced</div>
-                                            <div className="text-xs text-gray-500">Learners go at their own speed.</div>
-                                        </button>
-                                        <button
-                                            onClick={() => setPacingMode('instructor_led')}
-                                            className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'instructor_led' ? 'border-purple-500 bg-purple-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
-                                        >
-                                            <div className="font-bold">Instructor-Led</div>
-                                            <div className="text-xs text-gray-500">Cohort-based with specific dates.</div>
-                                        </button>
-                                    </div>
-                                </div>
-
-                                {pacingMode === 'instructor_led' && (
-                                    <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
-                                        <label className="block text-sm font-bold text-gray-300">Course Schedule</label>
-                                        <div className="grid grid-cols-2 gap-4">
-                                            <div className="space-y-2">
-                                                <label className="text-xs text-gray-500">Start Date</label>
-                                                <div className="relative">
-                                                    <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-                                                    <input
-                                                        type="date"
-                                                        value={startDate}
-                                                        onChange={(e) => setStartDate(e.target.value)}
-                                                        className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div className="space-y-2">
-                                                <label className="text-xs text-gray-500">End Date</label>
-                                                <div className="relative">
-                                                    <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-                                                    <input
-                                                        type="date"
-                                                        value={endDate}
-                                                        onChange={(e) => setEndDate(e.target.value)}
-                                                        className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
-                                                    />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        </section>
-
-                        {/* Course Pricing Section */}
-                        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
-                            <div className="flex items-center gap-3 mb-6">
-                                <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
-                                    <span className="text-xl font-bold">$</span>
-                                </div>
-                                <h2 className="text-2xl font-black">Course Pricing</h2>
-                            </div>
-
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                <div className="space-y-4">
-                                    <label className="block text-sm font-bold text-gray-300">Price</label>
-                                    <div className="relative">
-                                        <input
-                                            type="number"
-                                            step="0.01"
-                                            min="0"
-                                            value={price}
-                                            onChange={(e) => setPrice(parseFloat(e.target.value))}
-                                            className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors"
-                                            placeholder="0.00"
-                                        />
-                                        <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
-                                            {currency}
-                                        </div>
-                                    </div>
-                                    <p className="text-xs text-gray-500">Set to 0 for a free course.</p>
-                                </div>
-
-                                <div className="space-y-4">
-                                    <label className="block text-sm font-bold text-gray-300">Currency</label>
-                                    <select
-                                        value={currency}
-                                        onChange={(e) => setCurrency(e.target.value)}
-                                        className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
-                                    >
-                                        <option value="USD">USD - US Dollar</option>
-                                        <option value="CLP">CLP - Chilean Peso</option>
-                                        <option value="ARS">ARS - Argentine Peso</option>
-                                        <option value="BRL">BRL - Brazilian Real</option>
-                                        <option value="MXN">MXN - Mexican Peso</option>
-                                        <option value="COP">COP - Colombian Peso</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </section>
-
-                        {/* Certificate Template Section */}
-                        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
-                            <div className="flex items-center gap-3 mb-6">
-                                <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
-                                    <BookOpen size={24} />
-                                </div>
-                                <h2 className="text-2xl font-black">Certificate Template</h2>
-                            </div>
-
-                            <div className="space-y-6">
-                                <p className="text-gray-400">
-                                    Design the HTML certificate that students will receive upon passing the course.
-                                    Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>.
-                                </p>
-
-                                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                                    <div className="space-y-2">
-                                        <label className="block text-sm font-bold text-gray-300">HTML Template</label>
-                                        <textarea
-                                            value={certificateTemplate}
-                                            onChange={(e) => setCertificateTemplate(e.target.value)}
-                                            className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none"
-                                            placeholder="Enter HTML code here..."
-                                        />
-                                        <button
-                                            onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
-                                            className="text-xs text-blue-400 hover:text-blue-300 underline"
-                                        >
-                                            Reset to Default Template
-                                        </button>
-                                    </div>
-
-                                    <div className="space-y-2">
-                                        <label className="block text-sm font-bold text-gray-300">Live Preview</label>
-                                        <div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
-                                            <iframe
-                                                srcDoc={certificateTemplate
-                                                    .replace(/{{student_name}}/g, "Jane Doe")
-                                                    .replace(/{{course_title}}/g, course?.title || "Demo Course")
-                                                    .replace(/{{date}}/g, new Date().toLocaleDateString())
-                                                    .replace(/{{score}}/g, "95")
-                                                }
-                                                className="w-full h-full transform scale-75 origin-top-left w-[133%] h-[133%]"
-                                                style={{ border: "none" }}
-                                            />
-                                            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 pointer-events-none transition-colors" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                        {/* Course Portability Section */}
-                        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
-                            <div className="flex items-center gap-3 mb-6">
-                                <div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
-                                    <Download size={24} />
-                                </div>
-                                <h2 className="text-2xl font-black">Course Portability</h2>
-                            </div>
-
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                <div className="space-y-4">
-                                    <h3 className="text-sm font-bold text-gray-300">Export Course</h3>
-                                    <p className="text-xs text-gray-500">
-                                        Download the entire course structure, modules, and lessons as a JSON file.
-                                        You can use this to backup or move content between organizations.
-                                    </p>
-                                    <button
-                                        onClick={handleExport}
-                                        disabled={exporting}
-                                        className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
-                                    >
-                                        <Download size={18} />
-                                        {exporting ? "Exporting..." : "Download JSON"}
-                                    </button>
-                                </div>
-
-                                <div className="space-y-4">
-                                    <h3 className="text-sm font-bold text-gray-300">Import Course</h3>
-                                    <p className="text-xs text-gray-500">
-                                        Upload a previously exported course JSON file. This will create a NEW course
-                                        within the current organization based on that data.
-                                    </p>
-                                    <div className="relative">
-                                        <input
-                                            type="file"
-                                            accept=".json"
-                                            onChange={handleImport}
-                                            disabled={importing}
-                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-                                        />
-                                        <button
-                                            disabled={importing}
-                                            className="flex items-center gap-2 px-6 py-3 bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-400 rounded-xl font-bold transition-all pointer-events-none"
-                                        >
-                                            <Upload size={18} />
-                                            {importing ? "Importing..." : "Upload JSON"}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
+                {/* Course Pacing Section */}
+                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-400">
+                            <Clock size={24} />
+                        </div>
+                        <h2 className="section-title">Ritmo y Calendario del Curso</h2>
                     </div>
-                </CourseEditorLayout>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div className="space-y-4">
+                            <label className="block text-sm font-bold text-gray-300">Pacing Mode</label>
+                            <div className="flex gap-4">
+                                <button
+                                    onClick={() => setPacingMode('self_paced')}
+                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'self_paced' ? 'border-blue-500 bg-blue-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
+                                >
+                                    <div className="font-bold">Self-Paced</div>
+                                    <div className="text-xs text-gray-500">Learners go at their own speed.</div>
+                                </button>
+                                <button
+                                    onClick={() => setPacingMode('instructor_led')}
+                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'instructor_led' ? 'border-purple-500 bg-purple-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
+                                >
+                                    <div className="font-bold">Instructor-Led</div>
+                                    <div className="text-xs text-gray-500">Cohort-based with specific dates.</div>
+                                </button>
+                            </div>
+                        </div>
+
+                        {pacingMode === 'instructor_led' && (
+                            <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
+                                <label className="block text-sm font-bold text-gray-300">Course Schedule</label>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div className="space-y-2">
+                                        <label className="text-xs text-gray-500">Start Date</label>
+                                        <div className="relative">
+                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                            <input
+                                                type="date"
+                                                value={startDate}
+                                                onChange={(e) => setStartDate(e.target.value)}
+                                                className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-xs text-gray-500">End Date</label>
+                                        <div className="relative">
+                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                            <input
+                                                type="date"
+                                                value={endDate}
+                                                onChange={(e) => setEndDate(e.target.value)}
+                                                className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </section>
+
+                {/* Course Pricing Section */}
+                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
+                            <span className="text-xl font-bold">$</span>
+                        </div>
+                        <h2 className="section-title">Precio del Curso</h2>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div className="space-y-4">
+                            <label className="block text-sm font-bold text-gray-300">Price</label>
+                            <div className="relative">
+                                <input
+                                    type="number"
+                                    step="0.01"
+                                    min="0"
+                                    value={price}
+                                    onChange={(e) => setPrice(parseFloat(e.target.value))}
+                                    className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors"
+                                    placeholder="0.00"
+                                />
+                                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
+                                    {currency}
+                                </div>
+                            </div>
+                            <p className="text-xs text-gray-500">Set to 0 for a free course.</p>
+                        </div>
+
+                        <div className="space-y-4">
+                            <label className="block text-sm font-bold text-gray-300">Currency</label>
+                            <select
+                                value={currency}
+                                onChange={(e) => setCurrency(e.target.value)}
+                                className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
+                            >
+                                <option value="USD">USD - US Dollar</option>
+                                <option value="CLP">CLP - Chilean Peso</option>
+                                <option value="ARS">ARS - Argentine Peso</option>
+                                <option value="BRL">BRL - Brazilian Real</option>
+                                <option value="MXN">MXN - Mexican Peso</option>
+                                <option value="COP">COP - Colombian Peso</option>
+                            </select>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Certificate Template Section */}
+                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
+                            <BookOpen size={24} />
+                        </div>
+                        <h2 className="section-title">Plantilla de Certificado</h2>
+                    </div>
+
+                    <div className="space-y-6">
+                        <p className="text-gray-400">
+                            Design the HTML certificate that students will receive upon passing the course.
+                            Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>.
+                        </p>
+
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                            <div className="space-y-2">
+                                <label className="block text-sm font-bold text-gray-300">HTML Template</label>
+                                <textarea
+                                    value={certificateTemplate}
+                                    onChange={(e) => setCertificateTemplate(e.target.value)}
+                                    className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none"
+                                    placeholder="Enter HTML code here..."
+                                />
+                                <button
+                                    onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
+                                    className="text-xs text-blue-400 hover:text-blue-300 underline"
+                                >
+                                    Reset to Default Template
+                                </button>
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="block text-sm font-bold text-gray-300">Live Preview</label>
+                                <div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
+                                    <iframe
+                                        srcDoc={certificateTemplate
+                                            .replace(/{{student_name}}/g, "Jane Doe")
+                                            .replace(/{{course_title}}/g, course?.title || "Demo Course")
+                                            .replace(/{{date}}/g, new Date().toLocaleDateString())
+                                            .replace(/{{score}}/g, "95")
+                                        }
+                                        className="w-full h-full transform scale-75 origin-top-left w-[133%] h-[133%]"
+                                        style={{ border: "none" }}
+                                    />
+                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 pointer-events-none transition-colors" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                {/* Course Portability Section */}
+                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
+                            <Download size={24} />
+                        </div>
+                        <h2 className="section-title">Portabilidad del Curso</h2>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div className="space-y-4">
+                            <h3 className="text-sm font-bold text-gray-300">Export Course</h3>
+                            <p className="text-xs text-gray-500">
+                                Download the entire course structure, modules, and lessons as a JSON file.
+                                You can use this to backup or move content between organizations.
+                            </p>
+                            <button
+                                onClick={handleExport}
+                                disabled={exporting}
+                                className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
+                            >
+                                <Download size={18} />
+                                {exporting ? "Exporting..." : "Download JSON"}
+                            </button>
+                        </div>
+
+                        <div className="space-y-4">
+                            <h3 className="text-sm font-bold text-gray-300">Import Course</h3>
+                            <p className="text-xs text-gray-500">
+                                Upload a previously exported course JSON file. This will create a NEW course
+                                within the current organization based on that data.
+                            </p>
+                            <div className="relative">
+                                <input
+                                    type="file"
+                                    accept=".json"
+                                    onChange={handleImport}
+                                    disabled={importing}
+                                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                                />
+                                <button
+                                    disabled={importing}
+                                    className="flex items-center gap-2 px-6 py-3 bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-400 rounded-xl font-bold transition-all pointer-events-none"
+                                >
+                                    <Upload size={18} />
+                                    {importing ? "Importing..." : "Upload JSON"}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </section>
             </div>
-        </div>
+        </CourseEditorLayout>
     );
 }
diff --git a/web/studio/src/app/courses/[id]/students/page.tsx b/web/studio/src/app/courses/[id]/students/page.tsx
index 4425379..56fe643 100644
--- a/web/studio/src/app/courses/[id]/students/page.tsx
+++ b/web/studio/src/app/courses/[id]/students/page.tsx
@@ -116,185 +116,180 @@ export default function CourseStudentsPage() {
     }
 
     return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
-            <div className="max-w-7xl mx-auto">
-                <div className="flex items-center justify-between mb-8">
-                    <div className="flex items-center gap-4">
-                        <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">
-                                Students & Groups
-                            </h1>
-                            <p className="text-gray-400 mt-1">Manage enrollments and segment your audience</p>
-                        </div>
-                    </div>
+        <>
+            <CourseEditorLayout
+                activeTab="students"
+                pageTitle="Estudiantes y Grupos"
+                pageDescription="Gestiona las inscripciones y segmenta a tu audiencia por cohortes."
+                pageActions={
                     <button
                         onClick={() => setIsEnrollModalOpen(true)}
-                        className="btn-premium px-6 py-3 flex items-center gap-2"
+                        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"
                     >
                         <UserPlus size={18} />
-                        Enroll Students
+                        Inscribir Estudiantes
                     </button>
-                </div>
-
-                <CourseEditorLayout activeTab="students">
-                    <div className="space-y-6">
-                        {/* Search and Filters */}
-                        <div className="glass p-4 rounded-2xl flex flex-col md:flex-row items-center gap-4">
-                            <div className="relative flex-1 w-full">
-                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
-                                <input
-                                    type="text"
-                                    placeholder="Search by name or email..."
-                                    value={searchTerm}
-                                    onChange={(e) => setSearchTerm(e.target.value)}
-                                    className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium"
-                                />
-                            </div>
-                            <div className="flex items-center gap-2 w-full md:w-auto">
-                                <Filter size={16} className="text-gray-400" />
-                                <select
-                                    className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white min-w-[150px]"
-                                    value={selectedCohortId}
-                                    onChange={(e) => setSelectedCohortId(e.target.value)}
-                                >
-                                    <option value="all">All Cohorts</option>
-                                    {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-                                </select>
-                            </div>
+                }
+            >
+                <div className="space-y-8">
+                    <h2 className="section-title">
+                        <Users className="text-blue-500" />
+                        Listado de Estudiantes
+                    </h2>
+                    {/* Search and Filters */}
+                    <div className="glass p-4 rounded-2xl flex flex-col md:flex-row items-center gap-4">
+                        <div className="relative flex-1 w-full">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
+                            <input
+                                type="text"
+                                placeholder="Search by name or email..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium"
+                            />
                         </div>
-
-                        {/* Student List */}
-                        <div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
-                            <table className="w-full text-left border-collapse">
-                                <thead>
-                                    <tr className="bg-white/5 border-b border-white/5 font-bold text-xs uppercase tracking-widest text-gray-500 uppercase">
-                                        <th className="p-6">Student</th>
-                                        <th className="p-6">Enrollment Date</th>
-                                        <th className="p-6 text-right">Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-white/5">
-                                    {filteredStudents.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={3} className="p-12 text-center text-gray-500 italic">No students found.</td>
-                                        </tr>
-                                    ) : filteredStudents.map(student => (
-                                        <tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
-                                            <td className="p-6">
-                                                <div className="flex items-center gap-4">
-                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
-                                                        {student.full_name.charAt(0)}
-                                                    </div>
-                                                    <div>
-                                                        <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
-                                                        <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td className="p-6 text-gray-400 text-sm font-medium">
-                                                {/* In a real app we'd have the enrollment date here */}
-                                                Available upon request
-                                            </td>
-                                            <td className="p-6 text-right">
-                                                <div className="flex items-center justify-end gap-2">
-                                                    <div className="relative group/actions">
-                                                        <button className="p-2 hover:bg-white/10 rounded-lg transition-colors text-gray-500">
-                                                            <MoreHorizontal size={20} />
-                                                        </button>
-                                                        <div className="absolute right-0 top-full mt-2 w-48 bg-[#1a1c1e] border border-white/10 rounded-xl shadow-2xl invisible group-hover/actions:visible z-10 p-2">
-                                                            <div className="text-[10px] font-black uppercase tracking-widest text-gray-600 px-3 py-2 border-b border-white/5 mb-1">Move to Cohort</div>
-                                                            {cohorts.map(c => (
-                                                                <button
-                                                                    key={c.id}
-                                                                    onClick={() => handleCohortAssignment(student.user_id, c.id)}
-                                                                    className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 rounded-lg transition-colors"
-                                                                >
-                                                                    {c.name}
-                                                                </button>
-                                                            ))}
-                                                            <button
-                                                                className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 rounded-lg transition-colors mt-2 border-t border-white/5"
-                                                                onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
-                                                            >
-                                                                Unenroll
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
+                        <div className="flex items-center gap-2 w-full md:w-auto">
+                            <Filter size={16} className="text-gray-400" />
+                            <select
+                                className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white min-w-[150px]"
+                                value={selectedCohortId}
+                                onChange={(e) => setSelectedCohortId(e.target.value)}
+                            >
+                                <option value="all">All Cohorts</option>
+                                {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+                            </select>
                         </div>
                     </div>
-                </CourseEditorLayout>
-            </div>
 
-            {/* Enroll Modal */}
-            {isEnrollModalOpen && (
-                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
-                    <div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
-                        <div className="p-6 border-b border-white/5 flex items-center justify-between">
-                            <h2 className="text-xl font-bold flex items-center gap-2">
-                                <UserPlus className="text-blue-500" />
-                                Enroll Organization Students
-                            </h2>
-                            <button onClick={() => setIsEnrollModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
-                                <X size={20} />
-                            </button>
-                        </div>
-                        <div className="p-8 space-y-6">
-                            <div className="relative">
-                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
-                                <input
-                                    type="text"
-                                    placeholder="Search and select students from organization..."
-                                    value={enrollSearch}
-                                    onChange={(e) => setEnrollSearch(e.target.value)}
-                                    className="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm focus:outline-none"
-                                />
-                            </div>
-
-                            <div className="space-y-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
-                                {orgUsersLoading ? (
-                                    <div className="flex justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
-                                ) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
-                                    <div className="text-center p-8 text-gray-500 italic">No remaining students to enroll.</div>
-                                ) : (
-                                    allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
-                                        <div key={user.id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-xl">
-                                            <div className="flex items-center gap-3">
-                                                <UserCircle className="text-gray-500" />
+                    {/* Student List */}
+                    <div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
+                        <table className="w-full text-left border-collapse">
+                            <thead>
+                                <tr className="bg-white/5 border-b border-white/5 font-bold text-xs uppercase tracking-widest text-gray-500 uppercase">
+                                    <th className="p-6">Student</th>
+                                    <th className="p-6">Enrollment Date</th>
+                                    <th className="p-6 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-white/5">
+                                {filteredStudents.length === 0 ? (
+                                    <tr>
+                                        <td colSpan={3} className="p-12 text-center text-gray-500 italic">No students found.</td>
+                                    </tr>
+                                ) : filteredStudents.map(student => (
+                                    <tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
+                                        <td className="p-6">
+                                            <div className="flex items-center gap-4">
+                                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
+                                                    {student.full_name.charAt(0)}
+                                                </div>
                                                 <div>
-                                                    <div className="font-bold text-sm tracking-tight">{user.full_name}</div>
-                                                    <div className="text-xs text-gray-500">{user.email}</div>
+                                                    <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
+                                                    <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
                                                 </div>
                                             </div>
-                                            <button
-                                                onClick={() => handleEnroll([user.email])}
-                                                className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
-                                            >
-                                                Enroll Now
-                                            </button>
-                                        </div>
-                                    ))
-                                )}
-                            </div>
+                                        </td>
+                                        <td className="p-6 text-gray-400 text-sm font-medium">
+                                            {/* In a real app we'd have the enrollment date here */}
+                                            Available upon request
+                                        </td>
+                                        <td className="p-6 text-right">
+                                            <div className="flex items-center justify-end gap-2">
+                                                <div className="relative group/actions">
+                                                    <button className="p-2 hover:bg-white/10 rounded-lg transition-colors text-gray-500">
+                                                        <MoreHorizontal size={20} />
+                                                    </button>
+                                                    <div className="absolute right-0 top-full mt-2 w-48 bg-[#1a1c1e] border border-white/10 rounded-xl shadow-2xl invisible group-hover/actions:visible z-10 p-2">
+                                                        <div className="text-[10px] font-black uppercase tracking-widest text-gray-600 px-3 py-2 border-b border-white/5 mb-1">Move to Cohort</div>
+                                                        {cohorts.map(c => (
+                                                            <button
+                                                                key={c.id}
+                                                                onClick={() => handleCohortAssignment(student.user_id, c.id)}
+                                                                className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 rounded-lg transition-colors"
+                                                            >
+                                                                {c.name}
+                                                            </button>
+                                                        ))}
+                                                        <button
+                                                            className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 rounded-lg transition-colors mt-2 border-t border-white/5"
+                                                            onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
+                                                        >
+                                                            Unenroll
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </CourseEditorLayout>
 
-                            <div className="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl flex gap-3">
-                                <Plus size={20} className="text-blue-400 shrink-0" />
-                                <div className="text-xs text-blue-300 leading-relaxed font-medium">
-                                    You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
+            {/* Enroll Modal */}
+            {
+                isEnrollModalOpen && (
+                    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+                        <div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
+                            <div className="p-6 border-b border-white/5 flex items-center justify-between">
+                                <h2 className="text-xl font-bold flex items-center gap-2">
+                                    <UserPlus className="text-blue-500" />
+                                    Enroll Organization Students
+                                </h2>
+                                <button onClick={() => setIsEnrollModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
+                                    <X size={20} />
+                                </button>
+                            </div>
+                            <div className="p-8 space-y-6">
+                                <div className="relative">
+                                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
+                                    <input
+                                        type="text"
+                                        placeholder="Search and select students from organization..."
+                                        value={enrollSearch}
+                                        onChange={(e) => setEnrollSearch(e.target.value)}
+                                        className="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm focus:outline-none"
+                                    />
+                                </div>
+
+                                <div className="space-y-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
+                                    {orgUsersLoading ? (
+                                        <div className="flex justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
+                                    ) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
+                                        <div className="text-center p-8 text-gray-500 italic">No remaining students to enroll.</div>
+                                    ) : (
+                                        allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
+                                            <div key={user.id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-xl">
+                                                <div className="flex items-center gap-3">
+                                                    <UserCircle className="text-gray-500" />
+                                                    <div>
+                                                        <div className="font-bold text-sm tracking-tight">{user.full_name}</div>
+                                                        <div className="text-xs text-gray-500">{user.email}</div>
+                                                    </div>
+                                                </div>
+                                                <button
+                                                    onClick={() => handleEnroll([user.email])}
+                                                    className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
+                                                >
+                                                    Enroll Now
+                                                </button>
+                                            </div>
+                                        ))
+                                    )}
+                                </div>
+
+                                <div className="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl flex gap-3">
+                                    <Plus size={20} className="text-blue-400 shrink-0" />
+                                    <div className="text-xs text-blue-300 leading-relaxed font-medium">
+                                        You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            )}
-        </div>
+                )}
+        </>
     );
 }
diff --git a/web/studio/src/app/courses/[id]/team/page.tsx b/web/studio/src/app/courses/[id]/team/page.tsx
index e97490b..21cca40 100644
--- a/web/studio/src/app/courses/[id]/team/page.tsx
+++ b/web/studio/src/app/courses/[id]/team/page.tsx
@@ -96,162 +96,168 @@ export default function CourseTeamPage() {
     };
 
     return (
-        <div className="max-w-6xl mx-auto p-8">
-            <div className="flex items-center justify-between mb-8">
-                <div>
-                    <h1 className="text-3xl font-bold">Course Team</h1>
-                    <p className="text-gray-400 mt-1">Manage multiple instructors and assistants for this course</p>
-                </div>
-                <button
-                    onClick={() => setIsAddModalOpen(true)}
-                    className="btn-premium px-6 py-2.5 flex items-center gap-2 group"
-                >
-                    <UserPlus className="w-4 h-4 group-hover:scale-110 transition-transform" /> Add Member
-                </button>
-            </div>
-
-            <CourseEditorLayout activeTab="team">
-                <div className="grid gap-4">
-                    {loading ? (
-                        <div className="py-20 text-center text-gray-500 animate-pulse">Loading team members...</div>
-                    ) : instructors.length === 0 ? (
-                        <div className="py-20 glass rounded-2xl flex flex-col items-center justify-center text-gray-500 gap-4">
-                            <GraduationCap className="w-12 h-12 opacity-20" />
-                            <p>No instructors assigned yet.</p>
-                        </div>
-                    ) : (
-                        instructors.map((inst) => (
-                            <div key={inst.id} className="glass p-6 rounded-2xl border-white/5 flex items-center justify-between group">
-                                <div className="flex items-center gap-6">
-                                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-xl font-bold border-2 border-white/10 shadow-xl">
-                                        {inst.full_name?.charAt(0) || inst.email?.charAt(0)}
-                                    </div>
-                                    <div className="space-y-1">
-                                        <h3 className="text-lg font-bold flex items-center gap-2">
-                                            {inst.full_name}
-                                            {inst.role === 'primary' && (
-                                                <span className="text-[10px] font-black uppercase px-2 py-0.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-full">
-                                                    Owner
+        <>
+            <CourseEditorLayout
+                activeTab="team"
+                pageTitle="Equipo del Curso"
+                pageDescription="Gestiona múltiples instructores y asistentes para este curso."
+                pageActions={
+                    <button
+                        onClick={() => setIsAddModalOpen(true)}
+                        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 group"
+                    >
+                        <UserPlus className="w-4 h-4 group-hover:scale-110 transition-transform" /> Agregar Miembro
+                    </button>
+                }
+            >
+                <div className="space-y-8">
+                    <h2 className="section-title">
+                        <ShieldCheck className="text-blue-500" />
+                        Miembros del Equipo
+                    </h2>
+                    <div className="grid gap-4">
+                        {loading ? (
+                            <div className="py-20 text-center text-gray-500 animate-pulse">Loading team members...</div>
+                        ) : instructors.length === 0 ? (
+                            <div className="py-20 glass rounded-2xl flex flex-col items-center justify-center text-gray-500 gap-4">
+                                <GraduationCap className="w-12 h-12 opacity-20" />
+                                <p>No instructors assigned yet.</p>
+                            </div>
+                        ) : (
+                            instructors.map((inst) => (
+                                <div key={inst.id} className="glass p-6 rounded-2xl border-white/5 flex items-center justify-between group">
+                                    <div className="flex items-center gap-6">
+                                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-xl font-bold border-2 border-white/10 shadow-xl">
+                                            {inst.full_name?.charAt(0) || inst.email?.charAt(0)}
+                                        </div>
+                                        <div className="space-y-1">
+                                            <h3 className="text-lg font-bold flex items-center gap-2">
+                                                {inst.full_name}
+                                                {inst.role === 'primary' && (
+                                                    <span className="text-[10px] font-black uppercase px-2 py-0.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-full">
+                                                        Owner
+                                                    </span>
+                                                )}
+                                            </h3>
+                                            <div className="flex items-center gap-3 text-sm text-gray-400">
+                                                <span className="flex items-center gap-1.5">
+                                                    <Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
                                                 </span>
-                                            )}
-                                        </h3>
-                                        <div className="flex items-center gap-3 text-sm text-gray-400">
-                                            <span className="flex items-center gap-1.5">
-                                                <Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
-                                            </span>
-                                            <span className="w-1 h-1 rounded-full bg-gray-700" />
-                                            <span className="flex items-center gap-1.5">
-                                                {getRoleIcon(inst.role)} {getRoleLabel(inst.role)}
-                                            </span>
+                                                <span className="w-1 h-1 rounded-full bg-gray-700" />
+                                                <span className="flex items-center gap-1.5">
+                                                    {getRoleIcon(inst.role)} {getRoleLabel(inst.role)}
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
+                                    <div className="flex items-center gap-2">
+                                        {inst.role !== 'primary' && (
+                                            <button
+                                                onClick={() => handleRemoveMember(inst.user_id)}
+                                                className="p-3 rounded-xl hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-all active:scale-95"
+                                                title="Remove member"
+                                            >
+                                                <Trash2 className="w-5 h-5" />
+                                            </button>
+                                        )}
+                                    </div>
                                 </div>
-                                <div className="flex items-center gap-2">
-                                    {inst.role !== 'primary' && (
-                                        <button
-                                            onClick={() => handleRemoveMember(inst.user_id)}
-                                            className="p-3 rounded-xl hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-all active:scale-95"
-                                            title="Remove member"
-                                        >
-                                            <Trash2 className="w-5 h-5" />
-                                        </button>
-                                    )}
-                                </div>
-                            </div>
-                        ))
-                    )}
+                            ))
+                        )}
+                    </div>
                 </div>
             </CourseEditorLayout>
 
             {/* Add Member Modal */}
-            {isAddModalOpen && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
-                    <div className="bg-[#1a1c22] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
-                        <div className="p-8 border-b border-white/5 flex justify-between items-center">
-                            <div>
-                                <h2 className="text-2xl font-bold">Add Team Member</h2>
-                                <p className="text-sm text-gray-400 mt-1">Search for a user by name or email</p>
-                            </div>
-                            <button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
-                                <X className="w-6 h-6" />
-                            </button>
-                        </div>
-
-                        <div className="p-8 space-y-8">
-                            <form onSubmit={handleSearch} className="relative">
-                                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-                                <input
-                                    autoFocus
-                                    placeholder="Type name or email..."
-                                    value={searchQuery}
-                                    onChange={(e) => setSearchQuery(e.target.value)}
-                                    className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium"
-                                />
-                                {searching && (
-                                    <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                                        <div className="w-5 h-5 border-2 border-white/20 border-t-blue-500 rounded-full animate-spin" />
-                                    </div>
-                                )}
-                            </form>
-
-                            <div className="space-y-4">
-                                <label className="block">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-3 block">Assign Role</span>
-                                    <div className="grid grid-cols-2 gap-3">
-                                        <button
-                                            onClick={() => setSelectedRole('instructor')}
-                                            className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
-                                        >
-                                            <ShieldCheck className="w-5 h-5" />
-                                            <div>
-                                                <div className="font-bold text-sm">Instructor</div>
-                                                <div className="text-[10px] mt-0.5 opacity-60">Full access</div>
-                                            </div>
-                                        </button>
-                                        <button
-                                            onClick={() => setSelectedRole('assistant')}
-                                            className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
-                                        >
-                                            <Shield className="w-5 h-5" />
-                                            <div>
-                                                <div className="font-bold text-sm">Assistant</div>
-                                                <div className="text-[10px] mt-0.5 opacity-60">Limited access</div>
-                                            </div>
-                                        </button>
-                                    </div>
-                                </label>
+            {
+                isAddModalOpen && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+                        <div className="bg-[#1a1c22] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
+                            <div className="p-8 border-b border-white/5 flex justify-between items-center">
+                                <div>
+                                    <h2 className="text-2xl font-bold">Add Team Member</h2>
+                                    <p className="text-sm text-gray-400 mt-1">Search for a user by name or email</p>
+                                </div>
+                                <button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
+                                    <X className="w-6 h-6" />
+                                </button>
                             </div>
 
-                            <div className="space-y-3 max-h-60 overflow-y-auto pr-2 custom-scrollbar">
-                                {users.length > 0 ? (
-                                    users.map(u => (
-                                        <button
-                                            key={u.id}
-                                            onClick={() => handleAddMember(u)}
-                                            className="w-full flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/30 hover:bg-white/10 transition-all group"
-                                        >
-                                            <div className="flex items-center gap-4 text-left">
-                                                <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
-                                                    {u.full_name.charAt(0)}
-                                                </div>
+                            <div className="p-8 space-y-8">
+                                <form onSubmit={handleSearch} className="relative">
+                                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                                    <input
+                                        autoFocus
+                                        placeholder="Type name or email..."
+                                        value={searchQuery}
+                                        onChange={(e) => setSearchQuery(e.target.value)}
+                                        className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium"
+                                    />
+                                    {searching && (
+                                        <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                                            <div className="w-5 h-5 border-2 border-white/20 border-t-blue-500 rounded-full animate-spin" />
+                                        </div>
+                                    )}
+                                </form>
+
+                                <div className="space-y-4">
+                                    <label className="block">
+                                        <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-3 block">Assign Role</span>
+                                        <div className="grid grid-cols-2 gap-3">
+                                            <button
+                                                onClick={() => setSelectedRole('instructor')}
+                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
+                                            >
+                                                <ShieldCheck className="w-5 h-5" />
                                                 <div>
-                                                    <div className="font-bold text-sm">{u.full_name}</div>
-                                                    <div className="text-xs text-gray-500">{u.email}</div>
+                                                    <div className="font-bold text-sm">Instructor</div>
+                                                    <div className="text-[10px] mt-0.5 opacity-60">Full access</div>
                                                 </div>
-                                            </div>
-                                            <div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all">
-                                                <Plus className="w-4 h-4 text-blue-400 opacity-0 group-hover:opacity-100" />
-                                            </div>
-                                        </button>
-                                    ))
-                                ) : searchQuery && !searching ? (
-                                    <div className="py-8 text-center text-gray-600 italic text-sm">No users found matching your search.</div>
-                                ) : null}
+                                            </button>
+                                            <button
+                                                onClick={() => setSelectedRole('assistant')}
+                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
+                                            >
+                                                <Shield className="w-5 h-5" />
+                                                <div>
+                                                    <div className="font-bold text-sm">Assistant</div>
+                                                    <div className="text-[10px] mt-0.5 opacity-60">Limited access</div>
+                                                </div>
+                                            </button>
+                                        </div>
+                                    </label>
+                                </div>
+
+                                <div className="space-y-3 max-h-60 overflow-y-auto pr-2 custom-scrollbar">
+                                    {users.length > 0 ? (
+                                        users.map(u => (
+                                            <button
+                                                key={u.id}
+                                                onClick={() => handleAddMember(u)}
+                                                className="w-full flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/30 hover:bg-white/10 transition-all group"
+                                            >
+                                                <div className="flex items-center gap-4 text-left">
+                                                    <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
+                                                        {u.full_name.charAt(0)}
+                                                    </div>
+                                                    <div>
+                                                        <div className="font-bold text-sm">{u.full_name}</div>
+                                                        <div className="text-xs text-gray-500">{u.email}</div>
+                                                    </div>
+                                                </div>
+                                                <div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all">
+                                                    <Plus className="w-4 h-4 text-blue-400 opacity-0 group-hover:opacity-100" />
+                                                </div>
+                                            </button>
+                                        ))
+                                    ) : searchQuery && !searching ? (
+                                        <div className="py-8 text-center text-gray-600 italic text-sm">No users found matching your search.</div>
+                                    ) : null}
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            )}
-        </div>
+                )}
+        </>
     );
 }
diff --git a/web/studio/src/app/globals.css b/web/studio/src/app/globals.css
index 6d11bf6..7a3404f 100644
--- a/web/studio/src/app/globals.css
+++ b/web/studio/src/app/globals.css
@@ -65,6 +65,30 @@ body {
   @apply scale-95;
 }
 
+/* Premium Typography System */
+.heading-premium {
+  @apply text-3xl md:text-4xl font-black tracking-tight leading-tight;
+  background: linear-gradient(to bottom right, #111827, #374151);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.dark .heading-premium {
+  background: linear-gradient(to bottom right, #ffffff, #9ca3af);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.section-title {
+  @apply text-xl md:text-2xl font-black tracking-tight flex items-center gap-3 text-gray-900 dark:text-white;
+}
+
+.text-description-premium {
+  @apply text-sm md:text-base text-slate-500 dark:text-gray-400 font-medium;
+}
+
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/web/studio/src/components/CourseEditorLayout.tsx b/web/studio/src/components/CourseEditorLayout.tsx
index c149ea4..05a8dc8 100644
--- a/web/studio/src/components/CourseEditorLayout.tsx
+++ b/web/studio/src/components/CourseEditorLayout.tsx
@@ -141,15 +141,15 @@ export default function CourseEditorLayout({
                             <ChevronLeft className="w-5 h-5" />
                         </button>
                         <div>
-                            <h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
+                            <h1 className="heading-premium">
                                 {displayTitle}
                             </h1>
-                            <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">
+                            <p className="text-description-premium mt-1.5 flex items-center gap-2">
                                 {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"
+                                    <span className={`text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-widest ${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>
@@ -179,8 +179,8 @@ export default function CourseEditorLayout({
                                     <Link
                                         href={groupHref}
                                         className={`flex items-center gap-2 px-6 py-3 text-sm font-black uppercase tracking-wider transition-all border-b-2 whitespace-nowrap ${isGroupActive
-                                                ? "border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/10"
-                                                : "border-transparent text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/5"
+                                            ? "border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/10"
+                                            : "border-transparent text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/5"
                                             }`}
                                     >
                                         <Icon className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
@@ -206,8 +206,8 @@ export default function CourseEditorLayout({
                                             href={tab.href}
                                             aria-current={isActive ? "page" : undefined}
                                             className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive
-                                                    ? "bg-blue-600 text-white shadow-sm shadow-blue-500/30"
-                                                    : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5"
+                                                ? "bg-blue-600 text-white shadow-sm shadow-blue-500/30"
+                                                : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5"
                                                 }`}
                                         >
                                             <Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />