diff --git a/frontends/nextjs/src/components/WorkflowRunCard.tsx b/frontends/nextjs/src/components/WorkflowRunCard.tsx
index b3055183a..0f9013ce9 100644
--- a/frontends/nextjs/src/components/WorkflowRunCard.tsx
+++ b/frontends/nextjs/src/components/WorkflowRunCard.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@/components/ui/card'
+import { Box, Card, CardContent, Stack, Typography } from '@mui/material'
 import { WorkflowRunStatus } from './WorkflowRunStatus'
 
 export { WorkflowRunStatus } from './WorkflowRunStatus'
@@ -22,18 +22,31 @@ export function WorkflowRunCard({
 }: WorkflowRunCardProps) {
   return (
     <Card
-      className="cursor-pointer hover:shadow-md transition-shadow"
+      variant="outlined"
       onClick={onClick}
+      sx={{
+        cursor: onClick ? 'pointer' : 'default',
+        transition: 'box-shadow 0.2s ease, border-color 0.2s ease',
+        '&:hover': onClick
+          ? { boxShadow: 3, borderColor: 'primary.light' }
+          : undefined,
+      }}
     >
-      <CardContent className="pt-4">
-        <div className="space-y-2">
-          <h3 className="font-semibold">{name}</h3>
+      <CardContent sx={{ pt: 2 }}>
+        <Stack spacing={1}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+            {name}
+          </Typography>
           <WorkflowRunStatus status={status} conclusion={conclusion} />
-          <div className="text-xs text-gray-500 space-y-1">
-            <p>Branch: {branch}</p>
-            <p>Created: {new Date(createdAt).toLocaleString()}</p>
-          </div>
-        </div>
+          <Box sx={{ color: 'text.secondary' }}>
+            <Typography variant="caption" display="block">
+              Branch: {branch}
+            </Typography>
+            <Typography variant="caption" display="block">
+              Created: {new Date(createdAt).toLocaleString()}
+            </Typography>
+          </Box>
+        </Stack>
       </CardContent>
     </Card>
   )
diff --git a/frontends/nextjs/src/components/WorkflowRunStatus.tsx b/frontends/nextjs/src/components/WorkflowRunStatus.tsx
index 892b351c7..c23cc8141 100644
--- a/frontends/nextjs/src/components/WorkflowRunStatus.tsx
+++ b/frontends/nextjs/src/components/WorkflowRunStatus.tsx
@@ -1,5 +1,6 @@
-import { Badge } from '@/components/ui/badge'
-import { CheckCircle, XCircle } from '@phosphor-icons/react'
+import { Chip, Stack, Typography } from '@mui/material'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined'
 
 interface WorkflowRunStatusProps {
   status: string
@@ -12,11 +13,13 @@ export function WorkflowRunStatus({ status, conclusion }: WorkflowRunStatusProps
   const isInProgress = status === 'in_progress'
 
   return (
-    <div className="flex items-center gap-2">
-      {isSuccess && <CheckCircle size={20} className="text-green-500" />}
-      {isFailure && <XCircle size={20} className="text-red-500" />}
-      {isInProgress && <Badge variant="outline">Running...</Badge>}
-      <span className="text-sm font-medium capitalize">{conclusion || status}</span>
-    </div>
+    <Stack direction="row" spacing={1} alignItems="center">
+      {isSuccess && <CheckCircleOutlineIcon sx={{ color: 'success.main', fontSize: 20 }} />}
+      {isFailure && <HighlightOffOutlinedIcon sx={{ color: 'error.main', fontSize: 20 }} />}
+      {isInProgress && <Chip label="Running..." size="small" variant="outlined" />}
+      <Typography variant="body2" sx={{ fontWeight: 600, textTransform: 'capitalize' }}>
+        {conclusion || status}
+      </Typography>
+    </Stack>
   )
 }