diff --git a/app/login.tsx b/app/login.tsx
index 46144069..bf5aa4fd 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -277,20 +277,19 @@ const Login: React.FC = () => {
               />
 
               {/* Password */}
-              <PasswordInput
-                value={credentials.password}
-                onChangeText={(text: string) =>
-                  setCredentials({ ...credentials, password: text })
-                }
-                onSubmitEditing={handleLogin}
-                placeholder={t("login.password_placeholder")}
-                className='mb-4'
-                showPassword={showPassword}
-                onShowPasswordChange={setShowPassword}
-                topPosition='4'
-                testID='tv-password-input'
-                accessibilityLabel={t("login.password_placeholder")}
-              />
+              <View className='relative'>
+                <PasswordInput
+                  value={credentials.password}
+                  onChangeText={(text: string) =>
+                    setCredentials({ ...credentials, password: text })
+                  }
+                  placeholder={t("login.password_placeholder")}
+                  showPassword={showPassword}
+                  onShowPasswordChange={setShowPassword}
+                  topPosition='4'
+                  layout='tv'
+                />
+              </View>
 
               <View className='mt-4'>
                 <Button onPress={handleLogin}>{t("login.login_button")}</Button>
@@ -403,20 +402,22 @@ const Login: React.FC = () => {
                   textContentType='oneTimeCode'
                   clearButtonMode='while-editing'
                   maxLength={500}
+                  extraClassName='mb-4'
                 />
 
-                <PasswordInput
-                  value={credentials.password}
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  placeholder={t("login.password_placeholder")}
-                  showPassword={showPassword}
-                  onShowPasswordChange={setShowPassword}
-                  topPosition='3.5'
-                  testID='mobile-password-input'
-                  accessibilityLabel={t("login.password_placeholder")}
-                />
+                <View className='relative mb-0.5'>
+                  <PasswordInput
+                    value={credentials.password}
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, password: text })
+                    }
+                    placeholder={t("login.password_placeholder")}
+                    showPassword={showPassword}
+                    onShowPasswordChange={setShowPassword}
+                    topPosition='10'
+                    layout='mobile'
+                  />
+                </View>
                 <View className='flex flex-row items-center justify-between'>
                   <Button
                     onPress={handleLogin}
