diff --git a/app/assets/images/icons/eye-empty.svg b/app/assets/images/icons/eye-empty.svg
new file mode 100644
index 00000000..0eef4117
--- /dev/null
+++ b/app/assets/images/icons/eye-empty.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 12C19.1114 14.991 15.7183 18 12 18C8.2817 18 4.88856 14.991 3 12C5.29855 9.15825 7.99163 6 12 6C16.0084 6 18.7015 9.1582 21 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/images/icons/eye-off.svg b/app/assets/images/icons/eye-off.svg
new file mode 100644
index 00000000..617fedc7
--- /dev/null
+++ b/app/assets/images/icons/eye-off.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 3L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 10.6771C10.1888 11.0296 10 11.4928 10 12C10 13.1045 10.8954 14 12 14C12.5072 14 12.9703 13.8112 13.3229 13.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.36185 7.5611C5.68002 8.73968 4.27894 10.4188 3 12C4.88856 14.991 8.2817 18 12 18C13.5499 18 15.0434 17.4772 16.3949 16.6508" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 6C16.0084 6 18.7015 9.1582 21 12C20.6815 12.5043 20.3203 13.0092 19.922 13.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 632444b6..5ac2df52 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -5,9 +5,11 @@ import { application } from 'controllers/application'
 // Eager load all controllers defined in the import map under controllers/**/*_controller
 import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading'
 import Dropdown from '@stimulus-components/dropdown'
+import PasswordVisibility from '@stimulus-components/password-visibility'
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
 // lazyLoadControllersFrom("controllers", application)
 eagerLoadControllersFrom('controllers', application)
 application.register('dropdown', Dropdown)
+application.register('password-visibility', PasswordVisibility)
diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb
index cd294413..e3c1ffc6 100644
--- a/app/views/user_sessions/new.html.erb
+++ b/app/views/user_sessions/new.html.erb
@@ -16,7 +16,13 @@
 
           <div class="flex flex-col">
             <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-            <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field" } %>
+            <div class="relative" data-controller="password-visibility">
+              <%= form.password_field :password, required: true, class: "peer w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %>
+              <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 hover:text-white peer-focus:text-gray-400 peer-focus:hover:text-gray-600" type="button" data-action="password-visibility#toggle">
+                <%= inline_svg_tag("icons/eye-empty.svg", size: "22", data: { "password-visibility-target": "icon" }) %>
+                <%= inline_svg_tag("icons/eye-off.svg", size: "22", class: "hidden", data: { "password-visibility-target": "icon" }) %>
+              </button>
+            </div>
           </div>
         </div>
 
diff --git a/config/importmap.rb b/config/importmap.rb
index 2fb8a2af..4d309db2 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -10,3 +10,4 @@
 pin_all_from "app/javascript/custom", under: "custom"
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
+pin "@stimulus-components/password-visibility", to: "@stimulus-components--password-visibility.js" # @3.0.0
diff --git a/vendor/javascript/@stimulus-components--password-visibility.js b/vendor/javascript/@stimulus-components--password-visibility.js
new file mode 100644
index 00000000..649eaf92
--- /dev/null
+++ b/vendor/javascript/@stimulus-components--password-visibility.js
@@ -0,0 +1,2 @@
+import{Controller as s}from"@hotwired/stimulus";const t=class _PasswordVisibility extends s{connect(){this.hidden=this.inputTarget.type==="password",this.class=this.hasHiddenClass?this.hiddenClass:"hidden"}toggle(s){s.preventDefault(),this.inputTarget.type=this.hidden?"text":"password",this.hidden=!this.hidden,this.iconTargets.forEach((s=>s.classList.toggle(this.class)))}};t.targets=["input","icon"],t.classes=["hidden"];let i=t;export{i as default};
+