diff --git a/frontends/nextjs/src/components/misc/github/views/run-list/RunListAlerts.tsx b/frontends/nextjs/src/components/misc/github/views/run-list/RunListAlerts.tsx
index 1e565d85d..463cbb3dc 100644
--- a/frontends/nextjs/src/components/misc/github/views/run-list/RunListAlerts.tsx
+++ b/frontends/nextjs/src/components/misc/github/views/run-list/RunListAlerts.tsx
@@ -5,7 +5,7 @@ import { Autorenew, Cancel, CheckCircle, OpenInNew } from '@/fakemui/icons'
 
 import type { WorkflowRun } from '../types'
 import type { PipelineSummary, RunListProps } from './run-list.types'
-import { spinSx } from './run-list.types'
+import { spinStyle } from './run-list.types'
 
 type RunListAlertsProps = Pick<RunListProps, 'error' | 'needsAuth' | 'conclusion' | 'summaryTone'>
 
@@ -16,23 +16,23 @@ type SummaryAlertProps = {
 
 const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
   <Alert
-    sx={{
+    style={{
       borderWidth: 2,
       borderColor: `var(--mui-palette-${summaryTone}-main)`,
-      bgcolor: `color-mix(in srgb, var(--mui-palette-${summaryTone}-main) 8%, transparent)`,
+      backgroundColor: `color-mix(in srgb, var(--mui-palette-${summaryTone}-main) 8%, transparent)`,
       alignItems: 'flex-start',
-      mb: 2,
+      marginBottom: 16,
     }}
   >
     <Stack direction="row" spacing={2} alignItems="flex-start">
       {summaryTone === 'success' && <CheckCircle size={48} style={{ color: 'var(--mui-palette-success-main)' }} />}
       {summaryTone === 'error' && <Cancel size={48} style={{ color: 'var(--mui-palette-error-main)' }} />}
       {summaryTone === 'warning' && (
-        <Autorenew size={48} style={{ color: 'var(--mui-palette-warning-main)', ...spinSx }} />
+        <Autorenew size={48} style={{ color: 'var(--mui-palette-warning-main)', ...spinStyle }} />
       )}
-      <Box flex={1}>
+      <Box style={{ flex: 1 }}>
         <AlertTitle>
-          <Box sx={{ fontSize: '1.25rem', fontWeight: 700, mb: 1 }}>
+          <Box style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: 8 }}>
             {conclusion.mostRecentPassed && 'Most Recent Builds: ALL PASSED'}
             {conclusion.mostRecentFailed && 'Most Recent Builds: FAILURES DETECTED'}
             {conclusion.mostRecentRunning && 'Most Recent Builds: RUNNING'}
@@ -59,44 +59,43 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
                 return (
                   <Box
                     key={workflow.id}
-                    sx={{
-                      bgcolor: 'background.paper',
-                      borderRadius: 2,
-                      p: 2,
-                      boxShadow: 1,
+                    style={{
+                      backgroundColor: 'var(--color-background-paper)',
+                      borderRadius: 8,
+                      padding: 16,
+                      boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
                     }}
                   >
                     <Stack spacing={1}>
                       <Stack direction="row" spacing={1} alignItems="center">
                         {workflow.status === 'completed' && workflow.conclusion === 'success' && (
-                          <SuccessIcon sx={{ color: 'success.main', fontSize: 20 }} />
+                          <CheckCircle size={20} style={{ color: 'var(--mui-palette-success-main)' }} />
                         )}
                         {workflow.status === 'completed' && workflow.conclusion === 'failure' && (
-                          <FailureIcon sx={{ color: 'error.main', fontSize: 20 }} />
+                          <Cancel size={20} style={{ color: 'var(--mui-palette-error-main)' }} />
                         )}
                         {workflow.status !== 'completed' && (
-                          <RunningIcon sx={{ color: 'warning.main', fontSize: 20, ...spinSx }} />
+                          <Autorenew size={20} style={{ color: 'var(--mui-palette-warning-main)', ...spinStyle }} />
                         )}
-                        <Typography fontWeight={600}>{workflow.name}</Typography>
-                        <Badge variant={badgeVariant} sx={{ fontSize: '0.75rem', p: 0.5 }}>
+                        <Typography style={{ fontWeight: 600 }}>{workflow.name}</Typography>
+                        <Badge variant={badgeVariant} style={{ fontSize: '0.75rem', padding: '2px 4px' }}>
                           {statusLabel}
                         </Badge>
                       </Stack>
                       <Stack
                         direction="row"
                         spacing={2}
-                        flexWrap="wrap"
-                        sx={{ color: 'text.secondary', fontSize: '0.75rem' }}
+                        className="flex-wrap"
+                        style={{ color: 'var(--color-text-secondary)', fontSize: '0.75rem' }}
                       >
                         <Stack direction="row" spacing={0.5} alignItems="center">
-                          <Typography fontWeight={600}>Branch:</Typography>
+                          <Typography style={{ fontWeight: 600 }}>Branch:</Typography>
                           <Box
                             component="code"
-                            sx={{
-                              px: 0.75,
-                              py: 0.25,
-                              bgcolor: 'action.hover',
-                              borderRadius: 1,
+                            style={{
+                              padding: '2px 6px',
+                              backgroundColor: 'var(--color-action-hover)',
+                              borderRadius: 4,
                               fontFamily: 'monospace',
                             }}
                           >
@@ -104,7 +103,7 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
                           </Box>
                         </Stack>
                         <Stack direction="row" spacing={0.5} alignItems="center">
-                          <Typography fontWeight={600}>Updated:</Typography>
+                          <Typography style={{ fontWeight: 600 }}>Updated:</Typography>
                           <Typography>{new Date(workflow.updated_at).toLocaleString()}</Typography>
                         </Stack>
                       </Stack>
@@ -121,7 +120,7 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
                 href="https://github.com/johndoe6345789/metabuilder/actions"
                 target="_blank"
                 rel="noopener noreferrer"
-                endIcon={<OpenInNewIcon sx={{ fontSize: 18 }} />}
+                endIcon={<OpenInNew size={18} />}
               >
                 View All Workflows on GitHub
               </Button>
@@ -141,14 +140,14 @@ export const RunListAlerts = ({
 }: RunListAlertsProps) => (
   <>
     {error && (
-      <Alert variant="destructive" sx={{ mb: 2 }}>
+      <Alert variant="destructive" style={{ marginBottom: 16 }}>
         <AlertTitle>Error</AlertTitle>
         <AlertDescription>{error}</AlertDescription>
       </Alert>
     )}
 
     {needsAuth && (
-      <Alert variant="warning" sx={{ mb: 2 }}>
+      <Alert variant="warning" style={{ marginBottom: 16 }}>
         <AlertTitle>Authentication Required</AlertTitle>
         <AlertDescription>
           GitHub API requires authentication for this request. Please configure credentials and