diff --git a/app/ActivosMantenimiento/Page.module.css b/app/ActivosMantenimiento/Page.module.css
index 8f3544d..ef4cfa4 100644
--- a/app/ActivosMantenimiento/Page.module.css
+++ b/app/ActivosMantenimiento/Page.module.css
@@ -1,71 +1,82 @@
 .tableContainer {
-    margin-top: 10px;
-    overflow-y: auto;
-    overflow-x: auto;
-    border-radius: 4px;
-    border: 1px solid #cfcfcf;
-    max-height: 430px;
-    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
-    background-color: #f9f9f9;
-    width: 100%;
+  margin-top: 10px;
+  overflow-y: auto;
+  overflow-x: auto;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  max-height: 430px;
+  scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+  background-color: #f9f9f9;
+  width: 100%;
 }
 
 .machineTable {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: auto;
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
 }
 
 .machineTable th,
 .machineTable td {
-    padding: 10px;
-    text-align: center;
-    border-bottom: 1px solid #cfcfcf;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
+  padding: 10px;
+  text-align: center;
+  border-bottom: 1px solid #cfcfcf;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .machineTable th {
-    position: sticky;
-    top: 0px;
-    background-color: rgb(1, 92, 184);
-    color: white;
+  position: sticky;
+  top: 0px;
+  background-color: rgb(1, 92, 184);
+  color: white;
 }
 
 .machineTable tr {
-    min-width: 400px;
+  min-width: 400px;
 }
 
 .disponible {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    background-color: green;
-    color: green;
-    font-weight: bold;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: green;
+  color: green;
+  font-weight: bold;
 }
 
 .ocupado {
-    color: red;
-    font-weight: bold;
+  color: red;
+  font-weight: bold;
 }
 
