diff --git a/nexus/public/css/login.css b/nexus/public/css/login.css
index 96d0f62..7975ba3 100644
--- a/nexus/public/css/login.css
+++ b/nexus/public/css/login.css
@@ -31,6 +31,11 @@ body {
   min-height: 100vh;
 }
 
+/* Hide noscript element */
+noscript {
+	display: none;
+}
+
 /* --- Left Panel (Form) --- */
 .left-panel {
   flex: 1;
@@ -295,6 +300,18 @@ body {
 
 /* --- Footer Styling Override --- */
 
+/* Toggle visibility between login and forgot password sections */
+.for-login, .for-forgot {
+	display: flex;
+	width: 100%;
+	min-height: 100vh;
+}
+
+.for-login.active, .for-forgot.active {
+	display: flex;
+	flex-direction: row;
+}
+
 /* Reduce footer padding */
 .web-footer {
   display: none;  
diff --git a/nexus/www/login.html b/nexus/www/login.html
index bc2ac99..b8cf504 100644
--- a/nexus/www/login.html
+++ b/nexus/www/login.html
@@ -42,7 +42,7 @@
 {% endblock %}
 
 {% block page_content %}
-<div class="main-container">
+<div>
 	<noscript>
 		<div class="text-center my-5">
 			<h4>{{ _("Javascript is disabled on your browser") }}</h4>
@@ -53,49 +53,104 @@
 		</div>
 	</noscript>
 
-	<!-- Left Side: Form -->
-	<div class="left-panel">
-		<div class="brand">
-			<a href="#" class="brand-link">
-				<div class="brand-icon">
-					<!-- Your Custom Icon -->
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="m7 7 10 10" />
-						<path d="M17 7v10H7" />
-					</svg>
-				</div>
-				Nexus
-			</a>
-		</div>
-
-		<!-- Centered Form Area -->
-		<div class="form-container">
-			<div class="form-header">
-				<h1>Welcome back</h1>
-				<p>Please enter your credentials to access your account.</p>
+	<!-- Login Section -->
+	<section class='for-login'>
+		<!-- Left Side: Form -->
+		<div class="left-panel">
+			<div class="brand">
+				<a href="#" class="brand-link">
+					<div class="brand-icon">
+						<!-- Your Custom Icon -->
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="m7 7 10 10" />
+							<path d="M17 7v10H7" />
+						</svg>
+					</div>
+					Nexus
+				</a>
 			</div>
 
-			<form class="form-signin form-login" role="form">
-				{{ email_login_body() }}
-				<button class="btn-primary btn-login" type="submit">
-					{{ _("Login") }}
-				</button>
-			</form>
+			<!-- Centered Form Area -->
+			<div class="form-container">
+				<div class="form-header">
+					<h1>Welcome back</h1>
+					<p>Please enter your credentials to access your account.</p>
+				</div>
+
+				<form class="form-signin form-login" role="form">
+					{{ email_login_body() }}
+					<button class="btn-primary btn-login" type="submit">
+						{{ _("Login") }}
+					</button>
+				</form>
+			</div>
 		</div>
-	</div>
 
-	<!-- Right Side: Image -->
-	<div class="right-panel">
-		<div class="frame-panel">
-			<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
+		<!-- Right Side: Image -->
+		<div class="right-panel">
+			<div class="frame-panel">
+				<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
+			</div>
 		</div>
-	</div>
-</div>
-{% endblock %}
+	</section>
 
-{% block script %}
-<script>{% include "templates/includes/login/login.js" %}</script>
-{% endblock %}
+	<!-- Forgot Password Section -->
+	<section class='for-forgot'>
+		<div class="left-panel">
+			<div class="brand">
+				<a href="#" class="brand-link">
+					<div class="brand-icon">
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="m7 7 10 10" />
+							<path d="M17 7v10H7" />
+						</svg>
+					</div>
+					Nexus
+				</a>
+			</div>
 
-{% block sidebar %}{% endblock %}
\ No newline at end of file
+			<div class="form-container">
+				<div class="form-header">
+					<h1>Forgot Password</h1>
+					<p>Enter your email address to reset your password.</p>
+				</div>
+
+				<form class="form-signin form-forgot hide" role="form">
+					<div class="input-group">
+						<label class="input-label" for="forgot_email">{{ _("Email Address") }}</label>
+						<div class="email-field">
+							<input type="email" id="forgot_email" class="input-field"
+								placeholder="{{ _('jane@example.com') }}" required autofocus autocomplete="username">
+							<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
+								xmlns="http://www.w3.org/2000/svg">
+								<use class="es-lock" href="#es-line-email"></use>
+							</svg>
+						</div>
+					</div>
+
+					<button class="btn-primary btn-login" type="submit">
+						{{ _("Reset Password") }}
+					</button>
+
+					<div class="form-actions">
+						<a href="#login" class="link-btn">{{ _("Back to Login") }}</a>
+					</div>
+				</form>
+			</div>
+		</div>
+
+		<div class="right-panel">
+			<div class="frame-panel">
+				<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
+			</div>
+		</div>
+	</section>
+	{% endblock %}
+
+	{% block script %}
+	<script>{% include "templates/includes/login/login.js" %}</script>
+	{% endblock %}
+
+	{% block sidebar %}{% endblock %}
\ No newline at end of file