diff --git a/src/components/Events.css b/src/components/Events.css
index e2d6747..af5dac9 100644
--- a/src/components/Events.css
+++ b/src/components/Events.css
@@ -7,14 +7,16 @@
   justify-content: center;
   align-items: center;
   margin-top: 50px;
-  gap: 70px;
+  gap: 70px;  
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }
 
 .events {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
+  flex-direction: column;  
 }
 
 .events h2 {
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index a17e07d..440d955 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -36,7 +36,7 @@ import "swiper/css/scrollbar";
 export default function App() {
   return (
     <>
-      <div className="container">
+      <div className="container" id="Eventos">
         <div className="events">
           <h2 className="gray">Conferecias</h2>
           <h2>Tallereres</h2>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e4fd928..6e9e652 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,8 +1,8 @@
 ---
 import "./cssFooter/footer.css"
 ---
-
-<div class="container-header">
+<section class="separacion">
+<div class="container-header" id="Faq">
   <h2 class="header-footer">Preguntas frecuentes</h2>
 </div>
 <hr />
@@ -76,3 +76,4 @@ import "./cssFooter/footer.css"
     </div>
   </details>
 </section>
+</section>
diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
index 4c38355..cbf5b2d 100644
--- a/src/components/Inicio.astro
+++ b/src/components/Inicio.astro
@@ -15,11 +15,11 @@ import "./cssInicio/variables.css"
 						alt="Logo de IEEE"
 					/>
 
-					<button class="botonNav">Inicio</button>
-					<button class="botonNav">Eventos</button>
-					<button class="botonNav">Próximamente</button>
+					<button class="botonNav"><a href="#Inicio">Inicio</a></button>
+					<button class="botonNav"><a href="#Eventos">Eventos</a></button>
+					<button class="botonNav"><a href="#Soon">Próximamente</a></button>
 					<button class="botonNav"><a href="#Unete">Únete</a></button>
-					<button class="botonNav">FAQ</button>
+					<button class="botonNav"><a href="#Faq">FAQ</a></button>
 					<div class="RedesyInicio">
 						<button class="botonNav">Redes</button>
 						<button class="irInicio">Inicio</button>
diff --git a/src/components/Soon.astro b/src/components/Soon.astro
index d86da51..1f50126 100644
--- a/src/components/Soon.astro
+++ b/src/components/Soon.astro
@@ -10,16 +10,8 @@ import w6 from '../../public/SoonEvents/weekend6.jpeg'
 import w7 from '../../public/SoonEvents/weekend7.jpeg'
 ---
 
-<section class="soon">
-  <div class="dd">
-    <div>
-      <h1 class="titulo">Próximamente</h1>
-      <div class="underline"></div>
-    </div>
-    <div class="bt">
-      <a class="linkss" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSct2Q_Do6s-0msDDiMrhkQ8fgI643QsAvOi89RT6-RGoL6gTQ/viewform">Regístrate</a>
-  </div>
-  </div>
+<section class="soon" id="Soon">
+    
   <swiper-container class="mySwiper" pagination="true" effect="coverflow" grab-cursor="true" centered-slides="true"
   slides-per-view="auto" coverflow-effect-rotate="50" coverflow-effect-stretch="0" coverflow-effect-depth="100"
   coverflow-effect-modifier="1" coverflow-effect-slide-shadows="true">
@@ -75,46 +67,27 @@ import w7 from '../../public/SoonEvents/weekend7.jpeg'
   background-color: #013d68;
 }
 
-.dd{
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-  padding-left: 100px;
-  padding-right: 100px;
-}
-
 .soon{
     width: 100%;
     height: auto;
     background-size: cover;
+    padding-top: 3rem;
 }
 
-.titulo {
-  color: #035b98;
-  font-size: 90px;
-  font-family: "Cousine", monospace;
-  text-align: left;
-}
-
-.underline {
-  width: 150px;
-  float: left;
-  border: 10px solid #035b98;
-}
 </style>
 <style>
   swiper-container {
     width: 100%;
-    padding-top: 50px;
-    padding-bottom: 20px;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
   }
 
   swiper-slide {
     background-position: center;
     background-size: cover;
-    width: 500px;
+    width: 400px;
     height: auto;
-    margin-bottom: 40px;
+    margin-bottom: 80px;
   }
 
   swiper-slide img {
diff --git a/src/components/Titulos.astro b/src/components/Titulos.astro
new file mode 100644
index 0000000..2608651
--- /dev/null
+++ b/src/components/Titulos.astro
@@ -0,0 +1,45 @@
+---
+interface Props {
+	titulo: string;
+}
+const { titulo } = Astro.props
+---
+<section>
+    <h1 class="titulo">{titulo}</h1>
+    <div class="underline"></div>
+</section>
+
+<style>
+    .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;
+    }
+
+    @media screen and (max-width:800px)
+    {
+    .titulo
+        {
+            text-align: left;
+        }
+    .underline
+        {
+            float: left;
+            position: relative;
+            left: 5%;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Unete.astro b/src/components/Unete.astro
index f7134c1..e6e7103 100644
--- a/src/components/Unete.astro
+++ b/src/components/Unete.astro
@@ -2,16 +2,14 @@
 import "./cssUnete/Unete.css"
 ---
 
-<section class="unete" id="Unete">
-  <h1 class="titulo">Únete</h1>
-  <div class="underline"></div>
+<section class="unete">
 <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">
+  <div class="list">
     <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>
@@ -21,14 +19,14 @@ import "./cssUnete/Unete.css"
       <h3 class="tex">tus habilidades</h3>
     <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
   </div>
-  <div class="list right">
+  <div class="list">
     <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="">Unirse</a>
   <a class="links" href="\-">Saber más</a>
 </div>
 </section>
diff --git a/src/components/cssFooter/footer.css b/src/components/cssFooter/footer.css
index 211f4e6..559f36d 100644
--- a/src/components/cssFooter/footer.css
+++ b/src/components/cssFooter/footer.css
@@ -11,7 +11,11 @@
     border-radius: 1.5em;
     margin: auto;
 }
-
+.separacion
+{
+    padding-top: 5rem;
+    padding-bottom: 4rem;
+}
 a{
     text-decoration: underline;
 }
diff --git a/src/components/cssUnete/Unete.css b/src/components/cssUnete/Unete.css
index b553232..cea7dbb 100644
--- a/src/components/cssUnete/Unete.css
+++ b/src/components/cssUnete/Unete.css
@@ -6,29 +6,12 @@
   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);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
   padding-top: 30px;
 }
 .alterno
@@ -37,9 +20,8 @@
 }
 .list {
   padding: 3rem;
-  width: 370px;
+  width: 400px;
   height: auto;
-  padding-left:35%;
 }
 .sub
 {
@@ -71,7 +53,7 @@
 {
   display: flex;
   padding-top: 5rem;
-  padding-bottom: 5rem;
+  padding-bottom: 1rem;
   justify-content: center;
   gap: 9rem;
 }
@@ -97,32 +79,9 @@
 
   @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;
     }
   }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c35645d..996932d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,13 +9,25 @@ import "../components/cssInicio/navInicio.css";
 import "../components/cssInicio/contenedorBienvenida.css";
 import Footer from "../components/Footer.astro";
 import Inicio from "../components/Inicio.astro";
+import Titulos from "../components/Titulos.astro";
 ---
 
 <Layout title="Welcome to StudentWebHub">
     <Inicio />
-    <Events client:load />
-    <Soon/>
+    <Titulos
+      titulo="Evéntos"
+    />
+    <Events />
+    <Titulos 
+      titulo="Próximo"  
+    />
+    <Soon />
+    <Titulos 
+     titulo="Únete" 
+    />
     <Unete />
+    <Titulos 
+      titulo="FAQ"  
+    />
     <Footer/>
-  </main>
 </Layout>