diff --git a/assets/images/address_mark.png b/assets/images/address_mark.png
new file mode 100644
index 0000000..6e2048d
Binary files /dev/null and b/assets/images/address_mark.png differ
diff --git a/assets/images/cover_image_landing.png b/assets/images/cover_image_landing.png
new file mode 100644
index 0000000..5bef7be
Binary files /dev/null and b/assets/images/cover_image_landing.png differ
diff --git a/assets/images/fingerprint_lock_keys.png b/assets/images/fingerprint_lock_keys.png
new file mode 100644
index 0000000..85c46a0
Binary files /dev/null and b/assets/images/fingerprint_lock_keys.png differ
diff --git a/css/landing.css b/css/landing.css
index e69de29..079f455 100644
--- a/css/landing.css
+++ b/css/landing.css
@@ -0,0 +1,380 @@
+.lp-main-cover-slide {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    padding: 25px 10px;
+    gap: 15px;
+}
+.lp-main-cover-slide-text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 15px;
+
+    width: 200px;
+}
+.lp-main-cover-slide-text-title {
+    color: #02114A;
+
+    font-family: Space Grotesk;
+    font-size: 20px;
+    
+    text-align: start;
+}
+.lp-main-cover-slide-text-subtitle {
+    color: #000000CF;
+
+    font-family: Space Grotesk;
+    font-size: 14px;
+    
+}
+.lp-main-cover-slide-action-button {
+    background-color: #02114A;
+    color: white;
+
+    border-radius: 3px;
+    padding: 5px 20px;
+
+    font-size: 13px;
+    font-family: Space Grotesk;
+
+    cursor: pointer;
+}
+.lp-main-cover-slide-art-container {
+    display: inline;
+}
+.lp-main-cover-slide-art-image {
+    height: 150px;
+    width: 216px;
+    object-fit: cover;
+}
+.lp-main-cover-slide-art-detail {
+    width: 20px;
+    height: 20px;
+
+    background-color: #02114A;
+    border-radius: 100%;
+
+    margin-top: -20px;
+    margin-left: 5px;
+}
+
+/* Desktop view */
+@media only screen and (min-width: 750px) {
+    .lp-main-cover-slide-text-container {
+        gap: 20px;
+        width: 300px;
+    }
+    .lp-main-cover-slide-art-detail {
+        width: 40px;
+        height: 40px;
+
+        margin-top: -40px;
+        margin-left: 10px;
+    }
+    .lp-main-cover-slide-art-image {
+        height: 300px;
+        width: 433px;
+    }
+    .lp-main-cover-slide-text-title {
+        font-size: 34px;
+    }
+    .lp-main-cover-slide-text-subtitle {
+        font-size: medium;
+    }
+    .lp-main-cover-slide-action-button {
+        border-radius: 5px;
+        padding: 10px 25px;
+        font-size: 16px;
+        margin-top: 20px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .lp-main-cover-slide-text-container {
+        gap: 35px;
+        width: 400px;
+    }
+    .lp-main-cover-slide-art-detail {
+        width: 55px;
+        height: 55px;
+
+        margin-top: -55px;
+        margin-left: 20px;
+    }
+    .lp-main-cover-slide-art-image {
+        height: 420px;
+        width: 605px;
+    }
+    .lp-main-cover-slide-text-title {
+        font-size: 45px;
+    }
+    .lp-main-cover-slide-text-subtitle {
+        font-size: 20px;
+    }
+    .lp-main-cover-slide-action-button {
+        border-radius: 10px;
+        padding: 12px 35px;
+        font-size: 24px;
+        margin-top: 30px;
+    }
+}
+/* SECOND COVER SLIDE */
+
+
+.lp-second-cover-slide-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+}
+.lp-second-cover-slide {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 350px;
+    gap: 7px;
+
+    margin-top: 40px;
+}
+.lp-second-cover-slide-title {
+    font-family: Space Grotesk;
+    font-size: 18px;
+    color: #02114A;
+    text-align: center;
+    font-weight: bold;
+}
+.lp-second-cover-slide-subtitle {
+    font-family: Space Grotesk;
+    font-size: 13px;
+    color: #000000CF;
+    text-align: center;
+}
+.lp-second-cover-slide-card-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    margin-top: 20px;
+}
+.lp-second-cover-slide-card {
+    width: 180px;
+    height: 275px;
+    background-color: white;
+    box-shadow: 7.488px 7.488px 14.976px rgba(0, 0, 0, 0.05);
+    border: 0.312px solid #D3D3D3;
+    border-radius: 5px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 0px 10px;
+}
+.lp-second-cover-slide-card-image {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 40px;
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+}
+.lp-second-cover-slide-card-text-title {
+    margin-top: 13px;
+
+    font-family: Space Grotesk;
+    font-size: 16px;
+    color: #000000;
+    font-weight: 500;
+    text-align: center;
+}
+.lp-second-cover-slide-card-text-subtitle {
+    font-family: Space Grotesk;
+    font-size: 12px;
+    color: #3b3b3b;
+    font-weight: 200;
+    text-align: center;
+}
+
+/* Desktop view */
+@media only screen and (min-width: 750px) {
+    .lp-second-cover-slide {
+        width: 500px;
+        gap: 7px;
+    }
+    .lp-second-cover-slide-title {
+        font-size: 28px;
+    }
+    .lp-second-cover-slide-subtitle {
+        font-size: medium;
+    }
+    .lp-second-cover-slide-card-container {
+        gap: 20px;
+    
+        margin-top: 20px;
+    }
+    .lp-second-cover-slide-card {
+        width: 210px;
+        height: 320px;
+        gap: 10px;
+        padding: 0px 20px;
+    }
+    .lp-second-cover-slide-card-image {
+        font-size: 50px;
+        width: 60px;
+        height: 60px;
+    }
+    .lp-second-cover-slide-card-text-title {
+        margin-top: 13px;
+    
+        font-size: 19px;
+    }
+    .lp-second-cover-slide-card-text-subtitle {
+        font-size: 13px;
+    }
+}
+@media only screen and (min-width: 1200px) {
+    .lp-second-cover-slide {
+        width: 600px;
+        gap: 10px;
+    }
+    .lp-second-cover-slide-title {
+        font-size: 39px;
+    }
+    .lp-second-cover-slide-subtitle {
+        font-size: 20px;
+    }
+    .lp-second-cover-slide-card-container {
+        gap: 35px;
+    
+        margin-top: 20px;
+    }
+    .lp-second-cover-slide-card {
+        width: 270px;
+        height: 380px;
+        gap: 10px;
+        padding: 0px 25px;
+    }
+    .lp-second-cover-slide-card-image {
+        font-size: 64px;
+        width: 70px;
+        height: 70px;
+    }
+    .lp-second-cover-slide-card-text-title {
+        margin-top: 30px;
+
+        font-size: 21px;
+    }
+    .lp-second-cover-slide-card-text-subtitle {
+        font-size: 14px;
+    }
+}
+
+/* Testimonials Section */
+
+.lp-testimonials-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+
+    margin-top: 50px;
+}
+.lp-testimonials-section-cards-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 20px;
+
+    margin-top: 20px;
+    padding: 0px 10px;
+    
+}
+
+.lp-testimonials-section-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    
+    gap: 10px;
+    padding: 5px 15px;
+    background-color: white;
+    height: 125px;
+    width: 250px;
+    border-radius: 5px;
+}
+
+.lp-testimonials-section-card-title {
+    font-size: 17px;
+    font-family: Space Grotesk;
+    color: #000000;
+    font-weight: bold;
+}
+.lp-testimonials-section-card-subtitle {
+    font-size: 9px;
+    font-family: Space Grotesk;
+    color: #000000;
+    font-weight: 500;
+}
+.lp-testimonials-section-card-description {
+    font-size: 12px;
+    font-family: Space Grotesk;
+    color: #3b3b3b;
+    font-weight: normal;
+    text-align: start;
+}
+
+/* Desktop view */
+@media only screen and (min-width: 750px) {
+    .lp-testimonials-section-card {
+        gap: 12px;
+        padding: 10px 30px;
+        height: 160px;
+        width: 300px;
+    }
+    
+    .lp-testimonials-section-card-title {
+        font-size: 19px;
+    }
+    .lp-testimonials-section-card-subtitle {
+        font-size: 10px;
+    }
+    .lp-testimonials-section-card-description {
+        font-size: 13px;
+    }
+    
+}
+@media only screen and (min-width: 1200px) {
+    .lp-testimonials-section-card {
+        gap: 15px;
+        padding: 14px 40px;
+        height: 200px;
+        width: 350px;
+    }
+    
+    .lp-testimonials-section-card-title {
+        font-size: 20px;
+    }
+    .lp-testimonials-section-card-subtitle {
+        font-size: 11px;
+    }
+    .lp-testimonials-section-card-description {
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/landing.rs b/src/pages/landing.rs
index 36734c5..ba915b5 100644
--- a/src/pages/landing.rs
+++ b/src/pages/landing.rs
@@ -1,15 +1,83 @@
 use yew::prelude::*;
+use yew_router::prelude::{use_navigator};
 
-use crate::components::{nav_bar::NavigationBar, footer::PageFooter};
+use crate::{components::{nav_bar::NavigationBar, footer::PageFooter}, routes::main_router::Route};
 
 
 #[function_component(LandingPage)]
 pub fn landing_page() -> Html {
+
+    let navigator = use_navigator().unwrap();
+    let go_to_proyect_page_on_click = Callback::from(move |_| navigator.push(&Route::Search));
+
     html!{
         <>
             <NavigationBar/>
-            <div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done
-                {"Landing Page"}
+            <div class={"page-container"} style={"margin-bottom: 10vh"}> //TODO: remove this margin when landing page done
+                
+                // Main section
+                <div class={"lp-main-cover-slide"}>
+                    <div class={"lp-main-cover-slide-text-container"}>
+                        <div class={"lp-main-cover-slide-text-title"}>{"Helping you find the property of your dreams."}</div>
+                        <div class={"lp-main-cover-slide-text-subtitle"}>{"Helping you create the lifestyle that you deserve."}</div>
+                        <div class={"lp-main-cover-slide-action-button"} onclick={go_to_proyect_page_on_click}>{"Learn More"}</div>
+                    </div>
+                    <div class={"lp-main-cover-slide-art-container"}>
+                        <img class={"lp-main-cover-slide-art-image"} src={"images/cover_image_landing.png"} alt={"cover-image"}/>
+                        <div class={"lp-main-cover-slide-art-detail"}/>
+                    </div>
+                </div>
+                
+                // Second section
+                <div class={"lp-second-cover-slide-container"}>
+                    <div class={"lp-second-cover-slide"}>
+                        <div class={"lp-second-cover-slide-title"}>{"Lets work together."}</div>
+                        <div class={"lp-second-cover-slide-subtitle"}>{"Trust the process and live in your dream house starting with a simple call."}</div>
+                        <div class={"lp-second-cover-slide-card-container"}>
+                            <div class={"lp-second-cover-slide-card"}>
+                                <div class={"lp-second-cover-slide-card-image"} style={"color:#02114A;"}>
+                                    <i class="fa-solid fa-location-dot"></i>
+                                </div>
+                                <div class={"lp-second-cover-slide-card-text-title"}>
+                                    {"Find a home"}
+                                </div>
+                                <div class={"lp-second-cover-slide-card-text-subtitle"}>
+                                    {"Get the property of your dream without the hassle of talking to tens of owners."}
+                                </div>
+                            </div>
+                            <div class={"lp-second-cover-slide-card"}>
+                                <img class={"lp-second-cover-slide-card-image"} style={"margin-top: 19px;"} src={"images/fingerprint_lock_keys.png"}/>
+                                <div class={"lp-second-cover-slide-card-text-title"} style={"margin-top: 10px;"}>
+                                    {"Make it Official"}
+                                </div>
+                                <div class={"lp-second-cover-slide-card-text-subtitle"}>
+                                    {"We have been in business for long time and clients all over the globe have trusted us to find their dream home. "}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                // Testimonials section
+
+                <div class={"lp-testimonials-section"}>
+                    <div class={"lp-second-cover-slide-title"}>{"Testimonials"}</div>
+                    <div class={"lp-second-cover-slide-subtitle"}>{"This is what our clients are saying."}</div>
+                    <div class={"lp-testimonials-section-cards-container"}>
+                        <div class={"lp-testimonials-section-card"}>
+                            <div class={"lp-testimonials-section-card-title"}>{"Franklin B."}</div>
+                            <div class={"lp-testimonials-section-card-subtitle"}>{"Santiago"}</div>
+                            <div class={"lp-testimonials-section-card-description"}>{"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fames ut dictumst urna, lorem nibh. Pretium leo hendrerit interdum netus"}</div>
+                        </div>
+                        <div class={"lp-testimonials-section-card"}>
+                            <div class={"lp-testimonials-section-card-title"}>{"F. Nuñez"}</div>
+                            <div class={"lp-testimonials-section-card-subtitle"}>{"Santo Domingo"}</div>
+                            <div class={"lp-testimonials-section-card-description"}>{"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fames ut dictumst urna, lorem nibh. Pretium leo hendrerit interdum netus"}</div>
+                        </div>
+                        
+                    </div>
+                    
+                </div>
             </div>
             <PageFooter/>
         </>