diff --git a/src/components/AnalyticsConsent/index.tsx b/src/components/AnalyticsConsent/index.tsx
index 6888243d8c..5e9afbecec 100644
--- a/src/components/AnalyticsConsent/index.tsx
+++ b/src/components/AnalyticsConsent/index.tsx
@@ -1,10 +1,8 @@
-import { Button, Grid, Theme, Typography, useMediaQuery } from "@mui/material";
+import { Button, Grid2, Stack, Typography } from "@mui/material";
 import Drawer from "@mui/material/Drawer";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-import { themeColors } from "types/theme";
-
 interface ConsentProps {
   onChangeConsent: (consentVal?: boolean) => void;
   required: boolean;
@@ -17,8 +15,6 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
   const rejectAnalytics = (): void => props.onChangeConsent(false);
   const clickedAway = (): void => props.onChangeConsent(undefined);
 
-  const isXs = useMediaQuery<Theme>((th) => th.breakpoints.only("xs"));
-
   function ConsentButton(props: {
     onClick: () => void;
     text: string;
@@ -26,7 +22,7 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
     return (
       <Button
         onClick={props.onClick}
-        style={{ height: 60, width: 155 }}
+        sx={{ height: 60, width: 155 }}
         variant="contained"
       >
         <Typography variant="body2">{props.text}</Typography>
@@ -36,21 +32,21 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
 
   return (
     <Drawer
-      anchor={"bottom"}
+      anchor="bottom"
       open
-      onClose={!props.required ? clickedAway : undefined}
-      PaperProps={{ style: { padding: 20 } }}
+      onClose={props.required ? undefined : clickedAway}
+      slotProps={{ paper: { sx: { p: 2 } } }}
     >
-      <Grid
-        container
-        direction={isXs ? "column" : "row"}
+      <Stack
         alignItems="center"
-        spacing={3}
+        direction={{ sm: "row", xs: "column" }}
+        spacing={2}
       >
-        <Grid item xs>
+        {/* Consent texts */}
+        <div>
           <Typography
             variant="h6"
-            style={{ color: themeColors.primary, fontWeight: 600 }}
+            sx={{ color: "primary.main", fontWeight: "bolder" }}
             gutterBottom
           >
             {t("analyticsConsent.consentModal.title")}
@@ -58,22 +54,20 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
           <Typography variant="body1">
             {t("analyticsConsent.consentModal.description")}
           </Typography>
-        </Grid>
-        <Grid item container xs="auto" spacing={1}>
-          <Grid item>
-            <ConsentButton
-              onClick={acceptAnalytics}
-              text={t("analyticsConsent.consentModal.acceptAllBtn")}
-            />
-          </Grid>
-          <Grid item>
-            <ConsentButton
-              onClick={rejectAnalytics}
-              text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
+        </div>
+
+        {/* Consent buttons */}
+        <Grid2 container size="auto" spacing={1}>
+          <ConsentButton
+            onClick={acceptAnalytics}
+            text={t("analyticsConsent.consentModal.acceptAllBtn")}
+          />
+          <ConsentButton
+            onClick={rejectAnalytics}
+            text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
+          />
+        </Grid2>
+      </Stack>
     </Drawer>
   );
 }
diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx
index d814482f98..0d047f18ca 100644
--- a/src/components/AppBar/index.tsx
+++ b/src/components/AppBar/index.tsx
@@ -1,4 +1,4 @@
-import { AppBar, Grid, Toolbar } from "@mui/material";
+import { AppBar, Stack, Toolbar } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 
@@ -26,25 +26,32 @@ export default function AppBarComponent(): ReactElement {
     <div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
       <AppBar
         position="fixed"
-        style={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
+        sx={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
       >
         <Toolbar>
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            sx={{ flexGrow: 1 }}
+          >
+            <div>
               <Logo />
               {!!getProjectId() && (
                 <NavigationButtons currentTab={currentTab} />
               )}
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               {!!getProjectId() && <ProjectButtons currentTab={currentTab} />}
               <DownloadButton colorSecondary />
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               <UserMenu currentTab={currentTab} />
               <UserGuideButton />
-            </Grid>
-          </Grid>
+            </div>
+          </Stack>
         </Toolbar>
       </AppBar>
     </div>
diff --git a/src/components/LandingPage/index.tsx b/src/components/LandingPage/index.tsx
index 3ddbac3a5a..b967f019c6 100644
--- a/src/components/LandingPage/index.tsx
+++ b/src/components/LandingPage/index.tsx
@@ -1,6 +1,6 @@
 import {
   Box,
-  Grid,
+  Grid2,
   Stack,
   Theme,
   Typography,
@@ -44,16 +44,16 @@ export default function LandingPage(): ReactElement {
   return (
     <>
       <TopBar />
-      <Grid container direction={isXs ? "column" : "row-reverse"}>
-        <Grid item xs="auto">
+      <Grid2 container direction={isXs ? "column" : "row-reverse"}>
+        <Grid2 size="auto">
           <LandingButtons top={isXs} />
-        </Grid>
-        <Grid item xs>
+        </Grid2>
+        <Grid2 size="grow">
           <Box style={{ maxHeight: maxBodyHeight, overflow: "auto" }}>
             <Body />
           </Box>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
       <BottomBar />
     </>
   );
diff --git a/src/components/ProjectScreen/CreateProject.tsx b/src/components/ProjectScreen/CreateProject.tsx
index 00586ea5e2..96ca35eb0f 100644
--- a/src/components/ProjectScreen/CreateProject.tsx
+++ b/src/components/ProjectScreen/CreateProject.tsx
@@ -2,7 +2,7 @@ import { Cancel } from "@mui/icons-material";
 import {
   Card,
   CardContent,
-  Grid,
+  Grid2,
   IconButton,
   MenuItem,
   Select,
@@ -32,11 +32,30 @@ import theme from "types/theme";
 import { newWritingSystem } from "types/writingSystem";
 import { NormalizedTextField } from "utilities/fontComponents";
 
-export const buttonIdSelectFile = "create-project-select-file";
-export const buttonIdSubmit = "create-project-submit";
-export const fieldIdName = "create-project-name";
-export const formId = "create-project-form";
-export const selectIdVern = "create-proj-select-vern";
+export enum CreateProjectId {
+  ButtonSelectFile = "create-project-select-file",
+  ButtonSubmit = "create-project-submit",
+  FieldName = "create-project-name",
+  Form = "create-project-form",
+  SelectVern = "create-proj-select-vern",
+}
+
+export enum CreateProjectTextId {
+  Create = "createProject.create",
+  CreateSuccess = "createProject.success",
+  LangAnalysis = "projectSettings.language.analysisLanguage",
+  LangAnalysisInfo = "createProject.language",
+  LangVernacular = "projectSettings.language.vernacularLanguage",
+  Name = "createProject.name",
+  NameTaken = "createProject.nameTaken",
+  Required = "login.required",
+  SelectLanguage = "createProject.languageSelect",
+  SelectOther = "createProject.languageOptionOther",
+  Upload = "createProject.upload?",
+  UploadBrowse = "buttons.browse",
+  UploadInfo = "createProject.uploadFormat",
+  UploadSelected = "createProject.fileSelected",
+}
 
 const vernIdNone = "selectLanguageOptionNone";
 const vernIdOther = "selectLanguageOptionOther";
@@ -133,7 +152,7 @@ export default function CreateProject(): ReactElement {
 
     const menuItems = [
       <MenuItem key={vernIdNone} value={vernIdNone}>
-        {t("createProject.languageSelect")}
+        {t(CreateProjectTextId.SelectLanguage)}
       </MenuItem>,
     ];
     menuItems.push(
@@ -145,7 +164,7 @@ export default function CreateProject(): ReactElement {
     );
     menuItems.push(
       <MenuItem key={vernIdOther} value={vernIdOther}>
-        {t("createProject.languageOptionOther")}
+        {t(CreateProjectTextId.SelectOther)}
       </MenuItem>
     );
 
@@ -161,7 +180,12 @@ export default function CreateProject(): ReactElement {
     };
 
     return (
-      <Select defaultValue={vernIdNone} id={selectIdVern} onChange={onChange}>
+      <Select
+        data-testid={CreateProjectId.SelectVern}
+        defaultValue={vernIdNone}
+        id={CreateProjectId.SelectVern}
+        onChange={onChange}
+      >
         {menuItems}
       </Select>
     );
@@ -199,16 +223,21 @@ export default function CreateProject(): ReactElement {
 
   return (
     <Card style={{ width: "100%", maxWidth: 450 }}>
-      <form id={formId} onSubmit={(e) => createProject(e)}>
+      <form
+        data-testid={CreateProjectId.Form}
+        id={CreateProjectId.Form}
+        onSubmit={(e) => createProject(e)}
+      >
         <CardContent>
           {/* Title */}
           <Typography variant="h5" align="center" gutterBottom>
-            {t("createProject.create")}
+            {t(CreateProjectTextId.Create)}
           </Typography>
+
           {/* Project name */}
           <NormalizedTextField
-            id={fieldIdName}
-            label={t("createProject.name")}
+            id={CreateProjectId.FieldName}
+            label={t(CreateProjectTextId.Name)}
             value={name}
             onChange={updateName}
             variant="outlined"
@@ -216,10 +245,11 @@ export default function CreateProject(): ReactElement {
             margin="normal"
             error={error["empty"] || error["nameTaken"]}
             helperText={
-              (error["empty"] && t("login.required")) ||
-              (error["nameTaken"] && t("createProject.nameTaken"))
+              (error["empty"] && t(CreateProjectTextId.Required)) ||
+              (error["nameTaken"] && t(CreateProjectTextId.NameTaken))
             }
           />
+
           {/* File upload */}
           <div
             style={{
@@ -232,20 +262,21 @@ export default function CreateProject(): ReactElement {
               style={{ marginTop: theme.spacing(2) }}
               display="inline"
             >
-              {t("createProject.upload?")}
+              {t(CreateProjectTextId.Upload)}
             </Typography>
             <FileInputButton
               updateFile={(file: File) => updateLanguageData(file)}
               accept=".zip"
               buttonProps={{
-                id: buttonIdSelectFile,
-                style: { margin: theme.spacing(1) },
+                "data-testid": CreateProjectId.ButtonSelectFile,
+                id: CreateProjectId.ButtonSelectFile,
+                sx: { m: 1 },
               }}
             >
-              {t("buttons.browse")}
+              {t(CreateProjectTextId.UploadBrowse)}
             </FileInputButton>
             <Typography variant="caption" display="block">
-              <Trans i18nKey="createProject.uploadFormat">
+              <Trans i18nKey={CreateProjectTextId.UploadInfo}>
                 FillerTextA
                 <a href="https://code.google.com/archive/p/lift-standard/">
                   FillerTextB
@@ -256,16 +287,19 @@ export default function CreateProject(): ReactElement {
             {/* Uploaded file name and remove button */}
             {languageData && (
               <Typography variant="body2" style={{ margin: theme.spacing(1) }}>
-                {t("createProject.fileSelected", { val: languageData.name })}
+                {t(CreateProjectTextId.UploadSelected, {
+                  val: languageData.name,
+                })}
                 <IconButton size="small" onClick={() => updateLanguageData()}>
                   <Cancel />
                 </IconButton>
               </Typography>
             )}
           </div>
+
           {/* Vernacular language picker */}
           <Typography style={{ marginTop: theme.spacing(1) }}>
-            {t("projectSettings.language.vernacularLanguage")}
+            {t(CreateProjectTextId.LangVernacular)}
           </Typography>
           {vernLangSelect()}
           {(vernLangIsOther || !vernLangOptions.length) && (
@@ -280,12 +314,13 @@ export default function CreateProject(): ReactElement {
               t={languagePickerStrings_en}
             />
           )}
+
           {/* Analysis language picker */}
           <Typography style={{ marginTop: theme.spacing(1) }}>
-            {t("projectSettings.language.analysisLanguage")}
+            {t(CreateProjectTextId.LangAnalysis)}
           </Typography>
           {languageData ? (
-            t("createProject.language")
+            t(CreateProjectTextId.LangAnalysisInfo)
           ) : (
             <LanguagePicker
               value={analysisLang.bcp47}
@@ -298,24 +333,29 @@ export default function CreateProject(): ReactElement {
               t={languagePickerStrings_en}
             />
           )}
+
           {/* Form submission button */}
-          <Grid
+          <Grid2
             container
             justifyContent="flex-end"
             style={{ marginTop: theme.spacing(1) }}
           >
             <LoadingDoneButton
-              buttonProps={{ color: "primary", id: buttonIdSubmit }}
+              buttonProps={{
+                "data-testid": CreateProjectId.ButtonSubmit,
+                id: CreateProjectId.ButtonSubmit,
+                type: "submit",
+              }}
               disabled={
                 !name.trim() || !vernLang.bcp47 || vernLang.bcp47 === undBcp47
               }
               done={success}
-              doneText={t("createProject.success")}
+              doneText={t(CreateProjectTextId.CreateSuccess)}
               loading={loading}
             >
-              {t("createProject.create")}
+              {t(CreateProjectTextId.Create)}
             </LoadingDoneButton>
-          </Grid>
+          </Grid2>
         </CardContent>
       </form>
     </Card>
diff --git a/src/components/ProjectScreen/tests/CreateProject.test.tsx b/src/components/ProjectScreen/tests/CreateProject.test.tsx
index 866998ba50..cb50e6df28 100644
--- a/src/components/ProjectScreen/tests/CreateProject.test.tsx
+++ b/src/components/ProjectScreen/tests/CreateProject.test.tsx
@@ -1,139 +1,128 @@
-import { LanguagePicker } from "mui-language-picker";
-import { type FormEvent } from "react";
+import { Button as MockFIB, ButtonProps, Input as MockLP } from "@mui/material";
+import "@testing-library/jest-dom";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Provider } from "react-redux";
-import {
-  type ReactTestInstance,
-  type ReactTestRenderer,
-  act,
-  create,
-} from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
-import { FileInputButton } from "components/Buttons";
 import CreateProject, {
-  buttonIdSubmit,
-  fieldIdName,
-  formId,
-  selectIdVern,
+  CreateProjectId,
+  CreateProjectTextId,
 } from "components/ProjectScreen/CreateProject";
+import { defaultState } from "rootRedux/types";
 import { newWritingSystem } from "types/writingSystem";
 
+jest.mock("mui-language-picker", () => ({
+  ...jest.requireActual("mui-language-picker"),
+  /** Mocked with Input that triggers the `setCode` prop when typed in. */
+  LanguagePicker: (props: { setCode: (code: string) => void }) => (
+    <MockLP
+      data-testid={mockLangPickerId}
+      onChange={(e) => props.setCode(e.target.value)}
+    />
+  ),
+}));
+
 jest.mock("backend", () => ({
   projectDuplicateCheck: () => mockProjectDuplicateCheck(),
   uploadLiftAndGetWritingSystems: () => mockUploadLiftAndGetWritingSystems(),
 }));
-// Mock "i18n", else `thrown: "Error: Error: connect ECONNREFUSED ::1:80 [...]`
-jest.mock("i18n", () => ({ language: "" }));
+jest.mock("components/Buttons", () => ({
+  ...jest.requireActual("components/Buttons"),
+  /** Mocked with Button that triggers the `updateFile` prop when clicked. */
+  FileInputButton: (props: {
+    /** Includes ids and styling. */
+    buttonProps?: ButtonProps & { "data-testid"?: string };
+    /** Clicking will call this with a mock file with nonempty file name. */
+    updateFile: (file: File) => void;
+  }) => {
+    const { buttonProps, updateFile } = props;
+    return <MockFIB {...buttonProps} onClick={() => updateFile(mockFile)} />;
+  },
+}));
+jest.mock("i18n", () => ({ language: "" })); // else `thrown: "Error: AggregateError`
 
+const mockFile = new File([], "file-name");
+const mockLangPickerId = "mock-mui-language-picker";
+const mockLangs = [newWritingSystem("oneLang"), newWritingSystem("twoLang")];
 const mockProjectDuplicateCheck = jest.fn();
 const mockUploadLiftAndGetWritingSystems = jest.fn();
 
-const createMockStore = configureMockStore();
-const mockState = { currentProjectState: { project: {} } };
-const mockStore = createMockStore(mockState);
-
-const mockChangeEvent = (
-  value: string
-): { target: Partial<EventTarget & HTMLSelectElement> } => ({
-  target: { value },
-});
-const mockSubmitEvent = (): Partial<FormEvent<HTMLFormElement>> => ({
-  preventDefault: jest.fn(),
-});
-
-let projectMaster: ReactTestRenderer;
-let projectHandle: ReactTestInstance;
-
 beforeEach(async () => {
   jest.resetAllMocks();
   await act(async () => {
-    projectMaster = create(
-      <Provider store={mockStore}>
+    render(
+      <Provider store={configureMockStore()(defaultState)}>
         <CreateProject />
       </Provider>
     );
   });
-  projectHandle = projectMaster.root;
 });
 
 describe("CreateProject", () => {
   it("errors on taken name", async () => {
-    const nameField = projectHandle.findByProps({ id: fieldIdName });
-    const langPickers = projectHandle.findAllByType(LanguagePicker);
-    await act(async () => {
-      nameField.props.onChange(mockChangeEvent("non-empty-name"));
-      langPickers[0].props.setCode("non-empty-code");
-    });
-    expect(nameField.props.error).toBeFalsy();
+    // Input project name and vernacular language.
+    const [nameInput, vernInput] = screen.getAllByRole("textbox");
+    await userEvent.type(nameInput, "non-empty-name");
+    await userEvent.type(vernInput, "non-empty-code");
 
+    // Error appears when duplicate name submitted.
+    expect(screen.queryByText(CreateProjectTextId.NameTaken)).toBeNull();
     mockProjectDuplicateCheck.mockResolvedValueOnce(true);
-    await act(async () => {
-      projectHandle
-        .findByProps({ id: formId })
-        .props.onSubmit(mockSubmitEvent());
-    });
-    expect(nameField.props.error).toBeTruthy();
+    await userEvent.click(screen.getByTestId(CreateProjectId.ButtonSubmit));
+    expect(screen.queryByText(CreateProjectTextId.NameTaken)).toBeTruthy();
   });
 
   it("disables submit button when empty name or empty vern lang bcp code", async () => {
-    const nameField = projectHandle.findByProps({ id: fieldIdName });
-    const button = projectHandle.findByProps({ id: buttonIdSubmit });
+    const button = screen.getByTestId(CreateProjectId.ButtonSubmit);
+    const [nameInput, vernInput] = screen.getAllByRole("textbox");
 
     // Start with empty name and vern language: button disabled.
-    expect(button.props.disabled).toBeTruthy();
+    expect(button).toBeDisabled();
 
     // Add name but still no vern language: button still disabled.
-    await act(async () => {
-      nameField.props.onChange(mockChangeEvent("non-empty-value"));
-    });
-    expect(button.props.disabled).toBeTruthy();
+    await userEvent.type(nameInput, "non-empty-name");
+    expect(button).toBeDisabled();
 
     // Also add a vern language: button enabled.
-    const langPickers = projectHandle.findAllByType(LanguagePicker);
-    expect(langPickers).toHaveLength(2);
-
-    await act(async () => {
-      langPickers[0].props.setCode("non-empty");
-    });
-    expect(button.props.disabled).toBeFalsy();
+    await userEvent.type(vernInput, "non-empty-code");
+    expect(button).toBeEnabled();
 
     // Change name to whitespace: button disabled again.
-    await act(async () => {
-      nameField.props.onChange(mockChangeEvent("   "));
-    });
-    expect(button.props.disabled).toBeTruthy();
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, "   ");
+    expect(button).toBeDisabled();
   });
 
-  it("disables analysis language pickers when file selected", async () => {
-    const button = projectHandle.findByType(FileInputButton);
-    expect(projectHandle.findAllByType(LanguagePicker)).toHaveLength(2);
+  it("disables language picker(s) when file selected", async () => {
+    // Both vernacular and analysis lang pickers available by default.
+    expect(screen.queryAllByTestId(mockLangPickerId)).toHaveLength(2);
 
     // File with no writing systems only disables analysis lang picker.
     mockUploadLiftAndGetWritingSystems.mockResolvedValueOnce([]);
-    await act(async () => {
-      button.props.updateFile(new File([], ""));
-    });
-    expect(projectHandle.findAllByType(LanguagePicker)).toHaveLength(1);
+    await userEvent.click(screen.getByTestId(CreateProjectId.ButtonSelectFile));
+    expect(screen.queryAllByTestId(mockLangPickerId)).toHaveLength(1);
 
     // File with writing systems disables both lang pickers.
-    mockUploadLiftAndGetWritingSystems.mockResolvedValueOnce([
-      newWritingSystem(),
-    ]);
-    await act(async () => {
-      button.props.updateFile(new File([], "oneLang"));
-    });
-    expect(projectHandle.findAllByType(LanguagePicker)).toHaveLength(0);
+    mockUploadLiftAndGetWritingSystems.mockResolvedValueOnce(mockLangs);
+    await userEvent.click(screen.getByTestId(CreateProjectId.ButtonSelectFile));
+    expect(screen.queryAllByTestId(mockLangPickerId)).toHaveLength(0);
   });
 
   it("offers vern langs when file has some", async () => {
-    const button = projectHandle.findByType(FileInputButton);
-    const langs = [newWritingSystem("redLang"), newWritingSystem("blueLang")];
-    mockUploadLiftAndGetWritingSystems.mockResolvedValueOnce(langs);
-    await act(async () => {
-      button.props.updateFile(new File([], "twoLang"));
-    });
-    const vernSelect = projectHandle.findByProps({ id: selectIdVern });
+    // No vern selector by default.
+    expect(screen.queryByTestId(CreateProjectId.SelectVern)).toBeNull();
+    expect(screen.queryByRole("combobox")).toBeNull();
+
+    // Mock-select a file with multiple languages.
+    mockUploadLiftAndGetWritingSystems.mockResolvedValueOnce(mockLangs);
+    await userEvent.click(screen.getByTestId(CreateProjectId.ButtonSelectFile));
+
+    // Open the select, whose button is a combobox.
+    expect(screen.queryByTestId(CreateProjectId.SelectVern)).toBeTruthy();
+    await userEvent.click(screen.getByRole("combobox"));
+
     // Number of options is +2 for the menu title item and an "other" item.
-    expect(vernSelect.props.children).toHaveLength(langs.length + 2);
+    expect(screen.getAllByRole("option")).toHaveLength(mockLangs.length + 2);
   });
 });
diff --git a/src/components/UserSettings/UserSettings.tsx b/src/components/UserSettings/UserSettings.tsx
index ac80f402f0..3e9ce05e4a 100644
--- a/src/components/UserSettings/UserSettings.tsx
+++ b/src/components/UserSettings/UserSettings.tsx
@@ -3,9 +3,10 @@ import {
   Button,
   Card,
   CardContent,
-  Grid,
+  Grid2,
   MenuItem,
   Select,
+  Stack,
   TextField,
   Tooltip,
   Typography,
@@ -133,16 +134,16 @@ export function UserSettings(props: {
   }
 
   return (
-    <Grid container justifyContent="center">
-      <Card style={{ width: 450 }}>
-        <form onSubmit={(e) => onSubmit(e)}>
-          <CardContent>
-            <Grid item container spacing={6}>
-              <Grid item container spacing={2} alignItems="center">
-                <Grid item>
-                  <ClickableAvatar avatar={avatar} setAvatar={setAvatar} />
-                </Grid>
-                <Grid item xs>
+    <Grid2 container justifyContent="center">
+      <Card sx={{ width: 450 }}>
+        <CardContent>
+          <form onSubmit={(e) => onSubmit(e)}>
+            <Stack spacing={6}>
+              {/* ID: avatar, name, username */}
+              <Stack alignItems="center" direction="row" spacing={2}>
+                <ClickableAvatar avatar={avatar} setAvatar={setAvatar} />
+
+                <Grid2 size="grow">
                   <NormalizedTextField
                     id={UserSettingsIds.FieldName}
                     fullWidth
@@ -156,6 +157,7 @@ export function UserSettings(props: {
                     }}
                     style={{ margin: theme.spacing(1), marginInlineStart: 0 }}
                   />
+
                   <Typography
                     data-testid={UserSettingsIds.FieldUsername}
                     id={UserSettingsIds.FieldUsername}
@@ -166,21 +168,19 @@ export function UserSettings(props: {
                     {": "}
                     {props.user.username}
                   </Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Stack>
 
-              <Grid item container spacing={2}>
-                <Grid item>
-                  <Typography variant="h6">
-                    {t("userSettings.contact")}
-                  </Typography>
-                </Grid>
+              {/* Contact: phone, email */}
+              <Stack spacing={2}>
+                <Typography variant="h6">
+                  {t("userSettings.contact")}
+                </Typography>
 
-                <Grid item container spacing={1} alignItems="center">
-                  <Grid item>
-                    <Phone />
-                  </Grid>
-                  <Grid item xs>
+                <Stack alignItems="center" direction="row" spacing={1}>
+                  <Phone />
+
+                  <Grid2 size="grow">
                     <NormalizedTextField
                       id={UserSettingsIds.FieldPhone}
                       inputProps={{ "data-testid": UserSettingsIds.FieldPhone }}
@@ -191,14 +191,13 @@ export function UserSettings(props: {
                       onChange={(e) => setPhone(e.target.value)}
                       type="tel"
                     />
-                  </Grid>
-                </Grid>
-
-                <Grid item container spacing={1} alignItems="center">
-                  <Grid item>
-                    <Email />
-                  </Grid>
-                  <Grid item xs>
+                  </Grid2>
+                </Stack>
+
+                <Stack alignItems="center" direction="row" spacing={1}>
+                  <Email />
+
+                  <Grid2 size="grow">
                     <TextField
                       id={UserSettingsIds.FieldEmail}
                       inputProps={{ "data-testid": UserSettingsIds.FieldEmail }}
@@ -217,53 +216,49 @@ export function UserSettings(props: {
                       }
                       type="email"
                     />
-                  </Grid>
-                </Grid>
-              </Grid>
+                  </Grid2>
+                </Stack>
+              </Stack>
 
-              <Grid item container spacing={2}>
-                <Grid item xs={12}>
-                  <Typography variant="h6">
-                    {t("userSettings.uiLanguage")}
-                  </Typography>
-                </Grid>
+              {/* UI language */}
+              <Stack alignItems="flex-start" spacing={2}>
+                <Typography variant="h6">
+                  {t("userSettings.uiLanguage")}
+                </Typography>
 
-                <Grid item>
-                  <Select
-                    variant="standard"
-                    data-testid={UserSettingsIds.SelectUiLang}
-                    id={UserSettingsIds.SelectUiLang}
-                    value={uiLang}
-                    onChange={(e) => setUiLang(e.target.value ?? "")}
-                    /* Use `displayEmpty` and a conditional `renderValue` function to force
-                     * something to appear when the menu is closed and its value is "" */
-                    displayEmpty
-                    renderValue={
-                      uiLang
-                        ? undefined
-                        : () => t("userSettings.uiLanguageDefault")
-                    }
-                  >
-                    <MenuItem value={""}>
-                      {t("userSettings.uiLanguageDefault")}
+                <Select
+                  variant="standard"
+                  data-testid={UserSettingsIds.SelectUiLang}
+                  id={UserSettingsIds.SelectUiLang}
+                  value={uiLang}
+                  onChange={(e) => setUiLang(e.target.value ?? "")}
+                  /* Use `displayEmpty` and a conditional `renderValue` function to force
+                   * something to appear when the menu is closed and its value is "" */
+                  displayEmpty
+                  renderValue={
+                    uiLang
+                      ? undefined
+                      : () => t("userSettings.uiLanguageDefault")
+                  }
+                >
+                  <MenuItem value={""}>
+                    {t("userSettings.uiLanguageDefault")}
+                  </MenuItem>
+                  {uiWritingSystems.map((ws) => (
+                    <MenuItem key={ws.bcp47} value={ws.bcp47}>
+                      {`${ws.bcp47} (${ws.name})`}
                     </MenuItem>
-                    {uiWritingSystems.map((ws) => (
-                      <MenuItem key={ws.bcp47} value={ws.bcp47}>
-                        {`${ws.bcp47} (${ws.name})`}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </Grid>
-              </Grid>
+                  ))}
+                </Select>
+              </Stack>
 
-              <Grid item container spacing={2}>
-                <Grid item xs={12}>
-                  <Typography variant="h6">
-                    {t("userSettings.glossSuggestion")}
-                  </Typography>
-                </Grid>
+              {/* Gloss spelling suggestions */}
+              <Stack alignItems="flex-start" spacing={2}>
+                <Typography variant="h6">
+                  {t("userSettings.glossSuggestion")}
+                </Typography>
 
-                <Grid item>
+                <Stack direction="row">
                   <Select
                     data-testid={UserSettingsIds.SelectGlossSuggestion}
                     id={UserSettingsIds.SelectGlossSuggestion}
@@ -280,56 +275,51 @@ export function UserSettings(props: {
                       {t("projectSettings.autocomplete.on")}
                     </MenuItem>
                   </Select>
-                </Grid>
 
-                <Grid item>
                   <Tooltip
                     title={t("userSettings.glossSuggestionHint")}
                     placement={document.body.dir === "rtl" ? "left" : "right"}
                   >
                     <HelpOutline fontSize="small" />
                   </Tooltip>
-                </Grid>
-              </Grid>
+                </Stack>
+              </Stack>
 
+              {/* Analytics consent */}
               {!RuntimeConfig.getInstance().isOffline() && (
-                <Grid item container spacing={2}>
-                  <Grid item xs={12}>
-                    <Typography variant="h6">
-                      {t("userSettings.analyticsConsent.title")}
-                    </Typography>
-                  </Grid>
-
-                  <Grid item>
-                    <Typography>
-                      {t(
-                        analyticsOn
-                          ? "userSettings.analyticsConsent.consentYes"
-                          : "userSettings.analyticsConsent.consentNo"
-                      )}
-                    </Typography>
-                  </Grid>
-
-                  <Grid item>
-                    <Button
-                      data-testid={UserSettingsIds.ButtonChangeConsent}
-                      id={UserSettingsIds.ButtonChangeConsent}
-                      onClick={() => setDisplayConsent(true)}
-                      variant="outlined"
-                    >
-                      {t("userSettings.analyticsConsent.button")}
-                    </Button>
-                  </Grid>
+                <Stack alignItems="flex-start" spacing={2}>
+                  <Typography variant="h6">
+                    {t("userSettings.analyticsConsent.title")}
+                  </Typography>
+
+                  <Typography>
+                    {t(
+                      analyticsOn
+                        ? "userSettings.analyticsConsent.consentYes"
+                        : "userSettings.analyticsConsent.consentNo"
+                    )}
+                  </Typography>
+
+                  <Button
+                    data-testid={UserSettingsIds.ButtonChangeConsent}
+                    id={UserSettingsIds.ButtonChangeConsent}
+                    onClick={() => setDisplayConsent(true)}
+                    variant="outlined"
+                  >
+                    {t("userSettings.analyticsConsent.button")}
+                  </Button>
+
                   {displayConsent && (
                     <AnalyticsConsent
                       onChangeConsent={handleConsentChange}
                       required={false}
                     />
                   )}
-                </Grid>
+                </Stack>
               )}
 
-              <Grid item container justifyContent="flex-end">
+              {/* Save button */}
+              <Grid2 container justifyContent="flex-end">
                 <Button
                   data-testid={UserSettingsIds.ButtonSubmit}
                   disabled={disabled}
@@ -339,11 +329,11 @@ export function UserSettings(props: {
                 >
                   {t("buttons.save")}
                 </Button>
-              </Grid>
-            </Grid>
-          </CardContent>
-        </form>
+              </Grid2>
+            </Stack>
+          </form>
+        </CardContent>
       </Card>
-    </Grid>
+    </Grid2>
   );
 }