diff --git a/front-end/app/pages/gestao/prazos.vue b/front-end/app/pages/gestao/prazos.vue
new file mode 100644
index 0000000..805375b
--- /dev/null
+++ b/front-end/app/pages/gestao/prazos.vue
@@ -0,0 +1,57 @@
+<!-- front-end/app/pages/gestao/prazos.vue -->
+<script setup lang="ts">
+import { prazos } from '~/data/mock/prazos'
+
+const hoje = new Date()
+
+const urgenciaConfig = {
+  critico: { label: 'Crítico — Hoje',  color: '#dc2626', bg: '#fef2f2' },
+  urgente: { label: 'Urgente',          color: '#d97706', bg: '#fffbeb' },
+  normal:  { label: 'Normal',           color: '#667eea', bg: '#eff6ff' },
+}
+
+function diasRestantes(data: Date) {
+  const diff = Math.ceil((data.getTime() - hoje.getTime()) / (1000 * 60 * 60 * 24))
+  if (diff <= 0) return 'Hoje'
+  if (diff === 1) return 'Amanhã'
+  return `${diff} dias`
+}
+</script>
+
+<template>
+  <div class="page">
+    <AppTopbar title="Prazos" breadcrumb="Gestão · Prazos" />
+    <div class="content">
+      <div class="card">
+        <div v-for="prazo in prazos" :key="prazo.id" class="prazo-row">
+          <div class="prazo-dot" :style="{ background: urgenciaConfig[prazo.urgencia].color }" />
+          <div class="prazo-info">
+            <p class="prazo-titulo">{{ prazo.titulo }}</p>
+            <p class="prazo-desc">{{ prazo.descricao }}</p>
+          </div>
+          <div class="prazo-right">
+            <span class="prazo-badge" :style="{ color: urgenciaConfig[prazo.urgencia].color, background: urgenciaConfig[prazo.urgencia].bg }">
+              {{ urgenciaConfig[prazo.urgencia].label }}
+            </span>
+            <p class="prazo-data">{{ prazo.dataLimite.toLocaleDateString('pt-BR') }} · {{ diasRestantes(prazo.dataLimite) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page { display: flex; flex-direction: column; height: 100vh; }
+.content { padding: 20px 22px; flex: 1; overflow-y: auto; }
+.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
+.prazo-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f8fafc; }
+.prazo-row:last-child { border-bottom: none; }
+.prazo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.prazo-info { flex: 1; }
+.prazo-titulo { font-size: 13px; font-weight: 600; color: #0f172a; }
+.prazo-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }
+.prazo-right { text-align: right; flex-shrink: 0; }
+.prazo-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 4px; }
+.prazo-data { font-size: 11px; color: #64748b; }
+</style>