diff --git a/apps/web/app/(dashboard)/configuracion/page.tsx b/apps/web/app/(dashboard)/configuracion/page.tsx
new file mode 100644
index 0000000..cfd5835
--- /dev/null
+++ b/apps/web/app/(dashboard)/configuracion/page.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { Header } from '@/components/layouts/header';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useThemeStore } from '@/stores/theme-store';
+import { useAuthStore } from '@/stores/auth-store';
+import { themes, type ThemeName } from '@/themes';
+import { Check, Palette, User, Building } from 'lucide-react';
+
+const themeOptions: { name: ThemeName; label: string; description: string }[] = [
+  { name: 'light', label: 'Light', description: 'Tema claro profesional' },
+  { name: 'vibrant', label: 'Vibrant', description: 'Colores vivos y modernos' },
+  { name: 'corporate', label: 'Corporate', description: 'Diseño empresarial denso' },
+  { name: 'dark', label: 'Dark', description: 'Modo oscuro con acentos neón' },
+];
+
+export default function ConfiguracionPage() {
+  const { theme, setTheme } = useThemeStore();
+  const { user } = useAuthStore();
+
+  return (
+    <>
+      <Header title="Configuración" />
+      <main className="p-6 space-y-6">
+        {/* User Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <User className="h-4 w-4" />
+              Información del Usuario
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <p className="text-sm text-muted-foreground">Nombre</p>
+                <p className="font-medium">{user?.nombre}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Email</p>
+                <p className="font-medium">{user?.email}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Rol</p>
+                <p className="font-medium capitalize">{user?.role}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Company Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Building className="h-4 w-4" />
+              Información de la Empresa
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <p className="text-sm text-muted-foreground">Empresa</p>
+                <p className="font-medium">{user?.tenantName}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Theme Selection */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Palette className="h-4 w-4" />
+              Tema Visual
+            </CardTitle>
+            <CardDescription>
+              Elige el tema que mejor se adapte a tu preferencia
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+              {themeOptions.map((option) => (
+                <button
+                  key={option.name}
+                  onClick={() => setTheme(option.name)}
+                  className={`relative p-4 rounded-lg border-2 text-left transition-all ${
+                    theme === option.name
+                      ? 'border-primary bg-primary/5'
+                      : 'border-border hover:border-primary/50'
+                  }`}
+                >
+                  {theme === option.name && (
+                    <div className="absolute top-2 right-2">
+                      <Check className="h-4 w-4 text-primary" />
+                    </div>
+                  )}
+                  <div
+                    className="h-20 rounded-md mb-3"
+                    style={{
+                      background: `hsl(${themes[option.name].cssVars['--primary']})`,
+                    }}
+                  />
+                  <p className="font-medium">{option.label}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {option.description}
+                  </p>
+                </button>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </main>
+    </>
+  );
+}