diff --git a/app/components/dashboard/AdminDashboard.vue b/app/components/dashboard/AdminDashboard.vue
index f1e07b3..fa6889a 100644
--- a/app/components/dashboard/AdminDashboard.vue
+++ b/app/components/dashboard/AdminDashboard.vue
@@ -2,97 +2,243 @@
 const { getOverviewStats } = useAdmin()
 
 const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
+
+const totalReports = computed(() =>
+  statsRes.value?.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0
+)
+
+const reportCountByStatus = (status: string) =>
+  statsRes.value?.reports_by_status?.find(item => item.status === status)?.total ?? 0
+
+const quickLinks = [
+  {
+    to: '/admin/reports',
+    icon: 'it-files',
+    title: 'Overview segnalazioni',
+    text: 'Vista completa, sola lettura, con stato e distribuzione.',
+    tone: 'primary'
+  },
+  {
+    to: '/admin/catalog',
+    icon: 'it-list',
+    title: 'Categorie e team',
+    text: 'Gestione riferimento operativo e gruppi esterni.',
+    tone: 'primary'
+  },
+  {
+    to: '/admin/areas',
+    icon: 'it-map-marker',
+    title: 'Aree',
+    text: 'Confini e copertura territoriale.',
+    tone: 'primary'
+  },
+  {
+    to: '/admin/users',
+    icon: 'it-user',
+    title: 'Utenti',
+    text: 'Ruoli, stato account, ban.',
+    tone: 'primary'
+  },
+  {
+    to: '/admin/moderation',
+    icon: 'it-warning',
+    title: 'Moderazione abusi',
+    text: 'Gestione flag e contenuti segnalati.',
+    tone: 'danger'
+  }
+]
 </script>
 
 <template>
-  <div>
-    <div class="callout callout-highlight callout-danger mb-4">
-      <div class="callout-title">Pannello Admin</div>
-      <p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
+  <div class="admin-dashboard">
+    <div class="admin-intro mb-4">
+      <div>
+        <span class="admin-eyebrow">Controllo centrale</span>
+        <h2 class="h4 mb-2">Pannello amministrazione</h2>
+        <p class="mb-0 text-muted">Overview rapida su segnalazioni, moderazione e configurazioni di sistema.</p>
+      </div>
     </div>
 
-    <div class="row mb-5" v-if="!pending && statsRes?.ok">
-
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space">
-          <div class="card card-bg text-center">
-            <div class="card-body">
-              <h2 class="text-primary">
-                {{ statsRes.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0 }}
-              </h2>
-              <p class="card-text">Totale Segnalazioni</p>
-            </div>
-          </div>
+    <div class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
+      <div class="col-6 col-xl-3">
+        <div class="admin-stat-card tone-primary">
+          <span class="admin-stat-label">Totale segnalazioni</span>
+          <strong class="admin-stat-value">{{ totalReports }}</strong>
         </div>
       </div>
