diff --git a/package-lock.json b/package-lock.json
index 141b8bf..4215ced 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@types/react": "^18.2.59",
         "@types/react-dom": "^18.2.19",
         "astro": "^4.4.1",
+        "dependence": "^1.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "swiper": "^11.0.6",
@@ -1575,6 +1576,11 @@
         "sharp": "^0.32.6"
       }
     },
+    "node_modules/async": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w=="
+    },
     "node_modules/axobject-query": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
@@ -1598,6 +1604,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
     "node_modules/bare-events": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.0.tgz",
@@ -1726,6 +1737,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -2121,6 +2141,11 @@
       "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
       "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w=="
     },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2215,6 +2240,15 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/dependence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/dependence/-/dependence-1.1.0.tgz",
+      "integrity": "sha512-aI+4GM+cngonO1TFa7gYmucyBL9l/M0t/1PyT7i33XOqD6oEecw8D+SOi49of9RjidZR9rx03NgzJv7PJrehjg==",
+      "dependencies": {
+        "async": "^1.4.2",
+        "glob": "^5.0.15"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2603,6 +2637,21 @@
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "node_modules/glob": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+      "integrity": "sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==",
+      "dependencies": {
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "2 || 3",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -2876,6 +2925,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -4070,6 +4128,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
@@ -4190,7 +4259,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "optional": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -4383,6 +4451,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6468,8 +6544,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "optional": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/y18n": {
       "version": "5.0.8",
diff --git a/package.json b/package.json
index 238d7e5..cecc0f7 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.19",
     "astro": "^4.4.1",
+    "dependence": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "swiper": "^11.0.6",
diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
index 56ddb9c..4c38355 100644
--- a/src/components/Inicio.astro
+++ b/src/components/Inicio.astro
@@ -1,3 +1,10 @@
+---
+import "./cssInicio/contenedorBienvenida.css"
+import "./cssInicio/fondo.css"
+import "./cssInicio/navInicio.css"
+import "./cssInicio/variables.css"
+---	
+	
 	<section id="Inicio">
 		<div class="containerInicio">
 			<section class="filtroInicio">
diff --git a/src/components/Unete.astro b/src/components/Unete.astro
index 9bbfdd4..f7134c1 100644
--- a/src/components/Unete.astro
+++ b/src/components/Unete.astro
@@ -1,60 +1,34 @@
 ---
-import "./Unete.css"
+import "./cssUnete/Unete.css"
 ---
 
 <section class="unete" id="Unete">
   <h1 class="titulo">Únete</h1>
   <div class="underline"></div>
-  <div class="beneficios">
-    <div class="list">
-      <h2 class="sub">
-        <span class="tex"
-          ><span class="numero">1</span><span class="alterno"> Potencia</span>
-          <h3 class="tex">tus habilidades</h3>
-          <p class="desc">
-            Uniendote al comité podrás desarrollar tus habilidades
-          </p>
-        </span>
-        <div class="list right">
-          <h2 class="sub">
-            Potencia <span class="tex"
-              ><span class="numero">3</span>
-              <h3 class="tex">tus habilidades</h3>
-              <p class="desc">
-                Uniendote al comité podrás desarrollar tus habilidades
-              </p>
-            </span>
-            <div class="list">
-              <h2 class="sub">
-                <span class="tex"
-                  ><span class="numero">2</span><span class="alterno">
-                    Potencia</span
-                  >
-                  <h3 class="tex">tus habilidades</h3>
-                  <p class="desc">
-                    Uniendote al comité podrás desarrollar tus habilidades
-                  </p>
-                </span>
-                <div class="list right">
-                  <h2 class="sub">
-                    Potencia <span class="tex"
-                      ><span class="numero">4</span>
-                      <h3 class="tex">tus habilidades</h3>
-                      <p class="desc">
-                        Uniendote al comité podrás desarrollar tus habilidades
-                      </p>
-                    </span>
-                  </h2>
-                  <div class="botones">
-                    <a class="links" href="\-">Unirse</a>
-                    <a class="links" href="\-">Saber más</a>
-                  </div>
-                </div>
-              </h2>
-            </div>
-          </h2>
-        </div>
-      </h2>
-    </div>
+<div class="beneficios">
+  <div class="list">
+    <h2 class="sub"><span class="tex"><span class="numero">1</span><span class="alterno">  Potencia</span> 
+      <h3 class="tex">tus habilidades</h3>
+    <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
   </div>
+  <div class="list right">
+    <h2 class="sub"> Potencia <span class="tex"><span class="numero">2</span>
+      <h3 class="tex">tus habilidades</h3>
+    <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
+  </div>
+  <div class="list">
+    <h2 class="sub"><span class="tex"><span class="numero">3</span><span class="alterno"> Potencia</span> 
+      <h3 class="tex">tus habilidades</h3>
+    <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
+  </div>
+  <div class="list right">
+    <h2 class="sub">Potencia <span class="tex"><span class="numero">4</span>
+      <h3 class="tex">tus habilidades</h3>
+    <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
+  </div>
+</div>
+<div class="botones">
+  <a class="links" href="\-">Unirse</a>
+  <a class="links" href="\-">Saber más</a>
+</div>
 </section>
diff --git a/src/components/Unete.css b/src/components/Unete.css
deleted file mode 100644
index 8cc5f6c..0000000
--- a/src/components/Unete.css
+++ /dev/null
@@ -1,95 +0,0 @@
-* {
-  box-sizing: border-box;
-  font-family: "Cousine", monospace;
-}
-main {
-  max-width: calc(100% - 2rem);
-  color: white;
-  font-size: 20px;
-  line-height: 1.6;
-}
-.unete {
-  padding: 20px;
-  height: auto;
-  width: auto;
-}
-
-.titulo {
-  color: #035b98;
-  font-size: 90px;
-  font-family: "Cousine", monospace;
-  line-height: 1;
-  text-align: right;
-  padding-top: 4rem;
-  padding-bottom: 1rem;
-  padding-right: 1rem;
-}
-.underline {
-  margin-right: 2rem;
-  width: 150px;
-  float: right;
-  border: 10px solid #035b98;
-}
-.beneficios {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  padding-top: 30px;
-  width: auto;
-  height: auto;
-  font-family: "Cousine", monospace;
-}
-.alterno {
-  color: #000000;
-}
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  text-align: center;
-  padding-left: 15vh;
-  padding-top: 4rem;
-}
-.right {
-  padding-left: 20vh;
-}
-.sub {
-  font-size: 40px;
-  text-align: center;
-  text-transform: uppercase;
-  color: #000000;
-}
-.numero {
-  font-size: 56px;
-  color: #035b98;
-}
-.tex {
-  text-transform: uppercase;
-  font-size: 40px;
-  text-align: center;
-  color: #035b98;
-}
-.desc {
-  color: #000000;
-  text-align: center;
-  font-size: 15px;
-  font-weight: normal;
-}
-.botones {
-  display: flex;
-  padding: 4rem;
-  justify-content: center;
-  gap: 10rem;
-}
-.links {
-  width: 200px;
-  height: 50px;
-  text-decoration: none;
-  background: #035b98;
-  border: 2px solid #013d68;
-  border-radius: 10px;
-  text-align: center;
-  color: #ffff;
-  padding-top: 10px;
-}
-.links:hover {
-  background-color: #013d68;
-}
diff --git a/src/components/cssUnete/Unete.css b/src/components/cssUnete/Unete.css
new file mode 100644
index 0000000..b553232
--- /dev/null
+++ b/src/components/cssUnete/Unete.css
@@ -0,0 +1,129 @@
+
+.unete
+{
+  padding-top: 20px;
+  padding-bottom: 20px;
+  height: auto;
+  width: auto;
+}
+
+.titulo {
+  color: #035B98;
+  font-size: 90px;	
+  font-family: "Cousine", monospace;
+  line-height: 1;
+  text-align: right;
+  padding-top: 4rem;
+  padding-bottom: 1rem;	
+  padding-right: 1rem;
+  
+}
+.underline
+{
+  margin-right: 2rem;
+  width: 150px;
+  float: right;
+  border: 10px solid #035B98;
+}
+.beneficios
+{
+  display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  padding-top: 30px;
+}
+.alterno
+{
+  color: #000000;
+}
+.list {
+  padding: 3rem;
+  width: 370px;
+  height: auto;
+  padding-left:35%;
+}
+.sub
+{
+  font-size: 40px;
+  text-align: center;
+  text-transform: uppercase;
+      color: #000000;
+}
+.numero
+{
+  font-size: 56px;
+  color: #035B98;
+}
+.tex
+{
+  text-transform: uppercase;
+  font-size: 40px;
+  text-align: center;
+  color: #035B98;
+}
+.desc
+{
+  color: #000000;
+  text-align: center;
+  font-size: 15px;
+  font-weight: normal;
+}
+.botones
+{
+  display: flex;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  justify-content: center;
+  gap: 9rem;
+}
+.links
+{
+  width: 200px;
+  height: 30px;
+  text-decoration: none;
+  background: #035B98;
+  border: 2px solid #013d68;
+  border-radius: 10px;
+  text-align: center;
+  color: #ffff;
+  padding-top: 15px;
+}
+  .links:hover
+  {
+      background-color: #013d68;
+  transform: translateY(-5px);
+  transition: 0.4s;
+  }
+
+
+  @media screen and (max-width:800px)
+  {
+    .titulo
+    {
+      text-align: left;
+    }
+    .underline
+    {
+      float: left;
+      position: relative;
+      left: 5%;
+    }
+    .beneficios
+    {      
+      display: flex;
+      flex-direction: column;
+    }
+    .list
+    {
+      position: relative;
+      left: -50%;
+      padding: 0rem;
+      padding-top: 4rem;
+    }
+    .botones
+    {
+      position:relative;
+      left: 13%;
+      gap: 2rem;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 57f0cde..5792aa3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -11,7 +11,7 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
 	  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 779297b..a0a0a9e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,63 +1,13 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Events from "../components/Events.tsx";
+import Events from "../components/Events";
 import Unete from "../components/Unete.astro";
 import Footer from "../components/Footer.astro";
-import "../components/cssInicio/variables.css";
-import "../components/cssInicio/fondo.css";
-import "../components/cssInicio/navInicio.css";
-import "../components/cssInicio/contenedorBienvenida.css";
+import Inicio from "../components/Inicio.astro";
 ---
 
-<Layout title="Welcome to Astro.">
-  <main>
-    <div class="containerInicio">
-      <section class="filtroInicio">
-        <div class="menuInicio">
-          <img src={""} class="logoIEEE" alt="Logo de IEEE" />
-
-          <button class="botonNav">Inicio</button>
-          <button class="botonNav">Eventos</button>
-          <button class="botonNav">Próximamente</button>
-          <button class="botonNav">Únete</button>
-          <button class="botonNav">FAQ</button>
-          <div class="RedesyInicio">
-            <button class="botonNav">Redes</button>
-            <button class="irInicio">Inicio</button>
-          </div>
-        </div>
-
-        <div class="contenedorBienvenida">
-          <div class="textobienvenida">
-            <h1>Save time by building fast with Boldo</h1>
-            <p>
-              Lorem Ipsum es simplemente el texto de relleno de las imprentas y
-              archivos de texto. Lorem Ipsum ha sido el texto de relleno
-              estándar de las
-            </p>
-            <div class="divContactar">
-              <button class="Contactar1">Contactar</button>
-              <button class="Contactar2">Contactar</button>
-            </div>
-          </div>
-          <div class="imagenesbienvenida">
-            <img class="imgarriba" src="./imagenes/1.png" />
-            <div>
-              <img class="imgabajo" src="./imagenes/2.png" />
-              <img class="imgabajo" src="./imagenes/3.jpg" />
-            </div>
-          </div>
-        </div>
-        <div class="logotiposBienvenida">
-          <img src="./imagenes/csociety_logo.png" />
-          <img src="./imagenes/uaeh_logo_color.png" />
-          <img src="./imagenes/logoESTL.png" />
-          <img src="./imagenes/ieeelogo2.png" />
-        </div>
-      </section>
-
-      <div class="esferaAzul ubicacionEsfera"></div>
-    </div>
+<Layout title="Welcome to StudentWebHub">
+    <Inicio />
     <Events client:load />
     <Unete />
     <Footer/>