diff --git a/package-lock.json b/package-lock.json
index f95dfbc..0921195 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "bootstrap": "^5.3.6",
         "bootstrap-icons": "^1.13.1",
         "framer-motion": "^12.18.1",
+        "jwt-decode": "^4.0.0",
         "next": "15.3.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -1193,6 +1194,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1ca78ab..fe7d66a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.6",
     "bootstrap-icons": "^1.13.1",
     "framer-motion": "^12.18.1",
+    "jwt-decode": "^4.0.0",
     "next": "15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/src/app/(auth)/page.tsx b/src/app/(auth)/page.tsx
index 5368192..91b4047 100644
--- a/src/app/(auth)/page.tsx
+++ b/src/app/(auth)/page.tsx
@@ -10,61 +10,38 @@ import { motion } from "framer-motion";
 
 // Estilos CSS adicionales para el input group
 const inputGroupStyles = `
-  .auth-page .input-group {
-    display: flex !important;
-    align-items: stretch !important;
-  }
-  
-  .auth-page .input-group .form-control {
-    border-right: none !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-  
-  .auth-page .input-group .btn {
-    border-left: none !important;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    padding: 0.375rem 0.75rem !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    min-width: 40px !important;
-  }
+
 `;
 
-
 export default function Page() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const router = useRouter();
 
   const handleLogin = async () => {
     try {
-      const response = await axios.post('http://localhost:4000/login', {
+      const response = await axios.post("http://localhost:4000/login", {
         email: email,
         password: password,
       });
 
       const token = response.data.access_token;
-      localStorage.setItem('token', token);
+      localStorage.setItem("token", token);
 
       // Disparar evento personalizado para notificar cambio de token
-      window.dispatchEvent(new Event('tokenChanged'));
+      window.dispatchEvent(new Event("tokenChanged"));
 
       // Limpiar formulario
-      setEmail('');
-      setPassword('');
-      setError('');
-      
+      setEmail("");
+      setPassword("");
+      setError("");
+
       // Opcional: mostrar mensaje de éxito
-      alert('Login exitoso. Ahora puedes acceder a Carga y Visualización.');
+      alert("Login exitoso. Ahora puedes acceder a Carga y Visualización.");
     } catch (err: any) {
       const message =
-        err.response?.data?.message ||
-        err.message ||
-        'Error al iniciar sesión';
+        err.response?.data?.message || err.message || "Error al iniciar sesión";
       setError(message);
     }
   };
@@ -72,49 +49,46 @@ export default function Page() {
   return (
     <>
       {/* Inyectar estilos CSS */}
-      <style dangerouslySetInnerHTML={{ __html: inputGroupStyles }} />
-      
+
       <motion.main
         className="auth-page flex-fill flex-grow-1 d-flex flex-column justify-content-center align-items-center"
         initial={{ y: 50, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0, duration: .5 }}
+        transition={{ delay: 0, duration: 0.5 }}
       >
-      <h2 className="text-dorado">Bienvenido al sistema de</h2>
-      <h1 className="text-azul">Carga Masiva</h1>
-      <SimpleInput
-        label="Usuario"
-        className={{
-          container: "w-300px mb-3",
-        }}
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <PasswordInput
-        label="Contraseña"
-        className={{
-          container: "w-300px mb-3",
-          input: "form-control",
-          button: "btn btn-outline-secondary"
-        }}
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      
-      {error && (
-        <p className="text-danger text-center mb-3">{error}</p>
-      )}
+        <h2 className="text-dorado">Bienvenido al sistema de</h2>
+        <h1 className="text-azul">Carga Masiva</h1>
+        <SimpleInput
+          label="Usuario"
+          className={{
+            container: "w-300px mb-3",
+          }}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <PasswordInput
+          label="Contraseña"
+          className={{
+            container: "w-300px mb-3",
+            input: "form-control",
+            button: "btn btn-outline-secondary",
+          }}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
 
-      <div className="d-flex gap-3">
-        <Button onClick={handleLogin}>Iniciar Sesión</Button>
-      {/*   <Button 
+        {error && <p className="text-danger text-center mb-3">{error}</p>}
+
+        <div className="d-flex gap-3">
+          <Button onClick={handleLogin}>Iniciar Sesión</Button>
+          {/*   <Button 
           onClick={() => router.replace("/visualizacion")}
           className="btn-success"
         >
           Iniciar Sin Contraseña
         </Button> */}
-      </div>
+        </div>
       </motion.main>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/carga/page.tsx b/src/app/carga/page.tsx
index 1dc4dd6..74e27ae 100644
--- a/src/app/carga/page.tsx
+++ b/src/app/carga/page.tsx
@@ -88,22 +88,8 @@ export default function Dashboard() {
   if (loading) return <p>Cargando...</p>;
 
   return (
-    <main
-      className="roboto"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <div
-        className="flex gap-4 flex-wrap mb-6"
-        style={{
-          padding: "2rem",
-          width: "100%",
-        }}
-      >
+    <main>
+      <div className="flex gap-4 flex-wrap mb-6">
         <h2 className="text-xl font-semibold mb-4">Fuentes</h2>
         <div
           style={{
@@ -131,7 +117,7 @@ export default function Dashboard() {
         </div>
 
         <h2 className="text-xl font-semibold mt-6 mb-4">Descarga de Datos</h2>
-        <Button onClick={handleDownload} className="mb-3">
+        <Button onClick={handleDownload} className="mb-3" variant="azul">
           Descarga Base de Datos
         </Button>
       </div>
diff --git a/src/app/landing/IconCircle.css b/src/app/landing/IconCircle.css
index 47adb46..99b933b 100644
--- a/src/app/landing/IconCircle.css
+++ b/src/app/landing/IconCircle.css
@@ -7,32 +7,31 @@
   position: relative;
   width: 300px;
   height: 300px;
-  margin: 2rem auto;
-  border-radius: 50%;
+  margin: auto;
 }
 
 .central-icon {
   position: absolute;
-  top: 40%;
-  left: 40%;
-  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important;
   font-size: 2rem;
   background: white;
-  padding: 1rem;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1;
-}
+  width: 60px;
+  height: 60px;
 
-.central-icon i {
-  color: #000; /* Negro para el icono central */
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .orbiting-container {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 0;
   height: 0;
 }
diff --git a/src/app/landing/IconCircle.tsx b/src/app/landing/IconCircle.tsx
index 2d8ea86..4809bd8 100644
--- a/src/app/landing/IconCircle.tsx
+++ b/src/app/landing/IconCircle.tsx
@@ -1,92 +1,92 @@
 // IconCircle.tsx
-'use client';
-import React from 'react';
-import { motion } from 'framer-motion';
-import './IconCircle.css';
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import "./IconCircle.css";
 
 const iconClasses = [
-    'bi bi-graph-up',
-    'bi bi-lightning-fill',
-    'bi bi-currency-exchange',
-    'bi bi-globe2',
-    'bi bi-bar-chart-line-fill',
-    'bi bi-arrow-left-right',
-    'bi bi-bank',
-    'bi bi-boxes',
+  "bi bi-graph-up",
+  "bi bi-lightning-fill",
+  "bi bi-currency-exchange",
+  "bi bi-globe2",
+  "bi bi-bar-chart-line-fill",
+  "bi bi-arrow-left-right",
+  "bi bi-bank",
+  "bi bi-boxes",
 ];
 
 interface IconCircleProps {
-    delay?: number;
+  delay?: number;
 }
 
 const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
-    return (
-        <div className="icon-circle">
-        {/* Icono central fijo */}
-        <motion.div
-            className="central-icon"
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ duration: 1, delay }}
-        >
-            <i className="bi bi-stars"></i>
-        </motion.div>
+  return (
+    <div className="icon-circle">
+      {/* Icono central fijo */}
+      <motion.div
+        className="central-icon"
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 1, delay }}
+      >
+        <i className="bi bi-stars"></i>
+      </motion.div>
 
-        {/* Contenedor que orbita con los iconos flotantes */}
-        <motion.div
-            className="orbiting-container"
-            animate={{ rotate: 360 }}
-            transition={{
-                duration: 30,
-                repeat: Infinity,
-                ease: "linear"
-            }}
-        >
-            {iconClasses.map((iconClass, i) => {
-                const angle = (i * 45) * (Math.PI / 180); // Convertir a radianes
-                const radius = 130;
-                const x = Math.cos(angle) * radius;
-                const y = Math.sin(angle) * radius;
-                
-                return (
-                    <motion.div
-                    key={i}
-                    className="floating-icon"
-                    style={{
-                        left: x,
-                        top: y,
-                    }}
-                    initial={{
-                        scale: 0,
-                        opacity: 0,
-                    }}
-                    animate={{
-                        scale: 1,
-                        opacity: 1,
-                    }}
-                    transition={{
-                        delay: delay + 0.5 + i * 0.1,
-                        duration: 0.5,
-                        type: 'spring',
-                    }}
-                    >
-                    <motion.i 
-                        className={iconClass}
-                        animate={{ 
-                            rotate: 360 
-                        }}
-                        transition={{
-                            duration: 20 + i * 2,
-                            repeat: Infinity,
-                            ease: "linear"
-                        }}
-                    ></motion.i>
-                    </motion.div>
-                );
-            })}
-        </motion.div>
-        </div>
-    );
+      {/* Contenedor que orbita con los iconos flotantes */}
+      <motion.div
+        className="orbiting-container"
+        animate={{ rotate: 360 }}
+        transition={{
+          duration: 30,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      >
+        {iconClasses.map((iconClass, i) => {
+          const angle = i * 45 * (Math.PI / 180); // Convertir a radianes
+          const radius = 130;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+
+          return (
+            <motion.div
+              key={i}
+              className="floating-icon"
+              style={{
+                left: x,
+                top: y,
+              }}
+              initial={{
+                scale: 0,
+                opacity: 0,
+              }}
+              animate={{
+                scale: 1,
+                opacity: 1,
+              }}
+              transition={{
+                delay: delay + 0.5 + i * 0.1,
+                duration: 0.5,
+                type: "spring",
+              }}
+            >
+              <motion.i
+                className={iconClass}
+                animate={{
+                  rotate: 360,
+                }}
+                transition={{
+                  duration: 20 + i * 2,
+                  repeat: Infinity,
+                  ease: "linear",
+                }}
+              ></motion.i>
+            </motion.div>
+          );
+        })}
+      </motion.div>
+    </div>
+  );
 };
 
 export default IconCircle;
diff --git a/src/app/landing/globals.css b/src/app/landing/globals.css
index 52cbd2b..caffb32 100644
--- a/src/app/landing/globals.css
+++ b/src/app/landing/globals.css
@@ -3,120 +3,107 @@
   margin: none;
 }
 
-  /* Fondo general y tipografía */
-  body {
-    margin: 0;
-    font-family: 'Segoe UI', sans-serif;
-    background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%));
+/* Fondo general y tipografía */
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%));
 
-       /*  background: radial-gradient(circle at center, #f8f4ff, hsl(217, 100%, 89%)); */
+  /*  background: radial-gradient(circle at center, #f8f4ff, hsl(217, 100%, 89%)); */
 
-    color: #1a1a1a;
-    text-align: center;
-    
-  }
+  color: #1a1a1a;
+  text-align: center;
+}
 
