diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index 2992d5013..52f2dcb7b 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -285,16 +285,50 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + "/examples/login.html"} class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Login v1</p>
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
+                <p>
+                  Version 1
+                  <i class="nav-arrow bi bi-chevron-right"></i>
+                </p>
               </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/login.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Login</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/register.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Register</p>
+                  </a>
+                </li>
+              </ul>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + "/examples/register.html"} class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Register v1</p>
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
+                <p>
+                  Version 2
+                  <i class="nav-arrow bi bi-chevron-right"></i>
+                </p>
               </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Login</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Register</p>
+                  </a>
+                </li>
+              </ul>
             </li>
             <li class="nav-item">
               <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
diff --git a/src/html/pages/examples/login-v2.astro b/src/html/pages/examples/login-v2.astro
new file mode 100644
index 000000000..277b6598d
--- /dev/null
+++ b/src/html/pages/examples/login-v2.astro
@@ -0,0 +1,109 @@
+---
+import Head from "@components/_head.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Login Page v2";
+const path = "../../../dist";
+const htmlPath = "..";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="login-page bg-body-secondary">
+    <div class="login-box">
+      <div class="card card-outline card-primary">
+        <div class="card-header">
+          <a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
+            <h1 class="mb-0">
+              <b>Admin</b>LTE
+            </h1>
+          </a>
+        </div>
+        <div class="card-body login-card-body">
+          <p class="login-box-msg">Sign in to start your session</p>
+
+          <form action={htmlPath + "/index3.html"} method="post">
+            <div class="input-group mb-1">
+              <div class="form-floating">
+                <input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
+                <label for="loginEmail">Email</label>
+              </div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
+            </div>
+            <div class="input-group mb-1">
+              <div class="form-floating">
+                <input
+                  id="loginPassword"
+                  type="password"
+                  class="form-control"
+                  placeholder=""
+                />
+                <label for="loginPassword">Password</label>
+              </div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
+            </div>
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-8 d-inline-flex align-items-center">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    value=""
+                    id="flexCheckDefault"
+                  />
+                  <label class="form-check-label" for="flexCheckDefault">
+                    Remember Me
+                  </label>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-4">
+                <div class="d-grid gap-2">
+                  <button type="submit" class="btn btn-primary">Sign In</button>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!--end::Row-->
+          </form>
+
+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
+            <p>- OR -</p>
+            <a href="#" class="btn btn-primary">
+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
+            </a>
+            <a href="#" class="btn btn-danger">
+              <i class="bi bi-google me-2"></i> Sign in using Google+
+            </a>
+          </div>
+          <!-- /.social-auth-links -->
+
+          <p class="mb-1">
+            <a href="forgot-password.html">I forgot my password</a>
+          </p>
+          <p class="mb-0">
+            <a href="register.html" class="text-center">
+              Register a new membership
+            </a>
+          </p>
+        </div>
+        <!-- /.login-card-body -->
+      </div>
+    </div>
+    <!-- /.login-box -->
+
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
diff --git a/src/html/pages/examples/register-v2.astro b/src/html/pages/examples/register-v2.astro
new file mode 100644
index 000000000..4cfeb0622
--- /dev/null
+++ b/src/html/pages/examples/register-v2.astro
@@ -0,0 +1,116 @@
+---
+import Head from "@components/_head.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Register Page v2";
+const path = "../../../dist";
+const htmlPath = "..";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="register-page bg-body-secondary">
+    <div class="register-box">
+      <!-- /.register-logo -->
+      <div class="card card-outline card-primary">
+        <div class="card-header">
+          <a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
+            <h1 class="mb-0">
+              <b>Admin</b>LTE
+            </h1>
+          </a>
+        </div>
+        <div class="card-body register-card-body">
+          <p class="register-box-msg">Register a new membership</p>
+
+          <form action={htmlPath + "/index3.html"} method="post">
+            <div class="input-group mb-1">
+              <div class="form-floating">
+                <input id="registerFullName" type="text" class="form-control" placeholder="" />
+                <label for="registerFullName">Full Name</label>
+              </div>
+              <div class="input-group-text">
+                <span class="bi bi-person"></span>
+              </div>
+            </div>
+            <div class="input-group mb-1">
+              <div class="form-floating">
+                <input id="registerEmail" type="email" class="form-control" placeholder="" />
+                <label for="registerEmail">Email</label>
+              </div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
+            </div>
+            <div class="input-group mb-1">
+              <div class="form-floating">
+                <input
+                  id="registerPassword"
+                  type="password"
+                  class="form-control"
+                  placeholder=""
+                />
+                <label for="registerPassword">Password</label>
+              </div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
+            </div>
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-8 d-inline-flex align-items-center">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    value=""
+                    id="flexCheckDefault"
+                  />
+                  <label class="form-check-label" for="flexCheckDefault">
+                    I agree to the <a href="#">terms</a>
+                  </label>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-4">
+                <div class="d-grid gap-2">
+                  <button type="submit" class="btn btn-primary">Sign In</button>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!--end::Row-->
+          </form>
+
+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
+            <p>- OR -</p>
+            <a href="#" class="btn btn-primary">
+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
+            </a>
+            <a href="#" class="btn btn-danger">
+              <i class="bi bi-google me-2"></i> Sign in using Google+
+            </a>
+          </div>
+          <!-- /.social-auth-links -->
+
+          <p class="mb-0">
+            <a href="login.html" class="link-primary text-center">
+              I already have a membership
+            </a>
+          </p>
+        </div>
+        <!-- /.register-card-body -->
+      </div>
+    </div>
+    <!-- /.register-box -->
+
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
diff --git a/src/scss/pages/_login_and_register.scss b/src/scss/pages/_login_and_register.scss
index eee080386..00999a4e3 100644
--- a/src/scss/pages/_login_and_register.scss
+++ b/src/scss/pages/_login_and_register.scss
@@ -46,8 +46,6 @@
 
   .input-group {
     .form-control {
-      border-right: 0;
-
       &:focus {
         box-shadow: none;
 
@@ -82,7 +80,6 @@
     .input-group-text {
       color: var(--#{$prefix}secondary-color);
       background-color: transparent;
-      border-left: 0;
       @include border-top-end-radius($border-radius);
       @include border-bottom-end-radius($border-radius);
       @include transition($input-transition);
