diff --git a/frontend/src/components/PasswordInput.tsx b/frontend/src/components/PasswordInput.tsx
new file mode 100644
index 0000000..75082e6
--- /dev/null
+++ b/frontend/src/components/PasswordInput.tsx
@@ -0,0 +1,77 @@
+import { useState, InputHTMLAttributes } from 'react';
+
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  // All standard input props are inherited
+}
+
+export default function PasswordInput({ style, ...props }: PasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div style={{ position: 'relative', display: 'flex' }}>
+      <input
+        {...props}
+        type={visible ? 'text' : 'password'}
+        style={{
+          ...style,
+          width: '100%',
+          paddingRight: '2.5rem',
+        }}
+      />
+      <button
+        type="button"
+        onClick={() => setVisible(!visible)}
+        style={{
+          position: 'absolute',
+          right: '0.5rem',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: '0.25rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'var(--text-muted)',
+        }}
+        title={visible ? 'Hide' : 'Show'}
+        aria-label={visible ? 'Hide password' : 'Show password'}
+      >
+        {visible ? (
+          // Eye-off icon (hidden)
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+            <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" />
+            <line x1="1" y1="1" x2="23" y2="23" />
+          </svg>
+        ) : (
+          // Eye icon (visible)
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 195e632..8778647 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Layout from '../components/Layout';
+import PasswordInput from '../components/PasswordInput';
 import {
   settingsApi,
   profileApi,
@@ -983,8 +984,7 @@ export default function Settings() {
 
                 <div className="settings-form-group">
                   <label>Bot Token</label>
-                  <input
-                    type="password"
+                  <PasswordInput
                     value={telegramBotToken}
                     onChange={(e) => setTelegramBotToken(e.target.value)}
                     placeholder={notificationSettings?.telegram_configured ? '••••••••••••••••' : 'Enter your bot token'}
@@ -1053,8 +1053,7 @@ export default function Settings() {
 
                 <div className="settings-form-group">
                   <label>Webhook URL</label>
-                  <input
-                    type="password"
+                  <PasswordInput
                     value={discordWebhookUrl}
                     onChange={(e) => setDiscordWebhookUrl(e.target.value)}
                     placeholder={notificationSettings?.discord_configured ? '••••••••••••••••' : 'https://discord.com/api/webhooks/...'}
@@ -1112,8 +1111,7 @@ export default function Settings() {
 
                 <div className="settings-form-group">
                   <label>User Key</label>
-                  <input
-                    type="password"
+                  <PasswordInput
                     value={pushoverUserKey}
                     onChange={(e) => setPushoverUserKey(e.target.value)}
                     placeholder={notificationSettings?.pushover_configured ? '••••••••••••••••' : 'Enter your user key'}
@@ -1123,8 +1121,7 @@ export default function Settings() {
 
                 <div className="settings-form-group">
                   <label>Application API Token</label>
-                  <input
-                    type="password"
+                  <PasswordInput
                     value={pushoverAppToken}
                     onChange={(e) => setPushoverAppToken(e.target.value)}
                     placeholder={notificationSettings?.pushover_configured ? '••••••••••••••••' : 'Enter your app token'}
@@ -1208,8 +1205,7 @@ export default function Settings() {
                     {aiProvider === 'anthropic' && (
                       <div className="settings-form-group">
                         <label>Anthropic API Key</label>
-                        <input
-                          type="password"
+                        <PasswordInput
                           value={anthropicApiKey}
                           onChange={(e) => setAnthropicApiKey(e.target.value)}
                           placeholder={aiSettings?.anthropic_configured ? '••••••••••••••••' : 'sk-ant-...'}
@@ -1227,8 +1223,7 @@ export default function Settings() {
                     {aiProvider === 'openai' && (
                       <div className="settings-form-group">
                         <label>OpenAI API Key</label>
-                        <input
-                          type="password"
+                        <PasswordInput
                           value={openaiApiKey}
                           onChange={(e) => setOpenaiApiKey(e.target.value)}
                           placeholder={aiSettings?.openai_configured ? '••••••••••••••••' : 'sk-...'}
diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo
index 4954d8a..b9f18e1 100644
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/authform.tsx","./src/components/layout.tsx","./src/components/pricechart.tsx","./src/components/productcard.tsx","./src/components/productform.tsx","./src/components/sparkline.tsx","./src/components/stocktimeline.tsx","./src/context/authcontext.tsx","./src/context/toastcontext.tsx","./src/hooks/useauth.ts","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/productdetail.tsx","./src/pages/register.tsx","./src/pages/settings.tsx"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/authform.tsx","./src/components/layout.tsx","./src/components/passwordinput.tsx","./src/components/pricechart.tsx","./src/components/productcard.tsx","./src/components/productform.tsx","./src/components/sparkline.tsx","./src/components/stocktimeline.tsx","./src/context/authcontext.tsx","./src/context/toastcontext.tsx","./src/hooks/useauth.ts","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/productdetail.tsx","./src/pages/register.tsx","./src/pages/settings.tsx"],"version":"5.9.3"}
\ No newline at end of file