diff --git a/core/src/main/resources/templates/forgotPassword.html b/core/src/main/resources/templates/forgotPassword.html
index ba354659c6..aaa375e823 100644
--- a/core/src/main/resources/templates/forgotPassword.html
+++ b/core/src/main/resources/templates/forgotPassword.html
@@ -1,24 +1,35 @@
 <!DOCTYPE html>
 
 <html ng-app="forgotPwdApp" ng-controller="forgotPwdCtrl">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <!-- Tell the browser to be responsive to screen width -->
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
 
     <!-- Favicon icon -->
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="assets/images/favicon.png"
+    />
     <title>Sign-in | Kafka Self-service Topic Management Portal</title>
-    <link rel="canonical" href="https://www.wrappixel.com/templates/materialpro/" />
+    <link
+      rel="canonical"
+      href="https://www.wrappixel.com/templates/materialpro/"
+    />
 
-    <link href="assets/css/style.css" rel="stylesheet">
+    <link href="assets/css/style.css" rel="stylesheet" />
     <!-- You can change the theme colors from here -->
-    <link href="assets/css/colors/blue-dark.css" id="theme" rel="stylesheet">
-    <link href="assets/plugins/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
+    <link href="assets/css/colors/blue-dark.css" id="theme" rel="stylesheet" />
+    <link
+      href="assets/plugins/sweetalert/sweetalert.css"
+      rel="stylesheet"
+      type="text/css"
+    />
 
     <script src="lib/angular.min.js"></script>
     <script src="lib/angular-route.min.js"></script>
@@ -28,217 +39,226 @@
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
-</head>
-
+  </head>
 
-<body class="fix-header card-no-border logo-center">
-<!-- ============================================================== -->
-<!-- Preloader - style you can find in spinners.css -->
-<!-- ============================================================== -->
-<div class="preloader">
-    <svg class="circular" viewBox="25 25 50 50">
-        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
-    </svg>
-</div>
-<!-- ============================================================== -->
-<!-- Main wrapper - style you can find in pages.scss -->
-<!-- ============================================================== -->
-<div id="main-wrapper">
+  <body>
     <!-- ============================================================== -->
-    <!-- Topbar header - style you can find in pages.scss -->
-    <!-- ============================================================== -->
-    <header class="topbar">
-        <nav class="navbar top-navbar navbar-expand-md navbar-light">
-            <!-- ============================================================== -->
-            <!-- Logo -->
-            <!-- ============================================================== -->
-            <div class="navbar-header">
-                <a class="navbar-brand" href="index">
-                    <h4 style="color:white;">{{ companyinfo }}</h4>
-                </a>
-                <!-- <a href="index"><img src="assets/images/clients/logo.jpg" width="100%" /></a> -->
-            </div>
-            <!-- ============================================================== -->
-            <!-- End Logo -->
-            <!-- ============================================================== -->
-            <div class="navbar-collapse">
-                <!-- ============================================================== -->
-                <!-- toggle and nav items -->
-                <!-- ============================================================== -->
-                <ul class="navbar-nav mr-auto mt-md-0">
-
-                    <a href="index"><img class="header-logo" src="assets/images/klaw_logo.png" /></a>
-
-                </ul>
-                <!-- ============================================================== -->
-                <!-- User profile and search -->
-                <!-- ============================================================== -->
-                <ul class="navbar-nav my-lg-0">
-
-                    <li class="nav-item">
-                        <table width="100%">
-                            <tr>
-                                <td><a class="nav-link" href="register">
-                                    <span style="color:white">Register</span></a></td>
-
-                                <td></td>
-
-                            </tr>
-                        </table>
-                    </li>
-
-                </ul>
-            </div>
-        </nav>
-    </header>
-    <!-- ============================================================== -->
-    <!-- Left Sidebar - style you can find in sidebar.scss  -->
-    <!-- ============================================================== -->
-    <aside class="left-sidebar">
-        <!-- Sidebar scroll-->
-        <div class="scroll-sidebar">
-
-        </div>
-        <!-- End Sidebar scroll-->
-    </aside>
-
-    <!-- Page wrapper  -->
+    <!-- Main wrapper - style you can find in pages.scss -->
     <!-- ============================================================== -->
