diff --git a/users_microservice/src/main/resources/static/css/styles.css b/users_microservice/src/main/resources/static/css/styles.css
index 88bebf3e..8042c783 100644
--- a/users_microservice/src/main/resources/static/css/styles.css
+++ b/users_microservice/src/main/resources/static/css/styles.css
@@ -6,18 +6,30 @@
   --light-green: #81c784;
   --focus-green: #4caf50;
   --pink: #ff69b4;
-  --light-grey: #f8f9fa;
-  --medium-grey: #e9ecef;
+  --light-grey: #1e1e1e;
+  --medium-grey: #2a2a2a;
+  --text-light: #e0e0e0;
+  --text-muted: #a0a0a0;
   --nav-height: 70px;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
-  background-color: #ffffff;
-  color: #111111;
+  background-color: #0a0a0a;
+  color: var(--text-light);
   font-family: 'Space Grotesk', system-ui, sans-serif;
   line-height: 1.6;
   scroll-behavior: smooth;
   padding-top: var(--nav-height);
+  margin: 0;
+}
+
+h1, h2, h3, h4 {
+  color: white;
+  font-weight: 700;
 }
 
 section {
@@ -32,6 +44,7 @@ section {
   background-color: var(--light-grey);
   margin: 0 auto 2rem auto;
   max-width: 1400px;
+  color: var(--text-light);
 }
 
 .section-medium {
@@ -39,39 +52,57 @@ section {
 }
 
 .card {
-  background-color: #ffffff;
+  background-color: #111111;
   border: 2px solid var(--pink) !important;
   border-radius: 10px;
+  color: var(--text-light);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.card h4 {
+  color: white;
+}
+
+.card p {
+  color: var(--text-muted);
+}
+
 .card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 12px 24px rgba(255,105,180,0.25);
+  box-shadow: 0 12px 24px rgba(255, 105, 180, 0.25);
+}
+
+.feature-img {
+  max-height: 160px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--pink);
+  margin-bottom: 1.25rem;
+  width: 100%;
 }
 
 .btn-black,
 .btn-primary-custom {
-  background-color: var(--black);
-  color: #ffffff;
-  border: 2px solid var(--black);
+  background-color: white;
+  color: var(--black);
+  border: 2px solid white;
   font-weight: 600;
   transition: all 0.3s ease;
 }
 
 .btn-black:hover,
 .btn-primary-custom:hover {
-  background-color: var(--light-orange);
-  color: #222222;
-  border-color: var(--light-orange);
+  background-color: var(--dark-orange);
+  color: white;
+  border-color: var(--dark-orange);
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(255,183,77,0.4);
+  box-shadow: 0 8px 20px rgba(230, 81, 0, 0.4);
 }
 
 .btn-login {
-  background-color: #ffffff;
-  color: var(--dark-grey);
-  border: 2px solid var(--dark-grey);
+  background-color: transparent;
+  color: var(--text-light);
+  border: 2px solid var(--text-light);
   font-weight: 500;
   transition: all 0.3s ease;
   padding: 0.375rem 1rem;
@@ -86,11 +117,11 @@ section {
 
 .btn-learn-more {
   background-color: var(--light-orange);
-  color: white;
+  color: var(--black);
   border: 2px solid var(--focus-green);
   font-weight: 600;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.25);
+  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.3);
 }
 
 .btn-learn-more:hover {
@@ -98,7 +129,7 @@ section {
   border-color: #388e3c;
   color: white;
   transform: translateY(-3px) scale(1.05);
-  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.35);
+  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.4);
 }
 
 .btn-learn-more:focus {
@@ -107,7 +138,7 @@ section {
 }
 
 .nav-link {
-  color: var(--black) !important;
+  color: white !important;
   font-weight: 500;
   position: relative;
   padding-bottom: 0.6rem;
@@ -116,7 +147,7 @@ section {
 
 .nav-link:hover,
 .nav-link.active {
-  color: var(--black) !important;
+  color: var(--light-orange) !important;
 }
 
 .nav-link::after {
@@ -126,7 +157,7 @@ section {
   left: 5%;
   width: 0;
   height: 3px;
-  background-color: var(--light-green);
+  background-color: var(--light-orange);
   border-radius: 3px;
   transition: width 0.35s ease, left 0.35s ease;
 }
@@ -137,30 +168,9 @@ section {
   left: 5%;
 }
 
-.form-control:focus,
-.form-control:active {
-  border-color: var(--focus-green) !important;
-  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important;
-  outline: none;
-}
-
-.form-label {
-  transition: color 0.2s ease;
-}
-
-.form-group:focus-within .form-label {
-  color: var(--focus-green) !important;
-  font-weight: 500;
-}
-
-h1, h2, h3, h4 {
-  font-weight: 700;
-  color: var(--black);
-}
-
 nav {
   border-bottom: 3px solid var(--pink);
-  background-color: #ffffff;
+  background-color: #111111;
 }
 
 .hero {
@@ -170,13 +180,11 @@ nav {
   border-bottom: 4px solid var(--pink);
   margin-bottom: 3rem;
   padding: 5rem 0 4rem;
-  background-color: #fff;
+  background-color: #0a0a0a;
 }
 
 .hero-text h1 {
-  color: var(--dark-orange);
-  font-size: 4.5rem;
-  line-height: 1.1;
+  color: var(--light-orange);
 }
 
 .hero-img img {
@@ -184,7 +192,7 @@ nav {
   height: auto;
   border-radius: 16px;
   border: 3px solid var(--pink);
-  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
 }
 
 @media (max-width: 991px) {
@@ -197,17 +205,50 @@ nav {
   }
 }
 
-.feature-img {
-  max-height: 160px;
-  object-fit: cover;
-  border-radius: 8px;
-  border: 1px solid var(--pink);
-  margin-bottom: 1.25rem;
+/* Form styling in dark mode */
+.form-control {
+  background-color: #222;
+  color: white;
+  border: 1px solid #444;
 }
 
+.form-control:focus {
+  border-color: var(--focus-green) !important;
+  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important;
+  background-color: #222;
+  color: white;
+}
+
+.form-label {
+  color: var(--text-light);
+}
+
+.form-group:focus-within .form-label {
+  color: var(--focus-green) !important;
+}
+
+/* Footer */
 footer {
-  background-color: var(--light-grey);
+  background-color: #111111;
   border-top: 4px solid var(--pink);
+  color: var(--text-muted);
   padding: 3rem 0 2rem;
-  color: var(--black);
+}
+
+footer p {
+  color: var(--text-muted);
+}
+
+footer a {
+  color: var(--light-orange);
+}
+
+/* Extra spacing helpers */
+.py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.mt-5 {
+  margin-top: 3rem !important;
 }
\ No newline at end of file
diff --git a/users_microservice/src/main/resources/templates/home/forgot-password.html b/users_microservice/src/main/resources/templates/home/forgot-password.html
index 30495e77..f29fb712 100644
--- a/users_microservice/src/main/resources/templates/home/forgot-password.html
+++ b/users_microservice/src/main/resources/templates/home/forgot-password.html
@@ -110,19 +110,6 @@
 </head>
 <body>
 
-<!-- Navbar -->
-<nav class="navbar navbar-expand-lg fixed-top">
-    <div class="container">
-        <a class="navbar-brand fw-bold" href="registration.html">Alcohol Agent</a>
-        <div class="collapse navbar-collapse justify-content-end">
-            <ul class="navbar-nav">
-                <li class="nav-item"><a class="nav-link" href="registration.html">Register</a></li>
-                <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
-                <li class="nav-item"><a class="nav-link active" href="forgot-password.html">Forgot Password</a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
 
 <!-- Hero -->
 <section class="hero">
diff --git a/users_microservice/src/main/resources/templates/home/index.html b/users_microservice/src/main/resources/templates/home/index.html
index 6699a7df..2700eef4 100644
--- a/users_microservice/src/main/resources/templates/home/index.html
+++ b/users_microservice/src/main/resources/templates/home/index.html
@@ -33,7 +33,7 @@
         <a href="#pricing"    class="nav-link">Pricing</a>
         <a href="#contact"    class="nav-link">Contact</a>
         <a href="#pricing"    class="btn btn-black px-4">Get Started</a>
-        <a href="login.html"           class="btn btn-login btn-sm">Login</a>
+        <a href="/login"           class="btn btn-login btn-sm">Login</a>
       </div>
     </div>
   </div>
@@ -139,7 +139,7 @@ <h2 class="text-center display-5 fw-bold mb-5">Pricing Plans</h2>
           <h4>Free</h4>
           <div class="fs-1 fw-bold my-3">R0</div>
           <p class="mb-4">Basic tracking & awareness tools</p>
-          <a href="registration.html" class="btn btn-black w-100">Start Free</a>
+          <a href="/sign-up" class="btn btn-black w-100">Start Free</a>
         </div>
       </div>
       <div class="col-md-5 col-lg-4">
@@ -147,7 +147,7 @@ <h4>Free</h4>
           <h4>Premium</h4>
           <div class="fs-1 fw-bold my-3">R49<span class="fs-5">/mo</span></div>
           <p class="mb-4">Advanced insights • Reports • No ads</p>
-          <a href="registration.html" class="btn btn-black w-100">Try 14 days free</a>
+          <a href="/sign-up" class="btn btn-black w-100">Try 14 days free</a>
         </div>
       </div>
     </div>
diff --git a/users_microservice/src/main/resources/templates/home/login.html b/users_microservice/src/main/resources/templates/home/login.html
index f7b582c7..1c2e63f0 100644
--- a/users_microservice/src/main/resources/templates/home/login.html
+++ b/users_microservice/src/main/resources/templates/home/login.html
@@ -118,9 +118,8 @@
         <a class="navbar-brand fw-bold" href="registration.html">Alcohol Agent</a>
         <div class="collapse navbar-collapse justify-content-end">
             <ul class="navbar-nav">
-                <li class="nav-item"><a class="nav-link" href="registration.html">Register</a></li>
-                <li class="nav-item"><a class="nav-link active" href="login.html">Login</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+                <li class="nav-item"><a class="nav-link" href="/sign-up">Register</a></li>
+                <li class="nav-item"><a class="nav-link active" href="/login">Login</a></li>
             </ul>
         </div>
     </div>
@@ -149,7 +148,7 @@ <h2 class="mb-4 text-center">Login Form</h2>
             </div>
             <button type="submit" class="btn btn-primary-custom w-100">Login</button>
             <div class="text-center mt-3">
-                <a href="#" class="text-decoration-none">Forgot Password?</a>
+                <a href="/forgot-password" class="text-decoration-none">Forgot Password?</a>
             </div>
         </form>
     </div>
diff --git a/users_microservice/src/main/resources/templates/home/registration.html b/users_microservice/src/main/resources/templates/home/registration.html
index c61f37fd..6b5ec708 100644
--- a/users_microservice/src/main/resources/templates/home/registration.html
+++ b/users_microservice/src/main/resources/templates/home/registration.html
@@ -94,9 +94,8 @@
         <a class="navbar-brand fw-bold" href="registration.html">Alcohol Agent</a>
         <div class="collapse navbar-collapse justify-content-end">
             <ul class="navbar-nav">
-                <li class="nav-item"><a class="nav-link active" href="registration.html">Register</a></li>
-                <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+                <li class="nav-item"><a class="nav-link active" href="/sign-up">Register</a></li>
+                <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
             </ul>
         </div>
     </div>
diff --git a/users_microservice/src/main/resources/templates/home/reset.html b/users_microservice/src/main/resources/templates/home/reset.html
index 87786f64..352f451e 100644
--- a/users_microservice/src/main/resources/templates/home/reset.html
+++ b/users_microservice/src/main/resources/templates/home/reset.html
@@ -110,19 +110,7 @@
 </head>
 <body>
 
-<!-- Navbar -->
-<nav class="navbar navbar-expand-lg fixed-top">
-    <div class="container">
-        <a class="navbar-brand fw-bold" href="registration.html">Alcohol Agent</a>
-        <div class="collapse navbar-collapse justify-content-end">
-            <ul class="navbar-nav">
-                <li class="nav-item"><a class="nav-link" href="registration.html">Register</a></li>
-                <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
-                <li class="nav-item"><a class="nav-link active" href="reset-password.html">Reset Password</a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
+
 
 <!-- Hero -->
 <section class="hero">