diff --git a/web/src/components/dashboard/KpiRow.vue b/web/src/components/dashboard/KpiRow.vue
new file mode 100644
index 0000000..a5d1f78
--- /dev/null
+++ b/web/src/components/dashboard/KpiRow.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import KpiCard from '@/components/dashboard/KpiCard.vue'
+import { formatDuration } from '@/lib/utils'
+import type { KpiSummary } from '@/types'
+
+defineProps<{
+  summary: KpiSummary | null
+  loading: boolean
+}>()
+</script>
+
+<template>
+  <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
+    <KpiCard
+      label="Total Hours"
+      :value="summary ? formatDuration(summary.total_hours) : '—'"
+      icon="clock"
+      :loading="loading"
+      :hero="true"
+    />
+    <KpiCard
+      label="Working Days"
+      :value="summary?.working_days ?? '—'"
+      icon="calendar"
+      :loading="loading"
+    />
+    <KpiCard
+      label="Projects"
+      :value="summary?.total_projects ?? '—'"
+      icon="folder"
+      :loading="loading"
+      to="/projects"
+    />
+    <KpiCard
+      label="Avg / Day"
+      :value="summary ? formatDuration(summary.avg_hours_per_day) : '—'"
+      icon="trending-up"
+      :loading="loading"
+    />
+    <KpiCard
+      label="Top Project"
+      :value="summary?.top_project ?? '—'"
+      icon="star"
+      :loading="loading"
+      to="/projects"
+    />
+    <KpiCard
+      label="Commits"
+      :value="summary?.total_commits ?? '—'"
+      icon="git"
+      :loading="loading"
+    />
+  </div>
+</template>