-    <div class="page-wrapper">
-        <div class="container-fluid">
-            <div class="row" ng-show="alert != null && alert != ''" ng-init="">
-                <div class="col-lg-12 col-md-6 col-xlg-2 col-xs-12">
-                    <div class="ribbon-wrapper card">
-                        <div class="ribbon ribbon-warning">Notification</div>
-                        <p class="ribbon-content">{{ alert }}</p>
-                    </div>
+    <div id="main-wrapper">
+      <!-- ============================================================== -->
+      <!-- Topbar header - style you can find in pages.scss -->
+      <!-- ============================================================== -->
+      <div
+        style="
+          padding-right: 24px;
+          padding-left: 24px;
+          background-color: #0788d1;
+          height: 64px;
+        "
+      >
+        <header
+          style="
+            display: flex;
+            place-content: center space-between;
+            align-items: center;
+            height: 100%;
+            background-color: #0788d1;
+          "
+        >
+          <img
+            aria-hidden="true"
+            alt=""
+            src="/assets/coral/klaw_logo-8b4dc757.png"
+            height="47"
+            width="150"
+          />
+        </header>
+      </div>
+      <!-- Page wrapper  -->
+      <!-- ============================================================== -->
+      <div
+        class="page-wrapper"
+        style="
+          overflow-y: auto;
+          overflow-x: hidden;
+          display: flex;
+          justify-content: center;
+          align-content: center;
+          flex-wrap: wrap;
+          background-color: #f7f7fa;
+        "
+      >
+        <div class="row" ng-init="getDbInfo();">
+          <div ng-show="dbauth == 'true'">
+            <div
+              style="
+                border-radius: 12px;
+                border: 1px solid var(--Grey-5, #ededf0);
+                background: #fff;
+                margin-bottom: 5rem;
+              "
+            >
+              <div
+                class="card-body"
+                ng-show="!tokenSent"
+                style="min-width: 30vw"
+              >
+                <div class="form-group">
+                  <input
+                    type="text"
+                    class="form-control"
+                    required
+                    ng-model="forgotPwdUsername"
+                    placeholder="Enter username"
+                  />
                 </div>
+                <button
+                  type="button"
+                  ng-click="generateToken()"
+                  class="btn btn-info btn-lg btn-block waves-effect waves-light"
+                  style="margin-bottom: 1rem"
+                >
+                  Reset Password
+                </button>
+                <div class="text-center">
+                  <a href="login"> Back to login </a>
+                </div>
+              </div>
             </div>
-
-
-            <div class="row" ng-init="getDbInfo();">
-
-                <div class="col-lg-4 col-md-12">
+          </div>
+          <div ng-show="dbauth == 'false'">
+            <div
+              class="card"
+              style="
+                border-radius: 12px;
+                border: 1px solid var(--Grey-5, #ededf0);
+                background: #fff;
+              "
+            >
+              <div class="card-body">
+                <div class="form-group">
+                  <a
+                    >Please contact your Admin or update your
+                    ActiveDirectory/Ldap password.</a
+                  >
                 </div>
-                <div class="col-lg-4 col-md-12" ng-show="dbauth == 'true'">
-                    <div class="card">
-                        <div class="card-body"  ng-show="!tokenSent">
-
-                            <div class="form-group">
-                                <input type="text" class="form-control" required ng-model="forgotPwdUsername"
-                                       placeholder="username">
-                            </div>
-                            <div class="form-actions" align="center">
-                                <button type="button" ng-click="generateToken()" class="btn btn-outline-info">
-                                    Reset Password
-                                </button>
-                                <a href="login">
-                                    <button type="button" class="btn btn-outline-primary">Login</button>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+          <div
+            ng-show="tokenSent"
+            style="
+              border-radius: 12px;
+              border: 1px solid var(--Grey-5, #ededf0);
+              background: #fff;
+              min-width: 30vw;
+            "
+          >
+            <div class="card-body">
+              <div
+                ng-show="alert != null && alert != ''"
+                ng-init=""
+                style="margin-bottom: 2rem; font-weight: 700"
+              >
+                {{ alert }}
+              </div>
+              <div class="row">
+                <div class="col-md-6">
+                  <div class="form-group">
+                    <label class="control-label">Username</label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      required
+                      ng-model="forgotPwdUsername"
+                      disabled
+                      placeholder="username"
+                    />
+                  </div>
                 </div>
-                <div class="col-lg-4 col-md-12" ng-show="dbauth == 'false'">
-                    <div class="card">
-                        <div class="card-body">
-
-                            <div class="form-group">
-                                <a>Please contact your Admin or update your ActiveDirectory/Ldap password.</a>
-                            </div>
-
-                        </div>
-                    </div>
+                <div class="col-md-6" ng-show="tokenSent">
+                  <div class="form-group has-success">
+                    <label class="control-label">Password reset token</label>
+                    <input
+                      type="password"
+                      class="form-control"
+                      required
+                      ng-model="resetToken"
+                    />
+                  </div>
                 </div>
-                <div class="col-lg-4 col-md-12">
+              </div>
+              <!--/row-->
+              <div class="row">
+                <div class="col-md-6">
+                  <div class="form-group has-success">
+                    <label class="control-label">Password</label>
+                    <input
+                      type="password"
+                      class="form-control"
+                      required
+                      ng-model="password"
+                    />
+                  </div>
                 </div>
-                <div class="card" ng-show="tokenSent">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <div class="form-group">
-                                    <label class="control-label">Username</label>
-                                    <input type="text" class="form-control" required ng-model="forgotPwdUsername" disabled
-                                           placeholder="username">
-                                </div>
-                            </div>
-                            <div class="col-md-6" ng-show="tokenSent">
-                                <div class="form-group has-success">
-                                    <label class="control-label">Password Reset Token</label>
-                                    <input type="password" class="form-control" required ng-model="resetToken">
-                                </div>
-                            </div>
-                        </div>
-                        <!--/row-->
-                        <div class="row">
-                            <div class="col-md-6">
-                                <div class="form-group has-success">
-                                    <label class="control-label">Password</label>
-                                    <input type="password" class="form-control" required ng-model="password">
-                                </div>
-                            </div>
-                            <!--/span-->
-                            <div class="col-md-6" ng-show="tokenSent">
-                                <div class="form-group has-success">
-                                    <label class="control-label">Confirm Password</label>
-                                    <input type="password" class="form-control" required
-                                           ng-model="confirmationPassword">
-                                </div>
-                            </div>
-                            <!--/span-->
-                        </div>
-                        <!--/row-->
-                        <!--/span-->
-
-                        <div class="form-actions" align="center">
-                            <button type="button" ng-click="resetPassword()" class="btn btn-outline-info">
-                                Save new password
-                            </button>
-                            <a href="login">
-                                <button type="button" class="btn btn-outline-primary">Login</button>
-                            </a>
-                        </div>
-                    </div>
+                <!--/span-->
+                <div class="col-md-6" ng-show="tokenSent">
+                  <div class="form-group has-success">
+                    <label class="control-label">Confirm password</label>
+                    <input
+                      type="password"
+                      class="form-control"
+                      required
+                      ng-model="confirmationPassword"
+                    />
+                  </div>
                 </div>
                 <!--/span-->
+              </div>
+              <!--/row-->
+              <!--/span-->
             </div>
-            <!--/row-->
-
-
+            <div style="margin: 1rem">
+              <button
+                type="button"
+                ng-click="resetPassword()"
+                class="btn btn-info btn-lg btn-block waves-effect waves-light"
+              >
+                Save new password
+              </button>
+            </div>
+            <div align="center" style="margin-bottom: 1rem">
+              <a href="login"> Back to login </a>
+            </div>
+          </div>
+          <!--/span-->
         </div>
+        <!--/row-->
         <div id="alertbar">{{ alertnote }}</div>
+      </div>
     </div>
-</div>
-
-<footer class="footer" style="border:0px;background-color:#0788d1;color:white;">
-    <a href="https://klaw-project.io" class="text-warning">klaw-project.io</a>
-</footer>
-
-<!-- End Page wrapper  -->
-<!-- ============================================================== -->
-</div>
-<!-- All Jquery -->
-<!-- ============================================================== -->
-<script src="assets/plugins/jquery/jquery.min.js"></script>
-<!-- Bootstrap tether Core JavaScript -->
-<!--<script src="assets/plugins/popper/popper.min.js"></script>-->
-<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
-<!-- slimscrollbar scrollbar JavaScript -->
-<script src="assets/js/jquery.slimscroll.js"></script>
-<!--Wave Effects -->
-<script src="assets/js/waves.js"></script>
-<!--Menu sidebar -->
-<script src="assets/js/sidebarmenu.js"></script>
-<!--stickey kit -->
-<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
-<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
-<!--Custom JavaScript -->
-<script src="assets/js/custom.min.js"></script>
-<script src="assets/plugins/sweetalert/sweetalert.min.js"></script>
-</body>
 
+    <!-- All Jquery -->
+    <!-- ============================================================== -->
+    <script src="assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap tether Core JavaScript -->
+    <!--<script src="assets/plugins/popper/popper.min.js"></script>-->
+    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
+    <!-- slimscrollbar scrollbar JavaScript -->
+    <script src="assets/js/jquery.slimscroll.js"></script>
+    <!--Wave Effects -->
+    <script src="assets/js/waves.js"></script>
+    <!--Menu sidebar -->
+    <script src="assets/js/sidebarmenu.js"></script>
+    <!--stickey kit -->
+    <script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
+    <script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
+    <!--Custom JavaScript -->
+    <script src="assets/js/custom.min.js"></script>
+    <script src="assets/plugins/sweetalert/sweetalert.min.js"></script>
+  </body>
 </html>
