diff --git a/frontend/src/components/app/AppDataTable.tsx b/frontend/src/components/app/AppDataTable.tsx
index 5c1324d..c059746 100644
--- a/frontend/src/components/app/AppDataTable.tsx
+++ b/frontend/src/components/app/AppDataTable.tsx
@@ -1,6 +1,7 @@
 import type * as React from 'react'
 
 import { AppEmptyState } from '@/components/app/AppEmptyState'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 
@@ -35,41 +36,49 @@ export function AppDataTable<Row>({
   onRowClick
 }: AppDataTableProps<Row>) {
   return (
-    <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
-      {toolbar ? <div className="border-b border-border bg-muted/20 p-3">{toolbar}</div> : null}
-      {rows.length === 0 ? (
-        <div className="p-4">
-          <AppEmptyState title={emptyTitle} description={emptyDescription} />
-        </div>
-      ) : (
-        <Table className={tableClassName}>
-          <TableHeader className="bg-muted/30">
-            <TableRow>
-              {columns.map((column) => (
-                <TableHead key={column.key} className={column.className}>
-                  {column.header}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={getRowKey(row)}
-                className={cn(onRowClick ? 'cursor-pointer' : undefined)}
-                onClick={() => onRowClick?.(row)}
-              >
+    <Card className="gap-0 py-0">
+      {toolbar ? <CardHeader className="border-b border-border bg-muted/20 p-3">{toolbar}</CardHeader> : null}
+      <CardContent className="p-0">
+        {rows.length === 0 ? (
+          <div className="p-3">
+            <AppEmptyState title={emptyTitle} description={emptyDescription} />
+          </div>
+        ) : (
+          <Table className={cn('min-w-[720px]', tableClassName)}>
+            <TableHeader className="bg-muted/40">
+              <TableRow>
                 {columns.map((column) => (
-                  <TableCell key={column.key} className={column.className}>
-                    {column.cell(row)}
-                  </TableCell>
+                  <TableHead key={column.key} className={column.className}>
+                    {column.header}
+                  </TableHead>
                 ))}
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      )}
-      {footer ? <div className="border-t border-border bg-muted/20 px-3 py-2">{footer}</div> : null}
-    </div>
+            </TableHeader>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow
+                  key={getRowKey(row)}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  className={cn(onRowClick ? 'cursor-pointer focus-visible:bg-muted focus-visible:outline-none' : undefined)}
+                  onClick={() => onRowClick?.(row)}
+                  onKeyDown={(event) => {
+                    if (event.target !== event.currentTarget || !onRowClick || (event.key !== 'Enter' && event.key !== ' ')) return
+                    event.preventDefault()
+                    onRowClick(row)
+                  }}
+                >
+                  {columns.map((column) => (
+                    <TableCell key={column.key} className={column.className}>
+                      {column.cell(row)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+      {footer ? <CardFooter className="bg-muted/20 px-3 py-2 [&>*]:w-full">{footer}</CardFooter> : null}
+    </Card>
   )
 }