-  /* Header */
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.5rem 2rem;
-    background: transparent;
-    font-weight: bold;
-  }
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background: transparent;
+  font-weight: bold;
+}
 
-  header div:first-child {
-    font-size: 1.5rem;
-    color: #003d79;
-  }
+header div:first-child {
+  font-size: 1.5rem;
+  color: #003d79;
+}
 
-  .nav-links {
-    background-color: white;
-    padding: 10px;
-    border-radius: 50px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
-    display: flex;
-    gap: 1rem; /* espacio entre los <a> */
-  }
+.nav-links {
+  background-color: white;
+  padding: 10px;
+  border-radius: 50px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
+  display: flex;
+  gap: 1rem; /* espacio entre los <a> */
+}
 
-  header a {
-    margin: 0 0.75rem;
-    text-decoration: none;
-    color: #333;
-    font-weight: 500;
-  }
+header a {
+  margin: 0 0.75rem;
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
 
-  header button {
-    margin-left: 0.5rem;
-    padding: 0.4rem 1rem;
-    border-radius: 20px;
-    border: none;
-    font-weight: 600;
-    cursor: pointer;
-  }
+header button {
+  margin-left: 0.5rem;
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
 
-  header button:first-of-type {
-    background-color: white;
-    border: 1px solid #ccc;
-    color: #555;
-  }
+header button:first-of-type {
+  background-color: white;
+  border: 1px solid #ccc;
+  color: #555;
+}
 
-  header button:last-of-type {
-    background-color: #0033ff;
-    color: white;
-  }
+header button:last-of-type {
+  background-color: #0033ff;
+  color: white;
+}
 
-  /* Texto principal */
-  strong {
-    display: block;
-    font-size: 2.5rem;
-    margin: 2rem 0 1rem;
-  }
+/* Texto principal */
+strong {
+  display: block;
+  font-size: 2.5rem;
+  margin: 2rem 0 1rem;
+}
 
-  p {
-    font-size: 1rem;
-    color: #555;
-    /* max-width: 600px; */
-    margin: 0 auto 1rem;
-  }
+p {
+  font-size: 1rem;
+  color: #555;
+  /* max-width: 600px; */
+  margin: 0 auto 1rem;
+}
 
-  /* Botón principal */
-  div > button {
-    margin-top: 1rem;
-    background-color: #003d79;
-    color: white;
-    padding: 0.7rem 2rem;
-    border: none;
-    border-radius: 25px;
-    font-size: 1rem;
-    cursor: pointer;
-  }
+/* Botón principal */
+div > button {
+  background-color: #003d79;
+  color: white;
+  padding: 0.7rem 2rem;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  cursor: pointer;
+}
 
-  /* Texto de "years of reliability" */
-  div > div {
-   /*  display: flex; */
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
+div > div p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #888;
+}
 
-  div > div p {
-    margin: 0;
-    font-size: 0.9rem;
-    color: #888;
-  }
-
-  
-
-  /* Scroll hint */
-  body > p:last-of-type {
-    margin-top: 2rem;
-    font-size: 0.85rem;
-    color: #aaa;
-    letter-spacing: 1px;
-  }
+/* Scroll hint */
+body > p:last-of-type {
+  margin-top: 2rem;
+  font-size: 0.85rem;
+  color: #aaa;
+  letter-spacing: 1px;
+}
 
 .circle-background {
   margin-top: 0;
@@ -125,7 +112,7 @@
   top: none;
   left: none;
   width: 100vw;
-  height: 100vh; 
+  height: 100vh;
   z-index: -1; /* para que esté detrás de todo */
   pointer-events: none; /* no interfiere con el contenido */
   display: flex;
@@ -142,11 +129,6 @@
   backdrop-filter: blur(2px);
 }
 
-
-
-
-
-
 .invert {
   filter: invert(1);
-}
\ No newline at end of file
+}
diff --git a/src/app/landing/landing_body.tsx b/src/app/landing/landing_body.tsx
index 3f3ea96..8115236 100644
--- a/src/app/landing/landing_body.tsx
+++ b/src/app/landing/landing_body.tsx
@@ -3,11 +3,15 @@
 
 import { motion } from "framer-motion";
 import IconCircle from "./IconCircle";
+import Button from "@/components/button";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 export default function LandingBody() {
+  const router = useRouter();
   return (
     <motion.main
-      className="flex-fill"
+      className="overflow-hidden"
       initial={{ y: 50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ delay: 1, duration: 1 }}
@@ -16,15 +20,19 @@ export default function LandingBody() {
 
       <strong>Servicios de soporte técnico PCPUMA</strong>
       <p>
-        Accede a PC PUMA Conecta para reportes especializados, módulos de soporte físico 
-        en campus, servicio de correo institucional y herramientas de gestión académica. 
-       
+        Accede a PC PUMA Conecta para reportes especializados, módulos de
+        soporte físico en campus, servicio de correo institucional y
+        herramientas de gestión académica.
       </p>
 
       <div>
-        <button onClick={() => window.open('https://www.acatlan.unam.mx/pcpuma/', '_blank')}>
+        <Link
+          href="https://www.acatlan.unam.mx/pcpuma/"
+          target="_blank"
+          className="btn btn-azul btn-lg rounded-pill mt-3"
+        >
           Conoce PCPUMA
-        </button>
+        </Link>
         <div>
           <i></i>
         </div>
diff --git a/src/app/landing/new_header.tsx b/src/app/landing/new_header.tsx
index 6cda79b..b58e6bb 100644
--- a/src/app/landing/new_header.tsx
+++ b/src/app/landing/new_header.tsx
@@ -3,49 +3,31 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { PageKey } from "../page";
 
-
-
-interface HeaderProps {
-  onNavClick: (page: any) => void;
+interface HeaderItem {
+  label: string;
+  page?: PageKey;
+  onClick?: () => void;
 }
 
+interface HeaderProps {
+  items: HeaderItem[];
+  onClickItem: (page: PageKey) => void;
+}
 
+export default function Header({ items, onClickItem }: HeaderProps) {
+  const [currentPage, setCurrentPage] = useState<PageKey>("landing");
 
-export default function Header({ onNavClick }: HeaderProps) {
-  const [hasToken, setHasToken] = useState(false);
-
-  useEffect(() => {
-    // Función para verificar token
-    const checkToken = () => {
-      const token = localStorage.getItem('token');
-      setHasToken(!!token);
-    };
-
-    // Verificar token al montar
-    checkToken();
-
-    // Escuchar cambios en localStorage
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === 'token') {
-        checkToken();
-      }
-    };
-
-    // Escuchar evento personalizado para cambios de token
-    const handleTokenChange = () => {
-      checkToken();
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-    window.addEventListener('tokenChanged', handleTokenChange);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-      window.removeEventListener('tokenChanged', handleTokenChange);
-    };
-  }, []);
+  const handleItemClick = (item: HeaderItem) => {
+    if (item.onClick) {
+      item.onClick();
+    } else if (item.page) {
+      setCurrentPage(item.page);
+      onClickItem(item.page);
+    }
+  };
 
   return (
     <motion.header
@@ -69,33 +51,22 @@ export default function Header({ onNavClick }: HeaderProps) {
         </Link>
       </div>
 
-      {/*  <div className="nav-links">
-        <a href="">Trading</a>
-        <a href="">Platforms</a>
-        <a href="">Tools & Education</a>
-        <a href="">About Us</a>
-        <a href="">Partners</a>
-         <a href="">Login</a>
-      </div> */}
-
-
-
       <nav className="nav-links">
-        {[
-          { label: "Inicio", page: "landing" },
-          { label: "Login", page: "login", isLogin: true },
-          { label: "Consulta", page: "consulta" },
-
-          ...(hasToken ? [
-            { label: "Carga", page: "carga" },
-
-          ] : [])
-        ].map((item) => (
+        {items.map((item) => (
           <a
-            key={item.page}
-            onClick={() => onNavClick(item.page)}
-            className={item.isLogin ? "text-dorado fw-bold" : ""}
-            style={item.isLogin ? { color: '#fbbf24', fontWeight: 'bold' } : {}}
+            key={item.label}
+            onClick={() => handleItemClick(item)}
+            className={
+              item.page && currentPage === item.page
+                ? "text-dorado fw-bold"
+                : ""
+            }
+            style={{
+              cursor: "pointer",
+              ...(item.page && currentPage === item.page
+                ? { color: "#fbbf24", fontWeight: "bold" }
+                : {}),
+            }}
           >
             {item.label}
           </a>
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
index 43edee9..8a02c6c 100644
--- a/src/app/landing/page.tsx
+++ b/src/app/landing/page.tsx
@@ -1,14 +1,8 @@
 "use client";
 
 import "./globals.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
-import IconCircle from "./IconCircle";
 import { motion } from "framer-motion";
-import Image from "next/image";
-import Link from "next/link";
 
-
-import Header from "./new_header"; // ajusta la ruta si estás en otra carpeta
 import Footer from "@/components/layout/footer";
 import LandingBody from "./landing_body";
 import { useState } from "react";
@@ -16,26 +10,20 @@ import Page from "../(auth)/page";
 import Dashboard from "../carga/page";
 import Consulta from "../visualizacion/page";
 
-
 type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
 
-
 const Home = () => {
-
-
   const [page, setPage] = useState<PageKey>("landing");
 
-
-
-
-
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 1 }}
-      className="page-wrapper d-flex flex-column min-vh-100"
+      className="min-vh-100 d-flex flex-column"
     >
+      {/* <Header onNavClick={setPage} /> */}
+
       <div className="circle-background">
         {[150, 300, 450, 600, 900].map((size, i) => (
           <motion.div
@@ -44,7 +32,7 @@ const Home = () => {
             initial={{ scale: 0 }}
             animate={{ scale: 3 }}
             transition={{
-              delay: 1 + i * 0.3, // empieza después de la animación del texto
+              delay: 1 + i * 0.3,
               duration: 2,
               ease: "easeOut",
             }}
@@ -56,37 +44,22 @@ const Home = () => {
         ))}
       </div>
 
-      {/* ⬇️ Tu contenido principal */}
-      <Header onNavClick={setPage} />
+      <div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
+        {/* renderiza el body según el estado `page` */}
+        {page === "landing" && <LandingBody />}
+        {page === "login" && <Page />}
+        {page === "carga" && <Dashboard />}
+        {page === "consulta" && <Consulta />}
+      </div>
 
-         {/*  <LandingBody />*/}
-               {/* renderiza el body según el estado `page` */}
-      {page === "landing" && <LandingBody />}
-     {page === "login"   && <Page />}
-       {page === "carga"   && <Dashboard />}
+      {/* <Login />
 
-        {page === "consulta"   && <Consulta />}
+      <contenidoAdmin1 />
+      <contenidoWorker />
+      <contenidoPublico /> */}
 
-
-
-        {/*   <Login />
-
-
-          <contenidoAdmin1 />
-          <contenidoWorker />
-          <contenidoPublico />
- */}
-          
-
-
-
-
-
-
-
-        <Footer></Footer>
+      <Footer />
     </motion.div>
-  
   );
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9b5317a..32f2e23 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,15 +1,8 @@
-import type { Metadata } from "next";
-import { Roboto } from "next/font/google";
-
-import 'bootstrap-icons/font/bootstrap-icons.css';
-import '@/styles/sass/bootstrap.scss';
+'use client';
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "@/styles/sass/bootstrap.scss";
 import BootstrapClient from "@/components/bootstrap-client";
-
-
-const roboto = Roboto({
-  weight: ["100", "300", "400", "500", "700", "900"],
-  subsets: ["latin"],
-});
+import { motion } from "framer-motion";
 
 export default function RootLayout({
   children,
@@ -18,9 +11,35 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body >
-      
-        {children}
+      <body className="overflow-hidden">
+        <BootstrapClient />
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+          className="d-flex flex-column min-vh-100"
+        >
+          <div className="circle-background">
+            {[150, 300, 450, 600, 900].map((size, i) => (
+              <motion.div
+                key={i}
+                className="circle"
+                initial={{ scale: 0 }}
+                animate={{ scale: 3 }}
+                transition={{
+                  delay: 1 + i * 0.3, // empieza después de la animación del texto
+                  duration: 2,
+                  ease: "easeOut",
+                }}
+                style={{
+                  width: size,
+                  height: size,
+                }}
+              />
+            ))}
+          </div>
+          {children}
+        </motion.div>
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1095263..c124b20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,93 +1,62 @@
 "use client";
 
 import "./landing/globals.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
-import IconCircle from "./landing/IconCircle";
-import { motion } from "framer-motion";
-import Image from "next/image";
-import Link from "next/link";
 
-
-import Header from "./landing/new_header"; // ajusta la ruta si estás en otra carpeta
+import Header from "./landing/new_header";
 import Footer from "@/components/layout/footer";
 import LandingBody from "./landing/landing_body";
 import { useState } from "react";
-import Page from "./(auth)/page";
 import Dashboard from "./carga/page";
 import Consulta from "./visualizacion/page";
+import LoginPage from "@/containers/LoginPage";
+import { useSession } from "@/hooks/use-session";
 
+export type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
 
-type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
-
+export interface HeaderItem {
+  label: string;
+  page?: PageKey;
+  onClick?: () => void;
+}
 
 const Home = () => {
-
-
   const [page, setPage] = useState<PageKey>("landing");
+  const { loading, error, data } = useSession();
 
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    location.reload();
+  };
 
+  const items: HeaderItem[] = data?.id
+    ? [
+        { label: "Inicio", page: "landing" },
+        { label: "Consulta", page: "consulta" },
+        { label: "Carga", page: "carga" },
+        { label: "Público", page: "publico" },
+        { label: "Cerrar sesión", onClick: handleLogout },
+      ]
+    : [
+        { label: "Consulta", page: "consulta" },
+        { label: "Inicio", page: "landing" },
+        { label: "Login", page: "login" },
+      ];
 
-
+  console.log("items", items);
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 1 }}
-      className="page-wrapper d-flex flex-column min-vh-100"
-    >
-      <div className="circle-background">
-        {[150, 300, 450, 600, 900].map((size, i) => (
-          <motion.div
-            key={i}
-            className="circle"
-            initial={{ scale: 0 }}
-            animate={{ scale: 3 }}
-            transition={{
-              delay: 1 + i * 0.3, // empieza después de la animación del texto
-              duration: 2,
-              ease: "easeOut",
-            }}
-            style={{
-              width: size,
-              height: size,
-            }}
-          />
-        ))}
+    <>
+      <Header items={items} onClickItem={setPage} />
+
+      <div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
+        {page === "landing" && <LandingBody />}
+        {page === "login" && <LoginPage />}
+        {page === "consulta" && <Consulta />}
+        {page === "carga" && <Dashboard />}
       </div>
 
-      {/* ⬇️ Tu contenido principal */}
-      <Header onNavClick={setPage} />
-
-         {/*  <LandingBody />*/}
-               {/* renderiza el body según el estado `page` */}
-      {page === "landing" && <LandingBody />}
-     {page === "login"   && <Page />}
-       {page === "carga"   && <Dashboard />}
-
-        {page === "consulta"   && <Consulta />}
-
-
-
-        {/*   <Login />
-
-
-          <contenidoAdmin1 />
-          <contenidoWorker />
-          <contenidoPublico />
- */}
-          
-
-
-
-
-
-
-
-
-        <Footer></Footer>
-    </motion.div>
-  
+      <Footer />
+    </>
   );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/app/visualizacion/page.tsx b/src/app/visualizacion/page.tsx
index 0f491ff..b460aeb 100644
--- a/src/app/visualizacion/page.tsx
+++ b/src/app/visualizacion/page.tsx
@@ -9,7 +9,7 @@ export default function Consulta() {
   const [value, setValue] = useState("");
   const [resultados, setResultados] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleSubmit = async () => {
     if (!value) {
@@ -18,7 +18,7 @@ export default function Consulta() {
     }
 
     setLoading(true);
-    setError('');
+    setError("");
     setResultados([]);
 
     try {
@@ -41,53 +41,31 @@ export default function Consulta() {
   };
 
   return (
-    <main
-      className="roboto"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        flexDirection: "column",
-        padding: "2rem",
-      }}
-    >
-      <div
-        className="flex gap-4 flex-wrap mb-6"
-        style={{
-          padding: "2rem",
-   
-          width: "100%",
-          maxWidth: "900px",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "center",
-            gap: "16px",
-            flexWrap: "wrap",
-            width: "100%",
-          }}
-        >
-          <h2 className="text-xl font-semibold mb-4">Visualización De Datos</h2>
+    <main>
+      <div>
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Consulta de servicios</h2>
 
           <Input
             label="No.Cuenta"
             placeholder="Ingresa tu No.Cuenta"
             value={value}
+            className={{
+              container: "mb-3 text-start",
+            }}
             onChange={(e) => setValue(e.target.value)}
           />
 
           <Button onClick={handleSubmit}>
-            {loading ? "Consultando..." : "Enviar Formulario"}
+            {loading ? "Consultando..." : "Consultar"}
           </Button>
         </div>
       </div>
 
       {error && (
-        <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>{error}</p>
+        <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>
+          {error}
+        </p>
       )}
 
       {resultados.length > 0 && (
@@ -107,7 +85,11 @@ export default function Consulta() {
               {Object.keys(resultados[0]).map((key) => (
                 <th
                   key={key}
-                  style={{ padding: "1rem", textAlign: "left", borderBottom: "1px solid #ccc" }}
+                  style={{
+                    padding: "1rem",
+                    textAlign: "left",
+                    borderBottom: "1px solid #ccc",
+                  }}
                 >
                   {key.toUpperCase()}
                 </th>
@@ -118,7 +100,13 @@ export default function Consulta() {
             {resultados.map((item, idx) => (
               <tr key={idx}>
                 {Object.values(item).map((val, i) => (
-                  <td key={i} style={{ padding: "0.75rem", borderBottom: "1px solid #eee" }}>
+                  <td
+                    key={i}
+                    style={{
+                      padding: "0.75rem",
+                      borderBottom: "1px solid #eee",
+                    }}
+                  >
                     {String(val)}
                   </td>
                 ))}
diff --git a/src/components/cargaArchivo.tsx b/src/components/cargaArchivo.tsx
index 2ebd1e2..7600abb 100644
--- a/src/components/cargaArchivo.tsx
+++ b/src/components/cargaArchivo.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useState } from "react";
+import Button from "./button";
 
 const CargaArchivo: React.FC = () => {
   const [archivo, setArchivo] = useState<File | null>(null);
@@ -34,7 +35,9 @@ const CargaArchivo: React.FC = () => {
       const data = await res.json();
 
       if (res.ok) {
-        alert(`Archivo subido correctamente (ID Movimiento: ${data.id_movimiento})`);
+        alert(
+          `Archivo subido correctamente (ID Movimiento: ${data.id_movimiento})`
+        );
         setArchivo(null);
         if (data.errors && data.errors.length > 0) {
           setErrores(data.errors); // ← Mostrar ventana si hay errores
@@ -56,29 +59,22 @@ const CargaArchivo: React.FC = () => {
         onChange={handleChange}
         className="mb-4 block text-sm"
       />
-      <button
-        onClick={handleUpload}
-        disabled={!archivo}
-        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-        style={{
-          backgroundColor: "#2563eb",
-          color: "#fff",
-        }}
-      >
+      <Button onClick={handleUpload} disabled={!archivo} variant="azul">
         Subir archivo
-      </button>
+      </Button>
 
       {/* Modal de errores */}
       {errores && (
-        <div className="fixed top-10 right-10 bg-white border border-red-400 text-red-700 p-4 rounded-lg shadow-lg w-96 z-50">
+        <div className="">
           <div className="flex justify-between items-center mb-2">
             <strong className="text-lg">Reporte de Errores</strong>
-            <button
+            <Button
+              variant="danger"
               onClick={() => setErrores(null)}
-              className="text-red-600 font-bold text-xl hover:text-red-800"
+              className="text-sm"
             >
-              ×
-            </button>
+              <i className="fas fa-times"></i>
+            </Button>
           </div>
           <ul className="list-disc list-inside text-sm max-h-60 overflow-y-auto">
             {errores.map((error, index) => (
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index fc4eb8b..ba4ef81 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -1,15 +1,12 @@
 import React from "react";
 
-
-
 import { motion } from "framer-motion";
 
-
 export default function Footer() {
   const date = new Date();
   const year = date.getFullYear();
 
-return (
+  return (
     <motion.footer
       // Empieza 50px abajo y totalmente transparente
       initial={{ y: 50, opacity: 0 }}
@@ -17,7 +14,7 @@ return (
       animate={{ y: 0, opacity: 1 }}
       // Retraso para que aparezca justo después del main
       transition={{ delay: 2, duration: 1, ease: "easeOut" }}
-      className="p-3 text-center small text-muted opacity-50"
+      className="p-3 text-center small text-muted"
     >
       <p className="mb-1">
         Hecho en México. Todos los derechos reservados 2025.
@@ -29,5 +26,5 @@ return (
         institución.
       </p>
     </motion.footer>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/password.tsx b/src/components/password.tsx
index 2c58547..8f793aa 100644
--- a/src/components/password.tsx
+++ b/src/components/password.tsx
@@ -1,10 +1,9 @@
-'use client';
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 export interface PasswordInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'type' | 'className'
+    "type" | "className"
   > {
   /**
    * Texto de la etiqueta asociada al input (opcional).
@@ -33,53 +32,37 @@ export default function PasswordInput(props: PasswordInputProps) {
   const [visible, setVisible] = useState(false);
 
   // Determina el tipo de input según el estado de visibilidad
-  const inputType = visible ? 'text' : 'password';
+  const inputType = visible ? "text" : "password";
   const inputId =
     id ||
     name ||
-    (label ? `password-${label.replace(/\s+/g, '-')}` : undefined);
+    (label ? `password-${label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
 
   const toggleVisibility = () => setVisible((v) => !v);
 
   return (
-    <div className={className?.container || 'mb-3'}>
+    <div className={className?.container || "mb-3"}>
       {label && inputId && (
-        <label htmlFor={inputId} className={className?.label || 'form-label'}>
+        <label htmlFor={inputId} className={className?.label || "form-label"}>
           {label}
         </label>
       )}
-      <div className="input-group" style={{ display: 'flex', alignItems: 'stretch' }}>
+      <div className="input-group">
         <input
           id={inputId}
           name={name}
           type={inputType}
-          className={className?.input || 'form-control'}
-          style={{ 
-            borderRight: 'none',
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            flex: 1
-          }}
+          className={className?.input || "form-control"}
           {...rest}
         />
         <button
           type="button"
-          className={className?.button || 'btn btn-light border'}
+          className={className?.button || "btn btn-light border"}
           onClick={toggleVisibility}
-          aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
-          title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
-          style={{
-            borderLeft: 'none',
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            padding: '0.375rem 0.75rem',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minWidth: '40px'
-          }}
+          aria-label={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
+          title={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
         >
-          <i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
+          <i className={`bi ${visible ? "bi-eye-slash" : "bi-eye"}`} />
         </button>
       </div>
     </div>
diff --git a/src/containers/LoginPage.tsx b/src/containers/LoginPage.tsx
new file mode 100644
index 0000000..afdaaec
--- /dev/null
+++ b/src/containers/LoginPage.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import Button from "@/components/button";
+import SimpleInput from "@/components/input";
+import PasswordInput from "@/components/password";
+import React, { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+
+// Estilos CSS adicionales para el input group
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    try {
+      const response = await axios.post("http://localhost:4000/login", {
+        email: email,
+        password: password,
+      });
+
+      const token = response.data.access_token;
+      localStorage.setItem("token", token);
+
+      // Disparar evento personalizado para notificar cambio de token
+      window.dispatchEvent(new Event("tokenChanged"));
+
+      // Limpiar formulario
+      setEmail("");
+      setPassword("");
+      setError("");
+
+      // Opcional: mostrar mensaje de éxito
+      alert("Login exitoso. Ahora puedes acceder a Carga y Visualización.");
+    } catch (err: any) {
+      const message =
+        err.response?.data?.message || err.message || "Error al iniciar sesión";
+      setError(message);
+    }
+  };
+
+  return (
+    <>
+      <motion.main
+        className="d-flex flex-column justify-content-center align-items-center"
+        initial={{ y: 50, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0, duration: 0.5 }}
+      >
+        <h2 className="text-dorado fw-bold">Bienvenido al sistema de</h2>
+        <h1 className="text-azul fw-bold">Carga Masiva</h1>
+        <SimpleInput
+          label="Usuario"
+          className={{
+            container: "w-300px mb-3",
+          }}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <PasswordInput
+          label="Contraseña"
+          className={{
+            container: "w-300px mb-3",
+          }}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+
+        {error && <p className="text-danger text-center mb-3">{error}</p>}
+
+        <Button onClick={handleLogin} className="rounded-pill" variant="azul">
+          Iniciar Sesión
+        </Button>
+      </motion.main>
+    </>
+  );
+}
diff --git a/src/hooks/use-session.tsx b/src/hooks/use-session.tsx
new file mode 100644
index 0000000..82f2582
--- /dev/null
+++ b/src/hooks/use-session.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { jwtDecode } from "jwt-decode";
+
+interface UserData {
+  id: string;
+  name: string;
+  email: string;
+  // ...otros campos que tenga tu token
+}
+
+interface SessionState {
+  loading: boolean;
+  error: string | null;
+  data: UserData | null;
+}
+
+export function useSession(): SessionState {
+  const [state, setState] = useState<SessionState>({
+    loading: true,
+    error: null,
+    data: null,
+  });
+
+  useEffect(() => {
+    try {
+      const token = localStorage.getItem("token");
+      if (!token) {
+        throw new Error("Token no encontrado");
+      }
+
+      // Descomentar para funcionamiento real
+      /* const decoded = jwtDecode<UserData>(token); */
+
+      setState({
+        loading: false,
+        error: null,
+        data: {
+          id: "12345", // Reemplazar con decoded.id
+          name: "Usuario Ejemplo", // Reemplazar con decoded.name
+          email: ""
+        },
+      });
+    } catch (err: any) {
+      setState({
+        loading: false,
+        error: err.message || "Error al decodificar el token",
+        data: null,
+      });
+    }
+  }, []);
+
+  return state;
+}