diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg
index 6ef0b3cd..aa7fafc1 100644
--- a/packages/app/public/icons.svg
+++ b/packages/app/public/icons.svg
@@ -354,5 +354,27 @@
         stroke-linejoin="round"
       />
     </symbol>
+    <symbol id="openeye" viewBox="0 0 24 24" fill="none">
+      <path d="M1.42012 8.71318C1.28394 8.49754 1.21584 8.38972 1.17772 8.22342C1.14909 8.0985 1.14909 7.9015 1.17772 7.77658C1.21584 7.61028 1.28394 7.50246 1.42012 7.28682C2.54553 5.50484 5.8954 1 11.0004 1C16.1054 1 19.4553 5.50484 20.5807 7.28682C20.7169 7.50246 20.785 7.61028 20.8231 7.77658C20.8517 7.9015 20.8517 8.0985 20.8231 8.22342C20.785 8.38972 20.7169 8.49754 20.5807 8.71318C19.4553 10.4952 16.1054 15 11.0004 15C5.8954 15 2.54553 10.4952 1.42012 8.71318Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
+      <path d="M11.0004 11C12.6573 11 14.0004 9.65685 14.0004 8C14.0004 6.34315 12.6573 5 11.0004 5C9.34355 5 8.0004 6.34315 8.0004 8C8.0004 9.65685 9.34355 11 11.0004 11Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
+    </symbol>
+    <symbol id="closedeye" viewBox="0 0 24 24" fill="none">
+      <path d="M9.74294 3.09232C10.1494 3.03223 10.5686 3 11.0004 3C16.1054 3 19.4553 7.50484 20.5807 9.28682C20.7169 9.5025 20.785 9.61034 20.8231 9.77667C20.8518 9.90159 20.8517 10.0987 20.8231 10.2236C20.7849 10.3899 20.7164 10.4985 20.5792 10.7156C20.2793 11.1901 19.8222 11.8571 19.2165 12.5805M5.72432 4.71504C3.56225 6.1817 2.09445 8.21938 1.42111 9.28528C1.28428 9.50187 1.21587 9.61016 1.17774 9.77648C1.1491 9.9014 1.14909 10.0984 1.17771 10.2234C1.21583 10.3897 1.28393 10.4975 1.42013 10.7132C2.54554 12.4952 5.89541 17 11.0004 17C13.0588 17 14.8319 16.2676 16.2888 15.2766M2.00042 1L20.0004 19M8.8791 7.87868C8.3362 8.42157 8.00042 9.17157 8.00042 10C8.00042 11.6569 9.34356 13 11.0004 13C11.8288 13 12.5788 12.6642 13.1217 12.1213" 
+      stroke="currentColor" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    />
+    </symbol>
   </defs>
 </svg>
\ No newline at end of file
diff --git a/packages/app/src/Icons/Icon.tsx b/packages/app/src/Icons/Icon.tsx
index 6e1ad15b..6d9c6400 100644
--- a/packages/app/src/Icons/Icon.tsx
+++ b/packages/app/src/Icons/Icon.tsx
@@ -1,7 +1,10 @@
+import { MouseEventHandler } from "react";
+
 type Props = {
   name: string;
   size?: number;
   className?: string;
+  onClick?: MouseEventHandler<SVGSVGElement>;
 };
 
 const Icon = (props: Props) => {
@@ -9,7 +12,7 @@ const Icon = (props: Props) => {
   const href = "/icons.svg#" + props.name;
 
   return (
-    <svg width={size} height={size} className={props.className}>
+    <svg width={size} height={size} className={props.className} onClick={props.onClick}>
       <use href={href} />
     </svg>
   );
diff --git a/packages/app/src/Pages/Login.css b/packages/app/src/Pages/Login.css
index 85cf3010..ed7131f3 100644
--- a/packages/app/src/Pages/Login.css
+++ b/packages/app/src/Pages/Login.css
@@ -120,6 +120,13 @@
   font-size: 16px;
 }
 
+.login-container input[type="password"] {
+  border: none;
+  background-color: var(--gray-secondary);
+  padding: 12px 16px;
+  font-size: 16px;
+}
+
 .login-container h1 {
   color: var(--font-color);
   font-style: normal;
diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx
index dffc7d7e..f842c840 100644
--- a/packages/app/src/Pages/Login.tsx
+++ b/packages/app/src/Pages/Login.tsx
@@ -16,6 +16,7 @@ import ZapButton from "Element/ZapButton";
 import useImgProxy from "Hooks/useImgProxy";
 
 import messages from "./messages";
+import Icon from "Icons/Icon";
 
 interface ArtworkEntry {
   name: string;
@@ -69,6 +70,7 @@ export default function LoginPage() {
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
   const [art, setArt] = useState<ArtworkEntry>();
+  const [isMasking, setMasking] = useState(true);
   const { formatMessage } = useIntl();
   const { proxy } = useImgProxy();
   const hasNip7 = "nostr" in window;
@@ -279,11 +281,17 @@ export default function LoginPage() {
           <div className="flex">
             <input
               dir="auto"
-              type="text"
+              type={isMasking ? "password" : "text"}
               placeholder={formatMessage(messages.KeyPlaceholder)}
               className="f-grow"
               onChange={e => setKey(e.target.value)}
             />
+            <Icon
+              name={isMasking ? "openeye" : "closedeye"}
+              size={30}
+              className="highlight btn-sm pointer"
+              onClick={() => setMasking(!isMasking)}
+            />
           </div>
           {error.length > 0 ? <b className="error">{error}</b> : null}
           <p className="login-note">