diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx
index 39bdb85..ec94896 100644
--- a/app/ActivosMantenimiento/page.tsx
+++ b/app/ActivosMantenimiento/page.tsx
@@ -5,10 +5,121 @@ import Toggle from "../Components/Toggle/Toggle";
 // Assuming you will create this new component
 
 export default function Page() {
-  return (
-    <section className='containerSection'>
-      <h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
+  const [tiempo, setTiempo] = useState("");
+  const [selectedTable, setSelectedTable] = useState(null);
 
+  return (
+    <section className="containerSection">
+      <h2 className="title"> EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
+
+      <div className="mainContainer">
+        {/* Toggle component for 'Asignar' and 'Liberar' tabs */}
+        <Toggle
+          defaultView="Equipos"
+          options={[
+            {
+              key: "Equipos",
+              label: "Equipos",
+              content: (
+                <>
+                  <SearchUser />
+
+                  <form className="containerForm">
+                    <label className="label">Equipos disponibles</label>
+                    <div className="groupInput">
+                      <select
+                        value={tiempo}
+                        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>
+                      </select>
+                      <button className="button buttonSearch" type="submit">
+                        Asignar
+                      </button>
+                    </div>
+                  </form>
+                </>
+              ),
+            },
+            {
+              key: "Areas",
+              label: "Areas",
+              content: (
+                <>
+                  <form className="containerForm">
+                    <label className="label">Areas 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>
+                      </select>
+                      <div>
+                        <label>
+                          <input type="checkbox" /> Activo
+                        </label>
+                        <label>
+                          <input type="checkbox" /> Mantenimiento
+                        </label>
+                      </div>
+                      <button className="button buttonSearch" type="submit">
+                        Actualizar
+                      </button>
+                    </div>
+                  </form>
+                </>
+              ),
+            },
+            {
+              key: "Mesas",
+              label: "Liberar mesa",
+              content: (
+                <>
+                  <form className="containerForm">
+                    <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>
+                      </select>
+                      <div>
+                        <label></label>
+                        <label>
+                          <input type="checkbox" /> Mantenimiento
+                        </label>
+                      </div>
+                      <button className="button buttonSearch" type="submit">
+                        Confirmar
+                      </button>
+                    </div>
+                  </form>
+                </>
+              ),
+            },
+          ]}
+        />
+
+        {/* This is the new component to display available tables */}
+      </div>
     </section>
   );
 }
diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index 79f0bc2..f82e516 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -2,6 +2,7 @@
     text-align: center;
     background-color: rgb(1, 92, 184);
     padding: 0 20px;
+    display: flex;
 }
 
 .barNavigation ul {
@@ -91,6 +92,7 @@
     align-items: center;
     justify-content: center;
     color: rgb(255, 255, 255);
+    font-size: 1.5rem;
 }
 
 .containerLinks {
@@ -105,6 +107,11 @@
     color: white;
     width: 100%;
     height: 100%;
+    font-size: 1.5rem;
+}
+
+thead,tbody{
+    font-size: 1.25rem;
 }
 
 @media (max-width: 800px) {
@@ -118,10 +125,12 @@
 
     .menuToggle.center {
         align-items: center;
+        margin: 0;
     }
 
     .barNavigation {
         font-size: 15px;
+        display: block;
     }
 
     .barNavigation ul {
@@ -140,7 +149,7 @@
     }
 
     .barNavigation li:hover {
-        background-color: rgba(0, 61, 121, 1);
+        background-color: #d59f0f;
         color: white;
         border-radius: 0;
         border: none;
@@ -152,5 +161,9 @@
         position: relative;
         background-color: rgba(0, 61, 121, 1);
     }
+    
+    thead,tbody{
+        font-size: 1rem;
+    }
 
 }
\ No newline at end of file
diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx
index 27e2b16..a0a60ae 100644
--- a/app/Components/BarNavigation/BarNavigation.tsx
+++ b/app/Components/BarNavigation/BarNavigation.tsx
@@ -14,7 +14,7 @@ function BarNavigation() {
     return (
         <nav className="barNavigation">
             <div
-                className={`menuToggle ${openMenu ? 'center' : ''}`}
+                className={`menuToggle ${openMenu ? '' : ''}`}
                 onClick={toggleMenu}>
                 <div></div>
                 <div></div>
diff --git a/app/Components/Selection/Selection.css b/app/Components/Selection/Selection.css
index 9f84044..f1f30ce 100644
--- a/app/Components/Selection/Selection.css
+++ b/app/Components/Selection/Selection.css
@@ -21,6 +21,7 @@
   border: 2px solid #5b8cc9;
   background-color: #f0f0f0;
   transition: all 0.3s ease;
+  padding: 5px;
 }
 
 .buttonSelection:hover {
@@ -36,6 +37,7 @@
 .buttonLabel {
   margin-top: 8px;
   font-weight: bold;
+  font-size: 1.25rem;
   color: #333;
   text-align: center;
 }
diff --git a/app/globals.css b/app/globals.css
index fefef5a..c37f161 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,6 +4,17 @@
   color: #333333;
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+}
+
 body {
   position: relative;
   font-family: var(--font-poppins), sans-serif;
@@ -128,14 +139,27 @@ select {
   flex: 1;
   min-width: 200px;
   max-width: 500px;
-  padding: 0.5rem;
+  padding: 1rem;
   border: 1px solid #cfcfcf;
   background-color: #fff;
   border-radius: 4px;
-  font-size: 1rem;
+  font-size: 1.5rem;
   color: black;
 }
 
+label {
+  font-size: 1.5rem;
+  font-weight: bold;
+  display: block;
+}
+
+button {
+  font-size: 1.5rem;
+  padding: 1rem 1.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 .groupInput {
   display: flex;
   flex-wrap: wrap;
@@ -145,13 +169,9 @@ select {
 }
 
 .button {
-  padding: 0.5rem 1.25rem;
-  font-size: 1rem;
   font-weight: bold;
   border: none;
   color: #ffffff;
-  border-radius: 4px;
-  cursor: pointer;
   transition: background-color 0.2s ease;
   max-width: 240px;
 }
@@ -182,6 +202,7 @@ select {
 
 ul {
   list-style: none;
+  font-size: 1.5rem;
 }
 
 .containerInput {
@@ -198,12 +219,6 @@ ul {
   width: 100%;
 }
 
-.label {
-  font-size: 1rem;
-  font-weight: bold;
-  display: block;
-}
-
 a {
   text-decoration: none;
 }
@@ -227,7 +242,7 @@ a {
   top: 0;
   left: 0;
   width: 100%;
-  font-size: 1.75rem;
+  font-size: 2.5rem;
   font-weight: bold;
   text-align: start;
   border-bottom: 1px solid #cfcfcf;
@@ -289,6 +304,10 @@ form {
   border-bottom: 1px solid rgb(1, 92, 184);
 }
 
+p{
+  font-size: 1.5rem;
+}
+
 @media (max-width: 800px) {
   header {
     padding: 6px 16px;