diff --git a/frontends/nextjs/src/components/misc/github/views/RunList.tsx b/frontends/nextjs/src/components/misc/github/views/RunList.tsx
index 7df2bb7ad..79808495d 100644
--- a/frontends/nextjs/src/components/misc/github/views/RunList.tsx
+++ b/frontends/nextjs/src/components/misc/github/views/RunList.tsx
@@ -28,13 +28,14 @@ export function RunList({
   selectedRunId,
 }: RunListProps) {
   return (
-    <Card sx={{ borderWidth: 2, borderColor: 'divider' }}>
+    <Card style={{ borderWidth: 2, borderColor: 'var(--color-divider)' }}>
       <CardHeader>
         <Stack
-          direction={{ xs: 'column', lg: 'row' }}
+          direction="row"
           spacing={2}
-          alignItems={{ xs: 'flex-start', lg: 'center' }}
+          alignItems="center"
           justifyContent="space-between"
+          className="flex-wrap lg:flex-nowrap"
         >
           <Filters repoLabel={repoLabel} lastFetched={lastFetched} />
 
diff --git a/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx b/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx
index e8f50e389..8ac7c5254 100644
--- a/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx
+++ b/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx
@@ -37,14 +37,14 @@ export const RunTable = ({
   }
 
   return (
-    <Card sx={{ borderWidth: 2, borderColor: 'divider' }}>
+    <Card style={{ borderWidth: 2, borderColor: 'var(--color-divider)' }}>
       <CardHeader>
         <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
           <Stack direction="row" spacing={1} alignItems="center">
             <CheckCircle size={24} style={{ color: 'var(--mui-palette-success-main)' }} />
             <CardTitle>Recent Workflow Runs</CardTitle>
           </Stack>
-          {isLoading && <Skeleton sx={{ width: 120, height: 12 }} />}
+          {isLoading && <Skeleton style={{ width: 120, height: 12 }} />}
         </Stack>
         <CardDescription>Latest GitHub Actions runs with status and controls</CardDescription>
       </CardHeader>
@@ -52,9 +52,9 @@ export const RunTable = ({
       <CardContent>
         {isLoading && !runs && (
           <Stack spacing={2}>
-            <Skeleton sx={{ height: 96 }} />
-            <Skeleton sx={{ height: 96 }} />
-            <Skeleton sx={{ height: 96 }} />
+            <Skeleton style={{ height: 96 }} />
+            <Skeleton style={{ height: 96 }} />
+            <Skeleton style={{ height: 96 }} />
           </Stack>
         )}
 
@@ -70,7 +70,7 @@ export const RunTable = ({
                 selectedRunId={selectedRunId}
               />
             ))}
-            <Box sx={{ textAlign: 'center', pt: 2 }}>
+            <Box style={{ textAlign: 'center', paddingTop: 16 }}>
               <Button variant="outline" onClick={copyRunsToClipboard}>
                 Copy All as JSON
               </Button>