diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index f94d04a..8a6cea9 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -9,3 +9,6 @@ window.Stimulus = application;
 // Eager load all controllers defined in the import map under controllers/**/*_controller
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
 eagerLoadControllersFrom("controllers", application);
+
+import PasswordVisibility from "stimulus-password-visibility";
+application.register('password-visibility', PasswordVisibility)
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 654b333..b5a133a 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -8,7 +8,20 @@
       <h2 class="text-header-2 text-center">Welcome back!</h2>
       <%= form_with(url: sign_in_path) do |f| %>
         <%= f.text_field :username, value: params[:username_hint], require: true, autofocus: true, autocomplete: "username", class: "input mt-2", placeholder: "Username" %>
-        <%= f.password_field :password, required: true, autocomplete: "current-password", class: "input mt-2", placeholder: "*****" %>
+
+        <div data-controller="password-visibility" class="flex">
+          <%= f.password_field :password, class: "input mt-2", required: true, autocomplete: "current-password",
+                               placeholder: "*****", spellcheck: false,
+                               data: {"password-visibility-target" => "input"} %>
+          <button class="mt-3 ml-1" type="button" data-action="password-visibility#toggle">
+            <span data-password-visibility-target="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+            </span>
+            <span data-password-visibility-target="icon" class="hidden">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
+            </span>
+          </button>
+        </div>
         <div class="flex flex-row justify-between items-baseline">
           <%= f.submit "Log in", class: "button button-primary mt-2" %>
           <%= link_to "Sign up", sign_up_path, class: "text-small opacity-50 hover:opacity-100" %>
diff --git a/config/importmap.rb b/config/importmap.rb
index 446c8cb..b87643a 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -10,3 +10,4 @@
 pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "stimulus-password-visibility", to: "https://ga.jspm.io/npm:stimulus-password-visibility@2.1.1/dist/stimulus-password-visibility.mjs"