@@ -427,7 +428,7 @@ const Login: React.FC = () => {
                   </Button>
                   <TouchableOpacity
                     onPress={handleQuickConnect}
-                    className='p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center'
+                    className='p-3 bg-neutral-900 rounded-xl h-13 w-13 flex items-center justify-center'
                   >
                     <MaterialCommunityIcons
                       name='cellphone-lock'
diff --git a/bun.lock b/bun.lock
index c38c65d0..b653d580 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,7 +7,7 @@
         "@bottom-tabs/react-navigation": "^0.9.2",
         "@expo/metro-runtime": "~5.0.4",
         "@expo/react-native-action-sheet": "^4.1.1",
-        "@expo/vector-icons": "15.0.2",
+        "@expo/vector-icons": "^15.0.2",
         "@gorhom/bottom-sheet": "^5.1.0",
         "@jellyfin/sdk": "^0.11.0",
         "@kesha-antonov/react-native-background-downloader": "^3.2.6",
diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
index 90938ef9..249c45f9 100644
--- a/components/PasswordInput.tsx
+++ b/components/PasswordInput.tsx
@@ -1,104 +1,90 @@
 import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { Input } from "./common/Input";
 
-interface PasswordInputProps {
+// Discriminated union for password visibility control
+type PasswordVisibilityControlled = {
   value?: string;
   onChangeText: (text: string) => void;
-  onSubmitEditing?: () => void;
   placeholder: string;
-  className?: string;
-  testID?: string;
-  accessibilityLabel?: string;
-  maxLength?: number;
-  showPassword?: boolean;
-  onShowPasswordChange?: (show: boolean) => void;
-  topPosition?: "3.5" | "4";
-  editable?: boolean;
-  autoComplete?:
-    | "password"
-    | "username"
-    | "name"
-    | "email"
-    | "tel"
-    | "url"
-    | "off";
-  autoCorrect?: boolean;
-  iconColor?: string;
-}
+  showPassword: boolean;
+  onShowPasswordChange: (show: boolean) => void;
+  topPosition?: string;
+  layout?: "tv" | "mobile";
+};
 
-export const PasswordInput: React.FC<PasswordInputProps> = ({
-  value = "",
-  onChangeText,
-  onSubmitEditing,
-  placeholder,
-  className = "",
-  testID,
-  accessibilityLabel,
-  maxLength = 500,
-  showPassword: controlledShowPassword,
-  onShowPasswordChange,
-  topPosition = "3.5",
-  editable = true,
-  autoComplete,
-  autoCorrect,
-  iconColor = "white",
-}) => {
-  const { t } = useTranslation();
-  const [internalShowPassword, setInternalShowPassword] = useState(false);
+type PasswordVisibilityUncontrolled = {
+  value?: string;
+  onChangeText: (text: string) => void;
+  placeholder: string;
+  showPassword?: never;
+  onShowPasswordChange?: never;
+  topPosition?: string;
+  layout?: "tv" | "mobile";
+};
 
-  // Use controlled state if provided, otherwise use internal state
-  const showPassword = controlledShowPassword ?? internalShowPassword;
-  const setShowPassword = onShowPasswordChange ?? setInternalShowPassword;
+type PasswordInputProps =
+  | PasswordVisibilityControlled
+  | PasswordVisibilityUncontrolled;
 
-  // Construct Tailwind class from validated topPosition
-  const topClass = `top-${topPosition}`;
+export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
+  const {
+    value = "",
+    onChangeText,
+    placeholder,
+    topPosition = "3.5",
+    layout = "mobile",
+  } = props;
+
+  // Type guard to check if we're in controlled mode
+  const isControlled =
+    "showPassword" in props && "onShowPasswordChange" in props;
+
+  // For controlled mode, use the provided props
+  // For uncontrolled mode, use internal state (but we need to handle this differently)
+  const showPassword = isControlled
+    ? (props as PasswordVisibilityControlled).showPassword
+    : false;
+
+  const handleTogglePassword = () => {
+    if (isControlled) {
+      (props as PasswordVisibilityControlled).onShowPasswordChange(
+        !showPassword,
+      );
+    }
+    // For uncontrolled mode, we could add internal state handling here if needed
+  };
+
+  // Generate top position with pixel precision
+  const getTopStyle = () => {
+    // Use pixel values directly
+    const positionInPx = parseFloat(topPosition);
+    return { top: positionInPx };
+  };
 
   return (
-    <View className={`relative ${className}`}>
+    <>
       <Input
         placeholder={placeholder}
         onChangeText={onChangeText}
         value={value}
         secureTextEntry={!showPassword}
-        keyboardType='default'
-        returnKeyType='done'
-        autoCapitalize='none'
-        textContentType='password'
-        clearButtonMode='while-editing'
-        maxLength={maxLength}
-        className='pr-12'
-        onSubmitEditing={onSubmitEditing}
-        testID={testID}
-        accessibilityLabel={accessibilityLabel}
-        editable={editable}
-        autoComplete={autoComplete}
-        autoCorrect={autoCorrect}
+        className='pr-4'
       />
       <TouchableOpacity
-        onPress={() => setShowPassword(!showPassword)}
-        className={`absolute right-3 ${topClass} p-1`}
-        accessible={true}
-        accessibilityRole='button'
-        accessibilityLabel={
-          showPassword
-            ? t("accessibility.hide_password")
-            : t("accessibility.show_password")
-        }
-        accessibilityHint={t("accessibility.toggle_password_visibility")}
-        accessibilityState={{ selected: showPassword }}
-        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        testID={testID ? `${testID}-toggle` : undefined}
+        onPress={handleTogglePassword}
+        className={`absolute right-3 p-1 ${
+          layout === "tv" ? "h-10 justify-center" : ""
+        }`}
+        style={getTopStyle()}
       >
         <Ionicons
           name={showPassword ? "eye-off" : "eye"}
           size={24}
-          color={iconColor}
+          color='white'
         />
       </TouchableOpacity>
-    </View>
+    </>
   );
 };
diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index 89fb8463..7af2e0bf 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -20,7 +20,7 @@ export function Input(props: InputProps) {
       <TextInput
         ref={inputRef}
         className={`
-          w-full text-lg px-5 py-4 rounded-2xl
+          w-full text-lg px-5 py-5 rounded-2xl
           ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-transparent"}
           text-white ${extraClassName}
         `}
@@ -41,7 +41,7 @@ export function Input(props: InputProps) {
   ) : (
     <TextInput
       ref={inputRef}
-      className='p-4  rounded-xl bg-neutral-900'
+      className='p-3 rounded-xl bg-neutral-900'
       allowFontScaling={false}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}
diff --git a/components/settings/Jellyseerr.tsx b/components/settings/Jellyseerr.tsx
index 73a88390..20b7514d 100644
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -150,24 +150,20 @@ export const JellyseerrSettings = () => {
               <Text className='font-bold mb-2'>
                 {t("home.settings.plugins.jellyseerr.password")}
               </Text>
-              <PasswordInput
-                value={jellyseerrPassword}
-                onChangeText={setJellyseerrPassword}
-                placeholder={t(
-                  "home.settings.plugins.jellyseerr.password_placeholder",
-                  { username: user?.Name },
-                )}
-                className='border border-neutral-800'
-                showPassword={showJellyseerrPassword}
-                onShowPasswordChange={setShowJellyseerrPassword}
-                editable={!loginToJellyseerrMutation.isPending}
-                autoComplete='password'
-                autoCorrect={false}
-                testID='jellyseerr-password-input'
-                accessibilityLabel={t(
-                  "home.settings.plugins.jellyseerr.password",
-                )}
-              />
+              <View className='relative'>
+                <PasswordInput
+                  value={jellyseerrPassword}
+                  onChangeText={setJellyseerrPassword}
+                  placeholder={t(
+                    "home.settings.plugins.jellyseerr.password_placeholder",
+                    { username: user?.Name },
+                  )}
+                  showPassword={showJellyseerrPassword}
+                  onShowPasswordChange={setShowJellyseerrPassword}
+                  layout='mobile'
+                  topPosition='22'
+                />
+              </View>
               <Button
                 loading={loginToJellyseerrMutation.isPending}
                 disabled={loginToJellyseerrMutation.isPending}
diff --git a/package.json b/package.json
index f73616ee..762aa4db 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@bottom-tabs/react-navigation": "^0.9.2",
     "@expo/metro-runtime": "~5.0.4",
     "@expo/react-native-action-sheet": "^4.1.1",
-    "@expo/vector-icons": "15.0.2",
+    "@expo/vector-icons": "^15.0.2",
     "@gorhom/bottom-sheet": "^5.1.0",
     "@jellyfin/sdk": "^0.11.0",
     "@kesha-antonov/react-native-background-downloader": "^3.2.6",