diff --git a/allauth_ui/templates/components/form.html b/allauth_ui/templates/components/form.html
index 3997aab..8b1fb4b 100644
--- a/allauth_ui/templates/components/form.html
+++ b/allauth_ui/templates/components/form.html
@@ -10,8 +10,13 @@
     {% if render_fields == "true" %}
         {% for field in form.visible_fields %}
             {% if field.name != "remember" %}
-                {% #form_field field=field %}
-                {% /form_field %}
+                {% if field.name == "password" %}
+                    {% #form_field field=field is_password='true' %}
+                    {% /form_field %}
+                {% else %}
+                    {% #form_field field=field %}
+                    {% /form_field %}
+                {% endif %}
             {% endif %}
         {% endfor %}
     {% endif %}
diff --git a/allauth_ui/templates/components/form_field.html b/allauth_ui/templates/components/form_field.html
index bedd6a7..797c042 100644
--- a/allauth_ui/templates/components/form_field.html
+++ b/allauth_ui/templates/components/form_field.html
@@ -1,11 +1,41 @@
+{% load slippers %}
 {% load widget_tweaks %}
+{% var is_password=is_password|default:"false" %}
+
+<script>
+function togglePassword() {
+    const passwordField = document.querySelector('.password-field');
+    const toggleButton = document.querySelector('button');
+
+    if (passwordField.type === "password") {
+        passwordField.type = "text";
+        toggleButton.textContent = "Hide";
+    } else {
+        passwordField.type = "password";
+        toggleButton.textContent = "Show";
+    }
+}
+</script>
+
+
 <label class="label" for="{{ field.id_for_label }}">
     <span class="label-text">{{ field.label }}</span>
 </label>
 {% if field.errors %}
     {% render_field field placeholder="" class="w-full input input-bordered text-primary input-error" %}
 {% else %}
-    {% render_field field placeholder="" class="w-full input input-bordered text-primary" %}
+    {% if is_password == 'true' %}
+        <div class="relative flex w-full">
+            {% render_field field placeholder="" class="w-full input input-bordered text-primary password-field"%}
+            <button type="button" onclick="togglePassword()" 
+                class="btn btn-neutral text-gray-500 hover:text-gray-700 text-sm">
+                Show
+            </button>
+            
+        </div>
+    {% else %}
+        {% render_field field placeholder="" class="w-full input input-bordered text-primary" %}
+    {% endif %}
 {% endif %}
 {% for error in field.errors %}
     <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-error">{{ error }}</span>