diff --git a/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx b/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx
index 405d68081..83fcd001b 100644
--- a/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx
+++ b/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx
@@ -31,9 +31,9 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(
     }
 
     return (
-      <Modal ref={ref} open={open} onClose={handleClose} className={className} {...props}>
+      <Modal open={open} onClose={handleClose} className={className} {...props}>
         <Slide direction="up" in={open}>
-          <div className="dialog-panel">{children}</div>
+          <div ref={ref} className="dialog-panel">{children}</div>
         </Slide>
       </Modal>
     )
@@ -138,8 +138,8 @@ const DialogDescription = forwardRef<
   { children: ReactNode; className?: string }
 >(({ children, className, ...props }, ref) => {
   return (
-    <Typography ref={ref} variant="body2" className={`dialog-description ${className || ''}`} {...props}>
-      {children}
+    <Typography variant="body2" className={`dialog-description ${className || ''}`} {...props}>
+      <span ref={ref}>{children}</span>
     </Typography>
   )
 })
@@ -153,7 +153,6 @@ const DialogClose = forwardRef<
   if (children) {
     return (
       <Box
-        ref={ref as unknown as React.Ref<HTMLDivElement>}
         onClick={onClick}
         className="dialog-close"
       >
diff --git a/frontends/nextjs/src/data/form/ValidationSummary.tsx b/frontends/nextjs/src/data/form/ValidationSummary.tsx
index 590cdb475..3d706ccf0 100644
--- a/frontends/nextjs/src/data/form/ValidationSummary.tsx
+++ b/frontends/nextjs/src/data/form/ValidationSummary.tsx
@@ -1,6 +1,7 @@
-import { Alert, AlertTitle, List, ListItem, ListItemText } from '@mui/material'
 import type { ReactNode } from 'react'
 
+import { Alert, AlertTitle, List, ListItem, ListItemText } from '@/fakemui'
+
 /**
  * Props for {@link ValidationSummary}.
  *
@@ -34,12 +35,12 @@ export function ValidationSummary({
   if (!errors.length) return null
 
   return (
-    <Alert severity="error" variant="outlined" sx={{ alignItems: 'flex-start' }}>
+    <Alert severity="error" variant="outlined" className="validation-summary">
       {showTitle ? <AlertTitle>{title}</AlertTitle> : null}
-      <List dense disablePadding component="ul" sx={{ pl: 3 }}>
+      <List dense className="validation-summary__list">
         {errors.map((error, index) => (
-          <ListItem key={index} disableGutters component="li" sx={{ py: 0.25, px: 0 }}>
-            <ListItemText primaryTypographyProps={{ variant: 'body2' }} primary={error} />
+          <ListItem key={index} className="validation-summary__item">
+            <ListItemText primary={error} />
           </ListItem>
         ))}
       </List>
diff --git a/frontends/nextjs/src/data/table/Body.tsx b/frontends/nextjs/src/data/table/Body.tsx
index 082fb504c..094bd3c2c 100644
--- a/frontends/nextjs/src/data/table/Body.tsx
+++ b/frontends/nextjs/src/data/table/Body.tsx
@@ -1,6 +1,7 @@
-import { TableBody, TableCell, TableRow } from '@mui/material'
 import type { ReactNode } from 'react'
 
+import { TableBody, TableCell, TableRow } from '@/fakemui'
+
 import { EmptyState } from './EmptyState'
 import type { DataTableColumn } from './types'
 
@@ -37,7 +38,7 @@ export function Body<T>({
               key={rowId}
               hover={Boolean(onRowClick)}
               onClick={handleClick}
-              sx={onRowClick ? { cursor: 'pointer' } : undefined}
+              className={onRowClick ? 'table-row--clickable' : ''}
             >
               {columns.map(column => {
                 const content = column.render
@@ -45,7 +46,7 @@ export function Body<T>({
                   : (row as Record<string, unknown>)[column.key]
 
                 return (
-                  <TableCell key={column.key} align={column.align} sx={column.sx}>
+                  <TableCell key={column.key} align={column.align} className={column.className}>
                     {content ?? '—'}
                   </TableCell>
                 )
diff --git a/frontends/nextjs/src/data/table/EmptyState.tsx b/frontends/nextjs/src/data/table/EmptyState.tsx
index e2e7bc986..521c59ffb 100644
--- a/frontends/nextjs/src/data/table/EmptyState.tsx
+++ b/frontends/nextjs/src/data/table/EmptyState.tsx
@@ -1,6 +1,7 @@
-import { Stack, TableCell, TableRow, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 
+import { Stack, TableCell, TableRow, Typography } from '@/fakemui'
+
 /**
  * Props for the {@link EmptyState} table row.
  *
@@ -29,7 +30,7 @@ interface EmptyStateProps {
 export function EmptyState({ colSpan, message = 'No data to display', action }: EmptyStateProps) {
   return (
     <TableRow>
-      <TableCell colSpan={colSpan} sx={{ py: 6 }}>
+      <TableCell colSpan={colSpan} className="table-empty-state">
         <Stack alignItems="center" spacing={1}>
           <Typography variant="subtitle1">{message}</Typography>
           {action ? (