diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx
index f68aee9..d07a121 100644
--- a/src/components/layouts/MainLayout.tsx
+++ b/src/components/layouts/MainLayout.tsx
@@ -1,15 +1,12 @@
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { NavBar } from '../common/NavBar';
 import { Footer } from '../common/Footer.tsx';
 
 const MainLayout = () => {
-  const location = useLocation();
-  const isLandingPage = location.pathname === '/';
-
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-50">
+    <div className="flex flex-col min-h-screen">
       <NavBar />
-      <main className={`flex-grow container mx-auto p-4 ${!isLandingPage ? 'pt-24' : ''}`}>
+      <main className="flex-grow">
         <Outlet />
       </main>
       <Footer />
diff --git a/src/components/ui/StatusBadge/StatusBadge.tsx b/src/components/ui/StatusBadge/StatusBadge.tsx
index 0c8c31d..1d38422 100644
--- a/src/components/ui/StatusBadge/StatusBadge.tsx
+++ b/src/components/ui/StatusBadge/StatusBadge.tsx
@@ -1,8 +1,15 @@
 import Badge from '../Badge/Badge';
-import { Clock, CheckCircle, XCircle } from 'lucide-react';
+import { Clock, CheckCircle, XCircle, TrendingUp } from 'lucide-react';
 
 interface StatusBadgeProps {
-  status: 'pending' | 'accepted' | 'rejected' | string;
+  status:
+    | 'pending'
+    | 'accepted'
+    | 'rejected'
+    | 'enrolled'
+    | 'in-progress'
+    | 'completed'
+    | string;
 }
 /**
  * StatusBadge Component
@@ -31,9 +38,24 @@ const StatusBadge = ({ status }: StatusBadgeProps) => {
           Rechazado
         </Badge>
       );
+    case 'enrolled':
+    case 'in-progress':
+      return (
+        <Badge className="bg-blue-100 text-blue-800 border-blue-200">
+          <TrendingUp className="w-3 h-3 mr-1" />
+          En Progreso
+        </Badge>
+      );
+    case 'completed':
+      return (
+        <Badge className="bg-green-100 text-green-800 border-green-200">
+          <CheckCircle className="w-3 h-3 mr-1" />
+          Completado
+        </Badge>
+      );
     default:
       return <Badge>{status}</Badge>;
   }
 };
 
-export default StatusBadge;
\ No newline at end of file
+export default StatusBadge;
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index 54a0f80..7a5dfe8 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -1,9 +1,14 @@
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/Card/Card';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/Card/Card';
 
 export default function AboutPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 py-12">
-      <div className="container mx-auto px-4 sm:px-6 max-w-4xl">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-12">
         <h1 className="text-4xl font-bold text-slate-800 mb-8 text-center">
           Acerca de Nosotros
         </h1>
@@ -14,8 +19,10 @@ export default function AboutPage() {
           </CardHeader>
           <CardContent>
             <p className="text-slate-700">
-              Somos una plataforma educativa dedicada a democratizar el acceso a la educación de calidad.
-              Nuestro objetivo es conectar a estudiantes con profesores expertos en diversas áreas del conocimiento.
+              Somos una plataforma educativa dedicada a democratizar el acceso a
+              la educación de calidad. Nuestro objetivo es conectar a
+              estudiantes con profesores expertos en diversas áreas del
+              conocimiento.
             </p>
           </CardContent>
         </Card>
@@ -26,9 +33,9 @@ export default function AboutPage() {
           </CardHeader>
           <CardContent>
             <p className="text-slate-700">
-              Aspiramos a ser la plataforma de aprendizaje en línea líder, donde cada persona pueda
-              desarrollar sus habilidades y alcanzar su máximo potencial a través de cursos accesibles
-              y de alta calidad.
+              Aspiramos a ser la plataforma de aprendizaje en línea líder, donde
+              cada persona pueda desarrollar sus habilidades y alcanzar su
+              máximo potencial a través de cursos accesibles y de alta calidad.
             </p>
           </CardContent>
         </Card>
diff --git a/src/pages/Admin/AdminDashboard.tsx b/src/pages/Admin/AdminDashboard.tsx
index 0507c8c..7ecab91 100644
--- a/src/pages/Admin/AdminDashboard.tsx
+++ b/src/pages/Admin/AdminDashboard.tsx
@@ -8,12 +8,7 @@ import {
   CardTitle,
 } from '../../components/ui/Card/Card';
 import StatusBadge from '../../components/ui/StatusBadge/StatusBadge';
-import {
-  Users,
-  BookOpen,
-  GraduationCap,
-  DollarSign,
-} from 'lucide-react';
+import { Users, BookOpen, GraduationCap, DollarSign } from 'lucide-react';
 import { appealService } from '../../api/services/appeal.service';
 import { useAdminAnalytics } from '../../hooks/useAdmin';
 import { formatCurrency } from '../../lib/currency';
@@ -90,63 +85,64 @@ export default function AdminDashboard() {
   }, []);
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold text-slate-800 mb-2">
-          Dashboard de Administrador
-        </h1>
-        <p className="text-slate-600">Resumen general de la plataforma.</p>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        {stats.map((stat) => (
-          <Card key={stat.title}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-2 pb-2">
-              <CardTitle className="text-sm font-medium text-slate-600">
-                {stat.title}
-              </CardTitle>
-              <stat.icon className="w-5 h-5 text-slate-400" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold text-slate-800">
-                {stat.value}
-              </div>
-              <p
-                className={`text-xs mt-1 ${
-                  stat.isPositive ? 'text-green-600' : 'text-red-600'
-                }`}
-              >
-                {stat.change} desde el mes pasado
-              </p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50/100 px-4">
+      <div className="container mx-auto max-w-7xl space-y-6 pt-24 pb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-800 mb-2">
+            Dashboard de Administrador
+          </h1>
+          <p className="text-slate-600">Resumen general de la plataforma.</p>
+        </div>
 
-      {isLoadingAnalytics ? (
-        <div className="text-center p-8">
-          <p className="text-slate-600">Cargando estadísticas...</p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {stats.map((stat) => (
+            <Card key={stat.title}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-2 pb-2">
+                <CardTitle className="text-sm font-medium text-slate-600">
+                  {stat.title}
+                </CardTitle>
+                <stat.icon className="w-5 h-5 text-slate-400" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold text-slate-800">
+                  {stat.value}
+                </div>
+                <p
+                  className={`text-xs mt-1 ${
+                    stat.isPositive ? 'text-green-600' : 'text-red-600'
+                  }`}
+                >
+                  {stat.change} desde el mes pasado
+                </p>
+              </CardContent>
+            </Card>
+          ))}
         </div>
-      ) : null}
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center">
-            <GraduationCap className="w-5 h-5 mr-2" />
-            Solicitudes Recientes
-          </CardTitle>
-          <CardDescription>
-            Últimas solicitudes recibidas.{' '}
-            <Link
-              to="/admin/teacher-requests"
-              className="text-blue-600 hover:underline"
-            >
-              Ver todas
-            </Link>
-            .
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+        {isLoadingAnalytics ? (
+          <div className="text-center p-8">
+            <p className="text-slate-600">Cargando estadísticas...</p>
+          </div>
+        ) : null}
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <GraduationCap className="w-5 h-5 mr-2" />
+              Solicitudes Recientes
+            </CardTitle>
+            <CardDescription>
+              Últimas solicitudes recibidas.{' '}
+              <Link
+                to="/admin/teacher-requests"
+                className="text-blue-600 hover:underline"
+              >
+                Ver todas
+              </Link>
+              .
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
             <div className="space-y-4">
               {isLoading ? (
                 <p>Cargando...</p>
@@ -185,6 +181,7 @@ export default function AdminDashboard() {
             </div>
           </CardContent>
         </Card>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Admin/AnalyticsPage.tsx b/src/pages/Admin/AnalyticsPage.tsx
index 0818d82..6d46a5a 100644
--- a/src/pages/Admin/AnalyticsPage.tsx
+++ b/src/pages/Admin/AnalyticsPage.tsx
@@ -95,382 +95,391 @@ export default function AnalyticsPage() {
   ];
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold text-slate-800 mb-2">
-          Estadísticas y Métricas
-        </h1>
-        <p className="text-slate-600">
-          Panel de análisis y rendimiento de la plataforma.
-        </p>
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-green-50/30 to-slate-50/100 px-4">
+      <div className="container mx-auto max-w-7xl space-y-6 pt-24 pb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-800 mb-2">
+            Estadísticas y Métricas
+          </h1>
+          <p className="text-slate-600">
+            Panel de análisis y rendimiento de la plataforma.
+          </p>
+        </div>
 
-      {/* Métricas Principales */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-slate-600">
-              Estudiantes Activos
-            </CardTitle>
-            <Users className="w-5 h-5 text-blue-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-slate-800">
-              {analytics.totalStudents.toLocaleString('es-AR')}
-            </div>
-            <p
-              className={`text-xs mt-1 ${
-                analytics.growth.studentsGrowthPercentage >= 0
-                  ? 'text-green-600'
-                  : 'text-red-600'
-              }`}
-            >
-              {analytics.growth.studentsGrowthPercentage >= 0 ? '+' : ''}
-              {analytics.growth.studentsGrowthPercentage.toFixed(1)}% este mes
-            </p>
-          </CardContent>
-        </Card>
+        {/* Métricas Principales */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-slate-600">
+                Estudiantes Activos
+              </CardTitle>
+              <Users className="w-5 h-5 text-blue-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-slate-800">
+                {analytics.totalStudents.toLocaleString('es-AR')}
+              </div>
+              <p
+                className={`text-xs mt-1 ${
+                  analytics.growth.studentsGrowthPercentage >= 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                }`}
+              >
+                {analytics.growth.studentsGrowthPercentage >= 0 ? '+' : ''}
+                {analytics.growth.studentsGrowthPercentage.toFixed(1)}% este mes
+              </p>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-slate-600">
-              Profesores Activos
-            </CardTitle>
-            <Award className="w-5 h-5 text-green-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-slate-800">
-              {analytics.totalProfessors.toLocaleString('es-AR')}
-            </div>
-            <p
-              className={`text-xs mt-1 ${
-                analytics.growth.professorsGrowthPercentage >= 0
-                  ? 'text-green-600'
-                  : 'text-red-600'
-              }`}
-            >
-              {analytics.growth.professorsGrowthPercentage >= 0 ? '+' : ''}
-              {analytics.growth.professorsGrowthPercentage.toFixed(1)}% este mes
-            </p>
-          </CardContent>
-        </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-slate-600">
+                Profesores Activos
+              </CardTitle>
+              <Award className="w-5 h-5 text-green-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-slate-800">
+                {analytics.totalProfessors.toLocaleString('es-AR')}
+              </div>
+              <p
+                className={`text-xs mt-1 ${
+                  analytics.growth.professorsGrowthPercentage >= 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                }`}
+              >
+                {analytics.growth.professorsGrowthPercentage >= 0 ? '+' : ''}
+                {analytics.growth.professorsGrowthPercentage.toFixed(1)}% este
+                mes
+              </p>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-slate-600">
-              Cursos Totales
-            </CardTitle>
-            <BookOpen className="w-5 h-5 text-orange-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-slate-800">
-              {analytics.totalCourses.toLocaleString('es-AR')}
-            </div>
-            <p className="text-xs text-slate-600 mt-1">
-              {analytics.courseStats.byStatus.publicado} publicados
-            </p>
-          </CardContent>
-        </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-slate-600">
+                Cursos Totales
+              </CardTitle>
+              <BookOpen className="w-5 h-5 text-orange-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-slate-800">
+                {analytics.totalCourses.toLocaleString('es-AR')}
+              </div>
+              <p className="text-xs text-slate-600 mt-1">
+                {analytics.courseStats.byStatus.publicado} publicados
+              </p>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-slate-600">
-              Ingresos Plataforma
-            </CardTitle>
-            <DollarSign className="w-5 h-5 text-green-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-slate-800">
-              {formatCurrency(analytics.platformEarningsInCents)}
-            </div>
-            <p
-              className={`text-xs mt-1 ${
-                analytics.growth.revenueGrowthPercentage >= 0
-                  ? 'text-green-600'
-                  : 'text-red-600'
-              }`}
-            >
-              {analytics.growth.revenueGrowthPercentage >= 0 ? '+' : ''}
-              {analytics.growth.revenueGrowthPercentage.toFixed(1)}% este mes
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-slate-600">
+                Ingresos Plataforma
+              </CardTitle>
+              <DollarSign className="w-5 h-5 text-green-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-slate-800">
+                {formatCurrency(analytics.platformEarningsInCents)}
+              </div>
+              <p
+                className={`text-xs mt-1 ${
+                  analytics.growth.revenueGrowthPercentage >= 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                }`}
+              >
+                {analytics.growth.revenueGrowthPercentage >= 0 ? '+' : ''}
+                {analytics.growth.revenueGrowthPercentage.toFixed(1)}% este mes
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Gráficos */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Users className="w-5 h-5 mr-2 text-blue-500" />
+                Crecimiento de Usuarios
+              </CardTitle>
+              <CardDescription>
+                Nuevos usuarios por mes (últimos 6 meses)
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={userGrowthData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="Estudiantes" fill="#3b82f6" />
+                  <Bar dataKey="Profesores" fill="#10b981" />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <DollarSign className="w-5 h-5 mr-2 text-green-500" />
+                Ingresos Mensuales
+              </CardTitle>
+              <CardDescription>
+                Evolución de ingresos (últimos 6 meses)
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <LineChart data={revenueData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" />
+                  <YAxis />
+                  <Tooltip
+                    formatter={(value) =>
+                      `$${Number(value).toLocaleString('es-AR', {
+                        minimumFractionDigits: 2,
+                      })}`
+                    }
+                  />
+                  <Legend />
+                  <Line
+                    type="monotone"
+                    dataKey="Ingresos Plataforma (3%)"
+                    stroke="#10b981"
+                    strokeWidth={3}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="Ingresos Totales"
+                    stroke="#3b82f6"
+                    strokeWidth={2}
+                    strokeDasharray="5 5"
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Estado de Cursos y Top Rankings */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Distribución de Cursos por Estado</CardTitle>
+              <CardDescription>
+                Estado actual de todos los cursos
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={courseStatusData}
+                    cx="50%"
+                    cy="50%"
+                    labelLine={false}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    label={(entry: any) =>
+                      `${entry.name}: ${(entry.percent * 100).toFixed(0)}%`
+                    }
+                    outerRadius={80}
+                    fill="#8884d8"
+                    dataKey="value"
+                  >
+                    {courseStatusData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+              <div className="mt-4 space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-600">Cursos Gratuitos:</span>
+                  <span className="font-medium">
+                    {analytics.courseStats.freeCourses}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-600">Cursos de Pago:</span>
+                  <span className="font-medium">
+                    {analytics.courseStats.paidCourses}
+                  </span>
+                </div>
+                {analytics.courseStats.averagePriceInCents && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-slate-600">Precio Promedio:</span>
+                    <span className="font-medium">
+                      {formatCurrency(
+                        analytics.courseStats.averagePriceInCents
+                      )}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Top 5 Cursos Más Vendidos</CardTitle>
+              <CardDescription>Cursos con más ventas</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {analytics.topCourses.map((course, index) => (
+                  <div
+                    key={course.courseId}
+                    className="flex items-center justify-between p-3 rounded-lg bg-slate-50"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                        <span className="text-blue-600 font-bold text-sm">
+                          #{index + 1}
+                        </span>
+                      </div>
+                      <div>
+                        <p className="font-medium text-slate-800">
+                          {course.courseName}
+                        </p>
+                        <p className="text-sm text-slate-600">
+                          Por {course.professorName}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-bold text-slate-800">
+                        {course.salesCount} ventas
+                      </p>
+                      <p className="text-sm text-green-600">
+                        {formatCurrency(course.totalEarningsInCents)}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
 
-      {/* Gráficos */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Top Profesores */}
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center">
-              <Users className="w-5 h-5 mr-2 text-blue-500" />
-              Crecimiento de Usuarios
+              <TrendingUp className="w-5 h-5 mr-2 text-blue-500" />
+              Top 5 Profesores Más Exitosos
             </CardTitle>
-            <CardDescription>
-              Nuevos usuarios por mes (últimos 6 meses)
-            </CardDescription>
+            <CardDescription>Profesores con mayores ingresos</CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <BarChart data={userGrowthData}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="month" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="Estudiantes" fill="#3b82f6" />
-                <Bar dataKey="Profesores" fill="#10b981" />
-              </BarChart>
-            </ResponsiveContainer>
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b">
+                    <th className="text-left p-3 text-sm font-medium text-slate-600">
+                      Posición
+                    </th>
+                    <th className="text-left p-3 text-sm font-medium text-slate-600">
+                      Profesor
+                    </th>
+                    <th className="text-center p-3 text-sm font-medium text-slate-600">
+                      Cursos
+                    </th>
+                    <th className="text-center p-3 text-sm font-medium text-slate-600">
+                      Estudiantes
+                    </th>
+                    <th className="text-right p-3 text-sm font-medium text-slate-600">
+                      Ganancias (97%)
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {analytics.topProfessors.map((professor, index) => (
+                    <tr
+                      key={professor.professorId}
+                      className="border-b hover:bg-slate-50"
+                    >
+                      <td className="p-3">
+                        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                          <span className="text-blue-600 font-bold text-sm">
+                            #{index + 1}
+                          </span>
+                        </div>
+                      </td>
+                      <td className="p-3 font-medium text-slate-800">
+                        {professor.professorName}
+                      </td>
+                      <td className="p-3 text-center text-slate-600">
+                        {professor.coursesCount}
+                      </td>
+                      <td className="p-3 text-center text-slate-600">
+                        {professor.totalStudents.toLocaleString('es-AR')}
+                      </td>
+                      <td className="p-3 text-right font-bold text-green-600">
+                        {formatCurrency(professor.totalEarningsInCents)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </CardContent>
         </Card>
 
+        {/* Actividad Reciente */}
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center">
-              <DollarSign className="w-5 h-5 mr-2 text-green-500" />
-              Ingresos Mensuales
-            </CardTitle>
+            <CardTitle>Actividad Reciente</CardTitle>
             <CardDescription>
-              Evolución de ingresos (últimos 6 meses)
+              Resumen de actividad reciente en la plataforma
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <LineChart data={revenueData}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="month" />
-                <YAxis />
-                <Tooltip
-                  formatter={(value) =>
-                    `$${Number(value).toLocaleString('es-AR', {
-                      minimumFractionDigits: 2,
-                    })}`
-                  }
-                />
-                <Legend />
-                <Line
-                  type="monotone"
-                  dataKey="Ingresos Plataforma (3%)"
-                  stroke="#10b981"
-                  strokeWidth={3}
-                />
-                <Line
-                  type="monotone"
-                  dataKey="Ingresos Totales"
-                  stroke="#3b82f6"
-                  strokeWidth={2}
-                  strokeDasharray="5 5"
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Estado de Cursos y Top Rankings */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Distribución de Cursos por Estado</CardTitle>
-            <CardDescription>Estado actual de todos los cursos</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <PieChart>
-                <Pie
-                  data={courseStatusData}
-                  cx="50%"
-                  cy="50%"
-                  labelLine={false}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  label={(entry: any) =>
-                    `${entry.name}: ${(entry.percent * 100).toFixed(0)}%`
-                  }
-                  outerRadius={80}
-                  fill="#8884d8"
-                  dataKey="value"
-                >
-                  {courseStatusData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-                <Tooltip />
-              </PieChart>
-            </ResponsiveContainer>
-            <div className="mt-4 space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-slate-600">Cursos Gratuitos:</span>
-                <span className="font-medium">
-                  {analytics.courseStats.freeCourses}
-                </span>
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+              <div className="text-center p-4 bg-blue-50 rounded-lg">
+                <p className="text-2xl font-bold text-blue-600">
+                  {analytics.recentActivity.newStudentsToday}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">Estudiantes hoy</p>
               </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-slate-600">Cursos de Pago:</span>
-                <span className="font-medium">
-                  {analytics.courseStats.paidCourses}
-                </span>
+              <div className="text-center p-4 bg-green-50 rounded-lg">
+                <p className="text-2xl font-bold text-green-600">
+                  {analytics.recentActivity.newProfessorsToday}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">Profesores hoy</p>
+              </div>
+              <div className="text-center p-4 bg-orange-50 rounded-lg">
+                <p className="text-2xl font-bold text-orange-600">
+                  {analytics.recentActivity.salesToday}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">Ventas hoy</p>
+              </div>
+              <div className="text-center p-4 bg-purple-50 rounded-lg">
+                <p className="text-2xl font-bold text-purple-600">
+                  {analytics.recentActivity.newCoursesThisWeek}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">
+                  Cursos esta semana
+                </p>
+              </div>
+              <div className="text-center p-4 bg-pink-50 rounded-lg">
+                <p className="text-2xl font-bold text-pink-600">
+                  {analytics.recentActivity.newEnrollmentsToday}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">Inscripciones hoy</p>
               </div>
-              {analytics.courseStats.averagePriceInCents && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-600">Precio Promedio:</span>
-                  <span className="font-medium">
-                    {formatCurrency(analytics.courseStats.averagePriceInCents)}
-                  </span>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Top 5 Cursos Más Vendidos</CardTitle>
-            <CardDescription>Cursos con más ventas</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {analytics.topCourses.map((course, index) => (
-                <div
-                  key={course.courseId}
-                  className="flex items-center justify-between p-3 rounded-lg bg-slate-50"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
-                      <span className="text-blue-600 font-bold text-sm">
-                        #{index + 1}
-                      </span>
-                    </div>
-                    <div>
-                      <p className="font-medium text-slate-800">
-                        {course.courseName}
-                      </p>
-                      <p className="text-sm text-slate-600">
-                        Por {course.professorName}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <p className="font-bold text-slate-800">
-                      {course.salesCount} ventas
-                    </p>
-                    <p className="text-sm text-green-600">
-                      {formatCurrency(course.totalEarningsInCents)}
-                    </p>
-                  </div>
-                </div>
-              ))}
             </div>
           </CardContent>
         </Card>
       </div>
-
-      {/* Top Profesores */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center">
-            <TrendingUp className="w-5 h-5 mr-2 text-blue-500" />
-            Top 5 Profesores Más Exitosos
-          </CardTitle>
-          <CardDescription>Profesores con mayores ingresos</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b">
-                  <th className="text-left p-3 text-sm font-medium text-slate-600">
-                    Posición
-                  </th>
-                  <th className="text-left p-3 text-sm font-medium text-slate-600">
-                    Profesor
-                  </th>
-                  <th className="text-center p-3 text-sm font-medium text-slate-600">
-                    Cursos
-                  </th>
-                  <th className="text-center p-3 text-sm font-medium text-slate-600">
-                    Estudiantes
-                  </th>
-                  <th className="text-right p-3 text-sm font-medium text-slate-600">
-                    Ganancias (97%)
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {analytics.topProfessors.map((professor, index) => (
-                  <tr
-                    key={professor.professorId}
-                    className="border-b hover:bg-slate-50"
-                  >
-                    <td className="p-3">
-                      <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
-                        <span className="text-blue-600 font-bold text-sm">
-                          #{index + 1}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="p-3 font-medium text-slate-800">
-                      {professor.professorName}
-                    </td>
-                    <td className="p-3 text-center text-slate-600">
-                      {professor.coursesCount}
-                    </td>
-                    <td className="p-3 text-center text-slate-600">
-                      {professor.totalStudents.toLocaleString('es-AR')}
-                    </td>
-                    <td className="p-3 text-right font-bold text-green-600">
-                      {formatCurrency(professor.totalEarningsInCents)}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Actividad Reciente */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Actividad Reciente</CardTitle>
-          <CardDescription>
-            Resumen de actividad reciente en la plataforma
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            <div className="text-center p-4 bg-blue-50 rounded-lg">
-              <p className="text-2xl font-bold text-blue-600">
-                {analytics.recentActivity.newStudentsToday}
-              </p>
-              <p className="text-sm text-slate-600 mt-1">Estudiantes hoy</p>
-            </div>
-            <div className="text-center p-4 bg-green-50 rounded-lg">
-              <p className="text-2xl font-bold text-green-600">
-                {analytics.recentActivity.newProfessorsToday}
-              </p>
-              <p className="text-sm text-slate-600 mt-1">Profesores hoy</p>
-            </div>
-            <div className="text-center p-4 bg-orange-50 rounded-lg">
-              <p className="text-2xl font-bold text-orange-600">
-                {analytics.recentActivity.salesToday}
-              </p>
-              <p className="text-sm text-slate-600 mt-1">Ventas hoy</p>
-            </div>
-            <div className="text-center p-4 bg-purple-50 rounded-lg">
-              <p className="text-2xl font-bold text-purple-600">
-                {analytics.recentActivity.newCoursesThisWeek}
-              </p>
-              <p className="text-sm text-slate-600 mt-1">Cursos esta semana</p>
-            </div>
-            <div className="text-center p-4 bg-pink-50 rounded-lg">
-              <p className="text-2xl font-bold text-pink-600">
-                {analytics.recentActivity.newEnrollmentsToday}
-              </p>
-              <p className="text-sm text-slate-600 mt-1">Inscripciones hoy</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 }
diff --git a/src/pages/Admin/CourseTypesPage.tsx b/src/pages/Admin/CourseTypesPage.tsx
index 6ea1b86..3b56e55 100644
--- a/src/pages/Admin/CourseTypesPage.tsx
+++ b/src/pages/Admin/CourseTypesPage.tsx
@@ -10,7 +10,11 @@ import {
   CardTitle,
 } from '../../components/ui/Card/Card';
 import Button from '../../components/ui/Button/Button';
-import { Dialog, DialogHeader, DialogTitle } from '../../components/ui/Dialog/Dialog';
+import {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+} from '../../components/ui/Dialog/Dialog';
 import Input from '../../components/ui/Input/Input';
 import Textarea from '../../components/ui/TextArea/TextArea';
 import { Plus, Edit, Trash2, Search } from 'lucide-react';
@@ -25,7 +29,10 @@ import { useDebounce } from '../../hooks/useDebounce';
 
 const CourseTypeSchema = v.object({
   name: v.pipe(v.string(), v.minLength(1, 'El nombre es requerido.')),
-  description: v.pipe(v.string(), v.minLength(1, 'La descripción es requerida.')),
+  description: v.pipe(
+    v.string(),
+    v.minLength(1, 'La descripción es requerida.')
+  ),
 });
 
 type CourseTypeFormData = v.InferInput<typeof CourseTypeSchema>;
@@ -34,23 +41,32 @@ const TYPES_PER_PAGE = 5;
 export default function CourseTypesPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentTypeId, setCurrentTypeId] = useState<string | null>(null);
-  
+
   const [searchTerm, setSearchTerm] = useState('');
   const [sortOrder, setSortOrder] = useState<'ASC' | 'DESC'>('ASC');
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
 
-  const { register, handleSubmit, formState: { errors }, setValue, reset } = useForm<CourseTypeFormData>({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+  } = useForm<CourseTypeFormData>({
     resolver: valibotResolver(CourseTypeSchema),
   });
 
-  const filters = useMemo(() => ({
+  const filters = useMemo(
+    () => ({
       q: debouncedSearchTerm || undefined,
       sortBy: 'name',
       sortOrder,
       limit: TYPES_PER_PAGE,
       offset: (currentPage - 1) * TYPES_PER_PAGE,
-  }), [debouncedSearchTerm, sortOrder, currentPage]);
+    }),
+    [debouncedSearchTerm, sortOrder, currentPage]
+  );
 
   const { data, isLoading, error } = useCourseTypes(filters);
   const createMutation = useCreateCourseType();
@@ -79,7 +95,9 @@ export default function CourseTypesPage() {
   };
 
   const handleDelete = async (id: string) => {
-    if (window.confirm('¿Estás seguro? Esta acción eliminará el tipo de curso.')) {
+    if (
+      window.confirm('¿Estás seguro? Esta acción eliminará el tipo de curso.')
+    ) {
       deleteMutation.mutate(id);
     }
   };
@@ -88,9 +106,12 @@ export default function CourseTypesPage() {
     const payload = { name: data.name, description: data.description };
 
     if (currentTypeId) {
-      updateMutation.mutate({ id: currentTypeId, data: payload }, {
-        onSuccess: () => setIsModalOpen(false),
-      });
+      updateMutation.mutate(
+        { id: currentTypeId, data: payload },
+        {
+          onSuccess: () => setIsModalOpen(false),
+        }
+      );
     } else {
       createMutation.mutate(payload, {
         onSuccess: () => setIsModalOpen(false),
@@ -98,81 +119,176 @@ export default function CourseTypesPage() {
     }
   };
 
-  if (isLoading && courseTypes.length === 0) return <p>Cargando tipos de curso...</p>;
-  if (error) return <p className="text-center p-8 text-red-600">Error al cargar los datos: {error.message}</p>;
+  if (isLoading && courseTypes.length === 0)
+    return <p>Cargando tipos de curso...</p>;
+  if (error)
+    return (
+      <p className="text-center p-8 text-red-600">
+        Error al cargar los datos: {error.message}
+      </p>
+    );
 
   return (
-    <div className="space-y-6">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <div>
-          <h1 className="text-3xl font-bold text-slate-800 mb-2">Gestión de Tipos de Curso</h1>
-          <p className="text-slate-600">Crea y administra las categorías de los cursos.</p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-orange-50/30 to-slate-50/100 px-4">
+      <div className="container mx-auto max-w-7xl space-y-6 pt-24 pb-8">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+          <div>
+            <h1 className="text-3xl font-bold text-slate-800 mb-2">
+              Gestión de Tipos de Curso
+            </h1>
+            <p className="text-slate-600">
+              Crea y administra las categorías de los cursos.
+            </p>
+          </div>
+          <Button size="md" onClick={openModalForCreate}>
+            <Plus className="w-4 h-4 mr-2" />
+            Crear Nuevo Tipo
+          </Button>
         </div>
-        <Button size="md" onClick={openModalForCreate}><Plus className="w-4 h-4 mr-2" />Crear Nuevo Tipo</Button>
-      </div>
 
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <div>
-              <CardTitle>Tipos de Curso Existentes ({totalTypes})</CardTitle>
-              <CardDescription>Lista de todas las categorías disponibles</CardDescription>
-            </div>
-            <div className="flex items-center gap-2 w-full sm:w-auto">
-              <div className="relative flex-grow">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <input type="text" placeholder="Buscar por nombre..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50" />
+        <Card>
+          <CardHeader>
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+              <div>
+                <CardTitle>Tipos de Curso Existentes ({totalTypes})</CardTitle>
+                <CardDescription>
+                  Lista de todas las categorías disponibles
+                </CardDescription>
               </div>
-              <select 
-                value={sortOrder} 
-                onChange={(e) => setSortOrder(e.target.value as 'ASC' | 'DESC')} 
-                className="px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-              >
-                <option value="ASC">Ordenar A-Z</option>
-                <option value="DESC">Ordenar Z-A</option>
-              </select>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {courseTypes.map((type) => (
-              <div key={type.id} className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-lg border hover:bg-slate-50/50">
-                <div className="flex-1 mb-3 sm:mb-0">
-                  <h3 className="font-semibold text-slate-800">{type.name}</h3>
-                  <p className="text-sm text-slate-600">{type.description}</p>
-                  <p className="text-xs text-slate-500 mt-1">{(type.courses || []).length} cursos asociados</p>
+              <div className="flex items-center gap-2 w-full sm:w-auto">
+                <div className="relative flex-grow">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <input
+                    type="text"
+                    placeholder="Buscar por nombre..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                  />
                 </div>
-                <div className="flex items-center space-x-2 self-end sm:self-center">
-                  <Button variant="outline" size="md" onClick={() => openModalForEdit(type)}><Edit className="w-4 h-4 mr-1" /> Editar</Button>
-                  <Button variant="destructive" size="md" onClick={() => handleDelete(type.id)} disabled={deleteMutation.isPending}><Trash2 className="w-4 h-4 mr-1" /> Eliminar</Button>
+                <select
+                  value={sortOrder}
+                  onChange={(e) =>
+                    setSortOrder(e.target.value as 'ASC' | 'DESC')
+                  }
+                  className="px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                >
+                  <option value="ASC">Ordenar A-Z</option>
+                  <option value="DESC">Ordenar Z-A</option>
+                </select>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {courseTypes.map((type) => (
+                <div
+                  key={type.id}
+                  className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-lg border hover:bg-slate-50/50"
+                >
+                  <div className="flex-1 mb-3 sm:mb-0">
+                    <h3 className="font-semibold text-slate-800">
+                      {type.name}
+                    </h3>
+                    <p className="text-sm text-slate-600">{type.description}</p>
+                    <p className="text-xs text-slate-500 mt-1">
+                      {(type.courses || []).length} cursos asociados
+                    </p>
+                  </div>
+                  <div className="flex items-center space-x-2 self-end sm:self-center">
+                    <Button
+                      variant="outline"
+                      size="md"
+                      onClick={() => openModalForEdit(type)}
+                    >
+                      <Edit className="w-4 h-4 mr-1" /> Editar
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="md"
+                      onClick={() => handleDelete(type.id)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      <Trash2 className="w-4 h-4 mr-1" /> Eliminar
+                    </Button>
+                  </div>
                 </div>
+              ))}
+            </div>
+            {courseTypes.length === 0 && !isLoading && (
+              <p className="text-center text-slate-500 py-8">
+                No se encontraron tipos de curso con los filtros aplicados.
+              </p>
+            )}
+
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between mt-6 pt-4 border-t">
+                <Button
+                  variant="outline"
+                  onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                  disabled={currentPage === 1 || isLoading}
+                >
+                  Anterior
+                </Button>
+                <span className="text-sm text-slate-600">
+                  Página {currentPage} de {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(p + 1, totalPages))
+                  }
+                  disabled={currentPage === totalPages || isLoading}
+                >
+                  Siguiente
+                </Button>
               </div>
-            ))}
-          </div>
-          {courseTypes.length === 0 && !isLoading && <p className="text-center text-slate-500 py-8">No se encontraron tipos de curso con los filtros aplicados.</p>}
-          
-          {totalPages > 1 && (
-            <div className="flex items-center justify-between mt-6 pt-4 border-t">
-              <Button variant="outline" onClick={() => setCurrentPage(p => Math.max(p - 1, 1))} disabled={currentPage === 1 || isLoading}>Anterior</Button>
-              <span className="text-sm text-slate-600">Página {currentPage} de {totalPages}</span>
-              <Button variant="outline" onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))} disabled={currentPage === totalPages || isLoading}>Siguiente</Button>
+            )}
+          </CardContent>
+        </Card>
+
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <DialogHeader>
+            <DialogTitle>
+              {currentTypeId ? 'Editar' : 'Crear'} Tipo de Curso
+            </DialogTitle>
+          </DialogHeader>
+          <form
+            onSubmit={handleSubmit(onFormSubmit)}
+            className="space-y-4 pt-4"
+          >
+            <Input
+              id="name"
+              label="Nombre del Tipo de Curso"
+              {...register('name')}
+              error={errors.name?.message}
+            />
+            <Textarea
+              id="description"
+              label="Descripción"
+              {...register('description')}
+              error={errors.description?.message}
+            />
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="md"
+                onClick={() => setIsModalOpen(false)}
+              >
+                Cancelar
+              </Button>
+              <Button
+                type="submit"
+                size="md"
+                isLoading={createMutation.isPending || updateMutation.isPending}
+              >
+                Guardar
+              </Button>
             </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogHeader><DialogTitle>{currentTypeId ? 'Editar' : 'Crear'} Tipo de Curso</DialogTitle></DialogHeader>
-        <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4 pt-4">
-          <Input id="name" label="Nombre del Tipo de Curso" {...register('name')} error={errors.name?.message} />
-          <Textarea id="description" label="Descripción" {...register('description')} error={errors.description?.message} />
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="outline" size="md" onClick={() => setIsModalOpen(false)}>Cancelar</Button>
-            <Button type="submit" size="md" isLoading={createMutation.isPending || updateMutation.isPending}>Guardar</Button>
-          </div>
-        </form>
-      </Dialog>
+          </form>
+        </Dialog>
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Admin/ProfessorAppealsPage.tsx b/src/pages/Admin/ProfessorAppealsPage.tsx
index 99d505c..bdf7f31 100644
--- a/src/pages/Admin/ProfessorAppealsPage.tsx
+++ b/src/pages/Admin/ProfessorAppealsPage.tsx
@@ -7,7 +7,11 @@ import {
   CardHeader,
   CardTitle,
 } from '../../components/ui/Card/Card';
-import { Dialog, DialogHeader, DialogTitle } from '../../components/ui/Dialog/Dialog';
+import {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+} from '../../components/ui/Dialog/Dialog';
 import StatusBadge from '../../components/ui/StatusBadge/StatusBadge';
 import DocumentViewer from '../../components/ui/DocumentViewer/DocumentViewer.tsx';
 import {
@@ -98,245 +102,249 @@ export default function ProfessorRequestsPage() {
     return <div className="text-center p-8 text-red-600">{error.message}</div>;
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold text-slate-800 mb-2">
-          Solicitudes de Profesores
-        </h1>
-        <p className="text-slate-600">
-          Gestiona las solicitudes para convertirse en profesor
-        </p>
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50/30 to-slate-50/100 px-4">
+      <div className="container mx-auto max-w-7xl space-y-6 pt-24 pb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-800 mb-2">
+            Solicitudes de Profesores
+          </h1>
+          <p className="text-slate-600">
+            Gestiona las solicitudes para convertirse en profesor
+          </p>
+        </div>
 
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
-            <div>
-              <CardTitle>Solicitudes ({totalRequests})</CardTitle>
-              <CardDescription>
-                Lista de todas las solicitudes de profesores
-              </CardDescription>
-            </div>
-            <div className="flex flex-col sm:flex-row items-center gap-2 w-full lg:w-auto">
-              <div className="relative flex-grow w-full">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <input
-                  type="text"
-                  placeholder="Buscar por nombre..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-                />
+        <Card>
+          <CardHeader>
+            <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+              <div>
+                <CardTitle>Solicitudes ({totalRequests})</CardTitle>
+                <CardDescription>
+                  Lista de todas las solicitudes de profesores
+                </CardDescription>
               </div>
-              <div className="flex gap-2 w-full">
-                <select
-                  value={statusFilter}
-                  onChange={(e) =>
-                    setStatusFilter(e.target.value as StatusFilter)
-                  }
-                  className="flex-1 w-full px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-                >
-                  <option value="all">Todas</option>
-                  <option value="pending">Pendientes</option>
-                  <option value="accepted">Aceptadas</option>
-                  <option value="rejected">Rechazadas</option>
-                </select>
-                <select
-                  value={sortOrder}
-                  onChange={(e) => setSortOrder(e.target.value)}
-                  className="flex-1 w-full px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-                >
-                  <option value="newest">Más nuevas</option>
-                  <option value="oldest">Más antiguas</option>
-                </select>
+              <div className="flex flex-col sm:flex-row items-center gap-2 w-full lg:w-auto">
+                <div className="relative flex-grow w-full">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <input
+                    type="text"
+                    placeholder="Buscar por nombre..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                  />
+                </div>
+                <div className="flex gap-2 w-full">
+                  <select
+                    value={statusFilter}
+                    onChange={(e) =>
+                      setStatusFilter(e.target.value as StatusFilter)
+                    }
+                    className="flex-1 w-full px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                  >
+                    <option value="all">Todas</option>
+                    <option value="pending">Pendientes</option>
+                    <option value="accepted">Aceptadas</option>
+                    <option value="rejected">Rechazadas</option>
+                  </select>
+                  <select
+                    value={sortOrder}
+                    onChange={(e) => setSortOrder(e.target.value)}
+                    className="flex-1 w-full px-3 py-2 text-sm border rounded-lg bg-white/80 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                  >
+                    <option value="newest">Más nuevas</option>
+                    <option value="oldest">Más antiguas</option>
+                  </select>
+                </div>
               </div>
             </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {requests.map((request) => {
-              const date = new Date(request.date);
-              const formattedDate = !isNaN(date.getTime())
-                ? date.toLocaleDateString('es-ES', {
-                    day: '2-digit',
-                    month: 'short',
-                    year: 'numeric',
-                  })
-                : 'Fecha inválida';
-              const isProcessing = processingAppealId === request.id;
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {requests.map((request) => {
+                const date = new Date(request.date);
+                const formattedDate = !isNaN(date.getTime())
+                  ? date.toLocaleDateString('es-ES', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric',
+                    })
+                  : 'Fecha inválida';
+                const isProcessing = processingAppealId === request.id;
 
-              return (
-                <div
-                  key={request.id}
-                  className="p-4 rounded-lg border border-slate-200 space-y-4"
-                >
-                  <div className="flex flex-col lg:flex-row justify-between lg:items-start gap-4">
-                    <div className="flex-1 space-y-3">
-                      <div className="flex items-center flex-wrap gap-x-3 gap-y-2">
-                        <h3 className="font-semibold text-lg text-slate-800">
-                          {request.user.name} {request.user.surname}
-                        </h3>
-                        <StatusBadge status={request.state} />
+                return (
+                  <div
+                    key={request.id}
+                    className="p-4 rounded-lg border border-slate-200 space-y-4"
+                  >
+                    <div className="flex flex-col lg:flex-row justify-between lg:items-start gap-4">
+                      <div className="flex-1 space-y-3">
+                        <div className="flex items-center flex-wrap gap-x-3 gap-y-2">
+                          <h3 className="font-semibold text-lg text-slate-800">
+                            {request.user.name} {request.user.surname}
+                          </h3>
+                          <StatusBadge status={request.state} />
+                        </div>
+                        <div className="flex flex-col sm:flex-row sm:flex-wrap text-sm text-slate-600 gap-x-4 gap-y-1 pl-1">
+                          <span className="flex items-center gap-2">
+                            <Mail className="w-4 h-4 flex-shrink-0" />
+                            {request.user.mail}
+                          </span>
+                          <span className="flex items-center gap-2">
+                            <GraduationCap className="w-4 h-4 flex-shrink-0" />
+                            {request.expertise}
+                          </span>
+                          <span className="flex items-center gap-2">
+                            <Clock className="w-4 h-4 flex-shrink-0" />
+                            {formattedDate}
+                          </span>
+                        </div>
                       </div>
-                      <div className="flex flex-col sm:flex-row sm:flex-wrap text-sm text-slate-600 gap-x-4 gap-y-1 pl-1">
-                        <span className="flex items-center gap-2">
-                          <Mail className="w-4 h-4 flex-shrink-0" />
-                          {request.user.mail}
-                        </span>
-                        <span className="flex items-center gap-2">
-                          <GraduationCap className="w-4 h-4 flex-shrink-0" />
-                          {request.expertise}
-                        </span>
-                        <span className="flex items-center gap-2">
-                          <Clock className="w-4 h-4 flex-shrink-0" />
-                          {formattedDate}
-                        </span>
+                      <div className="flex flex-col lg:flex-row lg:items-start gap-2 w-full lg:w-auto">
+                        <Button
+                          variant="outline"
+                          size="md"
+                          onClick={() => setSelectedRequest(request)}
+                          disabled={isProcessing}
+                        >
+                          <FileText className="w-4 h-4 mr-2" />
+                          Detalles
+                        </Button>
+                        {request.state === 'pending' &&
+                          (isProcessing ? (
+                            <div className="flex items-center justify-center gap-2 w-full lg:w-auto py-2">
+                              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                              <span className="text-sm text-slate-600">
+                                Procesando...
+                              </span>
+                            </div>
+                          ) : (
+                            <div className="flex gap-2 w-full">
+                              <Button
+                                size="md"
+                                className="flex-1"
+                                onClick={() =>
+                                  handleStatusChange(request.id, 'accepted')
+                                }
+                              >
+                                <Check className="w-4 h-4 mr-2" />
+                                Aprobar
+                              </Button>
+                              <Button
+                                variant="destructive"
+                                size="md"
+                                className="flex-1"
+                                onClick={() =>
+                                  handleStatusChange(request.id, 'rejected')
+                                }
+                              >
+                                <X className="w-4 h-4 mr-2" />
+                                Rechazar
+                              </Button>
+                            </div>
+                          ))}
                       </div>
                     </div>
-                    <div className="flex flex-col lg:flex-row lg:items-start gap-2 w-full lg:w-auto">
-                      <Button
-                        variant="outline"
-                        size="md"
-                        onClick={() => setSelectedRequest(request)}
-                        disabled={isProcessing}
-                      >
-                        <FileText className="w-4 h-4 mr-2" />
-                        Detalles
-                      </Button>
-                      {request.state === 'pending' &&
-                        (isProcessing ? (
-                          <div className="flex items-center justify-center gap-2 w-full lg:w-auto py-2">
-                            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
-                            <span className="text-sm text-slate-600">
-                              Procesando...
-                            </span>
-                          </div>
-                        ) : (
-                          <div className="flex gap-2 w-full">
-                            <Button
-                              size="md"
-                              className="flex-1"
-                              onClick={() =>
-                                handleStatusChange(request.id, 'accepted')
-                              }
-                            >
-                              <Check className="w-4 h-4 mr-2" />
-                              Aprobar
-                            </Button>
-                            <Button
-                              variant="destructive"
-                              size="md"
-                              className="flex-1"
-                              onClick={() =>
-                                handleStatusChange(request.id, 'rejected')
-                              }
-                            >
-                              <X className="w-4 h-4 mr-2" />
-                              Rechazar
-                            </Button>
-                          </div>
-                        ))}
-                    </div>
                   </div>
-                </div>
-              );
-            })}
-          </div>
-
-          {requests.length === 0 && !isLoading && (
-            <p className="text-center text-slate-500 py-8">
-              No se encontraron solicitudes con los filtros aplicados.
-            </p>
-          )}
-
-          {totalPages > 1 && (
-            <div className="flex items-center justify-between mt-6 pt-4 border-t">
-              <Button
-                variant="outline"
-                size="md"
-                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                disabled={currentPage === 1 || isLoading}
-              >
-                Anterior
-              </Button>
-              <span className="text-sm text-slate-600">
-                Página {currentPage} de {totalPages}
-              </span>
-              <Button
-                variant="outline"
-                size="md"
-                onClick={() =>
-                  setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-                }
-                disabled={currentPage === totalPages || isLoading}
-              >
-                Siguiente
-              </Button>
+                );
+              })}
             </div>
-          )}
-        </CardContent>
-      </Card>
 
-      <Dialog
-        open={!!selectedRequest}
-        onOpenChange={() => setSelectedRequest(null)}
-      >
-        {selectedRequest && (
-          <>
-            <DialogHeader>
-              <DialogTitle>Detalles de la Solicitud</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4 mt-4">
-              <div>
-                <h3 className="text-xl font-semibold">
-                  {selectedRequest.user.name} {selectedRequest.user.surname}
-                </h3>
-                <p className="text-slate-600">{selectedRequest.user.mail}</p>
-              </div>
-              <div>
-                <p className="text-sm font-medium text-slate-700">
-                  Área de Especialización
-                </p>
-                <p>{selectedRequest.expertise}</p>
-              </div>
-              <div>
-                <p className="text-sm font-medium text-slate-700">
-                  Experiencia y Motivación
-                </p>
-                <p className="text-sm leading-relaxed bg-slate-50 p-3 rounded-md break-words whitespace-pre-wrap max-h-60 overflow-y-auto">
-                  {selectedRequest.experienceMotivation}
-                </p>
+            {requests.length === 0 && !isLoading && (
+              <p className="text-center text-slate-500 py-8">
+                No se encontraron solicitudes con los filtros aplicados.
+              </p>
+            )}
+
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between mt-6 pt-4 border-t">
+                <Button
+                  variant="outline"
+                  size="md"
+                  onClick={() =>
+                    setCurrentPage((prev) => Math.max(prev - 1, 1))
+                  }
+                  disabled={currentPage === 1 || isLoading}
+                >
+                  Anterior
+                </Button>
+                <span className="text-sm text-slate-600">
+                  Página {currentPage} de {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="md"
+                  onClick={() =>
+                    setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+                  }
+                  disabled={currentPage === totalPages || isLoading}
+                >
+                  Siguiente
+                </Button>
               </div>
-              {selectedRequest.documentUrl && (
+            )}
+          </CardContent>
+        </Card>
+
+        <Dialog
+          open={!!selectedRequest}
+          onOpenChange={() => setSelectedRequest(null)}
+        >
+          {selectedRequest && (
+            <>
+              <DialogHeader>
+                <DialogTitle>Detalles de la Solicitud</DialogTitle>
+              </DialogHeader>
+              <div className="space-y-4 mt-4">
+                <div>
+                  <h3 className="text-xl font-semibold">
+                    {selectedRequest.user.name} {selectedRequest.user.surname}
+                  </h3>
+                  <p className="text-slate-600">{selectedRequest.user.mail}</p>
+                </div>
                 <div>
-                  <p className="text-sm font-medium text-slate-700 mb-1">
-                    Documento Adjunto
+                  <p className="text-sm font-medium text-slate-700">
+                    Área de Especialización
                   </p>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() =>
-                      setDocumentUrlToShow(selectedRequest.documentUrl!)
-                    }
-                    className="inline-flex items-center text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium p-0"
-                  >
-                    Ver documento en pantalla{' '}
-                    <ExternalLink className="w-3 h-3 ml-1" />
-                  </Button>
+                  <p>{selectedRequest.expertise}</p>
                 </div>
-              )}
-            </div>
-          </>
-        )}
-      </Dialog>
+                <div>
+                  <p className="text-sm font-medium text-slate-700">
+                    Experiencia y Motivación
+                  </p>
+                  <p className="text-sm leading-relaxed bg-slate-50 p-3 rounded-md break-words whitespace-pre-wrap max-h-60 overflow-y-auto">
+                    {selectedRequest.experienceMotivation}
+                  </p>
+                </div>
+                {selectedRequest.documentUrl && (
+                  <div>
+                    <p className="text-sm font-medium text-slate-700 mb-1">
+                      Documento Adjunto
+                    </p>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        setDocumentUrlToShow(selectedRequest.documentUrl!)
+                      }
+                      className="inline-flex items-center text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium p-0"
+                    >
+                      Ver documento en pantalla{' '}
+                      <ExternalLink className="w-3 h-3 ml-1" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </Dialog>
 
-      {documentUrlToShow && (
-        <DocumentViewer
-          url={documentUrlToShow}
-          onClose={() => setDocumentUrlToShow(null)}
-        />
-      )}
+        {documentUrlToShow && (
+          <DocumentViewer
+            url={documentUrlToShow}
+            onClose={() => setDocumentUrlToShow(null)}
+          />
+        )}
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index 59065ac..3ff368d 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -43,7 +43,7 @@ export default function ContactPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     try {
       const response = await contactMutation.mutateAsync(formData);
       setTicketId(response.ticketId);
@@ -57,8 +57,8 @@ export default function ContactPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 py-12">
-      <div className="container mx-auto px-4 sm:px-6 max-w-6xl">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-12">
         <h1 className="text-4xl font-bold text-slate-800 mb-4 text-center">
           Contáctanos
         </h1>
@@ -104,7 +104,11 @@ export default function ContactPage() {
                           Error al Enviar el Mensaje
                         </h4>
                         <p className="text-sm text-red-700">
-                          {(isAxiosError(contactMutation.error) && (contactMutation.error.response?.data as ApiErrorData)?.message) ||
+                          {(isAxiosError(contactMutation.error) &&
+                            (
+                              contactMutation.error.response
+                                ?.data as ApiErrorData
+                            )?.message) ||
                             'Ocurrió un error al enviar tu mensaje. Por favor, intenta nuevamente.'}
                         </p>
                       </div>
diff --git a/src/pages/Course/AssessmentAttemptsPage.tsx b/src/pages/Course/AssessmentAttemptsPage.tsx
index eca9ba9..32566e1 100644
--- a/src/pages/Course/AssessmentAttemptsPage.tsx
+++ b/src/pages/Course/AssessmentAttemptsPage.tsx
@@ -86,10 +86,10 @@ export default function AssessmentAttemptsPage() {
       : undefined;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 pt-16">
       {/* Header */}
       <div className="bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm">
-        <div className="container mx-auto px-6 py-6">
+        <div className="container mx-auto px-6 py-6 max-w-7xl">
           <Button
             variant="outline"
             size="sm"
@@ -108,7 +108,7 @@ export default function AssessmentAttemptsPage() {
         </div>
       </div>
 
-      <div className="container mx-auto px-6 py-8 max-w-6xl">
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
           <Card className="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200">
             <CardContent className="p-6 text-center">
diff --git a/src/pages/Course/AssessmentResultsPage.tsx b/src/pages/Course/AssessmentResultsPage.tsx
index 901f3af..c46f3b9 100644
--- a/src/pages/Course/AssessmentResultsPage.tsx
+++ b/src/pages/Course/AssessmentResultsPage.tsx
@@ -9,11 +9,7 @@ import {
 } from 'lucide-react';
 import Button from '../../components/ui/Button/Button';
 import Badge from '../../components/ui/Badge/Badge';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '../../components/ui/Card/Card';
+import { Card, CardContent, CardHeader } from '../../components/ui/Card/Card';
 import { useAttemptDetails } from '../../hooks/useAssessments';
 import { cn } from '../../lib/utils'; // <-- Importar la utilidad cn
 
@@ -72,14 +68,15 @@ export default function AssessmentResultsPage() {
   const score = attempt.score ?? 0;
   const passed = attempt.passed ?? false;
   const timeSpent = attempt.timeSpent ?? 0;
-  const correctAnswersCount = attempt.answers?.filter(a => a.isCorrect).length ?? 0;
+  const correctAnswersCount =
+    attempt.answers?.filter((a) => a.isCorrect).length ?? 0;
   const totalQuestions = attempt.answers?.length ?? 0;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 pt-16">
       {/* Header */}
       <div className="bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm">
-        <div className="container mx-auto px-6 py-6">
+        <div className="container mx-auto px-6 py-6 max-w-7xl">
           <Button
             variant="outline"
             size="sm"
@@ -99,7 +96,7 @@ export default function AssessmentResultsPage() {
       </div>
 
       {/* Content */}
-      <div className="container mx-auto px-6 py-8 max-w-5xl">
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
         {/* Resultado Principal */}
         <Card
           className={`mb-8 overflow-hidden border-2 ${
@@ -134,21 +131,31 @@ export default function AssessmentResultsPage() {
             </div>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
               <div className="bg-white p-4 rounded-lg shadow">
-                 <p className="text-sm text-slate-600">Tu Calificación</p>
-                 <p className={`text-3xl font-bold ${passed ? 'text-green-700' : 'text-red-700'}`}>{score}%</p>
+                <p className="text-sm text-slate-600">Tu Calificación</p>
+                <p
+                  className={`text-3xl font-bold ${
+                    passed ? 'text-green-700' : 'text-red-700'
+                  }`}
+                >
+                  {score}%
+                </p>
               </div>
               <div className="bg-white p-4 rounded-lg shadow">
-                 <p className="text-sm text-slate-600">Respuestas Correctas</p>
-                 <p className="text-3xl font-bold text-slate-800">{correctAnswersCount} / {totalQuestions}</p>
+                <p className="text-sm text-slate-600">Respuestas Correctas</p>
+                <p className="text-3xl font-bold text-slate-800">
+                  {correctAnswersCount} / {totalQuestions}
+                </p>
               </div>
               <div className="bg-white p-4 rounded-lg shadow">
-                 <p className="text-sm text-slate-600">Tiempo Utilizado</p>
-                 <p className="text-3xl font-bold text-slate-800">{timeSpent} min</p>
+                <p className="text-sm text-slate-600">Tiempo Utilizado</p>
+                <p className="text-3xl font-bold text-slate-800">
+                  {timeSpent} min
+                </p>
               </div>
             </div>
           </CardContent>
         </Card>
-        
+
         {/* --- NUEVA SECCIÓN DE REVISIÓN DE RESPUESTAS --- */}
         <div className="space-y-6">
           <h2 className="text-2xl font-bold text-slate-800">
@@ -170,42 +177,53 @@ export default function AssessmentResultsPage() {
                 })}
               >
                 <CardHeader className="bg-white/80 border-b">
-                   <p className="text-sm font-semibold text-slate-800">Pregunta {index + 1}: <span className="font-normal">{question.text}</span></p>
+                  <p className="text-sm font-semibold text-slate-800">
+                    Pregunta {index + 1}:{' '}
+                    <span className="font-normal">{question.text}</span>
+                  </p>
                 </CardHeader>
 
                 <CardContent className="p-6">
                   {question.type === 'multiple_choice' && (
                     <div className="space-y-3">
-                      {question.options?.map(
-                        (option, optIndex) => {
-                          const isSelectedByStudent = answer.answer === optIndex;
-                          const isCorrectOption = question.payload.correctAnswer === optIndex;
+                      {question.options?.map((option, optIndex) => {
+                        const isSelectedByStudent = answer.answer === optIndex;
+                        const isCorrectOption =
+                          question.payload.correctAnswer === optIndex;
 
-                          return (
-                            <div
-                              key={option.id}
-                              className={cn(
-                                'p-3 rounded-lg border-2 flex items-center gap-3',
-                                {
-                                  'border-green-500 bg-green-100': isCorrectOption, // Resaltar siempre la correcta
-                                  'border-red-500 bg-red-100': isSelectedByStudent && !isCorrectOption, // Resaltar la incorrecta del usuario
-                                  'border-slate-200 bg-white': !isCorrectOption && !isSelectedByStudent,
-                                }
-                              )}
-                            >
-                              {isCorrectOption ? (
-                                <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
-                              ) : isSelectedByStudent ? (
-                                <XCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
-                              ) : (
-                                <div className="w-5 h-5 flex-shrink-0" /> // Espaciador
-                              )}
-                              <span className="text-slate-800 flex-1">{option.text}</span>
-                              {isSelectedByStudent && <Badge className="bg-blue-100 text-blue-700">Tu respuesta</Badge>}
-                            </div>
-                          );
-                        }
-                      )}
+                        return (
+                          <div
+                            key={option.id}
+                            className={cn(
+                              'p-3 rounded-lg border-2 flex items-center gap-3',
+                              {
+                                'border-green-500 bg-green-100':
+                                  isCorrectOption, // Resaltar siempre la correcta
+                                'border-red-500 bg-red-100':
+                                  isSelectedByStudent && !isCorrectOption, // Resaltar la incorrecta del usuario
+                                'border-slate-200 bg-white':
+                                  !isCorrectOption && !isSelectedByStudent,
+                              }
+                            )}
+                          >
+                            {isCorrectOption ? (
+                              <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
+                            ) : isSelectedByStudent ? (
+                              <XCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
+                            ) : (
+                              <div className="w-5 h-5 flex-shrink-0" /> // Espaciador
+                            )}
+                            <span className="text-slate-800 flex-1">
+                              {option.text}
+                            </span>
+                            {isSelectedByStudent && (
+                              <Badge className="bg-blue-100 text-blue-700">
+                                Tu respuesta
+                              </Badge>
+                            )}
+                          </div>
+                        );
+                      })}
                     </div>
                   )}
                   {/* Aquí se podría añadir la lógica para preguntas abiertas si las tuvieras */}
@@ -215,27 +233,35 @@ export default function AssessmentResultsPage() {
           })}
         </div>
         {/* --- FIN DE LA NUEVA SECCIÓN --- */}
-        
+
         {/* Botones Finales */}
         <div className="mt-8 flex justify-center gap-3">
+          <Button
+            variant="outline"
+            onClick={() =>
+              navigate(
+                `/courses/${courseId}/assessments/${assessmentId}/attempts`
+              )
+            }
+          >
+            <List className="w-4 h-4 mr-2" />
+            Ver Todos los Intentos
+          </Button>
+          {!passed && (
             <Button
-              variant="outline"
-              onClick={() => navigate(`/courses/${courseId}/assessments/${assessmentId}/attempts`)}
+              onClick={() =>
+                navigate(
+                  `/courses/${courseId}/assessments/${assessmentId}/take`
+                )
+              }
+              className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800"
             >
-              <List className="w-4 h-4 mr-2" />
-              Ver Todos los Intentos
+              <RotateCcw className="w-4 h-4 mr-2" />
+              Reintentar
             </Button>
-            {!passed && (
-              <Button
-                onClick={() => navigate(`/courses/${courseId}/assessments/${assessmentId}/take`)}
-                className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800"
-              >
-                <RotateCcw className="w-4 h-4 mr-2" />
-                Reintentar
-              </Button>
-            )}
+          )}
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Course/CourseAssessmentsPage.tsx b/src/pages/Course/CourseAssessmentsPage.tsx
index a8e9930..6fcbb55 100644
--- a/src/pages/Course/CourseAssessmentsPage.tsx
+++ b/src/pages/Course/CourseAssessmentsPage.tsx
@@ -71,12 +71,17 @@ export default function CourseAssessmentsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 pt-16">
       <div className="bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm">
-        <div className="container mx-auto px-4 sm:px-6 py-6">
+        <div className="container mx-auto px-4 sm:px-6 py-6 max-w-7xl">
           <div className="flex items-center justify-between">
             <div>
-              <Button variant="outline" size="sm" onClick={() => navigate(`/courses/learn/${courseId}`)} className="mb-3">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => navigate(`/courses/learn/${courseId}`)}
+                className="mb-3"
+              >
                 <ArrowLeft className="w-4 h-4 mr-2" />
                 Volver al Curso
               </Button>
@@ -84,15 +89,17 @@ export default function CourseAssessmentsPage() {
                 <FileText className="w-6 h-6 sm:w-8 sm:h-8 mr-3 text-purple-600" />
                 Evaluaciones del Curso
               </h1>
-              <p className="text-slate-600 mt-1">Completa las evaluaciones para demostrar tu conocimiento</p>
+              <p className="text-slate-600 mt-1">
+                Completa las evaluaciones para demostrar tu conocimiento
+              </p>
             </div>
           </div>
         </div>
       </div>
 
-      <div className="container mx-auto px-4 sm:px-6 py-8">
+      <div className="container mx-auto px-4 sm:px-6 py-8 max-w-7xl">
         {assessments && assessments.length > 0 ? (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {assessments.map((assessment) => (
               <AssessmentCard
                 key={assessment.id}
@@ -332,4 +339,4 @@ function AssessmentCard({
       </CardContent>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Course/CourseDetails.tsx b/src/pages/Course/CourseDetails.tsx
index e10b9b6..b142ba1 100644
--- a/src/pages/Course/CourseDetails.tsx
+++ b/src/pages/Course/CourseDetails.tsx
@@ -148,8 +148,8 @@ function CourseDetails() {
 
   console.log(course);
   return (
-    <div>
-      <div className="container mx-auto max-w-7xl">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
         <div className="flex items-center space-x-2 text-sm text-slate-600 mb-6">
           <Link to="/courses" className="hover:text-blue-600">
             Cursos
@@ -220,7 +220,8 @@ function CourseDetails() {
                   </Link>
                 </div>
 
-                {(course.institution?.name || course.professor?.institution?.name) && (
+                {(course.institution?.name ||
+                  course.professor?.institution?.name) && (
                   <>
                     <div className="h-10 w-px bg-slate-300" />
                     <div className="flex items-center space-x-3">
@@ -229,20 +230,24 @@ function CourseDetails() {
                       </div>
                       <div>
                         <p className="text-sm text-slate-600">Institución</p>
-                        {(course.institution?.id || course.institution?.institutionId || course.professor?.institution?.id) ? (
+                        {course.institution?.id ||
+                        course.institution?.institutionId ||
+                        course.professor?.institution?.id ? (
                           <Link
                             to={`/courses?institutionId=${
-                              course.institution?.id || 
-                              course.institution?.institutionId || 
+                              course.institution?.id ||
+                              course.institution?.institutionId ||
                               course.professor?.institution?.id
                             }`}
                             className="font-semibold text-slate-800 hover:text-blue-600 transition-colors"
                           >
-                            {course.institution?.name || course.professor?.institution?.name}
+                            {course.institution?.name ||
+                              course.professor?.institution?.name}
                           </Link>
                         ) : (
                           <span className="font-semibold text-slate-800">
-                            {course.institution?.name || course.professor?.institution?.name}
+                            {course.institution?.name ||
+                              course.professor?.institution?.name}
                           </span>
                         )}
                       </div>
diff --git a/src/pages/Course/CourseLearn.tsx b/src/pages/Course/CourseLearn.tsx
index eda8ef7..c2be702 100644
--- a/src/pages/Course/CourseLearn.tsx
+++ b/src/pages/Course/CourseLearn.tsx
@@ -119,9 +119,9 @@ export default function CourseLearn() {
   const instructorName = getProfessorName(course?.professor);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 pt-16">
       <div className="bg-white/95 backdrop-blur-sm border-b border-slate-200 sticky top-0 z-10 shadow-sm">
-        <div className="container mx-auto px-3 sm:px-4 md:px-6 py-3 md:py-4">
+        <div className="container mx-auto px-3 sm:px-4 md:px-6 py-3 md:py-4 max-w-7xl">
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
             <div className="flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto">
               <Button
@@ -169,7 +169,7 @@ export default function CourseLearn() {
 
       {course.status === 'en-desarrollo' && (
         <div className="bg-amber-50 border-l-4 border-amber-400 p-4 my-4 sm:p-5">
-          <div className="container mx-auto px-3 sm:px-4 md:px-6">
+          <div className="container mx-auto px-3 sm:px-4 md:px-6 max-w-7xl">
             <div className="flex items-start gap-3 sm:gap-4">
               <AlertCircle className="w-5 h-5 sm:w-6 sm:h-6 text-amber-600 flex-shrink-0 mt-0.5" />
               <div className="flex-1 min-w-0">
@@ -177,7 +177,8 @@ export default function CourseLearn() {
                   Curso en Desarrollo
                 </h3>
                 <p className="text-xs sm:text-sm text-amber-800">
-                  Este curso fue marcado como en desarrollo por el profesor, ten en cuenta que la información es susceptible a cambios.
+                  Este curso fue marcado como en desarrollo por el profesor, ten
+                  en cuenta que la información es susceptible a cambios.
                 </p>
               </div>
             </div>
diff --git a/src/pages/Course/CourseListPage.tsx b/src/pages/Course/CourseListPage.tsx
index 7348bc2..a1c0b0f 100644
--- a/src/pages/Course/CourseListPage.tsx
+++ b/src/pages/Course/CourseListPage.tsx
@@ -89,194 +89,200 @@ const CourseListPage = () => {
   };
 
   return (
-    <div className="container mx-auto max-w-7xl">
-      <div className="mb-8 text-center sm:text-left">
-        <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
-          Explorar Cursos
-        </h1>
-        <p className="text-lg text-slate-600">
-          Encuentra el curso perfecto para ti entre {totalCourses} opciones.
-        </p>
-      </div>
-
-      <div className="flex justify-end mb-4">
-        <div className="hidden md:inline-flex bg-white/80 backdrop-blur-sm rounded-lg shadow-md p-1">
-          <Button
-            variant={!isGridView ? 'primary' : 'ghost'}
-            size="sm"
-            onClick={() => setIsGridView(false)}
-            className="rounded-lg"
-            aria-label="Vista de lista"
-          >
-            <List className="h-4 w-4" />
-          </Button>
-          <Button
-            variant={isGridView ? 'primary' : 'ghost'}
-            size="sm"
-            onClick={() => setIsGridView(true)}
-            className="rounded-lg"
-            aria-label="Vista de grilla"
-          >
-            <LayoutGrid className="h-4 w-4" />
-          </Button>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        <div className="mb-8 text-center sm:text-left">
+          <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
+            Explorar Cursos
+          </h1>
+          <p className="text-lg text-slate-600">
+            Encuentra el curso perfecto para ti entre {totalCourses} opciones.
+          </p>
         </div>
-      </div>
 
-      <div className="mb-8 p-4 bg-white/80 backdrop-blur-sm rounded-lg shadow-md space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <Input
-            id="search-q"
-            label="Buscar"
-            icon={<Search size={16} />}
-            placeholder="Nombre, instructor, institución..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <Select
-            id="course-type-filter"
-            label="Categoría"
-            value={filters.courseTypeId || ''}
-            onChange={(e) => handleFilterChange('courseTypeId', e.target.value)}
-            disabled={isLoadingTypes}
-          >
-            <option value="">Todas las categorías</option>
-            {courseTypes?.map((ct) => (
-              <option key={ct.id} value={ct.id}>
-                {ct.name}
-              </option>
-            ))}
-          </Select>
-          <Select
-            id="institution-filter"
-            label="Institución"
-            value={filters.institutionId || ''}
-            onChange={(e) =>
-              handleFilterChange('institutionId', e.target.value)
-            }
-            disabled={isLoadingInstitutions}
-          >
-            <option value="">Todas las instituciones</option>
-            {institutions?.map((inst) => (
-              <option 
-                key={inst.institutionId || inst.id} 
-                value={inst.institutionId || inst.id}
-              >
-                {inst.name}
-              </option>
-            ))}
-          </Select>
+        <div className="flex justify-end mb-4">
+          <div className="hidden md:inline-flex bg-white/80 backdrop-blur-sm rounded-lg shadow-md p-1">
+            <Button
+              variant={!isGridView ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => setIsGridView(false)}
+              className="rounded-lg"
+              aria-label="Vista de lista"
+            >
+              <List className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={isGridView ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => setIsGridView(true)}
+              className="rounded-lg"
+              aria-label="Vista de grilla"
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
-          <Select
-            id="sort-by-filter"
-            label="Ordenar por"
-            value={`${filters.sortBy}-${filters.sortOrder}`}
-            onChange={(e) => {
-              // Update both sortBy and sortOrder
-              const [sortBy, sortOrder] = e.target.value.split('-');
 
-              setSearchParams(
-                (prev) => {
-                  prev.set('sortBy', sortBy);
-                  prev.set('sortOrder', sortOrder);
-                  return prev;
-                },
-                { replace: true }
-              );
-            }}
-          >
-            <option value="createdAt-DESC">Más nuevos</option>
-            <option value="name-ASC">Nombre (A-Z)</option>
-            <option value="priceInCents-ASC">Precio (Menor a mayor)</option>
-            <option value="priceInCents-DESC">Precio (Mayor a menor)</option>
-          </Select>
+        <div className="mb-8 p-4 bg-white/80 backdrop-blur-sm rounded-lg shadow-md space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Input
+              id="search-q"
+              label="Buscar"
+              icon={<Search size={16} />}
+              placeholder="Nombre, instructor, institución..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Select
+              id="course-type-filter"
+              label="Categoría"
+              value={filters.courseTypeId || ''}
+              onChange={(e) =>
+                handleFilterChange('courseTypeId', e.target.value)
+              }
+              disabled={isLoadingTypes}
+            >
+              <option value="">Todas las categorías</option>
+              {courseTypes?.map((ct) => (
+                <option key={ct.id} value={ct.id}>
+                  {ct.name}
+                </option>
+              ))}
+            </Select>
+            <Select
+              id="institution-filter"
+              label="Institución"
+              value={filters.institutionId || ''}
+              onChange={(e) =>
+                handleFilterChange('institutionId', e.target.value)
+              }
+              disabled={isLoadingInstitutions}
+            >
+              <option value="">Todas las instituciones</option>
+              {institutions?.map((inst) => (
+                <option
+                  key={inst.institutionId || inst.id}
+                  value={inst.institutionId || inst.id}
+                >
+                  {inst.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
+            <Select
+              id="sort-by-filter"
+              label="Ordenar por"
+              value={`${filters.sortBy}-${filters.sortOrder}`}
+              onChange={(e) => {
+                // Update both sortBy and sortOrder
+                const [sortBy, sortOrder] = e.target.value.split('-');
 
-          <Select
-            id="proffesor-filter"
-            label="Profesores"
-            value={filters.professorId || ''}
-            onChange={(e) => handleFilterChange('professorId', e.target.value)}
-            disabled={isLoadingProfessor}
-          >
-            <option value="">Todos los profesores</option>
-            {professors.map((professor) => (
-              <option key={professor.id} value={professor.id}>
-                {getProfessorName(professor)}
-              </option>
-            ))}
-          </Select>
+                setSearchParams(
+                  (prev) => {
+                    prev.set('sortBy', sortBy);
+                    prev.set('sortOrder', sortOrder);
+                    return prev;
+                  },
+                  { replace: true }
+                );
+              }}
+            >
+              <option value="createdAt-DESC">Más nuevos</option>
+              <option value="name-ASC">Nombre (A-Z)</option>
+              <option value="priceInCents-ASC">Precio (Menor a mayor)</option>
+              <option value="priceInCents-DESC">Precio (Mayor a menor)</option>
+            </Select>
 
-          <div className="flex items-center h-full pb-2">
-            <div className="flex items-center gap-3">
-              <Switch
-                id="is-free-filter"
-                checked={filters.isFree === true}
-                onChange={(e) =>
-                  handleFilterChange(
-                    'isFree',
-                    e.target.checked ? true : undefined
-                  )
-                }
-              />
-              <Label htmlFor="is-free-filter">Solo cursos gratuitos</Label>
+            <Select
+              id="proffesor-filter"
+              label="Profesores"
+              value={filters.professorId || ''}
+              onChange={(e) =>
+                handleFilterChange('professorId', e.target.value)
+              }
+              disabled={isLoadingProfessor}
+            >
+              <option value="">Todos los profesores</option>
+              {professors.map((professor) => (
+                <option key={professor.id} value={professor.id}>
+                  {getProfessorName(professor)}
+                </option>
+              ))}
+            </Select>
+
+            <div className="flex items-center h-full pb-2">
+              <div className="flex items-center gap-3">
+                <Switch
+                  id="is-free-filter"
+                  checked={filters.isFree === true}
+                  onChange={(e) =>
+                    handleFilterChange(
+                      'isFree',
+                      e.target.checked ? true : undefined
+                    )
+                  }
+                />
+                <Label htmlFor="is-free-filter">Solo cursos gratuitos</Label>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {isLoading ? (
-        <p className="text-center text-slate-600 py-10">Cargando cursos...</p>
-      ) : isError ? (
-        <p className="text-center text-red-600 py-10">
-          Error: {error?.message}
-        </p>
-      ) : (
-        <>
-          <div
-            className={
-              isGridView
-                ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
-                : 'space-y-4'
-            }
-          >
-            {courses.length > 0 ? (
-              courses.map((course) =>
-                isGridView ? (
-                  <CoursePreviewCard
-                    key={course.id}
-                    course={course}
-                    onViewMore={() => navigate(`/courses/${course.id}`)}
-                  />
-                ) : (
-                  <CardList
-                    key={course.id}
-                    course={course}
-                    onViewMore={() => navigate(`/courses/${course.id}`)}
-                  />
+        {isLoading ? (
+          <p className="text-center text-slate-600 py-10">Cargando cursos...</p>
+        ) : isError ? (
+          <p className="text-center text-red-600 py-10">
+            Error: {error?.message}
+          </p>
+        ) : (
+          <>
+            <div
+              className={
+                isGridView
+                  ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
+                  : 'space-y-4'
+              }
+            >
+              {courses.length > 0 ? (
+                courses.map((course) =>
+                  isGridView ? (
+                    <CoursePreviewCard
+                      key={course.id}
+                      course={course}
+                      onViewMore={() => navigate(`/courses/${course.id}`)}
+                    />
+                  ) : (
+                    <CardList
+                      key={course.id}
+                      course={course}
+                      onViewMore={() => navigate(`/courses/${course.id}`)}
+                    />
+                  )
                 )
-              )
-            ) : (
-              <div className="col-span-full text-center text-slate-600 text-lg py-10">
-                <p>No se encontraron cursos con los filtros aplicados.</p>
-              </div>
-            )}
-          </div>
+              ) : (
+                <div className="col-span-full text-center text-slate-600 text-lg py-10">
+                  <p>No se encontraron cursos con los filtros aplicados.</p>
+                </div>
+              )}
+            </div>
 
-          <div className="mt-8 text-center">
-            {hasNextPage && (
-              <Button
-                onClick={() => fetchNextPage()}
-                isLoading={isFetchingNextPage}
-                disabled={!hasNextPage || isFetchingNextPage}
-                variant="outline"
-                size="lg"
-              >
-                {isFetchingNextPage ? 'Cargando más...' : 'Cargar más cursos'}
-              </Button>
-            )}
-          </div>
-        </>
-      )}
+            <div className="mt-8 text-center">
+              {hasNextPage && (
+                <Button
+                  onClick={() => fetchNextPage()}
+                  isLoading={isFetchingNextPage}
+                  disabled={!hasNextPage || isFetchingNextPage}
+                  variant="outline"
+                  size="lg"
+                >
+                  {isFetchingNextPage ? 'Cargando más...' : 'Cargar más cursos'}
+                </Button>
+              )}
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/pages/Course/TakeAssessmentPage.tsx b/src/pages/Course/TakeAssessmentPage.tsx
index 112b408..4eb2544 100644
--- a/src/pages/Course/TakeAssessmentPage.tsx
+++ b/src/pages/Course/TakeAssessmentPage.tsx
@@ -42,57 +42,63 @@ export default function TakeAssessmentPage() {
   const saveAnswersMutation = useSaveAnswers();
   const submitAttemptMutation = useSubmitAttempt();
 
-  const handleSubmit = useCallback(async (forceSubmit = false) => {
-    if (!attemptId) return;
+  const handleSubmit = useCallback(
+    async (forceSubmit = false) => {
+      if (!attemptId) return;
 
-    if (!forceSubmit && Object.keys(answers).length === 0) {
-      alert('Debes responder al menos una pregunta para enviar la evaluación.');
-      return;
-    }
-
-    const answersArray = Object.entries(answers).map(
-      ([questionId, answer]) => ({
-        questionId,
-        answer,
-      })
-    );
-    
-    try {
-      if (answersArray.length > 0) {
-        await submitAttemptMutation.mutateAsync({
-          attemptId,
-          submitData: { attemptId, answers: answersArray },
-        });
-        
-        navigate(
-          `/courses/${courseId}/assessments/${assessmentId}/results/${attemptId}`
+      if (!forceSubmit && Object.keys(answers).length === 0) {
+        alert(
+          'Debes responder al menos una pregunta para enviar la evaluación.'
         );
-      } else if (forceSubmit) {
-        toast.error("El tiempo se agotó y no hubo respuestas registradas.");
-        navigate(`/courses/${courseId}/assessments`);
+        return;
       }
 
-    } catch (error) {
-      console.error('Error submitting attempt:', error);
-      if (forceSubmit) {
-         navigate(`/courses/${courseId}/assessments`);
-      } else {
-         toast.error('Hubo un error al enviar la evaluación.');
+      const answersArray = Object.entries(answers).map(
+        ([questionId, answer]) => ({
+          questionId,
+          answer,
+        })
+      );
+
+      try {
+        if (answersArray.length > 0) {
+          await submitAttemptMutation.mutateAsync({
+            attemptId,
+            submitData: { attemptId, answers: answersArray },
+          });
+
+          navigate(
+            `/courses/${courseId}/assessments/${assessmentId}/results/${attemptId}`
+          );
+        } else if (forceSubmit) {
+          toast.error('El tiempo se agotó y no hubo respuestas registradas.');
+          navigate(`/courses/${courseId}/assessments`);
+        }
+      } catch (error) {
+        console.error('Error submitting attempt:', error);
+        if (forceSubmit) {
+          navigate(`/courses/${courseId}/assessments`);
+        } else {
+          toast.error('Hubo un error al enviar la evaluación.');
+        }
       }
-    }
-  }, [
-    attemptId,
-    answers,
-    submitAttemptMutation,
-    navigate,
-    courseId,
-    assessmentId,
-  ]);
+    },
+    [
+      attemptId,
+      answers,
+      submitAttemptMutation,
+      navigate,
+      courseId,
+      assessmentId,
+    ]
+  );
 
   const handleStartAttempt = async () => {
     const studentId = user?.studentProfile?.id;
     if (!studentId || !assessmentId) {
-      toast.error('No se pudo iniciar el intento: falta información del estudiante o de la evaluación.');
+      toast.error(
+        'No se pudo iniciar el intento: falta información del estudiante o de la evaluación.'
+      );
       return;
     }
 
@@ -120,24 +126,29 @@ export default function TakeAssessmentPage() {
       }
     } catch (error) {
       console.error('Error starting attempt:', error);
-      
+
       if (isAxiosError(error)) {
         const errorMsg = error.response?.data?.errors;
-        
-        if (typeof errorMsg === 'string' && 
-           (errorMsg.includes('no longer available') || errorMsg.includes('not yet available'))) {
-          
-          toast.error('El tiempo para realizar esta evaluación ha finalizado.', {
-            duration: 5000,
-          });
-          
+
+        if (
+          typeof errorMsg === 'string' &&
+          (errorMsg.includes('no longer available') ||
+            errorMsg.includes('not yet available'))
+        ) {
+          toast.error(
+            'El tiempo para realizar esta evaluación ha finalizado.',
+            {
+              duration: 5000,
+            }
+          );
+
           navigate(`/courses/${courseId}/assessments`);
           return;
         }
-        
+
         if (typeof errorMsg === 'string') {
-             toast.error(errorMsg);
-             return;
+          toast.error(errorMsg);
+          return;
         }
       }
 
@@ -169,8 +180,8 @@ export default function TakeAssessmentPage() {
       const timer = setInterval(() => {
         setTimeLeft((prev) => {
           if (prev !== null && prev <= 1) {
-             clearInterval(timer);
-             return 0;
+            clearInterval(timer);
+            return 0;
           }
           return prev !== null ? prev - 1 : null;
         });
@@ -183,7 +194,12 @@ export default function TakeAssessmentPage() {
   }, [timeLeft, handleSubmit]);
 
   useEffect(() => {
-    if (hasStarted && attemptId && Object.keys(answers).length > 0 && !hasAutoSubmittedRef.current) {
+    if (
+      hasStarted &&
+      attemptId &&
+      Object.keys(answers).length > 0 &&
+      !hasAutoSubmittedRef.current
+    ) {
       const autoSave = setInterval(() => {
         const answersArray = Object.entries(answers).map(
           ([questionId, answer]) => ({
@@ -208,7 +224,7 @@ export default function TakeAssessmentPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 pt-16">
         <div className="text-center">
           <div className="animate-spin rounded-full h-16 w-16 border-b-4 border-purple-600 mx-auto mb-4"></div>
           <p className="text-slate-700 font-medium">Cargando evaluación...</p>
@@ -219,7 +235,7 @@ export default function TakeAssessmentPage() {
 
   if (!assessment) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 p-6">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 p-6 pt-16">
         <Card className="max-w-md w-full">
           <CardContent className="text-center py-12">
             <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
@@ -242,7 +258,7 @@ export default function TakeAssessmentPage() {
 
   if (!hasStarted) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 flex items-center justify-center p-4 sm:p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 flex items-center justify-center p-4 sm:p-6 pt-20 sm:pt-24">
         <Card className="max-w-2xl w-full">
           <CardHeader>
             <CardTitle className="text-2xl">{assessment.title}</CardTitle>
@@ -328,9 +344,9 @@ export default function TakeAssessmentPage() {
   const totalQuestions = attemptQuestions.length || assessment.questionsCount;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 pt-16">
       <div className="sticky top-0 z-10 bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm">
-        <div className="container mx-auto px-4 sm:px-6 py-4">
+        <div className="container mx-auto px-4 sm:px-6 py-4 max-w-7xl">
           <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
             <div className="w-full sm:w-auto">
               <h1 className="text-lg sm:text-xl font-bold text-slate-800 truncate">
@@ -355,7 +371,9 @@ export default function TakeAssessmentPage() {
               )}
               <Button
                 onClick={() => handleSubmit(false)} // Envío manual (no forzado)
-                disabled={submitAttemptMutation.isPending || hasAutoSubmittedRef.current}
+                disabled={
+                  submitAttemptMutation.isPending || hasAutoSubmittedRef.current
+                }
                 size="sm"
                 className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 flex-1 sm:flex-initial"
               >
@@ -367,7 +385,7 @@ export default function TakeAssessmentPage() {
         </div>
       </div>
 
-      <div className="container mx-auto px-4 sm:px-6 py-8 max-w-4xl">
+      <div className="container mx-auto px-4 sm:px-6 py-8 max-w-7xl">
         <div className="space-y-6">
           {attemptQuestions.map((question, index) => {
             if (!question.id) return null;
@@ -435,7 +453,9 @@ export default function TakeAssessmentPage() {
         <div className="mt-8 flex justify-center">
           <Button
             onClick={() => handleSubmit(false)}
-            disabled={submitAttemptMutation.isPending || hasAutoSubmittedRef.current}
+            disabled={
+              submitAttemptMutation.isPending || hasAutoSubmittedRef.current
+            }
             size="lg"
             className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 px-8"
           >
@@ -448,4 +468,4 @@ export default function TakeAssessmentPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/FAQPage.tsx b/src/pages/FAQPage.tsx
index 5b7bb66..cde3ad8 100644
--- a/src/pages/FAQPage.tsx
+++ b/src/pages/FAQPage.tsx
@@ -5,28 +5,34 @@ import { Card, CardContent } from '../components/ui/Card/Card';
 const faqs = [
   {
     question: '¿Cómo me registro en la plataforma?',
-    answer: 'Puedes registrarte haciendo clic en el botón "Registrarse" en la esquina superior derecha. Completa el formulario con tus datos y elige si deseas registrarte como estudiante o profesor.',
+    answer:
+      'Puedes registrarte haciendo clic en el botón "Registrarse" en la esquina superior derecha. Completa el formulario con tus datos y elige si deseas registrarte como estudiante o profesor.',
   },
   {
     question: '¿Los cursos son gratuitos?',
-    answer: 'Ofrecemos tanto cursos gratuitos como de pago. Puedes filtrar por tipo de curso en nuestra página de cursos disponibles.',
+    answer:
+      'Ofrecemos tanto cursos gratuitos como de pago. Puedes filtrar por tipo de curso en nuestra página de cursos disponibles.',
   },
   {
     question: '¿Cómo me inscribo en un curso?',
-    answer: 'Una vez que encuentres un curso de tu interés, haz clic en él para ver los detalles. Si es gratuito, puedes inscribirte directamente. Si es de pago, deberás completar el proceso de pago.',
+    answer:
+      'Una vez que encuentres un curso de tu interés, haz clic en él para ver los detalles. Si es gratuito, puedes inscribirte directamente. Si es de pago, deberás completar el proceso de pago.',
   },
   {
     question: '¿Cómo me convierto en profesor?',
-    answer: 'Debes registrarte como usuario y luego enviar una solicitud para convertirte en profesor desde tu perfil. Nuestro equipo revisará tu solicitud.',
+    answer:
+      'Debes registrarte como usuario y luego enviar una solicitud para convertirte en profesor desde tu perfil. Nuestro equipo revisará tu solicitud.',
   },
   {
     question: '¿Puedo retomar un curso donde lo dejé?',
-    answer: 'Sí, tu progreso se guarda automáticamente. Puedes retomar cualquier curso desde donde lo dejaste.',
+    answer:
+      'Sí, tu progreso se guarda automáticamente. Puedes retomar cualquier curso desde donde lo dejaste.',
   },
   {
     question: '¿Qué métodos de pago aceptan?',
-    answer: 'Aceptamos pagos con tarjetas de crédito y débito a través de nuestra plataforma segura de pagos.',
-  }
+    answer:
+      'Aceptamos pagos con tarjetas de crédito y débito a través de nuestra plataforma segura de pagos.',
+  },
 ];
 
 export default function FAQPage() {
@@ -37,13 +43,14 @@ export default function FAQPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 py-12">
-      <div className="container mx-auto px-4 sm:px-6 max-w-3xl">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-12">
         <h1 className="text-4xl font-bold text-slate-800 mb-4 text-center">
           Preguntas Frecuentes
         </h1>
         <p className="text-slate-600 text-center mb-8">
-          Encuentra respuestas a las preguntas más comunes sobre nuestra plataforma
+          Encuentra respuestas a las preguntas más comunes sobre nuestra
+          plataforma
         </p>
 
         <div className="space-y-4">
@@ -64,9 +71,7 @@ export default function FAQPage() {
                   )}
                 </button>
                 {openIndex === index && (
-                  <div className="px-6 pb-4 text-slate-600">
-                    {faq.answer}
-                  </div>
+                  <div className="px-6 pb-4 text-slate-600">{faq.answer}</div>
                 )}
               </CardContent>
             </Card>
@@ -74,7 +79,9 @@ export default function FAQPage() {
         </div>
 
         <div className="mt-12 text-center">
-          <p className="text-slate-600 mb-4">¿No encontraste lo que buscabas?</p>
+          <p className="text-slate-600 mb-4">
+            ¿No encontraste lo que buscabas?
+          </p>
           <a
             href="/contact"
             className="inline-block px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
diff --git a/src/pages/Payment/PaymentSuccess.tsx b/src/pages/Payment/PaymentSuccess.tsx
index 45aee27..b5f8ee4 100644
--- a/src/pages/Payment/PaymentSuccess.tsx
+++ b/src/pages/Payment/PaymentSuccess.tsx
@@ -48,7 +48,7 @@ export default function PaymentSuccess() {
   }, [isSuccess, enrollment, courseId, navigate]);
 
   return (
-    <div className="flex items-center justify-center py-24 bg-gradient-to-br from-slate-50 to-slate-100 p-4">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4 pt-24">
       <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full text-center">
         {!isSuccess && (
           <>
diff --git a/src/pages/Professor/ProfessorAppeal.tsx b/src/pages/Professor/ProfessorAppeal.tsx
index 5d6de8b..56a0ffb 100644
--- a/src/pages/Professor/ProfessorAppeal.tsx
+++ b/src/pages/Professor/ProfessorAppeal.tsx
@@ -1,32 +1,41 @@
-import React, { useState, useEffect } from "react"
-import { Link, useNavigate } from "react-router-dom"
-import { useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
-import * as v from 'valibot'
-import Button from "../../components/ui/Button/Button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/Card/Card"
-import Input from "../../components/ui/Input/Input"
-import Textarea from "../../components/ui/TextArea/TextArea"
-import Label from "../../components/ui/Label/Label"
-import { BookOpen, ArrowLeft, GraduationCap, Upload } from "lucide-react"
-import { useCreateAppeal } from '../../hooks/useCreateAppeal'
-import { useMyAppeals } from "../../hooks/useAppeals"
-import { isAxiosError } from 'axios'
-import { toast } from 'react-hot-toast'
-import { useQueryClient } from "@tanstack/react-query"
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+import Button from '../../components/ui/Button/Button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card/Card';
+import Input from '../../components/ui/Input/Input';
+import Textarea from '../../components/ui/TextArea/TextArea';
+import Label from '../../components/ui/Label/Label';
+import { GraduationCap, Upload } from 'lucide-react';
+import { useCreateAppeal } from '../../hooks/useCreateAppeal';
+import { useMyAppeals } from '../../hooks/useAppeals';
+import { isAxiosError } from 'axios';
+import { toast } from 'react-hot-toast';
+import { useQueryClient } from '@tanstack/react-query';
 
 const AppealSchema = v.object({
   expertise: v.pipe(
-  v.string(),
-  v.minLength(1, 'El área de especialización es requerida.')
+    v.string(),
+    v.minLength(1, 'El área de especialización es requerida.')
   ),
   experienceMotivation: v.pipe(
-  v.string(),
-  v.minLength(20, 'Por favor, detalla tu experiencia con al menos 20 caracteres.'),
+    v.string(),
+    v.minLength(
+      20,
+      'Por favor, detalla tu experiencia con al menos 20 caracteres.'
+    )
   ),
-})
+});
 
-type AppealFormData = v.InferInput<typeof AppealSchema>
+type AppealFormData = v.InferInput<typeof AppealSchema>;
 
 export default function ProfessorApplication() {
   const navigate = useNavigate();
@@ -35,115 +44,117 @@ export default function ProfessorApplication() {
 
   useEffect(() => {
     if (!isLoadingAppeals && appeals) {
-      const hasPending = appeals.some(a => a.state === 'pending');
+      const hasPending = appeals.some((a) => a.state === 'pending');
       if (hasPending) {
         navigate('/professor/applications');
       }
     }
   }, [appeals, isLoadingAppeals, navigate]);
 
-  const { register, handleSubmit, formState: { errors }, reset } = useForm<AppealFormData>({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<AppealFormData>({
     resolver: valibotResolver(AppealSchema),
-  })
+  });
 
-  const [documentFile, setDocumentFile] = useState<File | null>(null)
+  const [documentFile, setDocumentFile] = useState<File | null>(null);
 
-  const { mutate: createAppeal, isPending, error: apiError } = useCreateAppeal()
+  const {
+    mutate: createAppeal,
+    isPending,
+    error: apiError,
+  } = useCreateAppeal();
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0] || null
-    setDocumentFile(file)
-  }
+    const file = e.target.files?.[0] || null;
+    setDocumentFile(file);
+  };
 
   const onSubmit = (data: AppealFormData) => {
-    const formData = new FormData()
-    formData.append("expertise", data.expertise)
-    formData.append("experienceMotivation", data.experienceMotivation)
+    const formData = new FormData();
+    formData.append('expertise', data.expertise);
+    formData.append('experienceMotivation', data.experienceMotivation);
     if (documentFile) {
-      formData.append("document", documentFile)
+      formData.append('document', documentFile);
     }
 
     createAppeal(formData, {
       onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: ['appeals', 'me'] });
-        reset()
-        setDocumentFile(null)
-        toast.success("Solicitud enviada correctamente")
+        reset();
+        setDocumentFile(null);
+        toast.success('Solicitud enviada correctamente');
         navigate('/professor/applications');
       },
       onError: (error) => {
         if (isAxiosError(error)) {
-          
           if (error.response?.status === 500) {
-            toast.error("Ya tienes una solicitud pendiente de revisión.");
+            toast.error('Ya tienes una solicitud pendiente de revisión.');
             return;
           }
         }
 
-        toast.error("No se pudo enviar la solicitud. Intenta nuevamente.");
-      }
-    })
-  }
+        toast.error('No se pudo enviar la solicitud. Intenta nuevamente.');
+      },
+    });
+  };
 
   const getApiErrorMessage = () => {
-    if (!apiError) return null
+    if (!apiError) return null;
 
     if (isAxiosError(apiError)) {
-      const serverMessage = apiError.response?.data?.errors
+      const serverMessage = apiError.response?.data?.errors;
 
       if (serverMessage === 'User already has an active appeal.') {
-        return 'Ya tienes una solicitud activa. Por favor, espera a que sea revisada.'
+        return 'Ya tienes una solicitud activa. Por favor, espera a que sea revisada.';
       }
-      return serverMessage || 'Ocurrió un error al conectar con el servidor.'
+      return serverMessage || 'Ocurrió un error al conectar con el servidor.';
     }
-    return 'Ocurrió un error inesperado.'
-  }
+    return 'Ocurrió un error inesperado.';
+  };
 
   if (isLoadingAppeals) {
-    return <div className="flex justify-center items-center h-screen">Cargando...</div>;
+    return (
+      <div className="flex justify-center items-center h-screen">
+        Cargando...
+      </div>
+    );
   }
 
   return (
-    <div className="fixed inset-0 bg-gradient-to-br from-green-50 via-white to-blue-50 overflow-auto">
-      <div className="relative min-h-screen p-4">
-        <div className="absolute top-6 left-6">
-          <Link to="/" className="flex items-center space-x-2 text-slate-700 hover:text-green-600 transition-colors">
-            <ArrowLeft className="w-5 h-5" />
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-green-400 rounded-lg flex items-center justify-center">
-                <BookOpen className="w-5 h-5 text-white" />
-              </div>
-              <span className="text-xl font-bold">UpSkill</span>
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-blue-50">
+      <div className="relative px-4 pt-24 pb-12">
+        <div className="w-full max-w-5xl mx-auto grid lg:grid-cols-2 gap-8 items-center">
+          <div className="hidden lg:block">
+            <div className="relative">
+              <img
+                src="/professor_appeal_image.svg"
+                alt="Imagen de profesor enseñando"
+                className="w-full h-auto rounded-2xl shadow-2xl"
+              />
+              <div className="absolute -bottom-4 -right-4 w-full h-full bg-gradient-to-br from-green-200 to-blue-200 rounded-2xl -z-10"></div>
             </div>
-          </Link>
-        </div>
-
-        <div className="w-full max-w-5xl mx-auto grid lg:grid-cols-2 gap-8 items-center min-h-screen">
-        <div className="hidden lg:block">
-          <div className="relative">
-            <img
-              src="/professor_appeal_image.svg"
-              alt="Imagen de profesor enseñando"
-              className="w-full h-auto rounded-2xl shadow-2xl"
-            />
-            <div className="absolute -bottom-4 -right-4 w-full h-full bg-gradient-to-br from-green-200 to-blue-200 rounded-2xl -z-10"></div>
           </div>
-        </div>
 
-        <Card className="w-full bg-white/90 backdrop-blur-sm border-0 shadow-xl">
-          <CardHeader className="text-center space-y-2">
-            <div className="mx-auto w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mb-2">
-              <GraduationCap className="w-6 h-6 text-white" />
-            </div>
-            <CardTitle className="text-2xl font-bold text-slate-800">Únete como Profesor</CardTitle>
-            <CardDescription className="text-slate-600">
-              Comparte tu conocimiento y ayuda a otros a aprender
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-              <div className="space-y-2">
-                <div className="relative">
+          <Card className="w-full bg-white/90 backdrop-blur-sm border-0 shadow-xl">
+            <CardHeader className="text-center space-y-2">
+              <div className="mx-auto w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mb-2">
+                <GraduationCap className="w-6 h-6 text-white" />
+              </div>
+              <CardTitle className="text-2xl font-bold text-slate-800">
+                Únete como Profesor
+              </CardTitle>
+              <CardDescription className="text-slate-600">
+                Comparte tu conocimiento y ayuda a otros a aprender
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                <div className="space-y-2">
+                  <div className="relative">
                     <Input
                       id="expertise"
                       label="Área de especialización"
@@ -152,11 +163,11 @@ export default function ProfessorApplication() {
                       {...register('expertise')}
                       error={errors.expertise?.message}
                     />
+                  </div>
                 </div>
-              </div>
 
-            <div className="space-y-2">
-                <div className="relative">
+                <div className="space-y-2">
+                  <div className="relative">
                     <Textarea
                       id="experienceMotivation"
                       label="Experiencia y motivación"
@@ -164,65 +175,75 @@ export default function ProfessorApplication() {
                       {...register('experienceMotivation')}
                       error={errors.experienceMotivation?.message}
                     />
+                  </div>
                 </div>
-            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="document" className="text-slate-700">
-                  Documentos (opcional)
-                </Label>
-                <div className="relative">
-                  <div className="flex items-center justify-center w-full">
-                    <label
-                      htmlFor="document"
-                      className="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-200 border-dashed rounded-lg cursor-pointer bg-slate-50 hover:bg-slate-100 hover:border-green-300 transition-colors"
-                    >
-                      <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                        <Upload className="w-8 h-8 mb-2 text-slate-400" />
-                        <p className="mb-2 text-sm text-slate-500">
-                          <span className="font-semibold">Haz clic para subir</span> o arrastra y suelta
-                        </p>
-                        <p className="text-xs text-slate-400">PDF, DOC, DOCX (MAX. 10MB)</p>
-                        {documentFile && (
-                          <p className="text-xs text-green-600 mt-2 font-medium">
-                            Archivo seleccionado: {documentFile.name}
+                <div className="space-y-2">
+                  <Label htmlFor="document" className="text-slate-700">
+                    Documentos (opcional)
+                  </Label>
+                  <div className="relative">
+                    <div className="flex items-center justify-center w-full">
+                      <label
+                        htmlFor="document"
+                        className="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-200 border-dashed rounded-lg cursor-pointer bg-slate-50 hover:bg-slate-100 hover:border-green-300 transition-colors"
+                      >
+                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                          <Upload className="w-8 h-8 mb-2 text-slate-400" />
+                          <p className="mb-2 text-sm text-slate-500">
+                            <span className="font-semibold">
+                              Haz clic para subir
+                            </span>{' '}
+                            o arrastra y suelta
+                          </p>
+                          <p className="text-xs text-slate-400">
+                            PDF, DOC, DOCX (MAX. 10MB)
                           </p>
-                        )}
-                      </div>
-                      <input
-                        id="document"
-                        name="document"
-                        type="file"
-                        className="hidden"
-                        accept=".pdf,.doc,.docx"
-                        onChange={handleFileChange}
-                      />
-                    </label>
+                          {documentFile && (
+                            <p className="text-xs text-green-600 mt-2 font-medium">
+                              Archivo seleccionado: {documentFile.name}
+                            </p>
+                          )}
+                        </div>
+                        <input
+                          id="document"
+                          name="document"
+                          type="file"
+                          className="hidden"
+                          accept=".pdf,.doc,.docx"
+                          onChange={handleFileChange}
+                        />
+                      </label>
+                    </div>
+                    <p className="text-xs text-slate-500 mt-1">
+                      Puedes subir tu CV, certificados o cualquier documento que
+                      consideres relevante
+                    </p>
                   </div>
-                  <p className="text-xs text-slate-500 mt-1">
-                    Puedes subir tu CV, certificados o cualquier documento que consideres relevante
-                  </p>
                 </div>
-              </div>
 
-              <Button type="submit" className="w-full bg-green-500 hover:bg-green-600 text-white py-2.5" disabled={isPending}>
-                  {isPending ? "Enviando..." : "Enviar solicitud"}
+                <Button
+                  type="submit"
+                  className="w-full bg-green-500 hover:bg-green-600 text-white py-2.5"
+                  disabled={isPending}
+                >
+                  {isPending ? 'Enviando...' : 'Enviar solicitud'}
                 </Button>
 
-              {apiError && (
-                <div className="text-center text-sm text-red-600 mt-4">
-                  <p>{getApiErrorMessage()}</p>
-                </div>
-              )}
+                {apiError && (
+                  <div className="text-center text-sm text-red-600 mt-4">
+                    <p>{getApiErrorMessage()}</p>
+                  </div>
+                )}
 
-              <div className="text-center text-sm text-slate-600 mt-4">
-                <p>Revisaremos tu solicitud y te contactaremos.</p>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
+                <div className="text-center text-sm text-slate-600 mt-4">
+                  <p>Revisaremos tu solicitud y te contactaremos.</p>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/pages/Professor/ProfessorAppealStatusPage.tsx b/src/pages/Professor/ProfessorAppealStatusPage.tsx
index 157e64e..8e22222 100644
--- a/src/pages/Professor/ProfessorAppealStatusPage.tsx
+++ b/src/pages/Professor/ProfessorAppealStatusPage.tsx
@@ -4,15 +4,29 @@ import { useMyAppeals } from '../../hooks/useAppeals';
 import { Card } from '../../components/ui/Card/Card';
 import StatusBadge from '../../components/ui/StatusBadge/StatusBadge';
 import Button from '../../components/ui/Button/Button';
-import { Dialog, DialogHeader, DialogTitle } from '../../components/ui/Dialog/Dialog';
+import {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+} from '../../components/ui/Dialog/Dialog';
 import DocumentViewer from '../../components/ui/DocumentViewer/DocumentViewer';
-import { ArrowLeft, Calendar, Eye, GraduationCap, ExternalLink, Info, Plus } from 'lucide-react';
+import {
+  ArrowLeft,
+  Calendar,
+  Eye,
+  GraduationCap,
+  ExternalLink,
+  Info,
+  Plus,
+} from 'lucide-react';
 import type { Appeal } from '../../types/entities';
 
 export default function ProfessorAppealStatusPage() {
   const { data: appeals, isLoading } = useMyAppeals();
   const [selectedAppeal, setSelectedAppeal] = useState<Appeal | null>(null);
-  const [documentUrlToShow, setDocumentUrlToShow] = useState<string | null>(null);
+  const [documentUrlToShow, setDocumentUrlToShow] = useState<string | null>(
+    null
+  );
   const navigate = useNavigate();
 
   if (isLoading) {
@@ -26,15 +40,23 @@ export default function ProfessorAppealStatusPage() {
     );
   }
 
-  const sortedAppeals = appeals?.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) || [];
-  
-  const hasPendingAppeal = appeals?.some((appeal) => appeal.state === 'pending');
+  const sortedAppeals =
+    appeals?.sort(
+      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    ) || [];
+
+  const hasPendingAppeal = appeals?.some(
+    (appeal) => appeal.state === 'pending'
+  );
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 py-12 px-4">
-      <div className="container mx-auto max-w-4xl space-y-6">
+      <div className="container mx-auto max-w-7xl space-y-6">
         <div className="flex items-center justify-between">
-          <Link to="/" className="inline-flex items-center text-slate-600 hover:text-slate-900 transition-colors">
+          <Link
+            to="/"
+            className="inline-flex items-center text-slate-600 hover:text-slate-900 transition-colors"
+          >
             <ArrowLeft className="w-4 h-4 mr-2" />
             Volver al inicio
           </Link>
@@ -46,7 +68,8 @@ export default function ProfessorAppealStatusPage() {
             <div className="text-sm text-blue-800">
               <p className="font-semibold mb-1">Solicitud en curso detectada</p>
               <p>
-                Ya tienes una solicitud pendiente de revisión. Cuando sea procesada, recibirás una notificación.
+                Ya tienes una solicitud pendiente de revisión. Cuando sea
+                procesada, recibirás una notificación.
               </p>
             </div>
           </div>
@@ -54,9 +77,12 @@ export default function ProfessorAppealStatusPage() {
 
         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
           <h1 className="text-2xl font-bold text-slate-800">Mis Solicitudes</h1>
-          
+
           {!hasPendingAppeal && (
-            <Button onClick={() => navigate('/professor/apply')} className="bg-green-600 hover:bg-green-700 text-white">
+            <Button
+              onClick={() => navigate('/professor/apply')}
+              className="bg-green-600 hover:bg-green-700 text-white"
+            >
               <Plus className="w-4 h-4 mr-2" />
               Nueva Solicitud
             </Button>
@@ -65,29 +91,37 @@ export default function ProfessorAppealStatusPage() {
 
         <div className="space-y-4">
           {sortedAppeals.map((appeal) => (
-            <Card key={appeal.id} className="overflow-hidden hover:shadow-md transition-shadow border border-slate-200 bg-white">
+            <Card
+              key={appeal.id}
+              className="overflow-hidden hover:shadow-md transition-shadow border border-slate-200 bg-white"
+            >
               <div className="p-5 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
-                
                 <div className="space-y-2 flex-1 min-w-0">
                   <div className="flex items-center gap-3 flex-wrap">
                     <StatusBadge status={appeal.state} />
                     <span className="text-xs text-slate-500 flex items-center gap-1">
                       <Calendar className="w-3 h-3" />
-                      {new Date(appeal.date).toLocaleDateString('es-ES', { 
-                        year: 'numeric', month: 'long', day: 'numeric' 
+                      {new Date(appeal.date).toLocaleDateString('es-ES', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
                       })}
                     </span>
                   </div>
-                  
+
                   <div>
-                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Especialización</p>
-                    <h4 className="font-semibold text-slate-800 text-lg leading-tight truncate">{appeal.expertise}</h4>
+                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">
+                      Especialización
+                    </p>
+                    <h4 className="font-semibold text-slate-800 text-lg leading-tight truncate">
+                      {appeal.expertise}
+                    </h4>
                   </div>
                 </div>
 
-                <Button 
-                  variant="outline" 
-                  size="sm" 
+                <Button
+                  variant="outline"
+                  size="sm"
                   onClick={() => setSelectedAppeal(appeal)}
                   className="w-full sm:w-auto mt-2 sm:mt-0 flex items-center justify-center gap-2"
                 >
@@ -100,7 +134,10 @@ export default function ProfessorAppealStatusPage() {
         </div>
       </div>
 
-      <Dialog open={!!selectedAppeal} onOpenChange={() => setSelectedAppeal(null)}>
+      <Dialog
+        open={!!selectedAppeal}
+        onOpenChange={() => setSelectedAppeal(null)}
+      >
         {selectedAppeal && (
           <>
             <DialogHeader>
@@ -122,12 +159,18 @@ export default function ProfessorAppealStatusPage() {
 
               <div className="bg-slate-50 p-4 rounded-lg border border-slate-100 space-y-4 text-sm">
                 <div>
-                  <h5 className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Área de Especialización</h5>
-                  <p className="text-slate-900 font-medium break-words">{selectedAppeal.expertise}</p>
+                  <h5 className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-wide">
+                    Área de Especialización
+                  </h5>
+                  <p className="text-slate-900 font-medium break-words">
+                    {selectedAppeal.expertise}
+                  </p>
                 </div>
 
                 <div>
-                  <h5 className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Experiencia y Motivación</h5>
+                  <h5 className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-wide">
+                    Experiencia y Motivación
+                  </h5>
                   <div className="text-slate-700 whitespace-pre-wrap leading-relaxed bg-white p-3 rounded border border-slate-200 break-words max-h-32 overflow-y-auto shadow-inner">
                     {selectedAppeal.experienceMotivation}
                   </div>
@@ -135,10 +178,12 @@ export default function ProfessorAppealStatusPage() {
 
                 {selectedAppeal.documentUrl && (
                   <div className="pt-1">
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      onClick={() => setDocumentUrlToShow(selectedAppeal.documentUrl!)} 
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        setDocumentUrlToShow(selectedAppeal.documentUrl!)
+                      }
                       className="w-full flex items-center justify-center gap-2 text-blue-600 border-blue-200 hover:bg-blue-50 h-8 text-xs"
                     >
                       <ExternalLink className="w-3 h-3" />
@@ -150,7 +195,11 @@ export default function ProfessorAppealStatusPage() {
             </div>
 
             <div className="flex justify-end pt-2 border-t border-slate-100">
-              <Button onClick={() => setSelectedAppeal(null)} size="sm" className="w-full sm:w-auto">
+              <Button
+                onClick={() => setSelectedAppeal(null)}
+                size="sm"
+                className="w-full sm:w-auto"
+              >
                 Cerrar
               </Button>
             </div>
@@ -159,8 +208,11 @@ export default function ProfessorAppealStatusPage() {
       </Dialog>
 
       {documentUrlToShow && (
-        <DocumentViewer url={documentUrlToShow} onClose={() => setDocumentUrlToShow(null)} />
+        <DocumentViewer
+          url={documentUrlToShow}
+          onClose={() => setDocumentUrlToShow(null)}
+        />
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Professor/ProfessorAssessmentAttempts.tsx b/src/pages/Professor/ProfessorAssessmentAttempts.tsx
index be0863f..d356312 100644
--- a/src/pages/Professor/ProfessorAssessmentAttempts.tsx
+++ b/src/pages/Professor/ProfessorAssessmentAttempts.tsx
@@ -45,14 +45,15 @@ export default function ProfessorAssessmentAttemptsPage() {
 
   if (!assessment) {
     return (
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 max-w-7xl">
         <p className="text-center text-gray-600">Evaluación no encontrada</p>
       </div>
     );
   }
   
   return (
-    <div className="container mx-auto px-4 py-8 max-w-7xl">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
       <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-8">
         <Button
           variant="outline"
@@ -210,6 +211,7 @@ export default function ProfessorAssessmentAttemptsPage() {
       {selectedAttemptId && attemptDetails && (
         <AttemptDetailsModal attempt={attemptDetails} onClose={() => setSelectedAttemptId(null)} />
       )}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Professor/ProfessorAssessmentEditor.tsx b/src/pages/Professor/ProfessorAssessmentEditor.tsx
index 91367ca..fbfeb5f 100644
--- a/src/pages/Professor/ProfessorAssessmentEditor.tsx
+++ b/src/pages/Professor/ProfessorAssessmentEditor.tsx
@@ -110,8 +110,11 @@ export default function ProfessorAssessmentEditorPage() {
             : undefined,
         };
 
-        await updateMutation.mutateAsync({ id: assessmentId, data: updateData });
-        toast.success('Evaluación actualizada')
+        await updateMutation.mutateAsync({
+          id: assessmentId,
+          data: updateData,
+        });
+        toast.success('Evaluación actualizada');
       } else {
         const createData: CreateAssessmentRequest = {
           title: formData.title,
@@ -135,13 +138,13 @@ export default function ProfessorAssessmentEditorPage() {
         };
 
         await createMutation.mutateAsync(createData);
-        toast.success('Evaluación creada exitosamente')
+        toast.success('Evaluación creada exitosamente');
       }
 
       navigate('/professor/dashboard/assessments');
     } catch (error) {
       console.error('Error saving assessment:', error);
-      toast.error('Error al guardar la evaluación')
+      toast.error('Error al guardar la evaluación');
     }
   };
 
@@ -157,240 +160,251 @@ export default function ProfessorAssessmentEditorPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8 max-w-4xl">
-      <div className="flex items-center gap-4 mb-8">
-        <Button
-          variant="outline"
-          onClick={() => navigate('/professor/dashboard/assessments')}
-          className="flex items-center gap-2"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          Volver
-        </Button>
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900">
-            {isEditMode ? 'Editar Evaluación' : 'Nueva Evaluación'}
-          </h1>
-          <p className="text-gray-600 mt-1">
-            {isEditMode
-              ? 'Modifica los detalles de la evaluación'
-              : 'Crea una nueva evaluación formal para tu curso'}
-          </p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        <div className="flex items-center gap-4 mb-8">
+          <Button
+            variant="outline"
+            onClick={() => navigate('/professor/dashboard/assessments')}
+            className="flex items-center gap-2"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Volver
+          </Button>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">
+              {isEditMode ? 'Editar Evaluación' : 'Nueva Evaluación'}
+            </h1>
+            <p className="text-gray-600 mt-1">
+              {isEditMode
+                ? 'Modifica los detalles de la evaluación'
+                : 'Crea una nueva evaluación formal para tu curso'}
+            </p>
+          </div>
         </div>
-      </div>
 
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <Card className="p-6">
-          <h2 className="text-xl font-semibold mb-4">Información Básica</h2>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <Card className="p-6">
+            <h2 className="text-xl font-semibold mb-4">Información Básica</h2>
 
-          <div className="space-y-4">
-            <Input
-              label="Título de la Evaluación"
-              value={formData.title}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, title: e.target.value })
-              }
-              required
-              placeholder="Ej: Examen Final de JavaScript"
-            />
-
-            <TextArea
-              label="Descripción (opcional)"
-              value={formData.description}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setFormData({ ...formData, description: e.target.value })
-              }
-              placeholder="Instrucciones y detalles sobre la evaluación"
-              rows={3}
-            />
-
-            {!isEditMode && (
-              <Select
-                label="Curso"
-                value={formData.courseId}
-                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                  setFormData({ ...formData, courseId: e.target.value })
+            <div className="space-y-4">
+              <Input
+                label="Título de la Evaluación"
+                value={formData.title}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormData({ ...formData, title: e.target.value })
                 }
                 required
-              >
-                <option value="">Selecciona un curso</option>
-                {courses?.map((course) => (
-                  <option key={course.id} value={course.id}>
-                    {course.name}
-                  </option>
-                ))}
-              </Select>
-            )}
-          </div>
-        </Card>
+                placeholder="Ej: Examen Final de JavaScript"
+              />
 
-        <Card className="p-6">
-          <h2 className="text-xl font-semibold mb-4">Configuración</h2>
+              <TextArea
+                label="Descripción (opcional)"
+                value={formData.description}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Instrucciones y detalles sobre la evaluación"
+                rows={3}
+              />
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Input
-              label="Duración (minutos)"
-              type="number"
-              value={formData.durationMinutes}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, durationMinutes: e.target.value })
-              }
-              placeholder="Dejar vacío para sin límite"
-              min="1"
-            />
+              {!isEditMode && (
+                <Select
+                  label="Curso"
+                  value={formData.courseId}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                    setFormData({ ...formData, courseId: e.target.value })
+                  }
+                  required
+                >
+                  <option value="">Selecciona un curso</option>
+                  {courses?.map((course) => (
+                    <option key={course.id} value={course.id}>
+                      {course.name}
+                    </option>
+                  ))}
+                </Select>
+              )}
+            </div>
+          </Card>
 
-            <Input
-              label="Puntaje Mínimo (%)"
-              type="number"
-              value={formData.passingScore}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, passingScore: e.target.value })
-              }
-              required
-              min="0"
-              max="100"
-            />
+          <Card className="p-6">
+            <h2 className="text-xl font-semibold mb-4">Configuración</h2>
 
-            <Input
-              label="Máximo de Intentos"
-              type="number"
-              value={formData.maxAttempts}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, maxAttempts: e.target.value })
-              }
-              placeholder="Dejar vacío para ilimitado"
-              min="1"
-            />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="Duración (minutos)"
+                type="number"
+                value={formData.durationMinutes}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormData({ ...formData, durationMinutes: e.target.value })
+                }
+                placeholder="Dejar vacío para sin límite"
+                min="1"
+              />
 
-            <div className="flex items-center gap-3 pt-6">
-              <Switch
-                id="isActive"
-                checked={formData.isActive}
+              <Input
+                label="Puntaje Mínimo (%)"
+                type="number"
+                value={formData.passingScore}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setFormData({ ...formData, isActive: e.target.checked })
+                  setFormData({ ...formData, passingScore: e.target.value })
                 }
+                required
+                min="0"
+                max="100"
               />
-              <Label htmlFor="isActive">Evaluación Activa</Label>
-            </div>
-          </div>
-        </Card>
 
-        <Card className="p-6">
-          <h2 className="text-xl font-semibold mb-4">Disponibilidad</h2>
+              <Input
+                label="Máximo de Intentos"
+                type="number"
+                value={formData.maxAttempts}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormData({ ...formData, maxAttempts: e.target.value })
+                }
+                placeholder="Dejar vacío para ilimitado"
+                min="1"
+              />
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Input
-              label="Disponible Desde"
-              type="datetime-local"
-              value={formData.availableFrom}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, availableFrom: e.target.value })
-              }
-            />
+              <div className="flex items-center gap-3 pt-6">
+                <Switch
+                  id="isActive"
+                  checked={formData.isActive}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setFormData({ ...formData, isActive: e.target.checked })
+                  }
+                />
+                <Label htmlFor="isActive">Evaluación Activa</Label>
+              </div>
+            </div>
+          </Card>
 
-            <Input
-              label="Disponible Hasta"
-              type="datetime-local"
-              value={formData.availableUntil}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setFormData({ ...formData, availableUntil: e.target.value })
-              }
-            />
-          </div>
-        </Card>
+          <Card className="p-6">
+            <h2 className="text-xl font-semibold mb-4">Disponibilidad</h2>
 
-        <Card className="p-6">
-        <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
-          <h2 className="text-xl font-semibold">
-            Preguntas ({selectedQuestions.length})
-          </h2>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm" 
-            onClick={() => setShowQuestionSelector(true)}
-            className="flex items-center gap-2"
-          >
-            <Plus className="w-4 h-4" />
-            {selectedQuestions.length === 0 ? 'Seleccionar' : 'Editar Selección'}
-          </Button>
-        </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="Disponible Desde"
+                type="datetime-local"
+                value={formData.availableFrom}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormData({ ...formData, availableFrom: e.target.value })
+                }
+              />
 
-        {selectedQuestions.length === 0 ? (
-          <div className="text-center py-8 text-gray-500 border-2 border-dashed rounded-lg">
-            <p>No hay preguntas seleccionadas</p>
-            <p className="text-sm mt-1">
-              Haz clic en "Seleccionar" para agregar preguntas a la evaluación
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {selectedQuestions.map((question, index) => (
-              <div
-                key={question.id}
-                className="flex items-start justify-between p-3 sm:p-4 border rounded-lg bg-slate-50"
+              <Input
+                label="Disponible Hasta"
+                type="datetime-local"
+                value={formData.availableUntil}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormData({ ...formData, availableUntil: e.target.value })
+                }
+              />
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+              <h2 className="text-xl font-semibold">
+                Preguntas ({selectedQuestions.length})
+              </h2>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => setShowQuestionSelector(true)}
+                className="flex items-center gap-2"
               >
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold text-sm text-gray-500">#{index + 1}</span>
-                    <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">{question.questionType}</span>
+                <Plus className="w-4 h-4" />
+                {selectedQuestions.length === 0
+                  ? 'Seleccionar'
+                  : 'Editar Selección'}
+              </Button>
+            </div>
+
+            {selectedQuestions.length === 0 ? (
+              <div className="text-center py-8 text-gray-500 border-2 border-dashed rounded-lg">
+                <p>No hay preguntas seleccionadas</p>
+                <p className="text-sm mt-1">
+                  Haz clic en "Seleccionar" para agregar preguntas a la
+                  evaluación
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {selectedQuestions.map((question, index) => (
+                  <div
+                    key={question.id}
+                    className="flex items-start justify-between p-3 sm:p-4 border rounded-lg bg-slate-50"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="font-semibold text-sm text-gray-500">
+                          #{index + 1}
+                        </span>
+                        <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
+                          {question.questionType}
+                        </span>
+                      </div>
+                      <p className="text-gray-900 truncate">
+                        {question.questionText}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setSelectedQuestions(
+                          selectedQuestions.filter((q) => q.id !== question.id)
+                        );
+                      }}
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50 p-2 h-auto"
+                      aria-label="Eliminar pregunta"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
                   </div>
-                  <p className="text-gray-900 truncate">{question.questionText}</p>
-                </div>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setSelectedQuestions(
-                      selectedQuestions.filter((q) => q.id !== question.id)
-                    );
-                  }}
-                  className="text-red-600 hover:text-red-700 hover:bg-red-50 p-2 h-auto"
-                  aria-label="Eliminar pregunta"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </Button>
+                ))}
               </div>
-            ))}
-          </div>
-        )}
-      </Card>
+            )}
+          </Card>
 
-        <div className="flex justify-end gap-3">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => navigate('/professor/dashboard/assessments')}
-          >
-            Cancelar
-          </Button>
-          <Button
-            type="submit"
-            disabled={createMutation.isPending || updateMutation.isPending}
-            className="flex items-center gap-2"
-          >
-            <Save className="w-4 h-4" />
-            {createMutation.isPending || updateMutation.isPending
-              ? 'Guardando...'
-              : isEditMode
-              ? 'Guardar Cambios'
-              : 'Crear Evaluación'}
-          </Button>
-        </div>
-      </form>
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate('/professor/dashboard/assessments')}
+            >
+              Cancelar
+            </Button>
+            <Button
+              type="submit"
+              disabled={createMutation.isPending || updateMutation.isPending}
+              className="flex items-center gap-2"
+            >
+              <Save className="w-4 h-4" />
+              {createMutation.isPending || updateMutation.isPending
+                ? 'Guardando...'
+                : isEditMode
+                ? 'Guardar Cambios'
+                : 'Crear Evaluación'}
+            </Button>
+          </div>
+        </form>
 
-      {showQuestionSelector && formData.courseId && (
-        <QuestionSelector
-          courseId={formData.courseId}
-          selectedQuestions={selectedQuestions}
-          onSelect={(questions: Question[]) => {
-            setSelectedQuestions(questions);
-            setShowQuestionSelector(false);
-          }}
-          onClose={() => setShowQuestionSelector(false)}
-        />
-      )}
+        {showQuestionSelector && formData.courseId && (
+          <QuestionSelector
+            courseId={formData.courseId}
+            selectedQuestions={selectedQuestions}
+            onSelect={(questions: Question[]) => {
+              setSelectedQuestions(questions);
+              setShowQuestionSelector(false);
+            }}
+            onClose={() => setShowQuestionSelector(false)}
+          />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Professor/ProfessorAssessmentsPage.tsx b/src/pages/Professor/ProfessorAssessmentsPage.tsx
index 4b957a8..4603b75 100644
--- a/src/pages/Professor/ProfessorAssessmentsPage.tsx
+++ b/src/pages/Professor/ProfessorAssessmentsPage.tsx
@@ -196,14 +196,24 @@ function AssessmentCard({
       <div className="flex-grow">
         <div className="flex items-start justify-between mb-4">
           <div className="flex-1">
-            <h3 className="text-xl font-bold text-gray-900 mb-1">{assessment.title}</h3>
+            <h3 className="text-xl font-bold text-gray-900 mb-1">
+              {assessment.title}
+            </h3>
             <p className="text-sm text-gray-600">{assessment.course.name}</p>
           </div>
           <div className="flex items-center gap-1">
-            {isAvailable ? ( <CheckCircle className="w-5 h-5 text-green-500" /> ) : ( <XCircle className="w-5 h-5 text-red-500" /> )}
+            {isAvailable ? (
+              <CheckCircle className="w-5 h-5 text-green-500" />
+            ) : (
+              <XCircle className="w-5 h-5 text-red-500" />
+            )}
           </div>
         </div>
-        {assessment.description && <p className="text-gray-600 text-sm mb-4 line-clamp-2">{assessment.description}</p>}
+        {assessment.description && (
+          <p className="text-gray-600 text-sm mb-4 line-clamp-2">
+            {assessment.description}
+          </p>
+        )}
         <div className="grid grid-cols-3 gap-4 mb-4">
           <div className="flex items-center gap-2">
             <FileText className="w-4 h-4 text-gray-400" />
@@ -216,34 +226,55 @@ function AssessmentCard({
             <Clock className="w-4 h-4 text-gray-400" />
             <div>
               <p className="text-xs text-gray-500">Duración</p>
-              <p className="font-semibold">{assessment.durationMinutes ? `${assessment.durationMinutes} min` : 'Ilimitado'}</p>
+              <p className="font-semibold">
+                {assessment.durationMinutes
+                  ? `${assessment.durationMinutes} min`
+                  : 'Ilimitado'}
+              </p>
             </div>
           </div>
           <div className="flex items-center gap-2">
             <Users className="w-4 h-4 text-gray-400" />
             <div>
               <p className="text-xs text-gray-500">Intentos</p>
-              <p className="font-semibold">{assessment.maxAttempts ?? 'Ilimitados'}</p>
+              <p className="font-semibold">
+                {assessment.maxAttempts ?? 'Ilimitados'}
+              </p>
             </div>
           </div>
         </div>
       </div>
       <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t mt-auto">
-        <Button variant="outline" size="sm" onClick={onViewAttempts} className="flex-1 flex items-center justify-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onViewAttempts}
+          className="flex-1 flex items-center justify-center gap-2"
+        >
           <BarChart3 className="w-4 h-4" />
           Ver Intentos
         </Button>
         <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={onEdit} className="flex-1 flex items-center justify-center gap-2">
-                <Edit className="w-4 h-4" />
-                <span className="sm:hidden">Editar</span>
-            </Button>
-            <Button variant="outline" size="sm" onClick={onDelete} className="flex-1 flex items-center justify-center gap-2 text-red-600 hover:text-red-700 hover:border-red-300">
-                <Trash2 className="w-4 h-4" />
-                <span className="sm:hidden">Borrar</span>
-            </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onEdit}
+            className="flex-1 flex items-center justify-center gap-2"
+          >
+            <Edit className="w-4 h-4" />
+            <span className="sm:hidden">Editar</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onDelete}
+            className="flex-1 flex items-center justify-center gap-2 text-red-600 hover:text-red-700 hover:border-red-300"
+          >
+            <Trash2 className="w-4 h-4" />
+            <span className="sm:hidden">Borrar</span>
+          </Button>
         </div>
       </div>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Professor/ProfessorCourseCreation.tsx b/src/pages/Professor/ProfessorCourseCreation.tsx
index 42258f8..987b7ef 100644
--- a/src/pages/Professor/ProfessorCourseCreation.tsx
+++ b/src/pages/Professor/ProfessorCourseCreation.tsx
@@ -1,35 +1,47 @@
-import { useState } from "react";
-import type React from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { ArrowLeft, Upload } from "lucide-react";
-import Button from "../../components/ui/Button/Button.tsx";
-import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/Card/Card.tsx";
-import Input from "../../components/ui/Input/Input.tsx";
-import Textarea from "../../components/ui/TextArea/TextArea.tsx";
-import CoursePreviewCard from "../../components/ui/CoursePreviewCard/CoursePreviewCard.tsx";
-import Switch from "../../components/ui/Swtich/Switch.tsx";
-import Label from "../../components/ui/Label/Label.tsx";
-import Select from "../../components/ui/Select/Select.tsx";
-import { useCourseTypes } from "../../hooks/useCourseTypes.ts";
-import { useCreateCourse } from "../../hooks/useCourses.ts";
+import { useState } from 'react';
+import type React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { ArrowLeft, Upload } from 'lucide-react';
+import Button from '../../components/ui/Button/Button.tsx';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card/Card.tsx';
+import Input from '../../components/ui/Input/Input.tsx';
+import Textarea from '../../components/ui/TextArea/TextArea.tsx';
+import CoursePreviewCard from '../../components/ui/CoursePreviewCard/CoursePreviewCard.tsx';
+import Switch from '../../components/ui/Swtich/Switch.tsx';
+import Label from '../../components/ui/Label/Label.tsx';
+import Select from '../../components/ui/Select/Select.tsx';
+import { useCourseTypes } from '../../hooks/useCourseTypes.ts';
+import { useCreateCourse } from '../../hooks/useCourses.ts';
 import * as v from 'valibot';
-import { valibotResolver } from "@hookform/resolvers/valibot";
-import { useForm } from "react-hook-form";
-import { AxiosError } from "axios";
-import { useManagedInstitution } from "../../hooks/useInstitutionMutations.ts";
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import { useForm } from 'react-hook-form';
+import { AxiosError } from 'axios';
+import { useManagedInstitution } from '../../hooks/useInstitutionMutations.ts';
 
 const CourseSchema = v.pipe(
   v.object({
     name: v.pipe(v.string(), v.minLength(1, 'El nombre es requerido.')),
-    description: v.pipe(v.string(), v.minLength(1, 'La descripción es requerida.')),
+    description: v.pipe(
+      v.string(),
+      v.minLength(1, 'La descripción es requerida.')
+    ),
     isFree: v.boolean(),
-    price: v.optional(v.number("El precio debe ser un número")),
-    courseTypeId: v.pipe(v.string(), v.minLength(1, "Debes seleccionar una categoría.")),
+    price: v.optional(v.number('El precio debe ser un número')),
+    courseTypeId: v.pipe(
+      v.string(),
+      v.minLength(1, 'Debes seleccionar una categoría.')
+    ),
     useInstitution: v.optional(v.boolean()),
   }),
   v.forward(
     v.check(
-      (input) => !input.isFree ? input.price !== undefined && input.price >= 0 : true,
+      (input) =>
+        !input.isFree ? input.price !== undefined && input.price >= 0 : true,
       'Si el curso no es gratuito, debes especificar un precio válido (0 o más).'
     ),
     ['price']
@@ -41,26 +53,35 @@ type CourseFormValues = v.InferInput<typeof CourseSchema>;
 export default function ProfessorCourseCreation() {
   const navigate = useNavigate();
 
-  const { data: courseTypesData, isLoading: isLoadingTypes } = useCourseTypes({});
+  const { data: courseTypesData, isLoading: isLoadingTypes } = useCourseTypes(
+    {}
+  );
   const courseTypes = courseTypesData?.courseTypes || [];
-  
-  const {
-    data: managedInstitution = null,
-    isLoading: isLoadingInstitution
-  } = useManagedInstitution();
 
-  const { mutate: createCourse, isPending, error: mutationError } = useCreateCourse();
+  const { data: managedInstitution = null, isLoading: isLoadingInstitution } =
+    useManagedInstitution();
+
+  const {
+    mutate: createCourse,
+    isPending,
+    error: mutationError,
+  } = useCreateCourse();
 
-  const { register, handleSubmit, formState: { errors }, watch } = useForm<CourseFormValues>({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<CourseFormValues>({
     resolver: valibotResolver(CourseSchema),
     defaultValues: {
-      name: "",
-      description: "",
+      name: '',
+      description: '',
       isFree: true,
       price: 0,
-      courseTypeId: "",
-      useInstitution: false
-    }
+      courseTypeId: '',
+      useInstitution: false,
+    },
   });
 
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -85,15 +106,20 @@ export default function ProfessorCourseCreation() {
     dataToSend.append('description', formData.description);
     dataToSend.append('courseTypeId', formData.courseTypeId);
     dataToSend.append('isFree', String(formData.isFree));
-    
+
     const priceValue = formData.price || 0;
     const priceInCents = formData.isFree ? 0 : Math.round(priceValue * 100);
-    
+
     dataToSend.append('priceInCents', String(priceInCents));
-    
-    dataToSend.append('useInstitution', formData.useInstitution ? 'true' : 'false');
 
-    const imageInput = document.getElementById('course-image') as HTMLInputElement;
+    dataToSend.append(
+      'useInstitution',
+      formData.useInstitution ? 'true' : 'false'
+    );
+
+    const imageInput = document.getElementById(
+      'course-image'
+    ) as HTMLInputElement;
     if (imageInput.files && imageInput.files[0]) {
       dataToSend.append('image', imageInput.files[0]);
     }
@@ -103,7 +129,7 @@ export default function ProfessorCourseCreation() {
         navigate(`/professor/dashboard/courses/${createdCourse.id}/edit`);
       },
       onError: (err: AxiosError) => {
-        console.error("Error al crear el curso:", err);
+        console.error('Error al crear el curso:', err);
         const responseData = err.response?.data as { message?: string };
         const message = responseData?.message || err.message;
         alert(`Error al crear el curso: ${message}`);
@@ -112,153 +138,174 @@ export default function ProfessorCourseCreation() {
   };
 
   return (
-    <div className="container mx-auto max-w-6xl py-8">
-      <div className="mb-8">
-        <Link to="/professor/dashboard/courses">
-          <Button
-            variant="ghost"
-            className="mb-4 text-slate-600 hover:text-slate-800"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Volver a Mis Cursos
-          </Button>
-        </Link>
-        <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
-          Crear Nuevo Curso
-        </h1>
-        <p className="text-lg text-slate-600">
-          Completa la información de tu curso y previsualiza cómo se verá
-        </p>
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        <div className="mb-8">
+          <Link to="/professor/dashboard/courses">
+            <Button
+              variant="ghost"
+              className="mb-4 text-slate-600 hover:text-slate-800"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Volver a Mis Cursos
+            </Button>
+          </Link>
+          <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
+            Crear Nuevo Curso
+          </h1>
+          <p className="text-lg text-slate-600">
+            Completa la información de tu curso y previsualiza cómo se verá
+          </p>
+        </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="grid lg:grid-cols-2 gap-8">
-        <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
-          <CardHeader>
-            <CardTitle className="text-xl font-semibold text-slate-800">
-              Información del Curso
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <Input
-              id="course-name"
-              label="Nombre del curso"
-              placeholder="Ej: Desarrollo Web con React"
-              {...register("name")}
-              error={errors.name?.message}
-            />
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="grid lg:grid-cols-2 gap-8"
+        >
+          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+            <CardHeader>
+              <CardTitle className="text-xl font-semibold text-slate-800">
+                Información del Curso
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <Input
+                id="course-name"
+                label="Nombre del curso"
+                placeholder="Ej: Desarrollo Web con React"
+                {...register('name')}
+                error={errors.name?.message}
+              />
 
-            <Textarea
-              id="course-description"
-              label="Descripción"
-              placeholder="Describe brevemente de qué trata tu curso..."
-              rows={4}
-              {...register("description")}
-              error={errors.description?.message}
-            />
+              <Textarea
+                id="course-description"
+                label="Descripción"
+                placeholder="Describe brevemente de qué trata tu curso..."
+                rows={4}
+                {...register('description')}
+                error={errors.description?.message}
+              />
 
-            {isLoadingTypes ? <p>Cargando categorías...</p> : (
-              <Select id="typeCourse-select" label="Tipo de Curso" {...register("courseTypeId")}>
-                <option value="" disabled>Selecciona una categoría</option>
-                {courseTypes.map((type) => (
-                  <option key={type.id} value={type.id}>
-                    {type.name}
+              {isLoadingTypes ? (
+                <p>Cargando categorías...</p>
+              ) : (
+                <Select
+                  id="typeCourse-select"
+                  label="Tipo de Curso"
+                  {...register('courseTypeId')}
+                >
+                  <option value="" disabled>
+                    Selecciona una categoría
                   </option>
-                ))}
-              </Select>
-            )}
-            {errors.courseTypeId && <p className="text-sm text-red-500 mt-1">{errors.courseTypeId.message}</p>}
+                  {courseTypes.map((type) => (
+                    <option key={type.id} value={type.id}>
+                      {type.name}
+                    </option>
+                  ))}
+                </Select>
+              )}
+              {errors.courseTypeId && (
+                <p className="text-sm text-red-500 mt-1">
+                  {errors.courseTypeId.message}
+                </p>
+              )}
 
-            {
-              isLoadingInstitution ? <p>Cargando institución...</p> :(
-                managedInstitution ? (
+              {isLoadingInstitution ? (
+                <p>Cargando institución...</p>
+              ) : managedInstitution ? (
                 <div className="space-y-4 rounded-lg border p-4">
                   <div className="flex items-center justify-between">
-                  <Label htmlFor="useInstitution">¿Asociar a su intitucion?</Label>
+                    <Label htmlFor="useInstitution">
+                      ¿Asociar a su intitucion?
+                    </Label>
                     <Switch
-                    id="useInstitution"
-                    {...register("useInstitution")}
-                  />
+                      id="useInstitution"
+                      {...register('useInstitution')}
+                    />
                   </div>
-                </div>) : null
-              )
-            }
-
-            <div>
-              <Label>Imagen del curso</Label>
-              <div className="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center bg-slate-50 hover:bg-slate-100">
-                <input
-                  type="file"
-                  id="course-image"
-                  accept="image/*"
-                  onChange={handleImageUpload}
-                  className="hidden"
-                />
-                <label htmlFor="course-image" className="cursor-pointer">
-                  <Upload className="w-8 h-8 mx-auto mb-2 text-slate-400" />
-                  <p className="text-sm text-slate-600">
-                    Haz clic para subir una imagen
-                  </p>
-                  <p className="text-xs text-slate-400">PNG, JPG hasta 5MB</p>
-                </label>
-              </div>
-            </div>
+                </div>
+              ) : null}
 
-            <div className="space-y-4 rounded-lg border p-4">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="is-free">Curso gratuito</Label>
-                <Switch
-                  id="is-free"
-                  {...register("isFree")}
-                />
+              <div>
+                <Label>Imagen del curso</Label>
+                <div className="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center bg-slate-50 hover:bg-slate-100">
+                  <input
+                    type="file"
+                    id="course-image"
+                    accept="image/*"
+                    onChange={handleImageUpload}
+                    className="hidden"
+                  />
+                  <label htmlFor="course-image" className="cursor-pointer">
+                    <Upload className="w-8 h-8 mx-auto mb-2 text-slate-400" />
+                    <p className="text-sm text-slate-600">
+                      Haz clic para subir una imagen
+                    </p>
+                    <p className="text-xs text-slate-400">PNG, JPG hasta 5MB</p>
+                  </label>
+                </div>
               </div>
 
-              {!watchedValues.isFree && (
-                <Input
-                  id="course-price"
-                  label="Precio del curso (ARS)"
-                  type="number"
-                  placeholder="99"
-                  {...register(("price"), { valueAsNumber: true})}
-                  error={errors.price?.message}
-                />
-              )}
-            </div>
+              <div className="space-y-4 rounded-lg border p-4">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="is-free">Curso gratuito</Label>
+                  <Switch id="is-free" {...register('isFree')} />
+                </div>
 
-            <Button
-              type="submit"
-              disabled={isPending}
-              isLoading={isPending}
-              className="w-full bg-green-500 hover:bg-green-600 text-white"
-            >
-              Crear Curso y Continuar
-            </Button>
+                {!watchedValues.isFree && (
+                  <Input
+                    id="course-price"
+                    label="Precio del curso (ARS)"
+                    type="number"
+                    placeholder="99"
+                    {...register('price', { valueAsNumber: true })}
+                    error={errors.price?.message}
+                  />
+                )}
+              </div>
 
-            {mutationError && <p className="text-sm text-red-500 text-center mt-2">{mutationError.message}</p>}
+              <Button
+                type="submit"
+                disabled={isPending}
+                isLoading={isPending}
+                className="w-full bg-green-500 hover:bg-green-600 text-white"
+              >
+                Crear Curso y Continuar
+              </Button>
 
-          </CardContent>
-        </Card>
+              {mutationError && (
+                <p className="text-sm text-red-500 text-center mt-2">
+                  {mutationError.message}
+                </p>
+              )}
+            </CardContent>
+          </Card>
 
-        <div className="space-y-4">
-          <h2 className="text-xl font-semibold text-slate-800">
-            Previsualización
-          </h2>
-          <CoursePreviewCard
-            name={watchedValues.name}
-            description={watchedValues.description}
-            imageUrl={imagePreview || ""}
-            isFree={watchedValues.isFree}
-            price={watchedValues.price || 0}
-            courseType={courseTypes.find(ct => ct.id === watchedValues.courseTypeId)}
-            hideButton
-          />
-          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
-            <p className="text-sm text-blue-700">
-              <strong>Nota:</strong> Esta es una vista previa de cómo se verá tu
-              curso en el dashboard. Una vez creado, podrás agregar contenido.
-            </p>
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-slate-800">
+              Previsualización
+            </h2>
+            <CoursePreviewCard
+              name={watchedValues.name}
+              description={watchedValues.description}
+              imageUrl={imagePreview || ''}
+              isFree={watchedValues.isFree}
+              price={watchedValues.price || 0}
+              courseType={courseTypes.find(
+                (ct) => ct.id === watchedValues.courseTypeId
+              )}
+              hideButton
+            />
+            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
+              <p className="text-sm text-blue-700">
+                <strong>Nota:</strong> Esta es una vista previa de cómo se verá
+                tu curso en el dashboard. Una vez creado, podrás agregar
+                contenido.
+              </p>
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Professor/ProfessorCourseEdition.tsx b/src/pages/Professor/ProfessorCourseEdition.tsx
index d641749..418c494 100644
--- a/src/pages/Professor/ProfessorCourseEdition.tsx
+++ b/src/pages/Professor/ProfessorCourseEdition.tsx
@@ -190,7 +190,9 @@ export default function ProfessorCourseEdition() {
         setUnits(unitsFromBackend);
 
         if (unitsFromBackend.length > 0) {
-          setSelectedUnitId((prev) => (prev === null ? unitsFromBackend[0].unitNumber : prev));
+          setSelectedUnitId((prev) =>
+            prev === null ? unitsFromBackend[0].unitNumber : prev
+          );
         }
       }
     }
@@ -383,9 +385,7 @@ export default function ProfessorCourseEdition() {
       deleteUnitMutation.mutate({ courseId, unitNumber });
 
       if (selectedUnitId === unitNumber) {
-        const remainingUnits = units.filter(
-          (u) => u.unitNumber !== unitNumber
-        );
+        const remainingUnits = units.filter((u) => u.unitNumber !== unitNumber);
         setSelectedUnitId(
           remainingUnits.length > 0 ? remainingUnits[0].unitNumber : null
         );
@@ -621,117 +621,119 @@ export default function ProfessorCourseEdition() {
   }
 
   return (
-    <div className="container mx-auto max-w-7xl">
-      <CourseHeader
-        courseId={courseId}
-        courseName={courseConfig.name}
-        onSave={handleGlobalSave}
-        onToggleEdit={() => setEditable(!editable)}
-        isSaving={quickSaveMutation.isPending}
-        hasUnsavedChanges={units.some((unit) => unit.hasUnsavedChanges)}
-        saveError={saveError}
-        isEditMode={editable}
-        lastSavedAt={lastSavedAt || undefined}
-        onOpenGeneralQuestions={() => setIsGeneralQuestionsOpen(true)}
-      />
-
-      <div className="grid lg:grid-cols-4 gap-6">
-        <div className="lg:col-span-1">
-          <CourseSidebar
-            units={units}
-            selectedUnitId={selectedUnitId}
-            onUnitSelect={setSelectedUnitId}
-            onCreateUnit={handleOpenCreateUnitModal}
-            onEditUnit={handleEditUnit}
-            onDeleteUnit={handleDeleteUnit}
-            onOpenConfig={handleOpenConfigModal}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-          />
-        </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        <CourseHeader
+          courseId={courseId}
+          courseName={courseConfig.name}
+          onSave={handleGlobalSave}
+          onToggleEdit={() => setEditable(!editable)}
+          isSaving={quickSaveMutation.isPending}
+          hasUnsavedChanges={units.some((unit) => unit.hasUnsavedChanges)}
+          saveError={saveError}
+          isEditMode={editable}
+          lastSavedAt={lastSavedAt || undefined}
+          onOpenGeneralQuestions={() => setIsGeneralQuestionsOpen(true)}
+        />
 
-        <div className="lg:col-span-3">
-          <UnitContent
-            selectedUnit={selectedUnit || null}
-            questions={questions}
-            materials={selectedUnit?.materials || []}
-            editable={editable}
-            onUnitDetailChange={handleUnitDetailChange}
-            onCreateQuestion={() => setIsQuestionModalOpen(true)}
-            onEditQuestion={handleEditQuestion}
-            onDeleteQuestion={handleDeleteQuestion}
-            onUploadMaterial={() => setIsMaterialModalOpen(true)}
-            onDeleteMaterial={handleDeleteMaterial}
-            onCreateUnit={handleOpenCreateUnitModal}
-          />
+        <div className="grid lg:grid-cols-4 gap-6">
+          <div className="lg:col-span-1">
+            <CourseSidebar
+              units={units}
+              selectedUnitId={selectedUnitId}
+              onUnitSelect={setSelectedUnitId}
+              onCreateUnit={handleOpenCreateUnitModal}
+              onEditUnit={handleEditUnit}
+              onDeleteUnit={handleDeleteUnit}
+              onOpenConfig={handleOpenConfigModal}
+              onDragStart={handleDragStart}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+            />
+          </div>
+
+          <div className="lg:col-span-3">
+            <UnitContent
+              selectedUnit={selectedUnit || null}
+              questions={questions}
+              materials={selectedUnit?.materials || []}
+              editable={editable}
+              onUnitDetailChange={handleUnitDetailChange}
+              onCreateQuestion={() => setIsQuestionModalOpen(true)}
+              onEditQuestion={handleEditQuestion}
+              onDeleteQuestion={handleDeleteQuestion}
+              onUploadMaterial={() => setIsMaterialModalOpen(true)}
+              onDeleteMaterial={handleDeleteMaterial}
+              onCreateUnit={handleOpenCreateUnitModal}
+            />
+          </div>
         </div>
-      </div>
 
-      <CourseConfigModal
-        isOpen={isConfigModalOpen}
-        onClose={() => setIsConfigModalOpen(false)}
-        config={tempConfig}
-        onConfigChange={setTempConfig}
-        onSave={handleSaveConfig}
-        onImageChange={handleImageChange}
-      />
-
-      <UnitModal
-        isOpen={isUnitModalOpen}
-        onClose={handleCloseUnitModal}
-        editingUnit={editingUnit}
-        unitName={newUnitName}
-        unitDescription={newUnitDescription}
-        onNameChange={setNewUnitName}
-        onDescriptionChange={setNewUnitDescription}
-        onSave={handleSaveUnit}
-      />
-
-      <QuestionEditor
-        isOpen={isQuestionModalOpen}
-        onClose={handleCloseQuestionModal}
-        question={newQuestion}
-        onChange={setNewQuestion}
-        onSave={handleSaveQuestion}
-        readonly={!editable}
-      />
-
-      <UnitModalUpload
-        isMaterialModalOpen={isMaterialModalOpen}
-        setIsMaterialModalOpen={setIsMaterialModalOpen}
-        stagedMaterials={stagedMaterials}
-        setStagedMaterials={setStagedMaterials}
-        handleFileSelect={(e) => {
-          const files = e.target.files;
-          if (files) {
-            const newMaterials = Array.from(files).map((file) => ({
-              id: Date.now() + Math.random(),
-              name: file.name.replace(/\.[^/.]+$/, ''),
-              url: '',
-              file: file,
-            }));
-            setStagedMaterials((prev) => [...prev, ...newMaterials]);
-          }
-        }}
-        handleRemoveStagedFile={(id) => {
-          setStagedMaterials((prev) => prev.filter((m) => m.id !== id));
-        }}
-        handleTitleChange={(id, newTitle) => {
-          setStagedMaterials((prev) =>
-            prev.map((m) => (m.id === id ? { ...m, name: newTitle } : m))
-          );
-        }}
-        handleAddMaterials={handleUploadMaterial}
-      />
+        <CourseConfigModal
+          isOpen={isConfigModalOpen}
+          onClose={() => setIsConfigModalOpen(false)}
+          config={tempConfig}
+          onConfigChange={setTempConfig}
+          onSave={handleSaveConfig}
+          onImageChange={handleImageChange}
+        />
 
-      {courseId && (
-        <GeneralQuestionsManager
-          courseId={courseId}
-          isOpen={isGeneralQuestionsOpen}
-          onClose={() => setIsGeneralQuestionsOpen(false)}
+        <UnitModal
+          isOpen={isUnitModalOpen}
+          onClose={handleCloseUnitModal}
+          editingUnit={editingUnit}
+          unitName={newUnitName}
+          unitDescription={newUnitDescription}
+          onNameChange={setNewUnitName}
+          onDescriptionChange={setNewUnitDescription}
+          onSave={handleSaveUnit}
+        />
+
+        <QuestionEditor
+          isOpen={isQuestionModalOpen}
+          onClose={handleCloseQuestionModal}
+          question={newQuestion}
+          onChange={setNewQuestion}
+          onSave={handleSaveQuestion}
+          readonly={!editable}
+        />
+
+        <UnitModalUpload
+          isMaterialModalOpen={isMaterialModalOpen}
+          setIsMaterialModalOpen={setIsMaterialModalOpen}
+          stagedMaterials={stagedMaterials}
+          setStagedMaterials={setStagedMaterials}
+          handleFileSelect={(e) => {
+            const files = e.target.files;
+            if (files) {
+              const newMaterials = Array.from(files).map((file) => ({
+                id: Date.now() + Math.random(),
+                name: file.name.replace(/\.[^/.]+$/, ''),
+                url: '',
+                file: file,
+              }));
+              setStagedMaterials((prev) => [...prev, ...newMaterials]);
+            }
+          }}
+          handleRemoveStagedFile={(id) => {
+            setStagedMaterials((prev) => prev.filter((m) => m.id !== id));
+          }}
+          handleTitleChange={(id, newTitle) => {
+            setStagedMaterials((prev) =>
+              prev.map((m) => (m.id === id ? { ...m, name: newTitle } : m))
+            );
+          }}
+          handleAddMaterials={handleUploadMaterial}
         />
-      )}
+
+        {courseId && (
+          <GeneralQuestionsManager
+            courseId={courseId}
+            isOpen={isGeneralQuestionsOpen}
+            onClose={() => setIsGeneralQuestionsOpen(false)}
+          />
+        )}
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Professor/ProfessorDashboard.tsx b/src/pages/Professor/ProfessorDashboard.tsx
index 9d901e4..0da7a6b 100644
--- a/src/pages/Professor/ProfessorDashboard.tsx
+++ b/src/pages/Professor/ProfessorDashboard.tsx
@@ -1,34 +1,34 @@
-import { Outlet, useLocation } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom';
 
 const ProfessorDashboard = () => {
-
-  const location = useLocation()
-  const isCreationPage = location.pathname.endsWith('/courses/new')
-  const isEditionPage = location.pathname.endsWith('/edit')
+  const location = useLocation();
+  const isCreationPage = location.pathname.endsWith('/courses/new');
+  const isEditionPage = location.pathname.endsWith('/edit');
 
   return (
-    <div className="container mx-auto max-w-7xl">
-      {(!isCreationPage && !isEditionPage) && (
-        <div className="mb-8">
-          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-            <div>
-              <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
-                Panel de Profesor
-              </h1>
-              <p className="text-lg text-slate-600">
-                Gestiona tus cursos y estudiantes desde aquí
-              </p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        {!isCreationPage && !isEditionPage && (
+          <div className="mb-8">
+            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+              <div>
+                <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
+                  Panel de Profesor
+                </h1>
+                <p className="text-lg text-slate-600">
+                  Gestiona tus cursos y estudiantes desde aquí
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      )}
-      
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  )
-}
+        )}
 
+        <main>
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
 
-export default ProfessorDashboard
\ No newline at end of file
+export default ProfessorDashboard;
diff --git a/src/pages/User/MyLearningPage.tsx b/src/pages/User/MyLearningPage.tsx
index 0d75d0c..d726b38 100644
--- a/src/pages/User/MyLearningPage.tsx
+++ b/src/pages/User/MyLearningPage.tsx
@@ -110,9 +110,9 @@ export default function MyLearningPage() {
     enrollments?.filter((e) => e.state === 'completed') || [];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 overflow-x-hidden w-full">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 pt-16">
       <div className="bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm w-full">
-        <div className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-full">
+        <div className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
             <div className="w-full sm:w-auto">
               <h1 className="text-2xl sm:text-3xl font-bold text-slate-800 flex items-center mb-2">
@@ -129,13 +129,17 @@ export default function MyLearningPage() {
                   <p className="text-2xl sm:text-3xl font-bold text-blue-600">
                     {enrollments?.length || 0}
                   </p>
-                  <p className="text-xs sm:text-sm text-slate-600 whitespace-nowrap">Total Cursos</p>
+                  <p className="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
+                    Total Cursos
+                  </p>
                 </div>
                 <div className="text-center">
                   <p className="text-2xl sm:text-3xl font-bold text-green-600">
                     {completedEnrollments.length}
                   </p>
-                  <p className="text-xs sm:text-sm text-slate-600 whitespace-nowrap">Completados</p>
+                  <p className="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
+                    Completados
+                  </p>
                 </div>
               </div>
             </div>
@@ -143,7 +147,7 @@ export default function MyLearningPage() {
         </div>
       </div>
 
-      <div className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-full w-full box-border">
+      <div className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl w-full box-border">
         {activeEnrollments.length > 0 && (
           <div className="mb-8 sm:mb-12 w-full">
             <h2 className="text-xl sm:text-2xl font-bold text-slate-800 mb-4 sm:mb-6 flex items-center flex-wrap gap-2">
@@ -276,8 +280,12 @@ function EnrollmentCard({
 
         <div className="mb-3 sm:mb-4">
           <div className="flex justify-between items-center mb-2">
-            <span className="text-xs sm:text-sm font-medium text-slate-700">Progreso</span>
-            <span className="text-xs sm:text-sm font-bold text-blue-600">{progress}%</span>
+            <span className="text-xs sm:text-sm font-medium text-slate-700">
+              Progreso
+            </span>
+            <span className="text-xs sm:text-sm font-bold text-blue-600">
+              {progress}%
+            </span>
           </div>
           <div className="w-full bg-slate-200 rounded-full h-2 sm:h-2.5 overflow-hidden">
             <div
@@ -325,4 +333,4 @@ function EnrollmentCard({
       </CardContent>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/User/ProfilePage.tsx b/src/pages/User/ProfilePage.tsx
index 02e54c4..af8b5df 100644
--- a/src/pages/User/ProfilePage.tsx
+++ b/src/pages/User/ProfilePage.tsx
@@ -1,28 +1,28 @@
-import { useState, useEffect, useRef } from "react";
-import { useForm } from "react-hook-form";
-import { valibotResolver } from "@hookform/resolvers/valibot";
-import * as v from "valibot";
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+import { useNavigate } from 'react-router-dom';
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "../../components/ui/Card/Card";
-import Button from "../../components/ui/Button/Button";
-import ProfileField from "../../components/ui/ProfileField/ProfileField";
+} from '../../components/ui/Card/Card';
+import Button from '../../components/ui/Button/Button';
+import ProfileField from '../../components/ui/ProfileField/ProfileField';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "../../components/ui/Tabs/Tabs";
+} from '../../components/ui/Tabs/Tabs';
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from "../../components/ui/Avatar/Avatar";
+} from '../../components/ui/Avatar/Avatar';
 import {
   User,
   Mail,
@@ -36,22 +36,22 @@ import {
   Camera,
   GraduationCap,
   FileClock,
-} from "lucide-react";
-import { useAuth } from "../../hooks/useAuth";
-import { useUpdateProfile } from "../../hooks/useUserMutations";
-import { isAxiosError } from "axios";
-import RoleBadge from "../../components/ui/RoleBadge/RoleBadge";
-import ProfessorProfileTab from "./ProfessorProfileTab";
-import StudentAppealsHistory from "../../components/student/StudentAppealsHistory";
+} from 'lucide-react';
+import { useAuth } from '../../hooks/useAuth';
+import { useUpdateProfile } from '../../hooks/useUserMutations';
+import { isAxiosError } from 'axios';
+import RoleBadge from '../../components/ui/RoleBadge/RoleBadge';
+import ProfessorProfileTab from './ProfessorProfileTab';
+import StudentAppealsHistory from '../../components/student/StudentAppealsHistory';
 
 const ProfileSchema = v.object({
-  name: v.pipe(v.string(), v.minLength(1, "El nombre es requerido.")),
-  surname: v.pipe(v.string(), v.minLength(1, "El apellido es requerido.")),
-  mail: v.pipe(v.string(), v.email("Debe ser un email válido.")),
+  name: v.pipe(v.string(), v.minLength(1, 'El nombre es requerido.')),
+  surname: v.pipe(v.string(), v.minLength(1, 'El apellido es requerido.')),
+  mail: v.pipe(v.string(), v.email('Debe ser un email válido.')),
   phone: v.optional(v.string()),
   location: v.optional(v.string()),
   birthdate: v.optional(
-    v.pipe(v.string(), v.isoDate("La fecha debe tener un formato YYYY-MM-DD."))
+    v.pipe(v.string(), v.isoDate('La fecha debe tener un formato YYYY-MM-DD.'))
   ),
 });
 
@@ -88,11 +88,11 @@ export default function ProfilePage() {
         name: user.name,
         surname: user.surname,
         mail: user.mail,
-        phone: user.phone || "",
-        location: user.location || "",
+        phone: user.phone || '',
+        location: user.location || '',
         birthdate: user.birthdate
-          ? new Date(user.birthdate).toISOString().split("T")[0]
-          : "",
+          ? new Date(user.birthdate).toISOString().split('T')[0]
+          : '',
       });
       setImagePreview(user.profile_picture || null);
     }
@@ -115,7 +115,7 @@ export default function ProfilePage() {
   const onSubmit = (data: ProfileFormData) => {
     const payloadData = Object.fromEntries(
       Object.entries(data).filter(
-        ([, value]) => value !== "" && value !== undefined
+        ([, value]) => value !== '' && value !== undefined
       )
     );
 
@@ -131,284 +131,287 @@ export default function ProfilePage() {
   };
 
   const handlePasswordChange = () => {
-    navigate("/forgot-password");
+    navigate('/forgot-password');
   };
 
   if (isUserLoading) return <p>Cargando perfil...</p>;
   if (!user) return <p>No se pudo cargar la información del usuario.</p>;
 
-  const isProfessor = user.role === "professor";
-  const isAdmin = user.role === "admin";
+  const isProfessor = user.role === 'professor';
+  const isAdmin = user.role === 'admin';
 
   const getGridColsClass = () => {
-    if (isProfessor) return "grid-cols-4";
-    if (isAdmin) return "grid-cols-2";
-    return "grid-cols-3";
+    if (isProfessor) return 'grid-cols-4';
+    if (isAdmin) return 'grid-cols-2';
+    return 'grid-cols-3';
   };
 
   return (
-    <div className="container mx-auto max-w-4xl">
-      <div className="mb-8">
-        <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
-          Mi Perfil
-        </h1>
-        <p className="text-lg text-slate-600">
-          Gestiona tu información personal y configuración de cuenta
-        </p>
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4">
+      <div className="container mx-auto max-w-7xl pt-24 pb-8">
+        <div className="mb-8">
+          <h1 className="text-3xl lg:text-4xl font-bold text-slate-800 mb-2">
+            Mi Perfil
+          </h1>
+          <p className="text-lg text-slate-600">
+            Gestiona tu información personal y configuración de cuenta
+          </p>
+        </div>
 
-      <Tabs defaultValue="personal" className="space-y-6">
-        <TabsList
-          className={`grid w-full ${getGridColsClass()} bg-white/80 backdrop-blur-sm h-auto p-1 gap-1`}
-        >
-          <TabsTrigger value="personal">
-            <User className="w-4 h-4" />
-            <span className="hidden sm:inline-block sm:ml-2">
-              Personal
-            </span>
-          </TabsTrigger>
-          
-          {isProfessor && (
-            <TabsTrigger value="instructor">
-              <GraduationCap className="w-4 h-4" />
-              <span className="hidden sm:inline-block sm:ml-2">
-                Instructor
-              </span>
+        <Tabs defaultValue="personal" className="space-y-6">
+          <TabsList
+            className={`grid w-full ${getGridColsClass()} bg-white/80 backdrop-blur-sm h-auto p-1 gap-1`}
+          >
+            <TabsTrigger value="personal">
+              <User className="w-4 h-4" />
+              <span className="hidden sm:inline-block sm:ml-2">Personal</span>
             </TabsTrigger>
-          )}
 
-          {!isAdmin && (
-            <TabsTrigger value="appeals">
-              <FileClock className="w-4 h-4" />
-              <span className="hidden sm:inline-block sm:ml-2">
-                Solicitudes
-              </span>
-            </TabsTrigger>
-          )}
+            {isProfessor && (
+              <TabsTrigger value="instructor">
+                <GraduationCap className="w-4 h-4" />
+                <span className="hidden sm:inline-block sm:ml-2">
+                  Instructor
+                </span>
+              </TabsTrigger>
+            )}
 
-          <TabsTrigger value="security">
-            <Shield className="w-4 h-4" />
-            <span className="hidden sm:inline-block sm:ml-2">Seguridad</span>
-          </TabsTrigger>
-        </TabsList>
+            {!isAdmin && (
+              <TabsTrigger value="appeals">
+                <FileClock className="w-4 h-4" />
+                <span className="hidden sm:inline-block sm:ml-2">
+                  Solicitudes
+                </span>
+              </TabsTrigger>
+            )}
 
-        <TabsContent value="personal">
-          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
-            <CardHeader>
-              <div className="flex items-start justify-between">
-                <div className="space-y-1.5">
-                  <CardTitle className="flex items-center space-x-2">
-                    <User className="w-5 h-5 text-blue-600" />
-                    <span>Información Personal</span>
-                  </CardTitle>
-                  <CardDescription>
-                    Actualiza tu información personal y datos de contacto
-                  </CardDescription>
+            <TabsTrigger value="security">
+              <Shield className="w-4 h-4" />
+              <span className="hidden sm:inline-block sm:ml-2">Seguridad</span>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="personal">
+            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1.5">
+                    <CardTitle className="flex items-center space-x-2">
+                      <User className="w-5 h-5 text-blue-600" />
+                      <span>Información Personal</span>
+                    </CardTitle>
+                    <CardDescription>
+                      Actualiza tu información personal y datos de contacto
+                    </CardDescription>
+                  </div>
+                  {!isEditing && (
+                    <Button onClick={() => setIsEditing(true)}>
+                      <Edit3 className="w-4 h-4 mr-2" />
+                      Editar
+                    </Button>
+                  )}
                 </div>
-                {!isEditing && (
-                  <Button onClick={() => setIsEditing(true)}>
-                    <Edit3 className="w-4 h-4 mr-2" />
-                    Editar
-                  </Button>
-                )}
-              </div>
-            </CardHeader>
-            <CardContent>
-              <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-                <div className="flex items-center space-x-4 sm:space-x-6">
-                  <div className="relative flex-shrink-0">
-                    <Avatar
-                      className={`h-20 w-20 sm:h-24 sm:w-24 ${
-                        isEditing ? "cursor-pointer" : ""
-                      }`}
-                      onClick={handleAvatarClick}
-                    >
-                      <AvatarImage
-                        src={imagePreview || undefined}
-                        alt={user.name}
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                  <div className="flex items-center space-x-4 sm:space-x-6">
+                    <div className="relative flex-shrink-0">
+                      <Avatar
+                        className={`h-20 w-20 sm:h-24 sm:w-24 ${
+                          isEditing ? 'cursor-pointer' : ''
+                        }`}
+                        onClick={handleAvatarClick}
+                      >
+                        <AvatarImage
+                          src={imagePreview || undefined}
+                          alt={user.name}
+                        />
+                        <AvatarFallback className="bg-gradient-to-br from-blue-400 to-green-400 text-white text-3xl font-bold">
+                          {user.name.charAt(0)}
+                          {user.surname.charAt(0)}
+                        </AvatarFallback>
+                      </Avatar>
+                      {isEditing && (
+                        <div className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center text-white pointer-events-none">
+                          <Camera className="w-4 h-4" />
+                        </div>
+                      )}
+                      <input
+                        type="file"
+                        ref={fileInputRef}
+                        onChange={handleFileChange}
+                        className="hidden"
+                        accept="image/*"
                       />
-                      <AvatarFallback className="bg-gradient-to-br from-blue-400 to-green-400 text-white text-3xl font-bold">
-                        {user.name.charAt(0)}
-                        {user.surname.charAt(0)}
-                      </AvatarFallback>
-                    </Avatar>
-                    {isEditing && (
-                      <div className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center text-white pointer-events-none">
-                        <Camera className="w-4 h-4" />
-                      </div>
-                    )}
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      onChange={handleFileChange}
-                      className="hidden"
-                      accept="image/*"
-                    />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-xl font-semibold text-slate-800 truncate">
-                      {user.name} {user.surname}
-                    </h3>
-                    <p className="text-slate-600 mb-2 truncate">{user.mail}</p>
-                    <RoleBadge role={user.role} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <h3 className="text-xl font-semibold text-slate-800 truncate">
+                        {user.name} {user.surname}
+                      </h3>
+                      <p className="text-slate-600 mb-2 truncate">
+                        {user.mail}
+                      </p>
+                      <RoleBadge role={user.role} />
+                    </div>
                   </div>
-                </div>
 
-                <div className="pt-6 border-t">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <ProfileField
-                      id="name"
-                      label="Nombre"
-                      isEditing={isEditing}
-                      icon={<User className="h-4 w-4" />}
-                      {...register("name")}
-                      error={errors.name?.message}
-                      value={formData.name}
-                    />
-                    <ProfileField
-                      id="surname"
-                      label="Apellido"
-                      isEditing={isEditing}
-                      icon={<User className="h-4 w-4" />}
-                      {...register("surname")}
-                      error={errors.surname?.message}
-                      value={formData.surname}
-                    />
-                    <ProfileField
-                      id="mail"
-                      label="Correo Electrónico"
-                      type="email"
-                      isEditing={isEditing}
-                      icon={<Mail className="h-4 w-4" />}
-                      {...register("mail")}
-                      error={errors.mail?.message}
-                      value={formData.mail}
-                    />
-                    <ProfileField
-                      id="phone"
-                      label="Teléfono"
-                      isEditing={isEditing}
-                      icon={<Phone className="h-4 w-4" />}
-                      {...register("phone")}
-                      error={errors.phone?.message}
-                      value={formData.phone}
-                    />
-                    <ProfileField
-                      id="location"
-                      label="Ubicación"
-                      isEditing={isEditing}
-                      icon={<MapPin className="h-4 w-4" />}
-                      {...register("location")}
-                      error={errors.location?.message}
-                      value={formData.location}
-                    />
-                    <ProfileField
-                      id="birthdate"
-                      label="Fecha de Nacimiento"
-                      type="date"
-                      isEditing={isEditing}
-                      icon={<Calendar className="h-4 w-4" />}
-                      {...register("birthdate")}
-                      error={errors.birthdate?.message}
-                      value={formData.birthdate}
-                    />
-                  </div>
-                </div>
-                {updateError && (
-                  <p className="text-sm text-red-500 text-center">
-                    {isAxiosError(updateError)
-                      ? updateError.response?.data?.errors?.mail ||
-                        "No se pudo actualizar el perfil."
-                      : "Ocurrió un error inesperado."}
-                  </p>
-                )}
-                {isEditing && (
-                  <div className="flex justify-end space-x-3 pt-4">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => {
-                        setIsEditing(false);
-                        reset();
-                        setImagePreview(user.profile_picture || null);
-                        setImageFile(null);
-                      }}
-                    >
-                      Cancelar
-                    </Button>
-                    <Button
-                      type="submit"
-                      isLoading={isUpdating}
-                      className="bg-green-500 hover:bg-green-600"
-                    >
-                      <Save className="w-4 h-4 mr-2" />
-                      Guardar Cambios
-                    </Button>
+                  <div className="pt-6 border-t">
+                    <div className="grid md:grid-cols-2 gap-6">
+                      <ProfileField
+                        id="name"
+                        label="Nombre"
+                        isEditing={isEditing}
+                        icon={<User className="h-4 w-4" />}
+                        {...register('name')}
+                        error={errors.name?.message}
+                        value={formData.name}
+                      />
+                      <ProfileField
+                        id="surname"
+                        label="Apellido"
+                        isEditing={isEditing}
+                        icon={<User className="h-4 w-4" />}
+                        {...register('surname')}
+                        error={errors.surname?.message}
+                        value={formData.surname}
+                      />
+                      <ProfileField
+                        id="mail"
+                        label="Correo Electrónico"
+                        type="email"
+                        isEditing={isEditing}
+                        icon={<Mail className="h-4 w-4" />}
+                        {...register('mail')}
+                        error={errors.mail?.message}
+                        value={formData.mail}
+                      />
+                      <ProfileField
+                        id="phone"
+                        label="Teléfono"
+                        isEditing={isEditing}
+                        icon={<Phone className="h-4 w-4" />}
+                        {...register('phone')}
+                        error={errors.phone?.message}
+                        value={formData.phone}
+                      />
+                      <ProfileField
+                        id="location"
+                        label="Ubicación"
+                        isEditing={isEditing}
+                        icon={<MapPin className="h-4 w-4" />}
+                        {...register('location')}
+                        error={errors.location?.message}
+                        value={formData.location}
+                      />
+                      <ProfileField
+                        id="birthdate"
+                        label="Fecha de Nacimiento"
+                        type="date"
+                        isEditing={isEditing}
+                        icon={<Calendar className="h-4 w-4" />}
+                        {...register('birthdate')}
+                        error={errors.birthdate?.message}
+                        value={formData.birthdate}
+                      />
+                    </div>
                   </div>
-                )}
-              </form>
-            </CardContent>
-          </Card>
-        </TabsContent>
-        {isProfessor && (
-          <TabsContent value="instructor">
-            <ProfessorProfileTab />
+                  {updateError && (
+                    <p className="text-sm text-red-500 text-center">
+                      {isAxiosError(updateError)
+                        ? updateError.response?.data?.errors?.mail ||
+                          'No se pudo actualizar el perfil.'
+                        : 'Ocurrió un error inesperado.'}
+                    </p>
+                  )}
+                  {isEditing && (
+                    <div className="flex justify-end space-x-3 pt-4">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                          setIsEditing(false);
+                          reset();
+                          setImagePreview(user.profile_picture || null);
+                          setImageFile(null);
+                        }}
+                      >
+                        Cancelar
+                      </Button>
+                      <Button
+                        type="submit"
+                        isLoading={isUpdating}
+                        className="bg-green-500 hover:bg-green-600"
+                      >
+                        <Save className="w-4 h-4 mr-2" />
+                        Guardar Cambios
+                      </Button>
+                    </div>
+                  )}
+                </form>
+              </CardContent>
+            </Card>
           </TabsContent>
-        )}
+          {isProfessor && (
+            <TabsContent value="instructor">
+              <ProfessorProfileTab />
+            </TabsContent>
+          )}
 
-        {!isAdmin && (
-          <TabsContent value="appeals">
+          {!isAdmin && (
+            <TabsContent value="appeals">
+              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <FileClock className="w-5 h-5 text-blue-600" />
+                    <span>Historial de Solicitudes</span>
+                  </CardTitle>
+                  <CardDescription>
+                    Tus aplicaciones para convertirte en profesor y su estado
+                    actual.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <StudentAppealsHistory />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          )}
+
+          <TabsContent value="security">
             <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
               <CardHeader>
-                <CardTitle className="flex items-center space-x-2">
-                  <FileClock className="w-5 h-5 text-blue-600" />
-                  <span>Historial de Solicitudes</span>
+                <CardTitle className="flex items-center space-x-2 mb-1">
+                  <Shield className="w-5 h-5 text-blue-600" />
+                  <span>Seguridad de la Cuenta</span>
                 </CardTitle>
                 <CardDescription>
-                  Tus aplicaciones para convertirte en profesor y su estado actual.
+                  Gestiona la seguridad de tu cuenta y contraseña
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <StudentAppealsHistory />
+                <div className="flex items-center justify-between p-4 border border-slate-200 rounded-lg">
+                  <div className="flex items-center space-x-3">
+                    <Key className="w-5 h-5 text-slate-600" />
+                    <div>
+                      <p className="font-medium text-slate-800">Contraseña</p>
+                      <p className="text-sm text-slate-600">
+                        Haz click para ir a la página de recuperación.
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent"
+                    onClick={handlePasswordChange}
+                  >
+                    Cambiar Contraseña
+                  </Button>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
-        )}
-
-        <TabsContent value="security">
-          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
-            <CardHeader>
-              <CardTitle className="flex items-center space-x-2 mb-1">
-                <Shield className="w-5 h-5 text-blue-600" />
-                <span>Seguridad de la Cuenta</span>
-              </CardTitle>
-              <CardDescription>
-                Gestiona la seguridad de tu cuenta y contraseña
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center justify-between p-4 border border-slate-200 rounded-lg">
-                <div className="flex items-center space-x-3">
-                  <Key className="w-5 h-5 text-slate-600" />
-                  <div>
-                    <p className="font-medium text-slate-800">Contraseña</p>
-                    <p className="text-sm text-slate-600">
-                      Haz click para ir a la página de recuperación.
-                    </p>
-                  </div>
-                </div>
-                <Button
-                  variant="outline"
-                  className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent"
-                  onClick={handlePasswordChange}
-                >
-                  Cambiar Contraseña
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
+        </Tabs>
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}