diff --git a/website/index.html b/website/index.html
index 6173ddb526..6f51e9f1da 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta charset="utf-8">
-    <title>One Page Wonder - Start Bootstrap Template</title>
+    <title>Real State- 4Geeks</title>
+    <link rel="icon" href="https://img.magnific.com/vector-gratis/logotipo-soluciones-inmobiliarias-hogar-que-es-solucion-hogar_527952-33.jpg?semt=ais_hybrid&w=740&q=80" type="image/x-icon">
     <!-- Required meta tags -->
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
@@ -19,13 +20,12 @@
     <!-- Navigation -->
     <div class="container-fluid">
         <span require-file="./templates/navbar.html"></span>
-        <!-- Full Width Image Header -->
-        <span require-file="./templates/tagline.html"></span>
     </div>
     <!-- Page Content -->
     <div class="container-fluid">
         <!-- First Featurette -->
         <span require-file="./templates/first_heading.html"></span>
+        <span require-file="./templates/tagline.html"></span>
         <span require-file="./templates/services.html"></span>
         <span require-file="./templates/portfolio.html"></span>
         <span require-file="./templates/contact.html"></span>
diff --git a/website/templates/first_heading.html b/website/templates/first_heading.html
index b67bf72e78..d43ee4e77c 100644
--- a/website/templates/first_heading.html
+++ b/website/templates/first_heading.html
@@ -1,2 +1,43 @@
 <!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap"
+        rel="stylesheet">
+    <title>Website Proyect</title>
+</head>
+
+<body>
+    <section class="vh-100 d-flex justify-content-center align-items-center text-center" style="
+    background-image: url('https://images.unsplash.com/photo-1767950470198-c9cd97f8ed87?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    background-size: cover;
+    background-position: center-top;
+    position: relative;">
+        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0,0,0,0.45);"></div>
+        <div class="position-relative text-white px-3">
+            <h1 style="
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 6rem;
+            font-weight: 300;
+            letter-spacing: 3px;">
+                ENCONTRAMOS <br>
+                EL LUGAR PERFECTO
+            </h1>
+
+            <p class="mt-4" style="
+            font-size: 1.5rem;
+            letter-spacing: 6px;">
+                PARA VIVIR TUS MEJORES MOMENTOS
+            </p>
+        </div>
+    </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/website/templates/navbar.html b/website/templates/navbar.html
index 360f7b448d..57e1ceb1f6 100644
--- a/website/templates/navbar.html
+++ b/website/templates/navbar.html
@@ -1,2 +1,54 @@
 <!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navbar - Website Proyect</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top px-4">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <img src="https://img.magnific.com/vector-gratis/logotipo-soluciones-inmobiliarias-hogar-que-es-solucion-hogar_527952-33.jpg?semt=ais_hybrid&w=740&q=80"
+                    alt="logo" class="rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
+            </a>
+            <p class="text-white ms-3 mb-0">
+                Real State - 4Geeks
+            </p>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse justify-content-end" id="menu">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link text-white mx-2" href="#">Inicio</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-white mx-2" href="#">Nosotros</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-white mx-2" href="#">Servicios</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-white mx-2" href="#">Contacto</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/website/templates/tagline.html b/website/templates/tagline.html
index e53970b1ac..aa940a3d07 100644
--- a/website/templates/tagline.html
+++ b/website/templates/tagline.html
@@ -1,3 +1,39 @@
 <!-- your html code here -->
 <!-- Also called a hero image or a jumbotron before bootstrap 5. This might be helpful: https://getbootstrap.com/docs/5.1/examples/jumbotron/ -->
-<p>Hello, I'm the tagline and I was loaded using ajax from templates/tagline.html</p>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Website Proyect</title>
+</head>
+
+<body>
+    <section class="container-fluid py-5 bg-white">
+        <div class="row justify-content-center text-center">
+            <div class="col-lg-8">
+                <h2 style="
+                    font-family: 'Cormorant Garamond', serif;
+                    font-size: 3rem;
+                    color: #1f1f1f;
+                    font-weight: 400;">
+                    Espacios
+                    <span style="color: #c8a46b;">
+                        que cuentan una historia
+                    </span>
+                </h2>
+                <p class="mt-4 text-secondary" style="
+                    font-size: 1.2rem;
+                    letter-spacing: 1px;
+                    line-height: 1.8;">
+                    Descubre fincas y propiedades exclusivas diseñadas
+                    para disfrutar de la tranquilidad, el confort y
+                    los mejores momentos en familia.
+                </p>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
\ No newline at end of file
