diff --git a/account/templates/account/forms/widgets/c_password.html b/account/templates/account/forms/widgets/c_password.html
index a5271db..bb50287 100644
--- a/account/templates/account/forms/widgets/c_password.html
+++ b/account/templates/account/forms/widgets/c_password.html
@@ -2,9 +2,18 @@
 
 <div class="row">
     <div class="col-sm-10">
-        <input name="{{ widget.name }}" class="{{ widget.attrs.class }} js-toogle-password" type="password" id="{{ widget.attrs.id }}"/>
+        <input name="{{ widget.name }}" class="{{ widget.attrs.class }} js-toggle-password" type="password" id="{{ widget.attrs.id }}"/>
     </div>
     <div class="col-sm-2">
-        <img class="toogle-eye" src="{% static 'svg/eye.svg' %}" title="click to see password">
+        <img
+                data-state="0"
+                data-input-id="{{ widget.attrs.id }}"
+                data-eye="{% static 'svg/eye.svg' %}"
+                data-closed-eye="{% static 'svg/eye_closed.svg' %}"
+                alt="eye"
+                class="toggle-eye"
+                src="{% static 'svg/eye.svg' %}"
+                title="click to see password"
+        />
     </div>
 </div>
\ No newline at end of file
diff --git a/note/static/account/css/forms/widgets/c_password.css b/note/static/account/css/forms/widgets/c_password.css
index 52490a3..5506e84 100644
--- a/note/static/account/css/forms/widgets/c_password.css
+++ b/note/static/account/css/forms/widgets/c_password.css
@@ -1,3 +1,3 @@
-.toogle-eye {
+.toggle-eye {
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/note/static/account/js/forms/widgets/cPassword.js b/note/static/account/js/forms/widgets/cPassword.js
index a7b8577..badcec3 100644
--- a/note/static/account/js/forms/widgets/cPassword.js
+++ b/note/static/account/js/forms/widgets/cPassword.js
@@ -1,15 +1,20 @@
-const passwords = [...document.getElementsByClassName('js-toogle-password')];
-const eyes = [...document.getElementsByClassName('toogle-eye')];
-let state = false;
+const passwordEyes = [...document.getElementsByClassName('toggle-eye')];
 
+passwordEyes.forEach((eye) => {
+    eye.addEventListener('click', () => {
+        if ('inputId' in eye.dataset && 'state' in eye.dataset) {
+            const input = document.getElementById(eye.dataset.inputId);
+            const state = eye.dataset.state;
 
-function tooglePasswordView (ps = passwords) {
-    ps.forEach((p) => {
-        if (p.type) {
-            state? p.type = 'password': p.type = 'text';
-        };
-    });
-    state = !state;
-};
+            if (input && input.hasAttribute('type') && state) {
+                input.type = state === '1'? 'password': 'text';
+                eye.dataset.state = state === '1'? '0': '1';
 
-eyes.forEach((eye) => eye.addEventListener('click', () => tooglePasswordView(passwords)));
\ No newline at end of file
+                if ('eye' in eye.dataset && 'closedEye' in eye.dataset && eye.hasAttribute('src')) {
+                    eye.src = state === '1'? eye.dataset.eye: eye.dataset.closedEye;
+                    eye.title = state === '1'? 'click to see password': 'click to hide password'
+                }
+            }
+        }
+    })
+})
\ No newline at end of file
diff --git a/note/static/svg/eye_closed.svg b/note/static/svg/eye_closed.svg
new file mode 100644
index 0000000..077e293
--- /dev/null
+++ b/note/static/svg/eye_closed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M792 1000 624 834q-35 11-70.5 16.5T480 856q-151 0-269-83.5T40 556q21-53 53-98.5t73-81.5L56 264l56-56 736 736-56 56ZM480 736q11 0 20.5-1t20.5-4L305 515q-3 11-4 20.5t-1 20.5q0 75 52.5 127.5T480 736Zm292 18L645 628q7-17 11-34.5t4-37.5q0-75-52.5-127.5T480 376q-20 0-37.5 4T408 392L306 290q41-17 84-25.5t90-8.5q151 0 269 83.5T920 556q-23 59-60.5 109.5T772 754ZM587 570 467 450q28-5 51.5 4.5T559 482q17 18 24.5 41.5T587 570Z"/></svg>
\ No newline at end of file