diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index 7d40d83b8..830e1baeb 100644
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -19,11 +19,16 @@
   cursor: pointer;
 }
 
-.password-input {
+.password-input-container {
+  max-width: 50%;
   display: flex;
   justify-content: flex-end;
 
   .password-eye {
     margin-right: 4px;
   }
+
+  .password-input {
+    min-width: 80%;
+  }
 }
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 0d1c1d05c..15fe58398 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -60,13 +60,17 @@ function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   }
 
   return (
-    <div className={styles["password-input"]}>
+    <div className={styles["password-input-container"]}>
       <IconButton
         icon={visible ? <EyeIcon /> : <EyeOffIcon />}
         onClick={changeVisibility}
         className={styles["password-eye"]}
       />
-      <input {...props} type={visible ? "text" : "password"} />
+      <input
+        {...props}
+        type={visible ? "text" : "password"}
+        className={styles["password-input"]}
+      />
     </div>
   );
 }