diff --git a/src/components/Buttons/UndoButton.tsx b/src/components/Buttons/UndoButton.tsx
index 72d3d79543..ada25bb818 100644
--- a/src/components/Buttons/UndoButton.tsx
+++ b/src/components/Buttons/UndoButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid } from "@mui/material";
+import { Button } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -30,35 +30,27 @@ export default function UndoButton(props: UndoButtonProps): ReactElement {
     }
   }, [isUndoAllowed, undoDialogOpen]);
 
-  return (
-    <Grid container direction="column" justifyContent="center">
-      {isUndoEnabled ? (
-        <div>
-          <Button
-            aria-label={props.buttonLabelEnabled ?? "Undo"}
-            data-testid={props.buttonIdEnabled}
-            id={props.buttonIdEnabled}
-            onClick={() => setUndoDialogOpen(true)}
-            variant="outlined"
-          >
-            {t(props.textIdEnabled)}
-          </Button>
-          <CancelConfirmDialog
-            open={undoDialogOpen}
-            text={props.textIdDialog}
-            handleCancel={() => setUndoDialogOpen(false)}
-            handleConfirm={() =>
-              props.undo().then(() => setUndoDialogOpen(false))
-            }
-            buttonIdCancel={props.buttonIdCancel}
-            buttonIdConfirm={props.buttonIdConfirm}
-          />
-        </div>
-      ) : (
-        <div>
-          <Button disabled>{t(props.textIdDisabled)}</Button>
-        </div>
-      )}
-    </Grid>
+  return isUndoEnabled ? (
+    <>
+      <Button
+        aria-label={props.buttonLabelEnabled ?? "Undo"}
+        data-testid={props.buttonIdEnabled}
+        id={props.buttonIdEnabled}
+        onClick={() => setUndoDialogOpen(true)}
+        variant="outlined"
+      >
+        {t(props.textIdEnabled)}
+      </Button>
+      <CancelConfirmDialog
+        open={undoDialogOpen}
+        text={props.textIdDialog}
+        handleCancel={() => setUndoDialogOpen(false)}
+        handleConfirm={() => props.undo().then(() => setUndoDialogOpen(false))}
+        buttonIdCancel={props.buttonIdCancel}
+        buttonIdConfirm={props.buttonIdConfirm}
+      />
+    </>
+  ) : (
+    <Button disabled>{t(props.textIdDisabled)}</Button>
   );
 }
diff --git a/src/components/WordCard/DomainChipsGrid.tsx b/src/components/WordCard/DomainChipsGrid.tsx
index 19a994e139..3b8b714cd8 100644
--- a/src/components/WordCard/DomainChipsGrid.tsx
+++ b/src/components/WordCard/DomainChipsGrid.tsx
@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { type ReactElement } from "react";
 
 import { type SemanticDomain } from "api/models";
@@ -26,12 +26,14 @@ export default function DomainChipsGrid(
   };
 
   return (
-    <Grid container spacing={2}>
+    <Grid2 container spacing={2}>
       {props.semDoms.map((d) => (
-        <Grid item key={`${d.id}${d.name}`}>
-          <DomainChip domain={updateName(d)} provenance={props.provenance} />
-        </Grid>
+        <DomainChip
+          domain={updateName(d)}
+          key={`${d.id}${d.name}`}
+          provenance={props.provenance}
+        />
       ))}
-    </Grid>
+    </Grid2>
   );
 }
