diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4d26708..0e4e237 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,4 +1,3 @@
-
 <footer class="bg-dark text-white py-4">
     <div class="container">
         <div class="row">
@@ -9,18 +8,20 @@
                 </p>
             </div>
             <div class="col-md-6 text-center text-md-end">
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-facebook-f"></i></a
-                >
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-twitter"></i></a
-                >
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-instagram"></i></a
-                >
-                <a href="#" class="text-white"
-                    ><i class="fab fa-linkedin-in"></i></a
-                >
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-facebook-f"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                |
+                <a href="/contacto" class="text-light ms-2 text-decoration-none">Contacto</a>
             </div>
         </div>
     </div>
diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
new file mode 100644
index 0000000..96f618d
--- /dev/null
+++ b/src/pages/contacto.astro
@@ -0,0 +1,125 @@
+---
+import Footer from "../components/Footer.astro";
+import Navbar from "../components/Navbar.astro";
+
+const animateOnScroll = `
+  document.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate__animated', 'animate__fadeIn');
+          entry.target.style.visibility = 'visible';
+        }
+      });
+    });
+
+    document.querySelectorAll('.animate-on-scroll').forEach(el => {
+      observer.observe(el);
+    });
+  });
+`;
+---
+
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="sitemap" href="/sitemap-index.xml" />
+        <meta
+            name="description"
+            content="Contacta con nosotros para cualquier duda sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS)."
+        />
+        <link rel="icon" type="image/png" href="logo.png" />
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
+        <title>Contacto | Ecobjetivos</title>
+    </head>
+    <body>
+        <div class="page-container">
+        <Navbar />
+
+        <main class="container py-5">
+            <h1 class="text-center mt-4 mb-5 animate__animated animate__fadeInDown">Contacta con Nosotros</h1>
+            
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="card shadow-lg animate-on-scroll">
+                        <div class="card-body p-5">
+                            <div class="row mb-4 justify-content-center">
+                                <div class="col-md-6 mb-4 mb-md-0">
+                                    <div class="text-center">
+                                        <i class="fas fa-envelope fa-3x text-primary mb-3"></i>
+                                        <h3>Email</h3>
+                                        <p>Escríbenos a:</p>
+                                        <a href="mailto:ecobjetivos@h4ckdata.es" class="btn btn-primary">
+                                            ecobjetivos@h4ckdata.es
+                                        </a>
+                                    </div>
+                                </div>
+<!--                                 <div class="col-md-6">
+                                    <div class="text-center">
+                                        <i class="fab fa-discord fa-3x text-primary mb-3"></i>
+                                        <h3>Discord</h3>
+                                        <p>Únete a nuestra comunidad:</p>
+                                        <a href="https://discord.gg/tuenlace" class="btn btn-primary">
+                                            Servidor de Discord
+                                        </a>
+                                    </div>
+                                </div> -->
+                            </div>
+<!-- 
+                            <hr class="my-5" />
+
+                            <form class="animate-on-scroll">
+                                <h3 class="text-center mb-4">O envíanos un mensaje directamente</h3>
+                                <div class="mb-3">
+                                    <label for="nombre" class="form-label">Nombre</label>
+                                    <input type="text" class="form-control" id="nombre" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="email" class="form-label">Email</label>
+                                    <input type="email" class="form-control" id="email" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="asunto" class="form-label">Asunto</label>
+                                    <input type="text" class="form-control" id="asunto" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="mensaje" class="form-label">Mensaje</label>
+                                    <textarea class="form-control" id="mensaje" rows="5" required></textarea>
+                                </div>
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-primary btn-lg">Enviar Mensaje</button>
+                                </div>
+                            </form> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <Footer/>
+        </div>
+
+        <script set:html={animateOnScroll} />
+    </body>
+</html>
+
+<style>
+.page-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  main {
+    flex: 1;
+  }
+</style>
\ No newline at end of file
