diff --git a/src/api/auth.js b/src/api/auth.js
new file mode 100644
index 0000000..a8bce76
--- /dev/null
+++ b/src/api/auth.js
@@ -0,0 +1,4 @@
+import { userHttp } from './http'
+
+export const loginWithPassword = (username, password) =>
+  userHttp.post('/auth/login', { username, password })
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index b9e9176..59f4c6e 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -4,21 +4,27 @@
       <template #header>
         <div class="text-center">
           <h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
-          <p class="text-sm text-gray-500 mt-1">請輸入 Authentik Access Token 登入</p>
+          <p class="text-sm text-gray-500 mt-1">使用 Authentik 帳號密碼登入</p>
         </div>
       </template>
 
       <el-form @submit.prevent="handleLogin">
-        <el-form-item>
+        <el-form-item label="帳號">
           <el-input
-            v-model="token"
-            type="textarea"
-            :rows="4"
-            placeholder="貼上 Bearer Token..."
-            resize="none"
+            v-model="username"
+            placeholder="請輸入 Authentik username / email"
             clearable
           />
         </el-form-item>
+        <el-form-item label="密碼">
+          <el-input
+            v-model="password"
+            type="password"
+            placeholder="請輸入密碼"
+            clearable
+            show-password
+          />
+        </el-form-item>
 
         <el-alert
           v-if="error"
@@ -35,16 +41,14 @@
             native-type="submit"
             class="w-full"
             :loading="loading"
-            :disabled="!token.trim()"
+            :disabled="!username.trim() || !password.trim()"
           >
             登入
           </el-button>
         </el-form-item>
       </el-form>
 
-      <p class="text-xs text-gray-400 text-center mt-2">
-        Token 從 Authentik 取得，存於本機 localStorage
-      </p>
+      <p class="text-xs text-gray-400 text-center mt-2">登入成功後 access token 會存於本機 localStorage</p>
     </el-card>
   </div>
 </template>
@@ -53,29 +57,34 @@
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { loginWithPassword } from '@/api/auth'
 
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
 
-const token = ref('')
+const username = ref('')
+const password = ref('')
 const loading = ref(false)
 const error = ref('')
 
 async function handleLogin() {
-  if (!token.value.trim()) return
+  if (!username.value.trim() || !password.value.trim()) return
   loading.value = true
   error.value = ''
   try {
-    authStore.setToken(token.value.trim())
+    const loginRes = await loginWithPassword(username.value.trim(), password.value)
+    authStore.setToken(loginRes.data.access_token)
     await authStore.fetchMe()
     const redirect = route.query.redirect || '/me'
     router.push(redirect)
   } catch (err) {
     authStore.logout()
     const detail = err.response?.data?.detail
-    if (detail === 'missing_bearer_token' || detail === 'invalid_bearer_token') {
-      error.value = 'Token 無效或已過期，請重新取得'
+    if (detail === 'invalid_username_or_password') {
+      error.value = '帳號或密碼錯誤'
+    } else if (detail === 'authentik_login_not_configured') {
+      error.value = '後端尚未設定 Authentik 登入參數'
     } else {
       error.value = '登入失敗，請稍後再試'
     }