-
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space">
-          <div class="card card-bg text-center">
-            <div class="card-body">
-              <h2 class="text-danger">
-                {{ statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
-              </h2>
-              <p class="card-text">Aperte (Da Gestire)</p>
-            </div>
-          </div>
+      <div class="col-6 col-xl-3">
+        <div class="admin-stat-card tone-danger">
+          <span class="admin-stat-label">Aperte</span>
+          <strong class="admin-stat-value">{{ reportCountByStatus('OPEN') }}</strong>
         </div>
       </div>
-
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space">
-          <div class="card card-bg text-center">
-            <div class="card-body">
-              <h2 class="text-warning">
-                {{ statsRes.reports_by_status?.find(s => s.status === 'ASSIGNED')?.total ?? 0 }}
-              </h2>
-              <p class="card-text">In Carico (Assegnate)</p>
-            </div>
-          </div>
+      <div class="col-6 col-xl-3">
+        <div class="admin-stat-card tone-warning">
+          <span class="admin-stat-label">Assegnate</span>
+          <strong class="admin-stat-value">{{ reportCountByStatus('ASSIGNED') }}</strong>
         </div>
       </div>
-
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space">
-          <div class="card card-bg text-center">
-            <div class="card-body">
-              <h2 class="text-success">
-                {{ statsRes.reports_by_status?.find(s => s.status === 'CLOSED')?.total ?? 0 }}
-              </h2>
-              <p class="card-text">Risolte (Chiuse)</p>
-            </div>
-          </div>
+      <div class="col-6 col-xl-3">
+        <div class="admin-stat-card tone-success">
+          <span class="admin-stat-label">Chiuse</span>
+          <strong class="admin-stat-value">{{ reportCountByStatus('CLOSED') }}</strong>
         </div>
       </div>
-
     </div>
 
-    <h3 class="mb-3">Gestione Sistema</h3>
-    <div class="row">
-      <div class="col-12 col-md-4 mb-3">
-        <NuxtLink to="/admin/catalog" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-list" size="sm" color="primary" class="mb-2" />
-          Categorie e Team
-        </NuxtLink>
-      </div>
-      <div class="col-12 col-md-4 mb-3">
-        <NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
-          Aree
-        </NuxtLink>
-      </div>
-      <div class="col-12 col-md-4 mb-3">
-        <NuxtLink to="/admin/users" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-user" size="sm" color="primary" class="mb-2" />
-          Gestione Utenti
-        </NuxtLink>
-      </div>
-      <div class="col-12 col-md-6 mb-3">
-        <NuxtLink to="/admin/moderation" class="btn btn-outline-danger w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-warning" size="sm" color="danger" class="mb-2" />
-          Moderazione Abusi
-        </NuxtLink>
-      </div>
+    <div class="d-flex align-items-center justify-content-between mb-3">
+      <h3 class="h5 mb-0">Strumenti</h3>
+      <span class="text-muted small">{{ quickLinks.length }} sezioni</span>
+    </div>
+
+    <div class="admin-tools-grid">
+      <NuxtLink v-for="link in quickLinks" :key="link.to" :to="link.to" class="admin-tool-card" :class="`tone-${link.tone}`">
+        <div class="admin-tool-icon">
+          <BIIcon :name="link.icon" size="sm" :color="link.tone === 'danger' ? 'danger' : 'primary'" />
+        </div>
+        <div>
+          <h4 class="admin-tool-title">{{ link.title }}</h4>
+          <p class="admin-tool-text">{{ link.text }}</p>
+        </div>
+        <span class="admin-tool-cta">Apri</span>
+      </NuxtLink>
     </div>
   </div>
 </template>
+
+<style scoped>
+.admin-dashboard {
+  --admin-border: rgba(23, 50, 77, 0.12);
+  --admin-shadow: 0 18px 40px rgba(23, 50, 77, 0.08);
+}
+
+.admin-intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem 1.35rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 1.25rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f3f7fb 100%);
+}
+
+.admin-eyebrow {
+  display: inline-block;
+  margin-bottom: 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #5b6577;
+}
+
+.admin-stat-card {
+  border: 1px solid var(--admin-border);
+  border-radius: 1rem;
+  padding: 1rem 1.1rem;
+  min-height: 120px;
+  background: #fff;
+  box-shadow: var(--admin-shadow);
+}
+
+.admin-stat-card::before {
+  content: '';
+  width: 2.6rem;
+  height: 0.35rem;
+  display: block;
+  border-radius: 999px;
+  margin-bottom: 1rem;
+}
+
+.admin-stat-card.tone-primary::before { background: #0d6efd; }
+.admin-stat-card.tone-danger::before { background: #d9364f; }
+.admin-stat-card.tone-warning::before { background: #c58100; }
+.admin-stat-card.tone-success::before { background: #198754; }
+
+.admin-stat-label {
+  display: block;
+  color: #5b6577;
+  font-size: 0.92rem;
+  margin-bottom: 0.45rem;
+}
+
+.admin-stat-value {
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  line-height: 1;
+  color: #17324d;
+}
+
+.admin-tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.admin-tool-card {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: start;
+  gap: 0.9rem;
+  text-decoration: none;
+  color: inherit;
+  padding: 1rem 1.1rem;
+  border-radius: 1rem;
+  border: 1px solid var(--admin-border);
+  background: #fff;
+  box-shadow: var(--admin-shadow);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.admin-tool-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 22px 40px rgba(23, 50, 77, 0.12);
+}
+
+.admin-tool-card.tone-danger {
+  border-color: rgba(217, 54, 79, 0.28);
+}
+
+.admin-tool-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #eef4ff;
+}
+
+.admin-tool-card.tone-danger .admin-tool-icon {
+  background: #fff1f3;
+}
+
+.admin-tool-title {
+  font-size: 1rem;
+  margin: 0 0 0.25rem;
+  color: #17324d;
+}
+
+.admin-tool-text {
+  margin: 0;
+  color: #5b6577;
+  font-size: 0.92rem;
+}
+
+.admin-tool-cta {
+  align-self: center;
+  font-size: 0.84rem;
+  color: #17324d;
+  font-weight: 600;
+}
+
+@media (max-width: 767.98px) {
+  .admin-tool-card {
+    grid-template-columns: auto 1fr;
+  }
+
+  .admin-tool-cta {
+    grid-column: 2;
+    justify-self: start;
+  }
+}
+</style>
diff --git a/app/composables/useReports.ts b/app/composables/useReports.ts
index 57ebc23..d83aa98 100644
--- a/app/composables/useReports.ts
+++ b/app/composables/useReports.ts
@@ -9,7 +9,7 @@ import type {
 } from "~/types/api";
 
 export const useReports = () => {
-  const getReports = (query?: { area_id?: number; category_id?: number; status?: string }) =>
+  const getReports = (query?: { area_id?: number; category_id?: number; status?: string; page?: number; per_page?: number }) =>
       useApiFetch<ReportListResponse>('/api/v1/reports', { method: 'GET', query })
 
   const getCategories = () =>
diff --git a/app/pages/admin/reports.vue b/app/pages/admin/reports.vue
new file mode 100644
index 0000000..47c1e31
--- /dev/null
+++ b/app/pages/admin/reports.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import type { Report, ReportStatus } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'ADMIN' }
+})
+
+useHead({ title: 'Overview Segnalazioni - Admin' })
+
+const { getReports, getCategories } = useReports()
+const { getAreas } = useAdmin()
+
+const search = ref('')
+const selectedStatus = ref<'ALL' | ReportStatus>('ALL')
+const selectedCategoryId = ref<number | 'ALL'>('ALL')
+const selectedAreaId = ref<number | 'ALL'>('ALL')
+
+const { data: reportsRes, pending } = await useAsyncData('admin-report-overview', () => getReports())
+const { data: categoriesRes } = await useAsyncData('admin-report-overview-categories', () => getCategories())
+const { data: areasRes } = await useAsyncData('admin-report-overview-areas', () => getAreas())
+
+const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+const categories = computed(() => categoriesRes.value?.categories || [])
+const areas = computed(() => areasRes.value?.areas || [])
+
+const statusMeta: Record<ReportStatus, { label: string; tone: string }> = {
+  OPEN: { label: 'Aperta', tone: 'danger' },
+  UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
+  ASSIGNED: { label: 'Assegnata', tone: 'info' },
+  IN_PROGRESS: { label: 'In corso', tone: 'primary' },
+  RESOLVED: { label: 'Risolta', tone: 'success' },
+  REJECTED: { label: 'Rigettata', tone: 'secondary' },
+  CLOSED: { label: 'Chiusa', tone: 'dark' }
+}
+
+const filteredReports = computed(() => {
+  const term = search.value.trim().toLowerCase()
+
+  return reports.value.filter((report) => {
+    const matchesStatus = selectedStatus.value === 'ALL' || report.status === selectedStatus.value
+    const matchesCategory = selectedCategoryId.value === 'ALL' || report.category_id === selectedCategoryId.value
+    const matchesArea = selectedAreaId.value === 'ALL' || (report.area_id ?? null) === selectedAreaId.value
+    const matchesSearch = !term || [
+      report.id,
+      report.address,
+      report.description,
+      report.category_name,
+      report.area_name,
+      report.assigned_operator_id ? `#${report.assigned_operator_id}` : ''
+    ].some((value) => String(value || '').toLowerCase().includes(term))
+
+    return matchesStatus && matchesCategory && matchesArea && matchesSearch
+  })
+})
+
+const totalReports = computed(() => reports.value.length)
+const openReports = computed(() => reports.value.filter((report) => report.status === 'OPEN').length)
+const activeReports = computed(() => reports.value.filter((report) => ['UNDER_REVIEW', 'ASSIGNED', 'IN_PROGRESS'].includes(report.status)).length)
+const closedReports = computed(() => reports.value.filter((report) => ['RESOLVED', 'CLOSED'].includes(report.status)).length)
+
+const reportsByStatus = computed(() =>
+  Object.entries(statusMeta)
+    .map(([status, meta]) => ({
+      status: status as ReportStatus,
+      label: meta.label,
+      tone: meta.tone,
+      total: reports.value.filter((report) => report.status === status).length
+    }))
+    .filter((item) => item.total > 0)
+)
+
+const recentReports = computed(() =>
+  [...filteredReports.value]
+    .sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
+    .slice(0, 12)
+)
+
+const formatDate = (value?: string) => {
+  if (!value) return '-'
+  return new Date(value).toLocaleString('it-IT', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const truncate = (value?: string, max = 120) => {
+  if (!value) return '-'
+  return value.length > max ? `${value.slice(0, max).trim()}...` : value
+}
+</script>
+
+<template>
+  <div class="container my-5 admin-report-overview">
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
+      <div>
+        <h1 class="h3 font-weight-bold mb-1">Overview Segnalazioni</h1>
+        <p class="text-muted mb-0">Vista completa in sola lettura per monitorare carico, stato e distribuzione.</p>
+      </div>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
+    </div>
+
+    <div class="row g-3 mb-4">
+      <div class="col-6 col-xl-3" v-for="card in [
+        { label: 'Totali', value: totalReports, tone: 'primary' },
+        { label: 'Aperte', value: openReports, tone: 'danger' },
+        { label: 'In lavorazione', value: activeReports, tone: 'warning' },
+        { label: 'Chiuse/Risolte', value: closedReports, tone: 'success' }
+      ]" :key="card.label">
+        <div class="overview-stat-card" :class="`tone-${card.tone}`">
+          <span class="overview-stat-label">{{ card.label }}</span>
+          <strong class="overview-stat-value">{{ card.value }}</strong>
+        </div>
+      </div>
+    </div>
+
+    <div class="card border-0 shadow-sm mb-4">
+      <div class="card-body">
+        <div class="row g-3 align-items-end">
+          <div class="col-12 col-lg-4">
+            <label class="form-label">Cerca</label>
+            <input v-model="search" type="text" class="form-control" placeholder="ID, indirizzo, descrizione, area..." />
+          </div>
+          <div class="col-12 col-md-4 col-lg-3">
+            <label class="form-label">Stato</label>
+            <select v-model="selectedStatus" class="form-select">
+              <option value="ALL">Tutti</option>
+              <option v-for="item in reportsByStatus" :key="item.status" :value="item.status">{{ item.label }}</option>
+            </select>
+          </div>
+          <div class="col-12 col-md-4 col-lg-2">
+            <label class="form-label">Categoria</label>
+            <select v-model="selectedCategoryId" class="form-select">
+              <option value="ALL">Tutte</option>
+              <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
+            </select>
+          </div>
+          <div class="col-12 col-md-4 col-lg-3">
+            <label class="form-label">Area</label>
+            <select v-model="selectedAreaId" class="form-select">
+              <option value="ALL">Tutte</option>
+              <option v-for="area in areas" :key="area.id" :value="area.id">{{ area.name }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <template v-else>
+      <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body">
+          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
+            <h2 class="h5 mb-0">Distribuzione stati</h2>
+            <span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
+          </div>
+          <div class="status-chip-grid">
+            <div v-for="item in reportsByStatus" :key="item.status" class="status-chip" :class="`tone-${item.tone}`">
+              <span>{{ item.label }}</span>
+              <strong>{{ item.total }}</strong>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="recentReports.length === 0" class="alert alert-info">
+        Nessuna segnalazione trovata con filtri correnti.
+      </div>
+
+      <div v-else class="card border-0 shadow-sm">
+        <div class="card-body p-0">
+          <div class="table-responsive report-table-wrapper">
+            <table class="table table-hover report-table mb-0 align-middle">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Categoria</th>
+                  <th>Indirizzo</th>
+                  <th>Area</th>
+                  <th>Stato</th>
+                  <th>Operatore</th>
+                  <th>Aggiornata</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="report in recentReports" :key="report.id">
+                  <td class="report-table-id">#{{ report.id }}</td>
+                  <td>
+                    <div class="fw-semibold">{{ report.category_name || '-' }}</div>
+                    <small class="text-muted">{{ truncate(report.description, 72) }}</small>
+                  </td>
+                  <td>{{ report.address || '-' }}</td>
+                  <td>{{ report.area_name || 'Non assegnata' }}</td>
+                  <td>
+                    <span class="badge rounded-pill" :class="`text-bg-${statusMeta[report.status].tone}`">
+                      {{ statusMeta[report.status].label }}
+                    </span>
+                  </td>
+                  <td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
+                  <td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.admin-report-overview {
+  --admin-surface: #ffffff;
+  --admin-border: rgba(31, 48, 78, 0.12);
+  --admin-text-soft: #5b6577;
+}
+
+.overview-stat-card {
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.9)),
+    var(--admin-surface);
+  border: 1px solid var(--admin-border);
+  border-radius: 1rem;
+  padding: 1rem 1.1rem;
+  min-height: 118px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0 14px 34px rgba(31, 48, 78, 0.08);
+}
+
+.overview-stat-card::before {
+  content: '';
+  width: 2.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  display: block;
+}
+
+.overview-stat-card.tone-primary::before { background: #0d6efd; }
+.overview-stat-card.tone-danger::before { background: #d9364f; }
+.overview-stat-card.tone-warning::before { background: #c58100; }
+.overview-stat-card.tone-success::before { background: #198754; }
+
+.overview-stat-label {
+  color: var(--admin-text-soft);
+  font-size: 0.9rem;
+}
+
+.overview-stat-value {
+  font-size: clamp(1.8rem, 4vw, 2.5rem);
+  line-height: 1;
+  color: #17324d;
+}
+
+.status-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 0.75rem;
+}
+
+.status-chip {
+  border-radius: 0.9rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--admin-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  background: #fff;
+}
+
+.status-chip strong {
+  font-size: 1.1rem;
+}
+
+.status-chip.tone-danger { background: rgba(217, 54, 79, 0.08); }
+.status-chip.tone-warning { background: rgba(197, 129, 0, 0.08); }
+.status-chip.tone-info { background: rgba(13, 202, 240, 0.08); }
+.status-chip.tone-primary { background: rgba(13, 110, 253, 0.08); }
+.status-chip.tone-success { background: rgba(25, 135, 84, 0.08); }
+.status-chip.tone-secondary,
+.status-chip.tone-dark { background: rgba(108, 117, 125, 0.08); }
+</style>
diff --git a/footer.png b/footer.png
deleted file mode 100644
index dc3fc09..0000000
Binary files a/footer.png and /dev/null differ