diff --git a/website/templates/account/password_change.html b/website/templates/account/password_change.html
index ad228ef27..52d615d8e 100644
--- a/website/templates/account/password_change.html
+++ b/website/templates/account/password_change.html
@@ -18,13 +18,23 @@
 {% load i18n %}
 {% block style %}
     <style>
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden; /* Prevent scrolling */
+    }
+    
+    .min-h-screen {
+        min-height: 100vh;
+    }
+       
     .inner-addon {
         position: relative;
     }
 
     .inner-addon .glyphicon {
         position: absolute;
-        padding: 10px;
         pointer-events: none;
     }
 
@@ -46,53 +56,80 @@
     </style>
 {% endblock style %}
 {% block content %}
-    <div class="row">
-        <div class="panel-heading">
-            <div class="panel-title text-center">
-                <h1 class="text-center">{% trans "Change Password" %}</h1>
-                <hr />
-            </div>
-        </div>
-        <div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
+    {% include "includes/sidenav.html" %}
+    <div class="min-h-screen flex justify-center items-start bg-white overflow-hidden pt-14 ">
+        <div class="bg-gray p-8 rounded-lg shadow-xl w-full sm:w-96 md:w-1/2 lg:w-1/3 max-w-4xl">
+            <h1 class="text-center font-bold text-xl mb-6">{% trans "Change Password" %}</h1>
             <form method="post"
                   action="{% url 'account_change_password' %}"
-                  class="password_change">
+                  class="password_change"
+                  id="password-change-form">
                 {% csrf_token %}
-                <div class="row main">
-                    <div class="main-issue-form main-center">
-                        <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
-                            <i class="glyphicon glyphicon-lock"></i>
-                            <input class="form-control"
-                                   type="password"
-                                   id="id_oldpassword"
-                                   name="oldpassword"
-                                   placeholder="Old Password">
-                            <span class="help-block">{{ form.oldpassword.errors }}</span>
-                        </div>
-                        <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
-                            <i class="glyphicon glyphicon-lock"></i>
-                            <input class="form-control"
-                                   type="password"
-                                   id="id_password1"
-                                   name="password1"
-                                   placeholder="New Password">
-                            <span class="help-block">{{ form.password1.errors }}</span>
-                        </div>
-                        <div class="form-group inner-addon left-addon {% if form.password2.errors %}has-error{% endif %}">
-                            <i class="glyphicon glyphicon-lock"></i>
-                            <input class="form-control"
-                                   type="password"
-                                   id="id_password2"
-                                   name="password2"
-                                   placeholder="Confirm Password">
-                            <span class="help-block">{{ form.password2.errors }}</span>
-                        </div>
+                <div class="space-y-4">
+                    <!-- Old Password -->
+                    <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
+                        <i class="glyphicon glyphicon-lock"></i>
+                        <input class="form-control form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                               type="password"
+                               id="id_oldpassword"
+                               name="oldpassword"
+                               placeholder="Old Password"
+                               value="{{ form.oldpassword.value|default:'' }}">
+                        <span class="help-block">{{ form.oldpassword.errors }}</span>
+                    </div>
+                    <!-- New Password -->
+                    <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
+                        <i class="glyphicon glyphicon-lock"></i>
+                        <input class="form-control  form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                               type="password"
+                               id="id_password1"
+                               name="password1"
+                               placeholder="New Password"
+                               value="{{ form.password1.value|default:'' }}">
+                        <span class="help-block">{{ form.password1.errors }}</span>
+                    </div>
+                    <!-- Confirm Password -->
+                    <div class="form-group inner-addon left-addon {% if form.password2.errors %}has-error{% endif %}">
+                        <i class="glyphicon glyphicon-lock"></i>
+                        <input class="form-control form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                               type="password"
+                               id="id_password2"
+                               name="password2"
+                               placeholder="Confirm Password"
+                               value="{{ form.password2.value|default:'' }}">
+                        <span class="help-block">{{ form.password2.errors }}</span>
+                    </div>
+                    <!-- Show Password Checkbox -->
+                    <div class="form-group show-password-checkbox flex items-center space-x-2 space-y-2 ">
+                        <input type="checkbox"
+                               class="form-checkbox text-blue-500"
+                               id="show-password">
+                        <label for="show-password" class="text-lg">{% trans "Show Password" %}</label>
+                    </div>
+                    <div class="mt-4">
                         <button type="submit"
-                                class="btn btn-success pull-right text-black"
-                                name="action">{% trans "Change Password" %}</button>
+                                class="btn btn-success w-full py-2 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-600">
+                            {% trans "Change Password" %}
+                        </button>
                     </div>
                 </div>
             </form>
         </div>
     </div>
+    <script>
+    // Toggle show password functionality
+    const showPasswordCheckbox = document.getElementById('show-password');
+    const passwordFields = document.querySelectorAll('#id_oldpassword, #id_password1, #id_password2');
+
+    showPasswordCheckbox.addEventListener('change', function() {
+        passwordFields.forEach(function(field) {
+            if (showPasswordCheckbox.checked) {
+                field.type = 'text'; 
+            } else {
+                field.type = 'password'; 
+            }
+        });
+    });
+
+    </script>
 {% endblock content %}