diff --git a/src/components/DataEntry/DataEntryHeader.tsx b/src/components/DataEntry/DataEntryHeader.tsx
index 3c7bf6d4d5..715f79bb04 100644
--- a/src/components/DataEntry/DataEntryHeader.tsx
+++ b/src/components/DataEntry/DataEntryHeader.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { Key } from "ts-key-enum";
 
 import { SemanticDomainFull } from "api/models";
-import theme from "types/theme";
 
 interface DataEntryHeaderProps {
   domain: SemanticDomainFull;
@@ -23,11 +22,7 @@ export default function DataEntryHeader(
   const { t } = useTranslation();
 
   return (
-    <Typography
-      variant="h4"
-      align="center"
-      style={{ marginBottom: theme.spacing(2) }}
-    >
+    <Typography align="center" variant="h4">
       {t("addWords.domainTitle", { val1: domain.name, val2: domain.id })}
       <bdi>
         <Typography>{domain.description}</Typography>
@@ -35,11 +30,11 @@ export default function DataEntryHeader(
       <Switch
         id="questionVisibilitySwitch"
         onChange={() => props.setQuestionVisibility(!props.questionsVisible)}
-        icon={<Help style={{ fontSize: 21 }} />}
-        checkedIcon={<Help style={{ fontSize: 21 }} />}
+        icon={<Help sx={{ fontSize: 19 }} />}
+        checkedIcon={<Help sx={{ fontSize: 19 }} />}
         checked={props.questionsVisible}
         color="primary"
-        style={{ paddingTop: "8px" }}
+        sx={{ pt: "11px" }}
         disabled={!domain.questions.length}
         onKeyDown={(e) => {
           if (e.key === Key.Enter) {
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
index 2d9d1f4577..3f7f2564dc 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
@@ -1,7 +1,7 @@
 import {
   Dialog,
   DialogContent,
-  Grid,
+  Grid2,
   ListItemText,
   MenuList,
   Typography,
@@ -117,7 +117,7 @@ export function VernList(props: VernListProps): ReactElement {
       <StyledMenuItem
         key={sense?.guid ?? word.id}
         onClick={() => props.onSelect(word.id, sense?.guid)}
-        sx={isSense ? { marginInlineStart: theme.spacing(4) } : conditionalGrey}
+        sx={isSense ? { marginInlineStart: 4 } : conditionalGrey}
       >
         <DialogListItemText
           isSubitem={isSense}
@@ -163,7 +163,7 @@ export function VernList(props: VernListProps): ReactElement {
         <StyledMenuItem
           key={`${word.id}-new-sense`}
           onClick={() => props.onSelect(word.id, "")}
-          sx={{ marginInlineStart: theme.spacing(4) }}
+          sx={{ marginInlineStart: 4 }}
         >
           <DialogListItemText isSubitem text={t("addWords.newSense")} />
         </StyledMenuItem>
@@ -214,51 +214,38 @@ interface DialogListItemTextProps {
 const DialogListItemText = (props: DialogListItemTextProps): ReactElement => {
   return (
     <ListItemText>
-      <Grid
+      <Grid2
         alignItems="center"
         columnSpacing={4}
         container
         justifyContent="align-start"
         rowSpacing={1}
       >
-        <Grid item xs="auto">
-          <Typography variant={props.isSubitem ? "h6" : "h5"}>
-            {props.text}
-          </Typography>
-        </Grid>
+        <Typography variant={props.isSubitem ? "h6" : "h5"}>
+          {props.text}
+        </Typography>
+
         {!!props.word && (
           <>
             {props.showGlosses && (
-              <Grid item xs="auto">
-                <SensesTextSummary
-                  definitionsOrGlosses="glosses"
-                  maxLengthPerSense={20}
-                  senses={props.word.senses}
-                />
-              </Grid>
+              <SensesTextSummary
+                definitionsOrGlosses="glosses"
+                maxLengthPerSense={20}
+                senses={props.word.senses}
+              />
             )}
             {props.showDefinitions && (
-              <Grid item xs="auto">
-                <SensesTextSummary
-                  definitionsOrGlosses="definitions"
-                  maxLengthPerSense={50}
-                  senses={props.word.senses}
-                />
-              </Grid>
-            )}
-            {props.showPartOfSpeech && (
-              <Grid item xs="auto">
-                <PartOfSpeechCell word={props.word} />
-              </Grid>
-            )}
-            {props.showDomain && (
-              <Grid item xs>
-                <DomainsCell word={props.word} />
-              </Grid>
+              <SensesTextSummary
+                definitionsOrGlosses="definitions"
+                maxLengthPerSense={50}
+                senses={props.word.senses}
+              />
             )}
+            {props.showPartOfSpeech && <PartOfSpeechCell word={props.word} />}
+            {props.showDomain && <DomainsCell word={props.word} />}
           </>
         )}
-      </Grid>
+      </Grid2>
     </ListItemText>
   );
 };
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
index 62740c7325..acc3912d07 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -1,6 +1,5 @@
-import { AutocompleteCloseReason, Grid, Typography } from "@mui/material";
+import { AutocompleteCloseReason, Grid2, Typography } from "@mui/material";
 import {
-  CSSProperties,
   ReactElement,
   RefObject,
   useCallback,
@@ -22,7 +21,6 @@ import VernDialog from "components/DataEntry/DataEntryTable/NewEntry/VernDialog"
 import { focusInput } from "components/DataEntry/utilities";
 import PronunciationsFrontend from "components/Pronunciations/PronunciationsFrontend";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 import { FileWithSpeakerId } from "types/word";
 
 export enum NewEntryId {
@@ -38,11 +36,6 @@ export enum FocusTarget {
   Vernacular,
 }
 
-const gridItemStyle = (spacing: number): CSSProperties => ({
-  paddingInline: theme.spacing(spacing),
-  position: "relative",
-});
-
 interface NewEntryProps {
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
@@ -224,44 +217,48 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
   };
 
   return (
-    <Grid alignItems="center" container id={NewEntryId.GridNewEntry}>
-      <Grid container item xs={4} style={gridItemStyle(2)}>
-        <Grid item xs={12}>
-          <VernWithSuggestions
-            isNew
-            vernacular={newVern}
-            vernInput={vernInput}
-            updateVernField={(newValue: string, openDialog?: boolean) =>
-              updateVernField(newValue, openDialog)
+    <Grid2
+      alignItems="center"
+      container
+      id={NewEntryId.GridNewEntry}
+      spacing={1}
+    >
+      <Grid2 size={4}>
+        <VernWithSuggestions
+          isNew
+          vernacular={newVern}
+          vernInput={vernInput}
+          updateVernField={(newValue: string, openDialog?: boolean) =>
+            updateVernField(newValue, openDialog)
+          }
+          onBlur={() => setVernOpen(true)}
+          onClose={(_, reason: AutocompleteCloseReason) => {
+            // Handle if the user fully types an identical vernacular to a suggestion
+            // and selects it from the Autocomplete. This should open the dialog.
+            if (reason === "selectOption") {
+              // User pressed Enter or Left Click on an item.
+              setVernOpen(true);
             }
-            onBlur={() => setVernOpen(true)}
-            onClose={(_, reason: AutocompleteCloseReason) => {
-              // Handle if the user fully types an identical vernacular to a suggestion
-              // and selects it from the Autocomplete. This should open the dialog.
-              if (reason === "selectOption") {
-                // User pressed Enter or Left Click on an item.
-                setVernOpen(true);
-              }
-            }}
-            onFocus={handleOnVernFocus}
-            suggestedVerns={suggestedVerns}
-            // To prevent unintentional no-gloss or wrong-gloss submissions
-            // and to simplify interactions with Autocomplete and with the dialogs:
-            // if Enter is pressed from the vern field, move focus to gloss field.
-            handleEnter={() => focus(FocusTarget.Gloss)}
-            vernacularLang={vernacularLang}
-            textFieldId={NewEntryId.TextFieldVern}
-            onUpdate={() => conditionalFocus(FocusTarget.Vernacular)}
-          />
-          <VernDialog
-            open={vernOpen && !!suggestedDups.length && !selectedDup}
-            handleClose={handleCloseVernDialog}
-            vernacularWords={suggestedDups}
-            analysisLang={analysisLang.bcp47}
-          />
-        </Grid>
-      </Grid>
-      <Grid item xs={4} style={gridItemStyle(1)}>
+          }}
+          onFocus={handleOnVernFocus}
+          suggestedVerns={suggestedVerns}
+          // To prevent unintentional no-gloss or wrong-gloss submissions
+          // and to simplify interactions with Autocomplete and with the dialogs:
+          // if Enter is pressed from the vern field, move focus to gloss field.
+          handleEnter={() => focus(FocusTarget.Gloss)}
+          vernacularLang={vernacularLang}
+          textFieldId={NewEntryId.TextFieldVern}
+          onUpdate={() => conditionalFocus(FocusTarget.Vernacular)}
+        />
+        <VernDialog
+          open={vernOpen && !!suggestedDups.length && !selectedDup}
+          handleClose={handleCloseVernDialog}
+          vernacularWords={suggestedDups}
+          analysisLang={analysisLang.bcp47}
+        />
+      </Grid2>
+
+      <Grid2 size={4}>
         <GlossWithSuggestions
           isNew
           gloss={newGloss}
@@ -272,8 +269,9 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           textFieldId={NewEntryId.TextFieldGloss}
           onUpdate={() => conditionalFocus(FocusTarget.Gloss)}
         />
-      </Grid>
-      <Grid item xs={1} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={1}>
         {!selectedDup?.id && (
           // note is not available if user selected to modify an existing entry
           <NoteButton
@@ -282,8 +280,9 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
             updateNote={setNewNote}
           />
         )}
-      </Grid>
-      <Grid item xs={2} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={2}>
         <PronunciationsFrontend
           audio={newAudio}
           deleteAudio={delNewAudio}
@@ -291,23 +290,25 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           uploadAudio={addNewAudio}
           onClick={() => focus(FocusTarget.Gloss)}
         />
-      </Grid>
-      <Grid item xs={1} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={1}>
         <DeleteEntry
           buttonId={NewEntryId.ButtonDelete}
           removeEntry={() => resetState()}
         />
-      </Grid>
+      </Grid2>
+
       <EnterGrid />
-    </Grid>
+    </Grid2>
   );
 }
 
 function EnterGrid(): ReactElement {
   const { t } = useTranslation();
   return (
-    <Grid item xs={12} style={{ paddingInlineStart: theme.spacing(2) }}>
+    <Grid2 size={12} sx={{ paddingInlineStart: 1 }}>
       <Typography variant="body2">{t("addWords.pressEnter")}</Typography>
-    </Grid>
+    </Grid2>
   );
 }
diff --git a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx
index 1cbcc67d2b..a3636b66dd 100644
--- a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx
+++ b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx
@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { ReactElement, memo, useState } from "react";
 
 import { Pronunciation, Word, WritingSystem } from "api/models";
@@ -9,7 +9,6 @@ import {
   VernWithSuggestions,
 } from "components/DataEntry/DataEntryTable/EntryCellComponents";
 import PronunciationsBackend from "components/Pronunciations/PronunciationsBackend";
-import theme from "types/theme";
 import { FileWithSpeakerId, newGloss } from "types/word";
 import { firstGlossText } from "utilities/wordUtilities";
 
@@ -76,12 +75,13 @@ export function RecentEntry(props: RecentEntryProps): ReactElement {
     props.updateNote(props.rowIndex, noteText);
 
   return (
-    <Grid alignItems="center" container id={`${idAffix}-${props.rowIndex}`}>
-      <Grid
-        item
-        xs={4}
-        style={{ paddingInline: theme.spacing(2), position: "relative" }}
-      >
+    <Grid2
+      alignItems="center"
+      container
+      id={`${idAffix}-${props.rowIndex}`}
+      spacing={1}
+    >
+      <Grid2 size={4} sx={{ px: 1 }}>
         <VernWithSuggestions
           vernacular={vernacular}
           isDisabled={props.disabled || props.entry.senses.length > 1}
@@ -93,12 +93,9 @@ export function RecentEntry(props: RecentEntryProps): ReactElement {
           vernacularLang={props.vernacularLang}
           textFieldId={`${idAffix}-${props.rowIndex}-vernacular`}
         />
-      </Grid>
-      <Grid
-        item
-        xs={4}
-        style={{ paddingInline: theme.spacing(2), position: "relative" }}
-      >
+      </Grid2>
+
+      <Grid2 size={4} sx={{ px: 1 }}>
         <GlossWithSuggestions
           gloss={gloss}
           isDisabled={props.disabled}
@@ -110,24 +107,18 @@ export function RecentEntry(props: RecentEntryProps): ReactElement {
           analysisLang={props.analysisLang}
           textFieldId={`${idAffix}-${props.rowIndex}-gloss`}
         />
-      </Grid>
-      <Grid
-        item
-        xs={1}
-        style={{ paddingInline: theme.spacing(1), position: "relative" }}
-      >
+      </Grid2>
+
+      <Grid2 size={1}>
         <NoteButton
           disabled={editing || props.disabled}
           noteText={props.entry.note.text}
           updateNote={handleUpdateNote}
           buttonId={`${idAffix}-${props.rowIndex}-note`}
         />
-      </Grid>
-      <Grid
-        item
-        xs={2}
-        style={{ paddingInline: theme.spacing(1), position: "relative" }}
-      >
+      </Grid2>
+
+      <Grid2 size={2}>
         <PronunciationsBackend
           audio={props.entry.audio}
           disabled={editing || props.disabled}
@@ -140,20 +131,17 @@ export function RecentEntry(props: RecentEntryProps): ReactElement {
             props.addAudioToWord(props.entry.id, file);
           }}
         />
-      </Grid>
-      <Grid
-        item
-        xs={1}
-        style={{ paddingInline: theme.spacing(1), position: "relative" }}
-      >
+      </Grid2>
+
+      <Grid2 size={1}>
         <DeleteEntry
           removeEntry={handleRemoveEntry}
           buttonId={`${idAffix}-${props.rowIndex}-delete`}
           confirmId={"addWords.deleteRowWarning"}
           disabled={editing || props.disabled}
         />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }
 
diff --git a/src/components/DataEntry/DataEntryTable/index.tsx b/src/components/DataEntry/DataEntryTable/index.tsx
index 0a119b4c50..f1811b7fb7 100644
--- a/src/components/DataEntry/DataEntryTable/index.tsx
+++ b/src/components/DataEntry/DataEntryTable/index.tsx
@@ -1,9 +1,8 @@
 import { ExitToApp, List as ListIcon } from "@mui/icons-material";
-import { Button, Grid, Typography } from "@mui/material";
+import { Button, Grid2, Typography } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
 import {
   FormEvent,
-  Fragment,
   ReactElement,
   useCallback,
   useContext,
@@ -36,7 +35,6 @@ import { uploadFileFromPronunciation } from "components/Pronunciations/utilities
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import { type Hash } from "types/hash";
-import theme from "types/theme";
 import {
   FileWithSpeakerId,
   newGloss,
@@ -1017,38 +1015,23 @@ export default function DataEntryTable(
 
   return (
     <form onSubmit={(e?: FormEvent<HTMLFormElement>) => e?.preventDefault()}>
-      <input type="submit" style={{ display: "none" }} />
-      <Grid container>
-        <Grid item xs={4}>
-          <Typography
-            variant="h5"
-            align="center"
-            style={{
-              marginTop: theme.spacing(2),
-              marginBottom: theme.spacing(2),
-            }}
-          >
+      <Grid2 container rowSpacing={2}>
+        <Grid2 size={4}>
+          <Typography align="center" variant="h5">
             {t("addWords.vernacular")}
           </Typography>
-        </Grid>
-        <Grid item xs={4}>
-          <Typography
-            variant="h5"
-            align="center"
-            style={{
-              marginTop: theme.spacing(2),
-              marginBottom: theme.spacing(2),
-            }}
-          >
+        </Grid2>
+
+        <Grid2 size={4}>
+          <Typography align="center" variant="h5">
             {t("addWords.glosses")}
           </Typography>
-        </Grid>
+        </Grid2>
 
         {state.recentWords.map((wordAccess, index) => (
-          <Grid
-            item
+          <Grid2
             key={`${wordAccess.word.id}_${wordAccess.senseGuid}`}
-            xs={12}
+            size={12}
           >
             <RecentEntry
               rowIndex={index}
@@ -1068,10 +1051,10 @@ export default function DataEntryTable(
                 wordAccess.word.id
               )}
             />
-          </Grid>
+          </Grid2>
         ))}
 
-        <Grid item xs={12}>
+        <Grid2 size={12}>
           <NewEntry
             analysisLang={analysisLang}
             vernacularLang={vernacularLang}
@@ -1097,38 +1080,29 @@ export default function DataEntryTable(
             suggestedDups={state.suggestedDups}
             suggestedVerns={state.suggestedVerns}
           />
-        </Grid>
-      </Grid>
+        </Grid2>
 
-      <Grid container justifyContent="space-between" spacing={3}>
-        <Grid item>
+        <Grid2 container justifyContent="space-between" size={12}>
           {props.hasDrawerButton ? (
-            <Button
-              id="toggle-existing-data"
-              style={{ marginTop: theme.spacing(2) }}
-              onClick={props.showExistingData}
-            >
-              <ListIcon fontSize={"medium"} color={"inherit"} />
+            <Button id="toggle-existing-data" onClick={props.showExistingData}>
+              <ListIcon />
             </Button>
           ) : (
-            <Fragment />
+            <div />
           )}
-        </Grid>
-        <Grid item>
+
           <Button
             id={exitButtonId}
-            type="submit"
             variant="contained"
             color={highlightExitButton ? "primary" : "secondary"}
-            style={{ marginTop: theme.spacing(2) }}
             endIcon={<ExitToApp />}
             tabIndex={-1}
             onClick={handleExit}
           >
             {t("buttons.exit")}
           </Button>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </form>
   );
 }
diff --git a/src/components/DataEntry/ExistingDataTable/ImmutableExistingData.tsx b/src/components/DataEntry/ExistingDataTable/ImmutableExistingData.tsx
index 259c8ff10e..db63b86496 100644
--- a/src/components/DataEntry/ExistingDataTable/ImmutableExistingData.tsx
+++ b/src/components/DataEntry/ExistingDataTable/ImmutableExistingData.tsx
@@ -1,11 +1,11 @@
-import { Grid } from "@mui/material";
-import { CSSProperties, ReactElement } from "react";
+import { Grid2, SxProps } from "@mui/material";
+import { ReactElement } from "react";
 
 import { Gloss } from "api/models";
 import { TypographyWithFont } from "utilities/fontComponents";
 
 /** Style with a top dotted line if the index isn't 0. */
-function TopStyle(index: number, style?: "solid" | "dotted"): CSSProperties {
+function BorderTopSx(index: number, style?: "solid" | "dotted"): SxProps {
   return index ? { borderTopStyle: style ?? "solid", borderTopWidth: 1 } : {};
 }
 
@@ -19,34 +19,28 @@ interface ImmutableExistingDataProps {
 export default function ImmutableExistingData(
   props: ImmutableExistingDataProps
 ): ReactElement {
+  const { glosses, index, vernacular } = props;
+
   return (
-    <Grid container wrap="nowrap" justifyContent="space-around">
-      <Grid
-        item
-        style={{ ...TopStyle(props.index), position: "relative" }}
-        xs={5}
-      >
+    <Grid2 container wrap="nowrap" justifyContent="space-around">
+      <Grid2 size={5} sx={{ ...BorderTopSx(index), position: "relative" }}>
         <TypographyWithFont variant="body1" vernacular>
-          {props.vernacular}
+          {vernacular}
         </TypographyWithFont>
-      </Grid>
-      <Grid
-        item
-        style={{ ...TopStyle(props.index), position: "relative" }}
-        xs={5}
-      >
-        {props.glosses.map((g, i) => (
+      </Grid2>
+      <Grid2 size={5} sx={{ ...BorderTopSx(index), position: "relative" }}>
+        {glosses.map((g, i) => (
           <TypographyWithFont
             analysis
             key={i}
             lang={g.language}
-            style={TopStyle(i, "dotted")}
+            sx={BorderTopSx(i, "dotted")}
             variant="body1"
           >
             {g.def}
           </TypographyWithFont>
         ))}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }
diff --git a/src/components/DataEntry/ExistingDataTable/index.tsx b/src/components/DataEntry/ExistingDataTable/index.tsx
index b82930feb5..a24914aacb 100644
--- a/src/components/DataEntry/ExistingDataTable/index.tsx
+++ b/src/components/DataEntry/ExistingDataTable/index.tsx
@@ -1,4 +1,4 @@
-import { Drawer, Grid, List, SxProps } from "@mui/material";
+import { Drawer, Grid2, List, SxProps } from "@mui/material";
 import { Fragment, ReactElement } from "react";
 
 import { SemanticDomain } from "api/models";
@@ -34,7 +34,7 @@ export default function ExistingDataTable(
   const closeDrawer = (): void => props.toggleDrawer(false);
 
   const list = (): ReactElement => (
-    <List style={{ minWidth: "300px" }}>
+    <List sx={{ minWidth: "300px" }}>
       {props.domainWords.map((w, i) => (
         <ImmutableExistingData
           glosses={w.glosses}
@@ -54,7 +54,7 @@ export default function ExistingDataTable(
       onClose={closeDrawer}
       onKeyDown={closeDrawer}
       role="presentation"
-      style={{ zIndex: theme.zIndex.drawer + 1 }}
+      sx={{ zIndex: theme.zIndex.drawer + 1 }}
     >
       {list()}
     </Drawer>
@@ -66,9 +66,9 @@ export default function ExistingDataTable(
   };
 
   const renderSidePanel = (): ReactElement => (
-    <Grid item md={5} lg={4} sx={sxScrollOverflow}>
+    <Grid2 size={{ md: 5, lg: 4, xl: 3 }} sx={sxScrollOverflow}>
       {list()}
-    </Grid>
+    </Grid2>
   );
 
   return props.typeDrawer ? renderDrawer() : renderSidePanel();
diff --git a/src/components/DataEntry/index.tsx b/src/components/DataEntry/index.tsx
index e12c109a00..73697d4361 100644
--- a/src/components/DataEntry/index.tsx
+++ b/src/components/DataEntry/index.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Divider, Grid, Paper } from "@mui/material";
+import { Dialog, Divider, Paper, Stack, useMediaQuery } from "@mui/material";
 import {
   ReactElement,
   useCallback,
@@ -19,19 +19,11 @@ import { closeTree, openTree } from "components/TreeView/Redux/TreeViewActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import { newSemanticDomain } from "types/semanticDomain";
-import theme from "types/theme";
 import { DomainWord } from "types/word";
 import { useWindowSize } from "utilities/useWindowSize";
 
-export const smallScreenThreshold = 960;
 export const treeViewDialogId = "tree-view-dialog";
 
-const paperStyle = {
-  marginInline: "auto",
-  maxWidth: 800,
-  padding: theme.spacing(2),
-};
-
 /**
  * Allows users to add words to a project, add senses to an existing word,
  * and add the current semantic domain to an existing sense.
@@ -52,20 +44,18 @@ export default function DataEntry(): ReactElement {
 
   const { id, lang, name } = currentDomain;
 
-  /* This ref is for a container of both the <DataEntryHeader> and <DataEntryTable>,
-   * in order to check its height and update the height of the <ExistingDataTable>.
-   * Attach to the <Paper> because the parent <Grid item> won't shrink to its content,
-   * but will match the height of its neighbor <Grid item> in <ExistingDataTable>. */
+  /* This ref is for the container of both the <DataEntryHeader> and <DataEntryTable>,
+   * in order to check its height and update the height of the <ExistingDataTable>. */
   const dataEntryRef = useRef<HTMLDivElement | null>(null);
 
   const [domain, setDomain] = useState(newSemanticDomain(id, name, lang));
   const [domainWords, setDomainWords] = useState<DomainWord[]>([]);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [height, setHeight] = useState<number>();
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [questionsVisible, setQuestionsVisible] = useState(false);
 
-  const { windowWidth } = useWindowSize();
+  const isSmallScreen = useMediaQuery((th) => th.breakpoints.down("md"));
+  const { windowHeight } = useWindowSize();
 
   const updateHeight = useCallback(() => {
     setHeight(dataEntryRef.current?.clientHeight);
@@ -76,11 +66,6 @@ export default function DataEntry(): ReactElement {
     dispatch(openTree());
   }, [dispatch]);
 
-  // When window width changes, check if there's space for the sidebar.
-  useLayoutEffect(() => {
-    setIsSmallScreen(windowWidth < smallScreenThreshold);
-  }, [windowWidth]);
-
   // When domain changes, fetch full domain details.
   useEffect(() => {
     const customDomain = customDomains.find(
@@ -100,7 +85,7 @@ export default function DataEntry(): ReactElement {
   // Recalculate height if something changed that might affect it.
   useEffect(() => {
     updateHeight();
-  }, [domain, questionsVisible, updateHeight, windowWidth]);
+  }, [domain, questionsVisible, updateHeight, windowHeight]);
 
   const returnControlToCaller = useCallback(async () => {
     setDomainWords(
@@ -112,15 +97,21 @@ export default function DataEntry(): ReactElement {
   return (
     <>
       {!open && !!domain.guid && (
-        <Grid container justifyContent="center" spacing={3} wrap={"nowrap"}>
-          <Grid item>
-            <Paper ref={dataEntryRef} style={paperStyle}>
+        <Stack
+          alignItems="flex-start"
+          direction="row"
+          justifyContent="center"
+          spacing={2}
+        >
+          {/* Domain data entry */}
+          <Paper ref={dataEntryRef} sx={{ maxWidth: 900, p: 2 }}>
+            <Stack divider={<Divider />} spacing={2}>
               <DataEntryHeader
                 domain={domain}
                 questionsVisible={questionsVisible}
                 setQuestionVisibility={setQuestionsVisible}
               />
-              <Divider />
+
               <DataEntryTable
                 hasDrawerButton={isSmallScreen && domainWords.length > 0}
                 hideQuestions={() => setQuestionsVisible(false)}
@@ -130,8 +121,10 @@ export default function DataEntry(): ReactElement {
                 showExistingData={() => setDrawerOpen(true)}
                 updateHeight={updateHeight}
               />
-            </Paper>
-          </Grid>
+            </Stack>
+          </Paper>
+
+          {/* Existing domain entries */}
           <ExistingDataTable
             domain={domain}
             domainWords={domainWords}
@@ -140,8 +133,9 @@ export default function DataEntry(): ReactElement {
             toggleDrawer={setDrawerOpen}
             typeDrawer={isSmallScreen}
           />
-        </Grid>
+        </Stack>
       )}
+
       <Dialog id={treeViewDialogId} fullScreen open={open}>
         <AppBar />
         <TreeView returnControlToCaller={returnControlToCaller} />
diff --git a/src/components/DataEntry/tests/index.test.tsx b/src/components/DataEntry/tests/index.test.tsx
index b02035d176..48d0cb5a7e 100644
--- a/src/components/DataEntry/tests/index.test.tsx
+++ b/src/components/DataEntry/tests/index.test.tsx
@@ -1,13 +1,15 @@
+import { ThemeProvider } from "@mui/material";
 import { act, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import createMockStore from "redux-mock-store";
 
-import DataEntry, { smallScreenThreshold } from "components/DataEntry";
+import DataEntry from "components/DataEntry";
 import { openTree } from "components/TreeView/Redux/TreeViewActions";
 import { TreeViewState } from "components/TreeView/Redux/TreeViewReduxTypes";
 import { defaultState } from "rootRedux/types";
 import { newSemanticDomainTreeNode } from "types/semanticDomain";
-import * as useWindowSize from "utilities/useWindowSize";
+import theme from "types/theme";
+import { setMatchMedia } from "utilities/testingLibraryUtilities";
 
 jest.mock("backend", () => ({
   getSemanticDomainFull: (...args: any[]) => mockGetSemanticDomainFull(...args),
@@ -36,11 +38,7 @@ const mockDomain = newSemanticDomainTreeNode("mockId", "mockName", "mockLang");
 const mockGetSemanticDomainFull = jest.fn();
 const mockStore = createMockStore();
 
-function spyOnUseWindowSize(windowWidth: number): jest.SpyInstance {
-  return jest
-    .spyOn(useWindowSize, "useWindowSize")
-    .mockReturnValue({ windowWidth, windowHeight: 1 });
-}
+const mdWidth = 900;
 
 beforeEach(() => {
   jest.clearAllMocks();
@@ -72,28 +70,26 @@ describe("DataEntry", () => {
   });
 
   it("renders on a small screen", async () => {
-    await renderDataEntry(
-      { currentDomain: mockDomain },
-      smallScreenThreshold - 1
-    );
+    await renderDataEntry({ currentDomain: mockDomain }, mdWidth - 1);
   });
 });
 
 async function renderDataEntry(
   treeViewState: Partial<TreeViewState>,
-  windowWidth = smallScreenThreshold + 1
+  width = mdWidth
 ): Promise<void> {
-  spyOnUseWindowSize(windowWidth);
+  // Required (along with a `ThemeProvider`) for `useMediaQuery` to work
+  setMatchMedia(width);
+
+  treeViewState = { ...defaultState.treeViewState, ...treeViewState };
+
   await act(async () => {
     render(
-      <Provider
-        store={mockStore({
-          ...defaultState,
-          treeViewState: { ...defaultState.treeViewState, ...treeViewState },
-        })}
-      >
-        <DataEntry />
-      </Provider>
+      <ThemeProvider theme={theme}>
+        <Provider store={mockStore({ ...defaultState, treeViewState })}>
+          <DataEntry />
+        </Provider>
+      </ThemeProvider>
     );
   });
 }