-
 .actions {
-    text-align: center;
+  text-align: center;
 }
 
 .resetButton {
-    padding: 8px 16px;
-    background-color: #ff4d4d;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: bold;
-    transition: 0.3s;
+  padding: 8px 16px;
+  background-color: #ff4d4d;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.3s;
 }
 
 .resetButton:hover {
-    background-color: #cc0000;
-}
\ No newline at end of file
+  background-color: #cc0000;
+}
+.checkbox-grid label {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.checkbox-grid input[type="checkbox"] {
+  margin: 0;
+  padding: 0;
+  transform: scale(1); /* mantiene el tamaño */
+}
diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx
index ec94896..c828edc 100644
--- a/app/ActivosMantenimiento/page.tsx
+++ b/app/ActivosMantenimiento/page.tsx
@@ -2,7 +2,6 @@
 import { useState } from "react";
 import SearchUser from "../Components/SearchUser/searchUser";
 import Toggle from "../Components/Toggle/Toggle";
-// Assuming you will create this new component
 
 export default function Page() {
   const [tiempo, setTiempo] = useState("");
@@ -10,10 +9,9 @@ export default function Page() {
 
   return (
     <section className="containerSection">
-      <h2 className="title"> EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
+      <h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
 
       <div className="mainContainer">
-        {/* Toggle component for 'Asignar' and 'Liberar' tabs */}
         <Toggle
           defaultView="Equipos"
           options={[
@@ -32,12 +30,12 @@ export default function Page() {
                         onChange={(e) => setTiempo(e.target.value)}
                       >
                         <option value="">-- Equipos disponibles --</option>
-                        <option value="15">1 </option>
-                        <option value="30">2 </option>
-                        <option value="45">3 </option>
-                        <option value="60">4 </option>
-                        <option value="90">5 </option>
-                        <option value="120">6 </option>
+                        <option value="15">1</option>
+                        <option value="30">2</option>
+                        <option value="45">3</option>
+                        <option value="60">4</option>
+                        <option value="90">5</option>
+                        <option value="120">6</option>
                       </select>
                       <button className="button buttonSearch" type="submit">
                         Asignar
@@ -53,27 +51,32 @@ export default function Page() {
               content: (
                 <>
                   <form className="containerForm">
-                    <label className="label">Areas Disponibles</label>
+                    <label className="label">Áreas disponibles</label>
                     <div className="groupInput">
                       <select
                         value={tiempo}
                         onChange={(e) => setTiempo(e.target.value)}
                       >
-                        <option value="">-- Areas disponibles --</option>
-                        <option value="15">PECERA </option>
-                        <option value="30">JAULA </option>
-                        <option value="45">HUACAL </option>
-                        <option value="60">PCNET1 </option>
-                        <option value="90">PCNET2 </option>
+                        <option value="">-- Áreas disponibles --</option>
+                        <option value="15">PECERA</option>
+                        <option value="30">JAULA</option>
+                        <option value="45">HUACAL</option>
+                        <option value="60">PCNET1</option>
+                        <option value="90">PCNET2</option>
                       </select>
-                      <div>
+
+                      {/* Checkboxes */}
+                      <div className="checkbox-grid">
                         <label>
-                          <input type="checkbox" /> Activo
+                          <input type="checkbox" />
+                          Activo
                         </label>
                         <label>
-                          <input type="checkbox" /> Mantenimiento
+                          <input type="checkbox" />
+                          Mantenimiento
                         </label>
                       </div>
+
                       <button className="button buttonSearch" type="submit">
                         Actualizar
                       </button>
@@ -88,25 +91,27 @@ export default function Page() {
               content: (
                 <>
                   <form className="containerForm">
-                    <label className="label">Mesas Disponibles</label>
+                    <label className="label">Mesas disponibles</label>
                     <div className="groupInput">
                       <select
                         value={tiempo}
                         onChange={(e) => setTiempo(e.target.value)}
                       >
                         <option value="">-- Mesas disponibles --</option>
-                        <option value="15">1 </option>
-                        <option value="30">4 </option>
-                        <option value="45">7 </option>
-                        <option value="60"> </option>
-                        <option value="90">15 </option>
+                        <option value="15">1</option>
+                        <option value="30">4</option>
+                        <option value="45">7</option>
+                        <option value="60">10</option>
+                        <option value="90">15</option>
                       </select>
-                      <div>
-                        <label></label>
+
+                      <div className="checkbox-grid">
                         <label>
-                          <input type="checkbox" /> Mantenimiento
+                          <input type="checkbox" />
+                          Mantenimiento
                         </label>
                       </div>
+
                       <button className="button buttonSearch" type="submit">
                         Confirmar
                       </button>
@@ -117,10 +122,7 @@ export default function Page() {
             },
           ]}
         />
-
-        {/* This is the new component to display available tables */}
       </div>
     </section>
   );
 }
-//IO
\ No newline at end of file
diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index f82e516..0418e63 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -17,6 +17,7 @@
     color: white;
     font-weight: bold;
     width: 100%;
+    transition: background-color 0.3s ease;
 }
 
 .barNavigation li:hover {
@@ -65,7 +66,7 @@
     top: 100%;
     width: 100%;
     background-color: rgba(0, 61, 121, 1);
-    transition: max-height 0.3s ease, opacity 0.3s ease;
+    transition: color 0.3s ease, opacity 0.3s ease;
 }
 
 .subMenu.open ul {
diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx
index 30948cf..488dafa 100644
--- a/app/Components/BarNavigation/BarNavigation.tsx
+++ b/app/Components/BarNavigation/BarNavigation.tsx
@@ -9,8 +9,11 @@ function BarNavigation() {
 
   const toggleMenu = () => setOpenMenu(!openMenu);
   const toggleSubMenu = (index: number) => {
-    setOpenSubMenu(openSubMenu === index ? null : index);
+    if (typeof window !== "undefined" && window.innerWidth <= 800) {
+      setOpenSubMenu(openSubMenu === index ? null : index);
+    }
   };
+
   return (
     <nav className="barNavigation">
       <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
diff --git a/app/Components/EviarMensaje/EnviarMensaje.tsx b/app/Components/EviarMensaje/EnviarMensaje.tsx
new file mode 100644
index 0000000..99aadfb
--- /dev/null
+++ b/app/Components/EviarMensaje/EnviarMensaje.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { useState } from "react";
+
+// Definimos la interfaz de props
+interface EnviarMensajeProps {
+  titulo: string;
+  opciones: string[];
+}
+
+const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
+  const [seleccion, setSeleccion] = useState("");
+  const [mensaje, setMensaje] = useState("");
+  const [customMsg, setCustomMsg] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      {/* Selección principal */}
+      <label className="label">{titulo}</label>
+      <div className="groupInput">
+        <select
+          value={seleccion}
+          onChange={(e) => setSeleccion(e.target.value)}
+        >
+          <option value="">-- {titulo} --</option>
+          {opciones.map((opt, idx) => (
+            <option key={idx} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Selección de mensaje */}
+      <label className="label">Seleccione el mensaje</label>
+      <div className="groupInput">
+        <select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
+          <option value="">-- Seleccione el mensaje --</option>
+          {[
+            { value: "cerrar", label: "No olvides cerrar sesión" },
+            { value: "alerta1", label: "⚠️ Atención" },
+            { value: "alerta2", label: "🔔 Aviso importante" },
+            { value: "alerta3", label: "✅ Confirmación" },
+          ].map((msg, idx) => (
+            <option key={idx} value={msg.value}>
+              {msg.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Mensaje personalizado */}
+      <label className="label">Mensaje personalizado</label>
+      <div className="groupInput">
+        <input
+          type="text"
+          value={customMsg}
+          onChange={(e) => setCustomMsg(e.target.value)}
+          placeholder="Escribe tu mensaje..."
+        />
+      </div>
+
+      {/* Botón de enviar */}
+      <button className="button buttonSearch" type="submit">
+        Mandar mensaje
+      </button>
+    </form>
+  );
+};
+
+export default EnviarMensaje;
diff --git a/app/Components/Header/Header.css b/app/Components/Header/Header.css
index 86d608c..331acbc 100644
--- a/app/Components/Header/Header.css
+++ b/app/Components/Header/Header.css
@@ -25,8 +25,8 @@
     content: "";
     top: 0;
     left: -20px;
-    width: 30%;
-    height: 50%;
+    width: 70%;
+    height: 100%;
     min-width: 300px;
     background-color: #d59f0f;
     transform: skew(-45deg);
diff --git a/app/Components/ProgramSelector/ProgramSelector.tsx b/app/Components/ProgramSelector/ProgramSelector.tsx
index e255580..6b6ea84 100644
--- a/app/Components/ProgramSelector/ProgramSelector.tsx
+++ b/app/Components/ProgramSelector/ProgramSelector.tsx
@@ -1,96 +1,113 @@
-
-
-function ProgramSelector() {
-    return (
-        <div>
-            <form className="form-container">
-                <label htmlFor="equipo">Ubicación de equipo</label>
-                <select id="equipo">
-                    <option value="">buscar</option>
-                    <option value="sala1">Equipo 1</option>
-                    <option value="sala2">Equipo 2</option>
-                    <option value="sala3">Equipo 3</option>
-                </select>
-
-                <div className="checkbox-grid">
-                    <label>
-                        <input type="checkbox" /> 3D MAX STUDIO 2014
-                    </label>
-                    <label>
-                        <input type="checkbox" /> ADOBE CREATIVE SUITE
-                    </label>
-                    <label>
-                        <input type="checkbox" /> ARCHICAD 20
-                    </label>
-                    <label>
-                        <input type="checkbox" /> AUDACITY - win - 2.0
-                    </label>
-                    <label>
-                        <input type="checkbox" /> AUTOCAD
-                    </label>
-                    <label>
-                        <input type="checkbox" /> CODE-BLOCKS
-                    </label>
-                    <label>
-                        <input type="checkbox" /> COREL DRAW
-                    </label>
-                    <label>
-                        <input type="checkbox" /> DEV-C++
-                    </label>
-                    <label>
-                        <input type="checkbox" /> EVIEWS Enterprise
-                    </label>
-                    <label>
-                        <input type="checkbox" /> Google Earth
-                    </label>
-                    <label>
-                        <input type="checkbox" /> INTERNET
-                    </label>
-                    <label>
-                        <input type="checkbox" /> MAPLE
-                    </label>
-                    <label>
-                        <input type="checkbox" /> MATHEMATICA
-                    </label>
-                    <label>
-                        <input type="checkbox" /> MATLAB
-                    </label>
-                    <label>
-                        <input type="checkbox" /> Maxima
-                    </label>
-                    <label>
-                        <input type="checkbox" /> miktex
-                    </label>
-                    <label>
-                        <input type="checkbox" /> NETBEANS
-                    </label>
-                    <label>
-                        <input type="checkbox" /> OFFICE 2016
-                    </label>
-                    <label>
-                        <input type="checkbox" /> PSeInt
-                    </label>
-                    <label>
-                        <input type="checkbox" /> R 3.0.1
-                    </label>
-                    <label>
-                        <input type="checkbox" /> RStudio
-                    </label>
-                    <label>
-                        <input type="checkbox" /> SPSS Statistics
-                    </label>
-                    <label>
-                        <input type="checkbox" /> STATA 13
-                    </label>
-                    <label>
-                        <input type="checkbox" /> STATGRAPHICS Centurion XVI
-                    </label>
-                </div>
-
-                <button className="button buttonSearch">Guardar cambios</button>
-            </form>
-        </div>
-    )
+// 1. Definimos la interfaz que describe las props del componente
+export interface DatosEquipo {
+  titulo: string; // El título que aparecerá como label
+  opcion: string[]; // Lista de opciones para el select
 }
 
-export default ProgramSelector
\ No newline at end of file
+// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo
+//    porque el componente debe ser reutilizable, no fijo.
+
+// 3. Recibimos las props como un objeto con estructura DatosEquipo
+function ProgramSelector({ titulo, opcion }: DatosEquipo) {
+  return (
+    <div>
+      <form className="form-container">
+        {/* Label dinámico con el título que recibimos */}
+        <label htmlFor="equipo">{titulo}</label>
+
+        {/* Renderizamos UN solo <select> con varias <option> */}
+        <select id="equipo">
+          {opcion.map((op, index) => (
+            <option key={index} value={op}>
+              {op}
+            </option>
+          ))}
+        </select>
+
+        {/* Aquí puedes poner más <option> fijas si quieres */}
+        <option value="">Buscar</option>
+
+        {/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */}
+        <div className="checkbox-grid">
+          <label>
+            <input type="checkbox" /> 3D MAX STUDIO 2014
+          </label>
+          <label>
+            <input type="checkbox" /> ADOBE CREATIVE SUITE
+          </label>
+          <label>
+            <input type="checkbox" /> ARCHICAD 20
+          </label>
+          <label>
+            <input type="checkbox" /> AUDACITY -win - 2.0
+          </label>
+          <label>
+            <input type="checkbox" /> AUTOCAD
+          </label>
+          <label>
+            <input type="checkbox" /> CODE-BLOCKS
+          </label>
+          <label>
+            <input type="checkbox" /> COREL DRAW
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> DEV-C++
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> EVIEWS Enterprise
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> Google Earth
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> INTERNERT
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> MAPLE
+          </label>
+          <label>
+            <input type="checkbox" /> MATHEMATICA
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> MATLAB
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> Maxima
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> miktex
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> NETBEANS
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> OFFICE 2016
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> PSeint
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> R 3.0.1
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> R Studio
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> SPPS Statiscs
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> STATA 13
+          </label>{" "}
+          <label>
+            <input type="checkbox" /> STATGRAOHICS Centurion XVI
+          </label>
+          {/* ... resto de checkboxes */}
+        </div>
+
+        <button className="button buttonSearch">Guardar cambios</button>
+      </form>
+    </div>
+  );
+}
+
+export default ProgramSelector;
diff --git a/app/Impresiones/page.tsx b/app/Impresiones/page.tsx
index a6e0682..7bab7ad 100644
--- a/app/Impresiones/page.tsx
+++ b/app/Impresiones/page.tsx
@@ -44,8 +44,14 @@ export default function Page() {
             label: "Impresiones color",
             content: <Impressions
               costs={[
-                { value: 2 },
                 { value: 4 },
+                { value: 5 },
+                { value: 6 },
+                { value: 7 },
+                { value: 8 },
+                { value: 10 },
+                { value: 12 },
+                { value: 14 },
               ]}
             />,
           },
@@ -54,8 +60,23 @@ export default function Page() {
             label: "Plotter",
             content: <Impressions
               costs={[
-                { value: 1 },
-                { value: 2 },
+                { value: 15 },
+                { value: 18 },
+                { value: 20 },
+                { value: 25 },
+                { value: 30 },
+                { value: 40 },
+                { value: 45 },
+                { value: 50 },
+                { value: 60 },
+                { value: 70 },
+                { value: 80 },
+                { value: 90 },
+                { value: 100 },
+                { value: 110 },
+                { value: 120 },
+                { value: 150 },
+                { value: 200 },
               ]}
             />,
           },
@@ -66,6 +87,7 @@ export default function Page() {
               costs={[
                 { value: 1 },
                 { value: 2 },
+                { value: 5 },
               ]} 
               />,
           },
diff --git a/app/InformacionEquipo/informacionequipo.css b/app/InformacionEquipo/informacionequipo.css
index 5f1ee0e..3edf365 100644
--- a/app/InformacionEquipo/informacionequipo.css
+++ b/app/InformacionEquipo/informacionequipo.css
@@ -46,6 +46,7 @@
   gap: 6px 20px;
   margin-bottom: 20px;
   flex-wrap: wrap;
+  margin-right: 2px;
 }
 
 .checkbox-grid label {
diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx
index 7e81925..3966d6b 100644
--- a/app/InformacionEquipo/page.tsx
+++ b/app/InformacionEquipo/page.tsx
@@ -17,45 +17,22 @@ export default function Page() {
               <form className="containerForm">
                 <div className="groupInput">
                   <input type="text" />
-                  <button className="button buttonSearch">
-                    Buscar
-                  </button>
+                  <button className="button buttonSearch">Buscar</button>
                 </div>
                 <label className="label">Ubicacion</label>
-                <input
-                  type="text"
-                  //value={user}
-                  //onChange={(e) => setUser(e.target.value)}
-                  placeholder="Coloca"
-                />
+                <input type="text" placeholder="Coloca" />
 
                 <label className="label">Nombre</label>
-                <input
-                  type="text"
-                  //value={user}
-                  //onChange={(e) => setUser(e.target.value)}
-                  placeholder="Coloca "
-                />
+                <input type="text" placeholder="Coloca " />
 
                 <label className="label">Plataforma</label>
-                <input
-                  type="text"
-                  //value={user}
-                  //onChange={(e) => setUser(e.target.value)}
-                  placeholder="Coloca "
-                />
+                <input type="text" placeholder="Coloca " />
 
                 <label className="label">Area Ubicacion</label>
-                <input
-                  type="text"
-                  //value={user}
-                  //onChange={(e) => setUser(e.target.value)}
-                  placeholder="Coloca "
-                />
+                <input type="text" placeholder="Coloca " />
 
                 <div className="containerButton">
                   <button className="button buttonSearch">Nuevo</button>
-
                   <button className="button buttonSearch">Editar</button>
                 </div>
               </form>
@@ -64,102 +41,23 @@ export default function Page() {
           {
             key: "2",
             label: "Programa por equipo",
+            // ✅ Ahora pasamos titulo y opcion como props al componente
             content: (
-              <ProgramSelector/>
+              <ProgramSelector
+                titulo="Programas de Equipo"
+                opcion={["Equipo 1", "Equipo 2", "Equipo 3"]}
+              />
             ),
           },
           {
             key: "3",
             label: "Programa por sala",
+            // ✅ Aquí también pasamos un array válido de strings
             content: (
-              <div>
-                <form className="form-container">
-                  <label htmlFor="salas ">Salas </label>
-                  <select id="salas">
-                    <option value="">Seleccione una sala</option>
-                    <option value="sala1">Sala 1</option>
-                    <option value="sala2">Sala 2</option>
-                    <option value="sala3">Sala 3</option>
-                  </select>
-
-                  <div className="checkbox-grid">
-                    <label>
-                      <input type="checkbox" /> 3D MAX STUDIO 2014
-                    </label>
-                    <label>
-                      <input type="checkbox" /> ADOBE CREATIVE SUITE
-                    </label>
-                    <label>
-                      <input type="checkbox" /> ARCHICAD 20
-                    </label>
-                    <label>
-                      <input type="checkbox" /> AUDACITY - win - 2.0
-                    </label>
-                    <label>
-                      <input type="checkbox" /> AUTOCAD
-                    </label>
-                    <label>
-                      <input type="checkbox" /> CODE-BLOCKS
-                    </label>
-                    <label>
-                      <input type="checkbox" /> COREL DRAW
-                    </label>
-                    <label>
-                      <input type="checkbox" /> DEV-C++
-                    </label>
-                    <label>
-                      <input type="checkbox" /> EVIEWS Enterprise
-                    </label>
-                    <label>
-                      <input type="checkbox" /> Google Earth
-                    </label>
-                    <label>
-                      <input type="checkbox" /> INTERNET
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MAPLE
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MATHEMATICA
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MATLAB
-                    </label>
-                    <label>
-                      <input type="checkbox" /> Maxima
-                    </label>
-                    <label>
-                      <input type="checkbox" /> miktex
-                    </label>
-                    <label>
-                      <input type="checkbox" /> NETBEANS
-                    </label>
-                    <label>
-                      <input type="checkbox" /> OFFICE 2016
-                    </label>
-                    <label>
-                      <input type="checkbox" /> PSeInt
-                    </label>
-                    <label>
-                      <input type="checkbox" /> R 3.0.1
-                    </label>
-                    <label>
-                      <input type="checkbox" /> RStudio
-                    </label>
-                    <label>
-                      <input type="checkbox" /> SPSS Statistics
-                    </label>
-                    <label>
-                      <input type="checkbox" /> STATA 13
-                    </label>
-                    <label>
-                      <input type="checkbox" /> STATGRAPHICS Centurion XVI
-                    </label>
-                  </div>
-
-                  <button className="button buttonSearch">Guardar cambios</button>
-                </form>
-              </div>
+              <ProgramSelector
+                titulo="Programas por Sala"
+                opcion={["Sala A", "Sala B", "Sala C"]}
+              />
             ),
           },
         ]}
@@ -167,4 +65,3 @@ export default function Page() {
     </section>
   );
 }
-//IO
diff --git a/app/Inscripciones/page.tsx b/app/Inscripciones/page.tsx
index ee1dc87..c11fc63 100644
--- a/app/Inscripciones/page.tsx
+++ b/app/Inscripciones/page.tsx
@@ -1,32 +1,29 @@
-'use client';
+"use client";
 import Information from "../Components/Information/information";
 import Receipt from "../Components/Receipt/Receipt";
 import SearchUser from "../Components/SearchUser/searchUser";
 import Selection from "../Components/Selection/Selection";
 import StepNavigator from "../Components/StepNavigator/StepNavigator";
-import "./inscriptions.css"
+import "./inscriptions.css";
 
 export default function Page() {
-    return (
-        <section className='containerSection'>
-            <h2 className='title'> INSCRIPCION </h2>
-            
-            <SearchUser />
+  return (
+    <section className="containerSection">
+      <h2 className="title"> INSCRIPCION </h2>
 
-            <Information
-                NoCuenta="idcuanta"
-                Nombre="juan"
-                Carrera="carrera"
-                Credito="credito"
-            />
+      <SearchUser />
 
-            <StepNavigator totalSteps={2} onFinish={() => console.log()}>
-                <Selection />
-                <Receipt />
-            </StepNavigator>
+      <Information
+        NoCuenta="idcuanta"
+        Nombre="juan"
+        Carrera="carrera"
+        Credito="credito"
+      />
 
-        </section>
-
-    );
+      <StepNavigator totalSteps={2} onFinish={() => console.log()}>
+        <Selection />
+        <Receipt />
+      </StepNavigator>
+    </section>
+  );
 }
-//IO
\ No newline at end of file
diff --git a/app/Mensajes/page.tsx b/app/Mensajes/page.tsx
index bdd61ed..47a9819 100644
--- a/app/Mensajes/page.tsx
+++ b/app/Mensajes/page.tsx
@@ -1,118 +1,33 @@
 "use client";
-import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
 import Toggle from "../Components/Toggle/Toggle";
+import EnviarMensaje from "../Components/EviarMensaje/EnviarMensaje"; // 👈 importa bien
 
 export default function Page() {
-  const [tiempo, setTiempo] = useState(""); // <-- AQUÍ defines el estado
   return (
     <section className="containerSection">
-      <h2 className="title"> Enviar mensaje </h2>
+      <h2 className="title">Enviar mensaje</h2>
 
       <Toggle
-        defaultView="AsigTime"
+        defaultView="Equipo"
         options={[
           {
-            key: "AsigTime",
+            key: "Equipo",
             label: "Equipo",
             content: (
-              <>
-                <form className="containerForm">
-                  <label className="label">Seleccione un equipo</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Seleccione un equipo--</option>
-                      <option value="15">1 </option>
-                      <option value="30">2 </option>
-                      <option value="45">3 </option>
-                      <option value="60">4 </option>
-                      <option value="90">5 </option>
-                      <option value="120">6 </option>
-                    </select>
-                  </div>
-                </form>
-                <form className="containerForm">
-                  <label className="label">Seleccione el mensaje</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Seleccione el mensaje--</option>
-                      <option value="15">No olvides cerrar sesión </option>
-                      <option value="30">???????????????????????? </option>
-                      <option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
-                      <option value="60">???????????????????????? </option>
-                      <option value="90">???????????????????????? </option>
-                      <option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
-                    </select>
-                  </div>
-                </form>
-                <form className="containerForm">
-                  <label className="label">Mensaje perzonalizado</label>
-                  <div className="groupInput">
-                    <input type="text" />
-                    <button className="button buttonSearch" type="submit">
-                      Mandar mensaje
-                    </button>
-                  </div>
-                </form>
-              </>
+              <EnviarMensaje
+                titulo="Seleccione un equipo"
+                opciones={["1", "2", "3", "4", "5", "6"]}
+              />
             ),
           },
-
           {
-            key: "CancelTime",
+            key: "Sala",
             label: "Sala",
             content: (
-              <>
-                <form className="containerForm">
-                  <label className="label">Seleccione un equipo</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Seleccione una Sala--</option>
-                      <option value="15">PECERA </option>
-                      <option value="30">PCNET1 </option>
-                      <option value="45">PCNET2 </option>
-                      <option value="60">PCNET3</option>
-                      <option value="90">______ </option>
-                      <option value="120">______</option>
-                    </select>
-                  </div>
-                </form>
-                <form className="containerForm">
-                  <label className="label">Seleccione el mensaje</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Seleccione el mensaje--</option>
-                      <option value="15">No olvides cerrar sesión </option>
-                      <option value="30">???????????????????????? </option>
-                      <option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
-                      <option value="60">???????????????????????? </option>
-                      <option value="90">???????????????????????? </option>
-                      <option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
-                    </select>
-                  </div>
-                </form>
-                <form className="containerForm">
-                  <label className="label">Mensaje perzonalizado</label>
-                  <div className="groupInput">
-                    <input type="text" />
-                    <button className="button buttonSearch" type="submit">
-                      Mandar mensaje
-                    </button>
-                  </div>
-                </form>
-              </>
+              <EnviarMensaje
+                titulo="Seleccione una sala"
+                opciones={["PECERA", "PCNET1", "PCNET2", "PCNET3"]}
+              />
             ),
           },
         ]}
@@ -120,4 +35,3 @@ export default function Page() {
     </section>
   );
 }
-//IO
diff --git a/app/Programas/page.tsx b/app/Programas/page.tsx
index 8ae3ff9..6103442 100644
--- a/app/Programas/page.tsx
+++ b/app/Programas/page.tsx
@@ -1,23 +1,56 @@
+"use client";
+import { useState } from "react";
 import SearchUser from "../Components/SearchUser/searchUser";
-import "./programas.css";
+import styleprograms from "./programas.module.css";
 
 export default function Page() {
-  return (
-    <section className="containersection">
-      <h2 className="title"> PROGRAMAS </h2>
-      <label className="label">Programas</label>
-      <input
-        type="text"
-        //value={user}
-        //onChange={(e) => setUser(e.target.value)}
-        placeholder="Coloca "
-      />
-      <div className="margin">
-        <button className="button buttonSearch">Insertar</button>
+  const [Editar, setEditar] = useState(true);
 
-        <button className="button buttonSearch">Cancelar</button>
-      </div>
-    </section>
+  const handleEditar = () => {
+    setEditar(false);
+  };
+
+  return (
+    <>
+      {Editar ? (
+        <section className="containersection">
+          <h3 className="title"> ID </h3>
+          <label className="label">Programas</label>
+          <input
+            type="text"
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder="Coloca "
+          />
+          <div className="margin">
+            <button className="button buttonSearch" onClick={handleEditar}>
+              Editar
+            </button>
+            <button className={`button buttonSearch ${styleprograms.button}`}>
+              Nuevo
+            </button>
+          </div>
+        </section>
+      ) : (
+        <section className="containersection">
+          <div>ID</div>
+          <h2 className="title"> PROGRAMAS </h2>
+          <label className="label">Programas</label>
+          <input
+            type="text"
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder="Coloca "
+          />
+          <div className="margin">
+            <button className="button buttonSearch">Insertar</button>
+
+            <button className={`button buttonSearch ${styleprograms.button}`}>
+              Cancelar
+            </button>
+          </div>
+        </section>
+      )}
+    </>
   );
 }
-//IO
diff --git a/app/Programas/programas.css b/app/Programas/programas.module.css
similarity index 84%
rename from app/Programas/programas.css
rename to app/Programas/programas.module.css
index 61fdc11..f80b282 100644
--- a/app/Programas/programas.css
+++ b/app/Programas/programas.module.css
@@ -7,3 +7,7 @@
 .margin {
   margin: 10px 10px;
 }
+.button {
+  margin-left: 20px;
+  margin-top: 20px;
+}
diff --git a/app/globals.css b/app/globals.css
index c37f161..1362030 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -77,7 +77,7 @@ footer {
 
 footer p {
   color: white;
-  max-width: 1150px;
+  max-width: 900px;
 }
 
 .container {