diff --git a/src/components/WordCard/SenseCard.tsx b/src/components/WordCard/SenseCard.tsx
index 4841f5b9ff..a904b66403 100644
--- a/src/components/WordCard/SenseCard.tsx
+++ b/src/components/WordCard/SenseCard.tsx
@@ -28,13 +28,8 @@ export default function SenseCard(props: SenseCardProps): ReactElement {
   const semDoms = props.sense.semanticDomains;
 
   return (
-    <Card
-      style={{
-        backgroundColor: props.bgColor || "white",
-        marginBottom: 10,
-      }}
-    >
-      <CardContent style={{ position: "relative" }}>
+    <Card sx={{ bgcolor: props.bgColor || "white" }}>
+      <CardContent sx={{ position: "relative" }}>
         {/* Part of speech (if any) */}
         <div style={{ insetInlineStart: 0, position: "absolute", top: 0 }}>
           {gramInfo.catGroup !== GramCatGroup.Unspecified && (
diff --git a/src/components/WordCard/SenseCardText.tsx b/src/components/WordCard/SenseCardText.tsx
index 94e27d4c1c..31c25587ca 100644
--- a/src/components/WordCard/SenseCardText.tsx
+++ b/src/components/WordCard/SenseCardText.tsx
@@ -1,14 +1,15 @@
 import {
+  Box,
+  SxProps,
   Table,
   TableBody,
   TableCell,
   TableRow,
   Typography,
 } from "@mui/material";
-import { CSSProperties, ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { Sense } from "api/models";
-import theme from "types/theme";
 import { TypographyWithFont } from "utilities/fontComponents";
 
 interface SenseInLanguage {
@@ -70,10 +71,10 @@ export default function SenseCardText(props: SenseCardTextProps): ReactElement {
   );
 }
 
-const defStyle: CSSProperties = {
+const defSx: SxProps = {
   borderInlineStart: "1px solid black",
-  marginBottom: theme.spacing(1),
-  paddingInlineStart: theme.spacing(1),
+  mb: 1,
+  paddingInlineStart: 1,
 };
 
 interface SenseTextRowsProps {
@@ -87,18 +88,14 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
     <>
       {/* Gloss */}
       <TableRow key={lang}>
-        <TableCell style={{ borderBottom: "none" }}>
+        <TableCell sx={{ borderBottom: "none" }}>
           <Typography variant="caption">
             {lang}
             {":"}
           </Typography>
         </TableCell>
-        <TableCell style={{ borderBottom: "none" }}>
-          <TypographyWithFont
-            lang={lang}
-            style={{ marginBottom: theme.spacing(1) }}
-            variant="h6"
-          >
+        <TableCell sx={{ borderBottom: "none" }}>
+          <TypographyWithFont lang={lang} sx={{ mb: 1 }} variant="h6">
             {props.senseInLang.glossText}
           </TypographyWithFont>
         </TableCell>
@@ -107,13 +104,13 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
       {/* Definition */}
       {!!props.senseInLang.definitionText && !props.hideDefs && (
         <TableRow key={lang + "def"}>
-          <TableCell style={{ borderBottom: "none" }} />
-          <TableCell style={{ borderBottom: "none" }}>
-            <div style={defStyle}>
+          <TableCell sx={{ borderBottom: "none" }} />
+          <TableCell sx={{ borderBottom: "none" }}>
+            <Box sx={defSx}>
               <TypographyWithFont color="textSecondary" lang={lang}>
                 {props.senseInLang.definitionText}
               </TypographyWithFont>
-            </div>
+            </Box>
           </TableCell>
         </TableRow>
       )}
diff --git a/src/components/WordCard/SummarySenseCard.tsx b/src/components/WordCard/SummarySenseCard.tsx
index d07dee9f36..c6dd43a349 100644
--- a/src/components/WordCard/SummarySenseCard.tsx
+++ b/src/components/WordCard/SummarySenseCard.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Chip, Grid, Typography } from "@mui/material";
+import { Card, CardContent, Chip, Grid2, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -8,7 +8,7 @@ import SensesTextSummary from "components/WordCard/SensesTextSummary";
 import { groupGramInfo } from "utilities/wordUtilities";
 
 interface SummarySenseCardProps {
-  backgroundColor?: string;
+  bgcolor?: string;
   senses: Sense[];
 }
 
@@ -28,13 +28,8 @@ export default function SummarySenseCard(
   const domIds = [...new Set(semDoms.map((d) => d.id))].sort();
 
   return (
-    <Card
-      style={{
-        backgroundColor: props.backgroundColor || "white",
-        marginBottom: 10,
-      }}
-    >
-      <CardContent style={{ position: "relative" }}>
+    <Card sx={{ bgcolor: props.bgcolor || "white", mb: 1 }}>
+      <CardContent sx={{ position: "relative" }}>
         {/* Parts of speech */}
         {groupedGramInfo.map((info) => (
           <PartOfSpeechButton
@@ -57,13 +52,11 @@ export default function SummarySenseCard(
         />
 
         {/* Semantic domain numbers */}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {domIds.map((id) => (
-            <Grid item key={id}>
-              <Chip label={id} />
-            </Grid>
+            <Chip key={id} label={id} />
           ))}
-        </Grid>
+        </Grid2>
       </CardContent>
     </Card>
   );
diff --git a/src/components/WordCard/index.tsx b/src/components/WordCard/index.tsx
index a91016cccd..d21c8be111 100644
--- a/src/components/WordCard/index.tsx
+++ b/src/components/WordCard/index.tsx
@@ -5,6 +5,7 @@ import {
   CardContent,
   CardHeader,
   IconButton,
+  Stack,
   Typography,
 } from "@mui/material";
 import { Fragment, ReactElement, useEffect, useState } from "react";
@@ -89,13 +90,7 @@ export default function WordCard(props: WordCardProps): ReactElement {
         buttonLabel={
           full ? WordCardLabel.ButtonCondense : WordCardLabel.ButtonExpand
         }
-        icon={
-          full ? (
-            <CloseFullscreen sx={{ color: (t) => t.palette.grey[900] }} />
-          ) : (
-            <OpenInFull sx={{ color: (t) => t.palette.grey[600] }} />
-          )
-        }
+        icon={full ? <CloseFullscreen /> : <OpenInFull />}
         onClick={() => setFull(!full)}
       />
     </>
@@ -130,14 +125,16 @@ export default function WordCard(props: WordCardProps): ReactElement {
 
         {/* Senses */}
         {full ? (
-          senses.map((s) => (
-            <SenseCard
-              key={s.guid}
-              languages={languages}
-              provenance={provenance}
-              sense={s}
-            />
-          ))
+          <Stack spacing={1}>
+            {senses.map((s) => (
+              <SenseCard
+                key={s.guid}
+                languages={languages}
+                provenance={provenance}
+                sense={s}
+              />
+            ))}
+          </Stack>
         ) : (
           <SummarySenseCard senses={senses} />
         )}
diff --git a/src/goals/MergeDuplicates/MergeDupsCompleted.tsx b/src/goals/MergeDuplicates/MergeDupsCompleted.tsx
index 8f05fcfaa9..19bbf58586 100644
--- a/src/goals/MergeDuplicates/MergeDupsCompleted.tsx
+++ b/src/goals/MergeDuplicates/MergeDupsCompleted.tsx
@@ -1,5 +1,5 @@
 import { ArrowRightAlt } from "@mui/icons-material";
-import { Card, Grid, Paper, Typography } from "@mui/material";
+import { Box, Card, Grid2, Paper, Stack, Typography } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import { FlagButton, UndoButton } from "components/Buttons";
 import SenseCardContent from "goals/MergeDuplicates/MergeDupsStep/SenseCardContent";
 import { MergesCompleted } from "goals/MergeDuplicates/MergeDupsTypes";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 import { newFlag } from "types/word";
 import { TypographyWithFont } from "utilities/fontComponents";
 
@@ -53,48 +52,42 @@ export function MergeChange(props: { change: MergeUndoIds }): ReactElement {
   const isDeletion = !change.parentIds.length;
 
   return (
-    <Grid container style={{ flexWrap: "nowrap", overflow: "auto" }}>
+    <Grid2 container sx={{ flexWrap: "nowrap", overflow: "auto" }}>
       {isDeletion && <Typography>{t("mergeDups.undo.deleted")}</Typography>}
       {change.childIds.map((id) => (
-        <WordPaper key={id} wordId={id} />
+        <WordBox key={id} wordId={id} />
       ))}
       {!isDeletion && (
         <>
-          <Grid style={{ margin: theme.spacing(1) }}>
-            <ArrowRightAlt
-              fontSize="large"
-              style={{
-                position: "relative",
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-              }}
-            />
-          </Grid>
+          <Box alignContent="center" sx={{ m: 1 }}>
+            <ArrowRightAlt fontSize="large" />
+          </Box>
           {change.parentIds.map((id) => (
-            <WordPaper key={id} wordId={id} />
+            <WordBox key={id} wordId={id} />
           ))}
         </>
       )}
-      <UndoButton
-        buttonIdEnabled={`merge-undo-${change.parentIds.join("-")}`}
-        buttonIdCancel="merge-undo-cancel"
-        buttonIdConfirm="merge-undo-confirm"
-        textIdDialog={
-          isDeletion
-            ? "mergeDups.undo.undoDeleteDialog"
-            : "mergeDups.undo.undoDialog"
-        }
-        textIdDisabled="mergeDups.undo.undoDisabled"
-        textIdEnabled={
-          isDeletion ? "mergeDups.undo.undoDelete" : "mergeDups.undo.undo"
-        }
-        isUndoAllowed={handleIsUndoAllowed}
-        undo={async () => {
-          await undoMerge(change);
-        }}
-      />
-    </Grid>
+      <Box alignContent="center">
+        <UndoButton
+          buttonIdEnabled={`merge-undo-${change.parentIds.join("-")}`}
+          buttonIdCancel="merge-undo-cancel"
+          buttonIdConfirm="merge-undo-confirm"
+          textIdDialog={
+            isDeletion
+              ? "mergeDups.undo.undoDeleteDialog"
+              : "mergeDups.undo.undoDialog"
+          }
+          textIdDisabled="mergeDups.undo.undoDisabled"
+          textIdEnabled={
+            isDeletion ? "mergeDups.undo.undoDelete" : "mergeDups.undo.undo"
+          }
+          isUndoAllowed={handleIsUndoAllowed}
+          undo={async () => {
+            await undoMerge(change);
+          }}
+        />
+      </Box>
+    </Grid2>
   );
 }
 
@@ -110,11 +103,7 @@ export function doWordsIncludeMerges(
   );
 }
 
-interface WordPaperProps {
-  wordId: string;
-}
-
-function WordPaper(props: WordPaperProps): ReactElement {
+function WordBox(props: { wordId: string }): ReactElement {
   const [word, setWord] = useState<Word | undefined>();
   const [flag, setFlag] = useState<Flag>(newFlag());
 
@@ -126,33 +115,21 @@ function WordPaper(props: WordPaperProps): ReactElement {
   }, [word]);
 
   return (
-    <Grid key={props.wordId} style={{ margin: theme.spacing(1) }}>
-      <Paper
-        style={{
-          backgroundColor: "lightgrey",
-          paddingBottom: theme.spacing(1),
-        }}
-      >
-        <Paper
-          square
-          style={{ padding: theme.spacing(1), height: 44, minWidth: 100 }}
-        >
-          <Grid container justifyContent="space-between">
-            <Grid>
-              <TypographyWithFont variant="h5" vernacular>
-                {word?.vernacular}
-              </TypographyWithFont>
-            </Grid>
-            <Grid>
-              <FlagButton flag={flag} buttonId={`word-${props.wordId}-flag`} />
-            </Grid>
-          </Grid>
+    <Box sx={{ m: 1 }}>
+      <Paper sx={{ bgcolor: "lightgrey", pb: 1 }}>
+        <Paper square sx={{ height: 44, minWidth: 100, p: 1 }}>
+          <Stack direction="row" justifyContent="space-between">
+            <TypographyWithFont variant="h5" vernacular>
+              {word?.vernacular}
+            </TypographyWithFont>
+            <FlagButton flag={flag} buttonId={`word-${props.wordId}-flag`} />
+          </Stack>
         </Paper>
         <div style={{ maxHeight: "55vh", overflowY: "auto" }}>
           {word?.senses?.map(SenseCard)}
         </div>
       </Paper>
-    </Grid>
+    </Box>
   );
 }
 
@@ -160,12 +137,12 @@ function SenseCard(sense: Sense): ReactElement {
   return (
     <Card
       key={sense.guid}
-      style={{
-        margin: theme.spacing(1),
-        userSelect: "none",
-        minWidth: 150,
+      sx={{
+        bgcolor: "white",
+        m: 1,
         maxWidth: 300,
-        background: "white",
+        minWidth: 150,
+        userSelect: "none",
       }}
     >
       <SenseCardContent senses={[sense]} />
diff --git a/src/goals/ReviewEntries/ReviewEntriesCompleted.tsx b/src/goals/ReviewEntries/ReviewEntriesCompleted.tsx
index bbe541c661..d9d3537914 100644
--- a/src/goals/ReviewEntries/ReviewEntriesCompleted.tsx
+++ b/src/goals/ReviewEntries/ReviewEntriesCompleted.tsx
@@ -1,5 +1,5 @@
 import { ArrowRightAlt } from "@mui/icons-material";
-import { Grid, List, ListItem, Typography } from "@mui/material";
+import { Box, List, ListItem, Stack, Typography } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -13,7 +13,6 @@ import {
   EntryEdit,
 } from "goals/ReviewEntries/ReviewEntriesTypes";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 
 export default function ReviewEntriesCompleted(): ReactElement {
   const changes = useSelector(
@@ -67,31 +66,36 @@ function EditedEntry(props: { edit: EntryEdit }): ReactElement {
 
   return (
     <ListItem>
-      <Grid container rowSpacing={4} wrap="nowrap">
-        <Grid item>{!!oldWord && <WordCard word={oldWord} />}</Grid>
-        <Grid key={"arrow"} style={{ margin: theme.spacing(1) }}>
-          <ArrowRightAlt
-            fontSize="large"
-            style={{
-              position: "relative",
-              left: "50%",
-              top: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
+      <Stack direction="row" spacing={1}>
+        {!!oldWord && (
+          <Box>
+            <WordCard word={oldWord} />
+          </Box>
+        )}
+
+        <Box alignContent="center">
+          <ArrowRightAlt fontSize="large" />
+        </Box>
+
+        {!!newWord && (
+          <Box>
+            <WordCard word={newWord} />
+          </Box>
+        )}
+
+        <Box alignContent="center">
+          <UndoButton
+            buttonIdEnabled={`edit-undo-${props.edit.newId}`}
+            buttonIdCancel="edit-undo-cancel"
+            buttonIdConfirm="edit-undo-confirm"
+            textIdDialog="reviewEntries.undo.undoDialog"
+            textIdDisabled="reviewEntries.undo.undoDisabled"
+            textIdEnabled="reviewEntries.undo.undo"
+            isUndoAllowed={() => isInFrontier(newId)}
+            undo={() => undoEdit(props.edit)}
           />
-        </Grid>
-        <Grid item>{!!newWord && <WordCard word={newWord} />}</Grid>
-        <UndoButton
-          buttonIdEnabled={`edit-undo-${props.edit.newId}`}
-          buttonIdCancel="edit-undo-cancel"
-          buttonIdConfirm="edit-undo-confirm"
-          textIdDialog="reviewEntries.undo.undoDialog"
-          textIdDisabled="reviewEntries.undo.undoDisabled"
-          textIdEnabled="reviewEntries.undo.undo"
-          isUndoAllowed={() => isInFrontier(newId)}
-          undo={() => undoEdit(props.edit)}
-        />
-      </Grid>
+        </Box>
+      </Stack>
     </ListItem>
   );
 }
diff --git a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditSensesCardContent.tsx b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditSensesCardContent.tsx
index 18beddbe43..a8183b0284 100644
--- a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditSensesCardContent.tsx
+++ b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditSensesCardContent.tsx
@@ -86,9 +86,7 @@ export default function EditSensesCardContent(
         </>
       ) : (
         <SummarySenseCard
-          backgroundColor={
-            changes.some((change) => change) ? yellow[100] : undefined
-          }
+          bgcolor={changes.some((change) => change) ? yellow[100] : undefined}
           senses={props.newSenses.filter(
             (s) => s.accessibility !== Status.Deleted
           )}