diff --git a/EnotaryoPH/EnotaryoPH.Web/Pages/Index.cshtml b/EnotaryoPH/EnotaryoPH.Web/Pages/Index.cshtml
index 40ddaa4..94d1f76 100644
--- a/EnotaryoPH/EnotaryoPH.Web/Pages/Index.cshtml
+++ b/EnotaryoPH/EnotaryoPH.Web/Pages/Index.cshtml
@@ -2,25 +2,132 @@
 @model IndexModel
 @{
     ViewData["Title"] = "Home page";
+    Layout = "_Blank";
 }
 
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
-</div>
 
-<form method="post">
-    <button onclick="onClickMe">
-        click me
-    </button>
-</form>
-
-
-
-@section Scripts {
-    <script>
-        function onClickMe() {
-            alert('yoloooo');
-        }
-    </script>
-}
\ No newline at end of file
+    <header></header>
+    <div class="container" style="max-width: 1000px;font-weight: bold;">
+        <nav class="navbar navbar-expand-md bg-body py-3">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="#">
+                    <span class="bs-icon-sm bs-icon-rounded d-flex justify-content-center align-items-center bs-icon" style="border-radius: 0px;">
+                        <svg class="bi bi-pen-fill" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001"></path>
+                        </svg>
+                    </span><span>eNotaryo PH</span>
+                </a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-3"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+                <div id="navcol-3" class="collapse navbar-collapse">
+                    <ul class="navbar-nav mx-auto">
+                        <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
+                        <li class="nav-item"></li>
+                        <li class="nav-item"><a class="nav-link" href="#HowItWorks">How it works</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
+                    </ul>
+                    <a href="/login" class="btn btn-primary">Login</a>
+                </div>
+            </div>
+        </nav>
+        <div class="text-center">
+            <div class="row text-center pt-4">
+                <div class="col mx-auto col-md-8">
+                    <h1 class="display-4 fw-bold mb-5"><strong><span style="color: rgb(18, 22, 67);">Notarize your documents from the </span></strong><span class="underline">comfort</span><strong><span style="color: rgb(18, 22, 67);"> of your home or office </span></strong></h1>
+                    <div></div>
+                    <p class="fs-5 text-muted mb-5">Subscribe to our newsletter to get the latest updates.</p>
+                    <form class="d-flex justify-content-center flex-wrap">
+                        <div class="shadow-lg mb-3"><input class="form-control" type="email" placeholder="Your Email" /></div>
+                        <div class="shadow-lg mb-3"><button class="btn btn-primary disabled" type="button">Subscribe</button></div>
+                    </form>
+                </div>
+                <div class="col col-12 col-lg-10 mx-auto">
+                    <div class="text-center position-relative"><img class="img-fluid" src="images/landing_02.png" /></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <section class="mt-5">
+        <div class="container" style="max-width: 1000px;">
+            <h3 id="HowItWorks" class="display-6 fw-bold text-center">How Does It Work?</h3>
+            <div class="row">
+                <div class="col d-flex">
+                    <div class="card">
+                        <div class="card-body m-4">
+                            <div class="text-start py-3">
+                                <svg class="bi bi-camera fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z"></path>
+                                    <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"></path>
+                                </svg>
+                            </div>
+                            <h4 class="card-title">Take a Selfie</h4>
+                            <h6 class="text-muted card-subtitle mb-2">Use your phone or web camera</h6>
+                            <p class="card-text">Sit back and relax while our facial recognition system analyze your identification.</p><a class="card-link btn-sm" href="#">
+                                Learn More
+                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col d-flex">
+                    <div class="card">
+                        <div class="card-body m-4">
+                            <div class="text-start py-3">
+                                <svg class="bi bi-cloud-upload fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
+                                    <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708z"></path>
+                                </svg>
+                            </div>
+                            <h4 class="card-title">Upload the document</h4>
+                            <h6 class="text-muted card-subtitle mb-2">PDF and MS Word Documents</h6>
+                            <p class="card-text">Simply upload your document and enter the necessary information and we will book an available notary public for you.</p><a class="card-link btn-sm" href="#">
+                                Learn More
+                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col d-flex">
+                    <div class="card">
+                        <div class="card-body m-4">
+                            <div class="text-start py-3">
+                                <svg class="bi bi-camera-video fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path>
+                                </svg>
+                            </div>
+                            <h4 class="card-title">Video Conference</h4>
+                            <h6 class="text-muted card-subtitle mb-2">Meet with Notary Public</h6>
+                            <p class="card-text">The final step is to talk to our notary public team. Once payment has been settled, you can now download the notarized document.</p><a class="card-link btn-sm" href="#">
+                                Learn More
+                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="mt-5">
+        <div class="container" style="max-width: 1000px;">
+            <h3 id="Contact" class="display-6 fw-bold text-center">Got Any Questions?</h3>
+            <div class="row">
+                <div class="col col-md-8 col-xl-6 mx-auto text-center">
+                    <form class="p-3 p-xl-4">
+                        <div class="mb-3"><input class="form-control shadow" type="text" placeholder="Name" /></div>
+                        <div class="mb-3"><input class="form-control shadow" type="email" placeholder="Email" /></div>
+                        <div class="mb-3"><textarea class="form-control shadow" placeholder="Message" rows="4"></textarea></div>
+                        <div><button class="btn btn-primary d-block w-100 shadow-lg" type="button">Submit</button></div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer class="mt-5">
+        <div class="container" style="max-width: 1000px;">
+            <p>Copyright <span style="color: rgba(18, 22, 67, 0.75);">©</span> 2025 eNotaryoPH</p>
+        </div>
+    </footer>
diff --git a/EnotaryoPH/EnotaryoPH.Web/wwwroot/css/enotaryo.css b/EnotaryoPH/EnotaryoPH.Web/wwwroot/css/enotaryo.css
index 97f591c..4908f6f 100644
--- a/EnotaryoPH/EnotaryoPH.Web/wwwroot/css/enotaryo.css
+++ b/EnotaryoPH/EnotaryoPH.Web/wwwroot/css/enotaryo.css
@@ -150,4 +150,21 @@ a span.sidemenu__menuitem__text {
 
 .validation-summary-errors li {
   list-style-type: none;
-}
\ No newline at end of file
+}
+
+.underline:after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  border-radius: 5px;
+  background: var(--bs-success);
+  z-index: -1;
+}
+
+.underline {
+  position: relative;
+}
+
diff --git a/EnotaryoPH/EnotaryoPH.Web/wwwroot/images/landing_02.png b/EnotaryoPH/EnotaryoPH.Web/wwwroot/images/landing_02.png
new file mode 100644
index 0000000..65c1a04
Binary files /dev/null and b/EnotaryoPH/EnotaryoPH.Web/wwwroot/images/landing_02.png differ