diff --git a/front-end/app/pages/login.vue b/front-end/app/pages/login.vue
new file mode 100644
index 0000000..9a50932
--- /dev/null
+++ b/front-end/app/pages/login.vue
@@ -0,0 +1,91 @@
+<!-- front-end/app/pages/login.vue -->
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const { login } = useAuth()
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const result = await login(email.value, password.value)
+  loading.value = false
+  if (result.success) {
+    navigateTo('/')
+  } else {
+    error.value = result.error ?? 'Erro ao autenticar.'
+  }
+}
+</script>
+
+<template>
+  <div class="login-card">
+    <div class="login-header">
+      <h1>Bem-vindo de volta</h1>
+      <p>Informe suas credenciais para acessar o sistema</p>
+    </div>
+
+    <form @submit.prevent="handleSubmit">
+      <UFormField label="E-mail" class="field">
+        <UInput
+          v-model="email"
+          type="email"
+          placeholder="usuario@orgao.gov.br"
+          size="md"
+          required
+        />
+      </UFormField>
+
+      <UFormField label="Senha" class="field">
+        <UInput
+          v-model="password"
+          type="password"
+          placeholder="••••••••"
+          size="md"
+          required
+        />
+      </UFormField>
+
+      <div class="forgot">
+        <a href="#">Esqueceu a senha?</a>
+      </div>
+
+      <p v-if="error" class="error-msg">{{ error }}</p>
+
+      <UButton
+        type="submit"
+        block
+        size="md"
+        :loading="loading"
+        class="btn-login"
+      >
+        Entrar
+      </UButton>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-card {
+  background: white;
+  border-radius: 20px;
+  padding: 48px 40px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
+}
+.login-header { margin-bottom: 32px; }
+.login-header h1 { font-size: 24px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
+.login-header p { font-size: 14px; color: #64748b; margin-top: 4px; }
+.field { margin-bottom: 18px; }
+.forgot { text-align: right; margin-top: -10px; margin-bottom: 20px; }
+.forgot a { font-size: 12px; color: #667eea; text-decoration: none; font-weight: 500; }
+.error-msg { color: #dc2626; font-size: 13px; margin-bottom: 12px; }
+.btn-login {
+  background: linear-gradient(135deg, #667eea, #764ba2) !important;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+</style>