diff --git a/app/(protected)/capa-owner/page.tsx b/app/(protected)/capa-owner/page.tsx
index 3e88711..7b9f2f0 100644
--- a/app/(protected)/capa-owner/page.tsx
+++ b/app/(protected)/capa-owner/page.tsx
@@ -1,9 +1,121 @@
-// app/(protected)/capa-owner/page.tsx
-export default function CapaOwnerHome() {
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+import { StatCard } from '@/components/dashboard/stat-card'
+
+const STATUS_LABELS: Record<string, string> = {
+  open: 'Open',
+  in_progress: 'In Progress',
+  overdue: 'Overdue',
+  pending_verification: 'Pending Verification',
+  verified: 'Verified',
+  reopened: 'Reopened',
+  closed: 'Closed',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  open: 'bg-gray-100 text-gray-700',
+  in_progress: 'bg-blue-100 text-blue-700',
+  overdue: 'bg-red-100 text-red-700',
+  pending_verification: 'bg-purple-100 text-purple-700',
+  verified: 'bg-green-100 text-green-700',
+  reopened: 'bg-orange-100 text-orange-700',
+  closed: 'bg-gray-100 text-gray-500',
+}
+
+export default async function CapaOwnerPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const { data: profile } = await supabase.from('users').select('name, role').eq('id', user.id).single()
+  if (!profile || !['capa_owner', 'admin', 'hse', 'supervisor'].includes(profile.role)) redirect('/')
+
+  const { data: capas } = await supabase
+    .from('capa_actions')
+    .select('id, description, due_date, priority, status, incident_id, incidents (reference_no)')
+    .eq('owner_user_id', user.id)
+    .order('due_date', { ascending: true })
+
+  const rows = capas ?? []
+  const openCount = rows.filter(c => ['open', 'in_progress', 'reopened'].includes(c.status)).length
+  const overdueCount = rows.filter(c => c.status === 'overdue').length
+  const doneCount = rows.filter(c => ['verified', 'closed'].includes(c.status)).length
+
+  const PRIORITY_COLORS: Record<string, string> = {
+    high: 'text-red-600 font-semibold',
+    med: 'text-orange-500 font-medium',
+    low: 'text-gray-400',
+  }
+
+  const activeRows = rows.filter(c => !['verified', 'closed'].includes(c.status))
+  const doneRows = rows.filter(c => ['verified', 'closed'].includes(c.status))
+
   return (
-    <main className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-2xl font-bold">CAPA Owner Dashboard</h1>
-      <p className="mt-2 text-gray-500">Phase 2: CAPA board coming here.</p>
+    <main className="max-w-4xl mx-auto px-4 py-6">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">My CAPAs</h1>
+
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <StatCard label="Active" value={openCount} accent={openCount > 0 ? 'yellow' : 'green'} />
+        <StatCard label="Overdue" value={overdueCount} accent={overdueCount > 0 ? 'red' : 'green'} />
+        <StatCard label="Completed" value={doneCount} accent="green" />
+      </div>
+
+      {activeRows.length === 0 ? (
+        <div className="bg-white rounded-xl shadow-sm p-8 text-center">
+          <p className="text-gray-400 text-sm">No active CAPAs assigned to you.</p>
+        </div>
+      ) : (
+        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
+          {activeRows.map(capa => {
+            const incRef = (capa.incidents as unknown as { reference_no: string | null } | null)?.reference_no
+            const isOverdue = capa.status === 'overdue'
+            return (
+              <div key={capa.id} className={`p-4 ${isOverdue ? 'bg-red-50' : ''}`}>
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-gray-800">{capa.description}</p>
+                    {incRef && (
+                      <Link href={`/hse/incidents/${capa.incident_id}`} className="text-xs text-blue-600 hover:underline mt-0.5 block">
+                        {incRef}
+                      </Link>
+                    )}
+                  </div>
+                  <div className="shrink-0 text-right">
+                    <span className={`text-xs rounded-full px-2 py-0.5 ${STATUS_COLORS[capa.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                      {STATUS_LABELS[capa.status] ?? capa.status}
+                    </span>
+                    <p className={`text-xs mt-1 ${isOverdue ? 'text-red-600 font-semibold' : 'text-gray-400'}`}>
+                      {capa.due_date ? `Due ${new Date(capa.due_date as string).toLocaleDateString('en-MY')}` : 'No due date'}
+                    </p>
+                    <p className={`text-xs mt-0.5 ${PRIORITY_COLORS[capa.priority as string] ?? ''}`}>
+                      {(capa.priority as string)?.toUpperCase()} priority
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {doneRows.length > 0 && (
+        <div className="mt-6">
+          <h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Completed ({doneCount})</h2>
+          <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50 opacity-60">
+            {doneRows.map(capa => (
+              <div key={capa.id} className="p-4 flex items-center justify-between">
+                <p className="text-sm text-gray-500 line-clamp-1">{capa.description}</p>
+                <span className={`text-xs rounded-full px-2 py-0.5 ml-4 shrink-0 ${STATUS_COLORS[capa.status] ?? 'bg-gray-100'}`}>
+                  {STATUS_LABELS[capa.status] ?? capa.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </main>
   )
 }