diff --git a/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx b/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
index 988a37d43..c5b45b4f5 100644
--- a/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
+++ b/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
@@ -9,9 +9,11 @@ import {
 } from 'lucide-react';
 
 import { MetricCard, DashboardLayout, DashboardWidget } from '@lilith/ui-analytics';
+import type { Column } from '@lilith/ui-data';
 import { DataTable } from '@lilith/ui-data';
 import { Card } from '@lilith/ui-primitives';
 
+import type { BounceRateByPageItem } from '../api/analytics';
 import {
   useBounceRateMetrics,
   useBounceRateByPage,
@@ -151,20 +153,20 @@ export function BounceRatePage() {
   const { data: byPage } = useBounceRateByPage();
   const [dateRange, setDateRange] = useState('30 Days');
 
-  const pageColumns = useMemo(
+  const pageColumns = useMemo<Column<BounceRateByPageItem>[]>(
     () => [
-      { key: 'page' as const, header: 'Page', sortable: true },
+      { key: 'page', header: 'Page', sortable: true },
       {
-        key: 'bounceRate' as const,
+        key: 'bounceRate',
         header: 'Bounce Rate',
         sortable: true,
-        render: (value: number) => <BounceRateBadge $value={value}>{value}%</BounceRateBadge>,
+        render: (row) => <BounceRateBadge $value={row.bounceRate}>{row.bounceRate}%</BounceRateBadge>,
       },
       {
-        key: 'visits' as const,
+        key: 'visits',
         header: 'Visits',
         sortable: true,
-        render: (value: number) => value.toLocaleString(),
+        render: (row) => row.visits.toLocaleString(),
       },
     ],
     [],
@@ -279,6 +281,7 @@ export function BounceRatePage() {
             <DataTable
               columns={pageColumns}
               data={byPage ?? []}
+              keyExtractor={(row) => row.page}
             />
           </SectionCard>
         </DashboardWidget>