diff --git a/CHANGELOG.md b/CHANGELOG.md
index b357e364f..f9bfbefa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file, in reverse chronological order by release.
 
+## Next Release - TBD
+
+### Added
+
+- Nothing.
+
+### Changed
+
+- Improved styles across the application.
+- Updated dependencies.
+
+### Deprecated
+
+- Nothing.
+
+### Removed
+
+- Nothing.
+
+### Fixed
+
+- Nothing.
+
 ## 2.5.1 - 2025-07-05
 
 ### Added
diff --git a/client/components/LogoutButton.tsx b/client/components/LogoutButton.tsx
index a5296cbf5..546a65003 100644
--- a/client/components/LogoutButton.tsx
+++ b/client/components/LogoutButton.tsx
@@ -14,7 +14,7 @@ const LogoutButton = (): React.ReactElement => {
     }, [token]);
     return showButton ? (
         <div className="logout">
-            <a href={logoutUrl} className="button" onClick={clearToken}>
+            <a href={logoutUrl} className="button btn-primary" onClick={clearToken}>
                 Log Out
             </a>
         </div>
diff --git a/client/components/__snapshots__/LogoutButton.test.tsx.snap b/client/components/__snapshots__/LogoutButton.test.tsx.snap
index 436ed7f34..0d00f8a7e 100644
--- a/client/components/__snapshots__/LogoutButton.test.tsx.snap
+++ b/client/components/__snapshots__/LogoutButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`LogoutButton renders correctly when logged in 1`] = `
   className="logout"
 >
   <a
-    className="button"
+    className="button btn-primary"
     href="http://localhost:9000/api/auth/logout"
     onClick={[MockFunction]}
   >
diff --git a/client/components/edit/Breadcrumbs.tsx b/client/components/edit/Breadcrumbs.tsx
index 5b377c01c..b36a2da51 100644
--- a/client/components/edit/Breadcrumbs.tsx
+++ b/client/components/edit/Breadcrumbs.tsx
@@ -1,4 +1,3 @@
-import styles from "../shared/Breadcrumbs.module.css";
 import React, { useEffect, useState } from "react";
 import BasicBreadcrumbs from "../shared/BasicBreadcrumbs";
 import { TreeNode, processBreadcrumbData } from "../../util/Breadcrumbs";
@@ -71,7 +70,7 @@ const Breadcrumbs = ({ pid = null, initiallyShallow = true }: BreadcrumbsProps):
             </li>,
         );
         return (
-            <ul className={styles.breadcrumb} key={"breadcrumbs_" + keySuffix}>
+            <ul className="breadcrumbs" key={"breadcrumbs_" + keySuffix}>
                 {breadcrumbs}
             </ul>
         );
diff --git a/client/components/edit/CopyPidButton.tsx b/client/components/edit/CopyPidButton.tsx
index da3e36b83..05fd9086a 100644
--- a/client/components/edit/CopyPidButton.tsx
+++ b/client/components/edit/CopyPidButton.tsx
@@ -8,7 +8,7 @@ interface CopyPidButtonProps {
 const CopyPidButton = ({ pid }: CopyPidButtonProps): React.ReactElement => {
     return (
         <button onClick={() => navigator.clipboard.writeText(pid)}>
-            <ContentCopy style={{ height: "14px" }} titleAccess={`Copy PID (${pid}) to clipboard`} />
+            <ContentCopy titleAccess={`Copy PID (${pid}) to clipboard`} />
         </button>
     );
 };
diff --git a/client/components/edit/DeleteObjectButton.module.css b/client/components/edit/DeleteObjectButton.module.css
new file mode 100644
index 000000000..7957a1f91
--- /dev/null
+++ b/client/components/edit/DeleteObjectButton.module.css
@@ -0,0 +1,7 @@
+.deleteBtn {
+    &:hover,
+    &:focus {
+        background-color: var(--red-11);
+        border-color: var(--red-11);
+    }
+}
diff --git a/client/components/edit/DeleteObjectButton.tsx b/client/components/edit/DeleteObjectButton.tsx
index ecfbf6bbd..b75f2e7b8 100644
--- a/client/components/edit/DeleteObjectButton.tsx
+++ b/client/components/edit/DeleteObjectButton.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import styles from "./DeleteObjectButton.module.css";
 import { useEditorContext } from "../../context/EditorContext";
 import Delete from "@mui/icons-material/Delete";
 import { getObjectParentsUrl, getObjectRecursiveChildPidsUrl } from "../../util/routes";
@@ -91,7 +92,7 @@ const DeleteObjectButton = ({ pid }: DeleteObjectButtonProps): React.ReactElemen
     };
     const visible = statusMessage.length === 0 && trashPid && loaded && childPidResponse?.pid === pid;
     return visible ? (
-        <button onClick={performDelete}>
+        <button className={`object-delete-btn ${styles.deleteBtn}`} onClick={performDelete}>
             <Delete style={{ height: "14px" }} titleAccess="Delete Object and Children" />
         </button>
     ) : (
diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
new file mode 100644
index 000000000..5ee57a156
--- /dev/null
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -0,0 +1,22 @@
+.objectBar {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    width: fit-content;
+
+    & button {
+        width: fit-content;
+        white-space: nowrap;
+        border-inline-width: 0;
+        border-radius: 0;
+
+        &:first-child {
+            border-inline-start-width: 1px;
+            border-radius: 4px 0 0 4px;
+        }
+
+        &:last-child {
+            border-inline-end-width: 1px;
+            border-radius: 0 4px 4px 0;
+        }
+    }
+}
diff --git a/client/components/edit/ObjectButtonBar.test.tsx b/client/components/edit/ObjectButtonBar.test.tsx
index 37147ce2b..3efa27095 100644
--- a/client/components/edit/ObjectButtonBar.test.tsx
+++ b/client/components/edit/ObjectButtonBar.test.tsx
@@ -41,7 +41,7 @@ describe("ObjectButtonBar", () => {
     it("can refresh a list of children", async () => {
         render(<ObjectButtonBar pid={pid} />);
         const refreshIcon = screen.getByRole("button");
-        expect(refreshIcon.textContent).toEqual("Refresh children");
+        expect(refreshIcon.textContent.trim()).toEqual("Refresh");
         await userEvent.setup().click(refreshIcon);
         await waitFor(() => expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledTimes(1));
         expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledWith(pid);
diff --git a/client/components/edit/ObjectButtonBar.tsx b/client/components/edit/ObjectButtonBar.tsx
index 75ac4d8a0..674dce7b8 100644
--- a/client/components/edit/ObjectButtonBar.tsx
+++ b/client/components/edit/ObjectButtonBar.tsx
@@ -1,11 +1,14 @@
 import React from "react";
+import styles from "./ObjectButtonBar.module.css";
+
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectPreviewButton from "./ObjectPreviewButton";
 import ObjectStatus from "./ObjectStatus";
-import Refresh from "@mui/icons-material/Refresh";
 import EditParentsButton from "./EditParentsButton";
 import DeleteObjectButton from "./DeleteObjectButton";
 
+import RefreshIcon from "@mui/icons-material/Refresh";
+
 export interface ObjectButtonBarProps {
     pid: string;
 }
@@ -16,15 +19,21 @@ const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
     } = useEditorContext();
 
     return (
-        <>
+        <div className={styles.objectBar}>
             <ObjectStatus pid={pid} />
             <EditParentsButton pid={pid} />
-            <button onClick={() => clearPidFromChildListStorage(pid)}>
-                <Refresh style={{ height: "14px" }} titleAccess="Refresh children" />
+            <button
+                type="button"
+                className={styles.refreshBtn}
+                onClick={() => clearPidFromChildListStorage(pid)}
+                title="Refresh children"
+            >
+                <RefreshIcon />
+                Refresh
             </button>
             <ObjectPreviewButton pid={pid} />
             <DeleteObjectButton pid={pid} />
-        </>
+        </div>
     );
 };
 
diff --git a/client/components/edit/ObjectEditor.tsx b/client/components/edit/ObjectEditor.tsx
index ae464a9d6..d12805267 100644
--- a/client/components/edit/ObjectEditor.tsx
+++ b/client/components/edit/ObjectEditor.tsx
@@ -33,7 +33,7 @@ const ObjectEditor = ({ pid }: ObjectEditorProps): React.ReactElement => {
             <h1>Editor: Object {pid}</h1>
             <ObjectSummary />
             <Grid container>
-                <Grid item xs={4}>
+                <Grid item md>
                     <Box>
                         <h3>Object Tools</h3>
                         <ul>
@@ -43,7 +43,7 @@ const ObjectEditor = ({ pid }: ObjectEditorProps): React.ReactElement => {
                         </ul>
                     </Box>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item md>
                     <Box>
                         <h3>Datastreams</h3>
                         <DatastreamList />
diff --git a/client/components/edit/ObjectOrder.tsx b/client/components/edit/ObjectOrder.tsx
index 224afc3fb..7e9129e14 100644
--- a/client/components/edit/ObjectOrder.tsx
+++ b/client/components/edit/ObjectOrder.tsx
@@ -72,7 +72,7 @@ const ObjectOrder = ({ pid }: ObjectOrderProps): React.ReactElement => {
         <div>{statusMessage}</div>
     ) : (
         <div>
-            Current sort: {currentSort}
+            Current sort: {currentSort}&nbsp;
             <button
                 onClick={() => {
                     changeSort(otherSort);
diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css
index ad8cbe4ed..752f9b9da 100644
--- a/client/components/edit/ObjectStatus.module.css
+++ b/client/components/edit/ObjectStatus.module.css
@@ -1,19 +1,47 @@
-.active .indicator {
-    color: green;
+.status_btn {
+    min-width: 120px;
+
+    &:is(:hover, &:focus) {
+        color: white;
+    }
 }
 
-.inactive .indicator {
-    color: yellow;
+.status_btn.active {
+    background-color: var(--object-status-active);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-active-text);
+        border-color: var(--object-status-active-text);
+    }
 }
 
-.deleted .indicator {
-    color: red;
+.status_btn.inactive {
+    background-color: var(--object-status-inactive);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-inactive-text);
+        border-color: var(--object-status-inactive-text);
+    }
 }
 
-.unknown .indicator {
-    color: gray;
+.status_btn.deleted {
+    background-color: var(--object-status-deleted);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-deleted-text);
+        border-color: var(--object-status-deleted-text);
+    }
 }
 
-.indicator {
-    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
+.status_btn.unknown {
+    background-color: var(--object-status-unknown);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-unknown-text);
+        border-color: var(--object-status-unknown-text);
+    }
 }
diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 3cbfe67ca..9a1bfa5d4 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -1,13 +1,31 @@
-import styles from "./ObjectStatus.module.css";
 import React from "react";
+import styles from "./ObjectStatus.module.css";
+
 import { useGlobalContext } from "../../context/GlobalContext";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectLoader from "./ObjectLoader";
 
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import ModeStandbyIcon from "@mui/icons-material/ModeStandby";
+
 export interface ObjectStatusProps {
     pid: string;
 }
 
+function getStatusIcon(statusText: string) {
+    switch (statusText) {
+        case "Active":
+            return <CheckCircleIcon />;
+        case "Deleted":
+            return <CloseIcon />;
+        case "Inactive":
+            return <ModeStandbyIcon />;
+    }
+    return <HelpOutlineIcon />;
+}
+
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
     const {
         action: { openModal },
@@ -19,15 +37,15 @@ export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement =>
     const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
     const details = loaded ? objectDetailsStorage[pid] : {};
 
-    const stateTxt = details.state ?? "Unknown";
+    const stateText = details.state ?? "Unknown";
     const clickAction = () => {
         setStateModalActivePid(pid);
         openModal("state");
     };
     const stateMsg = loaded ? (
-        <button onClick={clickAction} className={styles[stateTxt.toLowerCase()]}>
-            <span className={styles.indicator}>&#9673;</span>&nbsp;
-            {stateTxt}
+        <button onClick={clickAction} className={`${styles.status_btn} ${styles[stateText.toLowerCase()]}`}>
+            <span className={styles.indicator}>{getStatusIcon(stateText)}</span>&nbsp;
+            {stateText}
         </button>
     ) : (
         ""
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 92a31470e..ca95a6355 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -1,9 +1,21 @@
 .infobox {
-    background-color: lightgray;
-    border: 1px solid black;
-    padding: 5px;
+    padding-inline: 1lh;
+    padding-block: 1rem;
+    color: var(--info-text);
+    background-color: var(--info);
+    border: 1px solid var(--info-border);
 }
 
 .infobox h2 {
     margin: 0;
-}
\ No newline at end of file
+}
+
+.infobox button {
+    min-width: unset;
+    padding-block: 0.5em 0.4em;
+
+    &:not(:hover,:focus) {
+        background-color: white;
+        border-color: black;
+    }
+}
diff --git a/client/components/edit/ObjectSummary.tsx b/client/components/edit/ObjectSummary.tsx
index 2801f8e76..047d8d078 100644
--- a/client/components/edit/ObjectSummary.tsx
+++ b/client/components/edit/ObjectSummary.tsx
@@ -1,7 +1,8 @@
-import styles from "./ObjectSummary.module.css";
-import CopyPidButton from "./CopyPidButton";
 import React, { useEffect } from "react";
 import HtmlReactParser from "html-react-parser";
+
+import styles from "./ObjectSummary.module.css";
+import CopyPidButton from "./CopyPidButton";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectButtonBar from "./ObjectButtonBar";
 import ObjectModels from "./ObjectModels";
@@ -38,7 +39,13 @@ const ObjectSummary = (): React.ReactElement => {
             </div>
             <h2>{title}</h2>
             <div>{HtmlReactParser(description)}</div>
-            {loaded ? <ObjectButtonBar pid={currentPid} /> : ""}
+            {loaded ? (
+                <div style={{ marginBlock: "1rem" }}>
+                    <ObjectButtonBar pid={currentPid} />
+                </div>
+            ) : (
+                ""
+            )}
             {loaded ? <ObjectOrder pid={currentPid} /> : ""}
             {loaded ? <ObjectChildCounts pid={currentPid} /> : ""}
             PID: {currentPid} <CopyPidButton pid={currentPid} />
diff --git a/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap b/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
index a41dbb442..22d02b6b1 100644
--- a/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb renders using ajax-loaded object data (deep parent chain) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -180,7 +180,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (deep parent chain) 1`
 exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mode) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -214,7 +214,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -248,7 +248,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -282,7 +282,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -316,7 +316,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -350,7 +350,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -384,7 +384,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -418,7 +418,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -452,7 +452,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -486,7 +486,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -520,7 +520,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -554,7 +554,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -588,7 +588,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -622,7 +622,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -656,7 +656,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -695,7 +695,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
 exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow mode) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -736,7 +736,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -777,7 +777,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -818,7 +818,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -859,7 +859,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -900,7 +900,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -941,7 +941,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -982,7 +982,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1023,7 +1023,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1064,7 +1064,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1105,7 +1105,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1146,7 +1146,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1187,7 +1187,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1228,7 +1228,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1269,7 +1269,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1315,7 +1315,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
 exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with common grandparent) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1359,7 +1359,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1407,7 +1407,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with
 
 exports[`Breadcrumb renders using ajax-loaded object data (no parents, deep mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1434,7 +1434,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (no parents, deep mode
 
 exports[`Breadcrumb renders using ajax-loaded object data (no parents, shallow mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1461,7 +1461,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (no parents, shallow m
 
 exports[`Breadcrumb renders using ajax-loaded object data (simple case, deep mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1498,7 +1498,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (simple case, deep mod
 
 exports[`Breadcrumb renders using ajax-loaded object data (simple case, shallow mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1542,7 +1542,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (simple case, shallow
 
 exports[`Breadcrumb renders without a pid 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
diff --git a/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap b/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
index e778aa445..cfcd3a8e3 100644
--- a/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
+++ b/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`DeleteObjectButton renders correctly when data is loaded 1`] = `
 <button
+  className="object-delete-btn deleteBtn"
   onClick={[Function]}
 >
   DeleteIcon
diff --git a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
index 8631c553b..76bc51279 100644
--- a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
@@ -1,15 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ObjectButtonBar renders correctly 1`] = `
-[
-  "ObjectStatus",
-  "EditParentsButton",
+<div
+  className="objectBar"
+>
+  ObjectStatus
+  EditParentsButton
   <button
+    className="refreshBtn"
     onClick={[Function]}
+    title="Refresh children"
+    type="button"
   >
-    Refresh children
-  </button>,
-  "ObjectPreviewButton",
-  "DeleteObjectButton",
-]
+    Refresh
+  </button>
+  ObjectPreviewButton
+  DeleteObjectButton
+</div>
 `;
diff --git a/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap b/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
index 65e62ea6b..678bfcda0 100644
--- a/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ObjectEditor renders 1`] = `
     className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-md-true css-ehu4kr-MuiGrid-root"
     >
       <div
         className="MuiBox-root css-0"
@@ -35,7 +35,7 @@ exports[`ObjectEditor renders 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-md-true css-ehu4kr-MuiGrid-root"
     >
       <div
         className="MuiBox-root css-0"
diff --git a/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap b/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
index 3105ca90b..d8b597aa3 100644
--- a/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`ObjectOrder defaults to title order for a pending object 1`] = `
 <div>
   Current sort: 
   title
+   
   <button
     onClick={[Function]}
   >
@@ -17,6 +18,7 @@ exports[`ObjectOrder displays a custom-sorted object correctly 1`] = `
 <div>
   Current sort: 
   custom
+   
   <button
     onClick={[Function]}
   >
diff --git a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
index 6a0f8aaa4..79ce7af0a 100644
--- a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
@@ -3,13 +3,23 @@
 exports[`ObjectStatus defaults to unknown state 1`] = `
 [
   <button
-    className="unknown"
+    className="status_btn unknown"
     onClick={[Function]}
   >
     <span
       className="indicator"
     >
-      ◉
+      <svg
+        aria-hidden={true}
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="HelpOutlineIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+        />
+      </svg>
     </span>
      
     Unknown
@@ -21,13 +31,23 @@ exports[`ObjectStatus defaults to unknown state 1`] = `
 exports[`ObjectStatus displays the state found in the response 1`] = `
 [
   <button
-    className="inactive"
+    className="status_btn inactive"
     onClick={[Function]}
   >
     <span
       className="indicator"
     >
-      ◉
+      <svg
+        aria-hidden={true}
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="ModeStandbyIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"
+        />
+      </svg>
     </span>
      
     Inactive
diff --git a/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap b/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
index d8c87e4f5..efa42b9ca 100644
--- a/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
@@ -57,7 +57,15 @@ exports[`ObjectSummary renders information from metadata when available 1`] = `
       !
     </p>
   </div>
-  ObjectButtonBar
+  <div
+    style={
+      {
+        "marginBlock": "1rem",
+      }
+    }
+  >
+    ObjectButtonBar
+  </div>
   ObjectOrder
   ObjectChildCounts
   PID: 
diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx
index c4e89458c..4ca6b3f17 100644
--- a/client/components/edit/children/Child.tsx
+++ b/client/components/edit/children/Child.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from "react";
+
+import styles from "./ChildList.module.css";
+
 import { useEditorContext } from "../../../context/EditorContext";
 import ChildList from "./ChildList";
 import ChildPosition from "./ChildPosition";
@@ -41,7 +44,11 @@ export const Child = ({
     const title = !loaded ? initialTitle : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
     const expandControl = (
         <span onClick={() => setExpanded(!expanded)}>
-            {expanded ? <IndeterminateCheckBox titleAccess="Collapse Tree" /> : <AddBox titleAccess="Expand Tree" />}
+            {expanded ? (
+                <IndeterminateCheckBox titleAccess="Collapse Tree" className={styles.childlist__expandicon} />
+            ) : (
+                <AddBox titleAccess="Expand Tree" className={styles.childlist__expandicon} />
+            )}
         </span>
     );
     const childList = expanded ? (
@@ -52,34 +59,36 @@ export const Child = ({
             forceModels={models}
             forceThumbs={thumbnail}
         />
-    ) : (
-        ""
-    );
+    ) : null;
     const hasExtraTools = thumbnail || models || showChildCounts;
     const extraTools = hasExtraTools ? (
-        <Grid item xs={1}>
+        <Grid item>
             {thumbnail ? <ObjectThumbnail pid={pid} /> : ""}
             {showChildCounts ? <ObjectChildCounts pid={pid} /> : ""}
             {models ? <ObjectModels pid={pid} /> : ""}
         </Grid>
     ) : null;
     return (
-        <>
-            <Grid container>
-                <Grid item xs={hasExtraTools ? 7 : 8}>
-                    {expandControl}
-                    {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
-                    <Link href={"/edit/object/" + pid}>{(title.length > 0 ? title : "-") + ` [${pid}]`}</Link>{" "}
+        <div className={styles.childlist__item}>
+            <Grid container spacing={2} alignItems="center">
+                <Grid item xs>
+                    {expandControl} {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
+                    <Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
+                </Grid>
+                {extraTools}
+                <Grid item xs={1} className={styles.childlist__pid}>
+                    {pid}
+                </Grid>
+                <Grid item xs="none">
                     <CopyPidButton pid={pid} />
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item xs="none" style={{ textAlign: "right" }}>
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
-                {extraTools}
             </Grid>
             {childList}
-        </>
+        </div>
     );
 };
 
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 7b13a2d4c..dca83bb2e 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -1,7 +1,67 @@
 .childlist {
+    padding-inline: 1rem;
+    padding-block: 1px;
+    color: CanvasText;
+    background-color: var(--soft);
+}
+
+.childlist__list {
+    margin-block: 0;
+    padding-inline: 0;
     list-style-type: none;
 }
+.childlist__list > li {
+    margin-block: 0;
+    border-block-start: 1px solid var(--edge);
+}
+
+.childlist__item {
+    margin-block: 0;
+    padding-block: 0.25rem;
+}
+
+svg.childlist__expandicon {
+    font-size: 21px;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        color: var(--active);
+    }
+}
+
+.childlist__pid {
+    font-family: var(--family-monospace);
+    text-align: end;
+    color: var(--text-muted);
+}
+
+.childlist__toggles {
+    display: flex;
+    gap: 1ch;
+}
+
+/* Nested */
+
+.childlist__list {
+    .childlist {
+        margin-inline-start: 0.5rem;
+        margin-block-end: -0.25em;
+        padding-inline-end: 0;
+        border-inline-start: 1px solid var(--edge);
+    }
 
-.childlist li {
-    border-top: 1px solid gray;
+    .childlist__pagination {
+        margin-block: 0.25em;
+        font-size: 10pt;
+    }
+}
+
+/* Pagination alignment */
+
+.childlist .pagination {
+    margin-block-end: 1px;
+}
+.childlist .pagination li {
+    margin: 0;
 }
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index 63f49c3ff..b646e5a08 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -4,6 +4,7 @@ import { useEditorContext } from "../../../context/EditorContext";
 import Child from "./Child";
 import SelectableChild from "./SelectableChild";
 import CircularProgress from "@mui/material/CircularProgress";
+import Grid from "@mui/material/Grid";
 import Pagination from "@mui/material/Pagination";
 
 export interface ChildListProps {
@@ -54,11 +55,9 @@ export const ChildList = ({
     }
     const children = childListStorage[key];
     const childDocs = children.docs;
-    const buttonStyles = { float: "right", marginTop: "-2em" };
     const childButton =
         forceChildCounts === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowChildCounts(!showChildCounts);
                 }}
@@ -69,7 +68,6 @@ export const ChildList = ({
     const modelsButton =
         forceModels === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowModels(!showModels);
                 }}
@@ -80,7 +78,6 @@ export const ChildList = ({
     const thumbsButton =
         forceThumbs === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowThumbs(!showThumbs);
                 }}
@@ -88,34 +85,29 @@ export const ChildList = ({
                 {showThumbs ? "Hide Thumbnails" : "Show Thumbnails"}
             </button>
         ) : null;
-    const contents =
-        childDocs.length > 0 ? (
-            childDocs.map((child: Record<string, string>) => {
-                return (
-                    <li key={`${pid}_child_${child.id}`}>
-                        {selectCallback === false ? (
-                            <Child
-                                pid={child.id}
-                                parentPid={pid}
-                                initialTitle={child.title ?? "-"}
-                                thumbnail={forceThumbs ?? showThumbs}
-                                models={forceModels ?? showModels}
-                                showChildCounts={forceChildCounts ?? showChildCounts}
-                            />
-                        ) : (
-                            <SelectableChild
-                                pid={child.id}
-                                selectCallback={selectCallback}
-                                initialTitle={child.title ?? "-"}
-                                thumbnail={forceThumbs ?? showThumbs}
-                            />
-                        )}
-                    </li>
-                );
-            })
-        ) : (
-            <p>Empty.</p>
+    const contents = childDocs.map((child: Record<string, string>) => {
+        return (
+            <li key={`${pid}_child_${child.id}`}>
+                {selectCallback === false ? (
+                    <Child
+                        pid={child.id}
+                        parentPid={pid}
+                        initialTitle={child.title ?? "-"}
+                        thumbnail={forceThumbs ?? showThumbs}
+                        models={forceModels ?? showModels}
+                        showChildCounts={forceChildCounts ?? showChildCounts}
+                    />
+                ) : (
+                    <SelectableChild
+                        pid={child.id}
+                        selectCallback={selectCallback}
+                        initialTitle={child.title ?? "-"}
+                        thumbnail={forceThumbs ?? showThumbs}
+                    />
+                )}
+            </li>
         );
+    });
     const pageCount = Math.ceil(children.numFound / pageSize);
     const paginator =
         pageCount > 1 ? (
@@ -135,20 +127,31 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p>
+            <p className={styles.childlist__pagination}>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
         ) : null;
     return (
-        <>
-            {thumbsButton}
-            {modelsButton}
-            {childButton}
-            {paginatorLabel}
-            {paginator}
-            <ul className={styles.childlist}>{contents}</ul>
-        </>
+        <div className={styles.childlist}>
+            <Grid container spacing={2} alignItems="center">
+                <Grid item xs="auto">
+                    {paginatorLabel}
+                </Grid>
+                <Grid item xs="auto">
+                    {paginator}
+                </Grid>
+                <Grid item xs>
+                    &nbsp;
+                </Grid>
+                <Grid item xs="auto" className={styles.childlist__toggles}>
+                    {thumbsButton}
+                    {modelsButton}
+                    {childButton}
+                </Grid>
+            </Grid>
+            <ul className={styles.childlist__list}>{contents.length ? contents : <em>Empty.</em>}</ul>
+        </div>
     );
 };
 
diff --git a/client/components/edit/children/__snapshots__/Child.test.tsx.snap b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
index 5871a0d96..bb5ad869c 100644
--- a/client/components/edit/children/__snapshots__/Child.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
@@ -2,236 +2,326 @@
 
 exports[`Child handles empty titles appropriately 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      - [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        -
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders a thumbnail 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectThumbnail: {"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectThumbnail: {"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders child counts 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectChildCounts:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectChildCounts:{"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders thumbnail and child counts 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectThumbnail: {"pid":"foo:123"}
-    ObjectChildCounts:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectThumbnail: {"pid":"foo:123"}
+      ObjectChildCounts:{"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders using ajax-loaded data 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
diff --git a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
index 2bf38834d..1f6c7c5a0 100644
--- a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
@@ -1,187 +1,203 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChildList allows child counts to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Hide Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Hide Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList allows models to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Hide Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Hide Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList allows thumbnails to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Hide Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Hide Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList displays a paginator when appropriate 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
-  <p>
-    Showing 
-    1
-     - 
-    10
-     of
-     
-    10000
-  </p>,
-  "Pagination",
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <p
+        className="childlist__pagination"
+      >
+        Showing 
+        1
+         - 
+        10
+         of
+         
+        10000
+      </p>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      Pagination
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
@@ -213,141 +229,150 @@ exports[`ChildList displays a paginator when appropriate 1`] = `
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using SelectableChild when a callback is provided 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       SelectableChild
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using ajax-loaded object data 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using ajax-loaded root data 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
diff --git a/client/components/edit/datastream/Datastream.module.css b/client/components/edit/datastream/Datastream.module.css
index c344d0859..167f553dd 100644
--- a/client/components/edit/datastream/Datastream.module.css
+++ b/client/components/edit/datastream/Datastream.module.css
@@ -1,3 +1,31 @@
+.datastream {
+    margin-block: 0.125em;
+    padding-block: 0.375em;
+    border: 1px solid transparent;
+}
+
 .enabled {
-    background-color: #d5e3a5;
-}
\ No newline at end of file
+    color: var(--selected-text);
+    background-color: var(--selected);
+    border-color: var(--selected-border);
+}
+
+div[role="group"] .datastreamControlButton {
+    font-size: 14pt;
+    color: inherit;
+    border-color: var(--mute);
+    opacity: 0.75;
+    transition: none;
+
+    &:disabled {
+        opacity: 0.75;
+        color: var(--mute);
+        border-color: var(--mute);
+    }
+
+    &:hover,
+    &:focus {
+        color: white;
+        background-color: black;
+    }
+}
diff --git a/client/components/edit/datastream/Datastream.tsx b/client/components/edit/datastream/Datastream.tsx
index 8817b1fd0..f3e986114 100644
--- a/client/components/edit/datastream/Datastream.tsx
+++ b/client/components/edit/datastream/Datastream.tsx
@@ -14,7 +14,7 @@ const Datastream = ({ datastream }: DatastreamProps): React.ReactElement => {
     const { stream, disabled } = datastream;
     return (
         <ListItem
-            classes={disabled ? {} : { root: styles.enabled }}
+            classes={{ root: `${styles.datastream} ${disabled ? "" : styles.enabled}` }}
             secondaryAction={<DatastreamControls datastream={stream} disabled={disabled} />}
         >
             <ListItemText primary={stream} />
diff --git a/client/components/edit/datastream/DatastreamControlButton.module.css b/client/components/edit/datastream/DatastreamControlButton.module.css
new file mode 100644
index 000000000..452c9d6a2
--- /dev/null
+++ b/client/components/edit/datastream/DatastreamControlButton.module.css
@@ -0,0 +1,10 @@
+button.datastreamControlButton {
+    font-size: 16pt;
+    transition: none;
+
+    &:hover,
+    &:focus {
+        color: white;
+        background-color: black;
+    }
+}
diff --git a/client/components/edit/datastream/DatastreamControlButton.tsx b/client/components/edit/datastream/DatastreamControlButton.tsx
index e9a0374b4..1a327ae7d 100644
--- a/client/components/edit/datastream/DatastreamControlButton.tsx
+++ b/client/components/edit/datastream/DatastreamControlButton.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import styles from "./DatastreamControlButton.module.css";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Tooltip from "@mui/material/Tooltip";
 import DataObject from "@mui/icons-material/DataObject";
@@ -55,7 +56,7 @@ const DatastreamControlButton = ({
         <Tooltip title={modalState}>
             <span>
                 <LoadingButton
-                    className="datastreamControlButton"
+                    className={styles.datastreamControlButton}
                     loading={isLoading}
                     aria-label={modalState}
                     disabled={modalState !== "Upload" && disabled}
diff --git a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
index da72c1844..e726d5a6d 100644
--- a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Datastream renders 1`] = `
     data-emotion="css 1rki8sg-MuiListItem-root"
   />,
   <li
-    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
+    className="MuiListItem-root datastream  MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
     disabled={false}
   >
     <style
diff --git a/client/components/paginate/JobPaginator.tsx b/client/components/paginate/JobPaginator.tsx
index 307611f49..5f4df72f6 100644
--- a/client/components/paginate/JobPaginator.tsx
+++ b/client/components/paginate/JobPaginator.tsx
@@ -1,8 +1,12 @@
-import React, { useEffect } from "react";
+import type React from "react";
+import { useEffect } from "react";
+
 import JobPaginatorZoomToggle from "./JobPaginatorZoomToggle";
 import PaginatorControls from "./PaginatorControls";
 import PaginatorList from "./PaginatorList";
 import { usePaginatorContext } from "../../context/PaginatorContext";
+
+import Grid from "@mui/material/Grid";
 import Link from "next/link";
 
 interface JobPaginatorProps {
@@ -21,21 +25,28 @@ const JobPaginator = ({ initialCategory, initialJob }: JobPaginatorProps): React
     }, []);
 
     return (
-        <div id="paginator">
-            <div className="row">
-                <div className="six col">
+        <>
+            <ul className="breadcrumbs">
+                <li>
+                    <Link href="/">Main Menu</Link>
+                </li>
+                <li>
+                    <Link href="/paginate">Paginator</Link>
+                </li>
+                <li>
+                    {category} {job}
+                </li>
+            </ul>
+            <Grid container id="paginator">
+                <Grid item xs={6}>
                     <JobPaginatorZoomToggle />
-                </div>
-                <div className="six col">
-                    <p>
-                        <Link href="/">Main Menu</Link> &gt; <Link href="/paginate">Paginator</Link> &gt; {category}{" "}
-                        &gt; {job}
-                    </p>
+                </Grid>
+                <Grid item xs={6}>
                     <PaginatorControls />
                     <PaginatorList />
-                </div>
-            </div>
-        </div>
+                </Grid>
+            </Grid>
+        </>
     );
 };
 
diff --git a/client/components/paginate/PaginatorControls.tsx b/client/components/paginate/PaginatorControls.tsx
index 57f0ee355..1972cb1d2 100644
--- a/client/components/paginate/PaginatorControls.tsx
+++ b/client/components/paginate/PaginatorControls.tsx
@@ -6,6 +6,10 @@ import MagicLabeler from "../../util/MagicLabeler";
 import PaginatorControlGroup from "./PaginatorControlGroup";
 import ZoomToggleButton from "./ZoomToggleButton";
 
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+
 const PaginatorControls = (): React.ReactElement => {
     const {
         state: { currentPage, zoom, order },
@@ -36,39 +40,47 @@ const PaginatorControls = (): React.ReactElement => {
     } = usePaginatorControls(currentPage, getMagicLabel, setLabel);
     return pageCount > 0 ? (
         <div className="controls">
-            <div className="group">
-                <div className="status"></div>
-                <input type="text" value={getLabel(currentPage) ?? ""} id="page" onChange={updateCurrentPageLabel} />
-                <button onClick={prevPage}>Prev</button>
-                <button
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        nextPage();
-                    }}
-                >
-                    Next
-                </button>
-            </div>
-            <div className="top">
-                <ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
-                <button
-                    className="primary"
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        save(false);
-                    }}
-                >
-                    Save
-                </button>
-                <button
-                    className="primary"
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        save(true);
-                    }}
-                >
-                    Save and Publish
-                </button>
+            <div className="top-row">
+                <div className="top-row__left">
+                    <input
+                        type="text"
+                        value={getLabel(currentPage) ?? ""}
+                        id="page"
+                        onChange={updateCurrentPageLabel}
+                    />
+                    <button onClick={prevPage}>Prev</button>
+                    <button
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            nextPage();
+                        }}
+                    >
+                        Next
+                    </button>
+                    <div className="status"></div>
+                </div>
+
+                <div className="top-row__right">
+                    <ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
+                    <button
+                        className="btn-primary"
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            save(false);
+                        }}
+                    >
+                        Save
+                    </button>
+                    <button
+                        className="btn-primary"
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            save(true);
+                        }}
+                    >
+                        Save and Publish
+                    </button>
+                </div>
             </div>
             <PaginatorControlGroup callback={setLabelPrefix} label="prefixes">
                 {MagicLabeler.prefixes}
@@ -79,23 +91,27 @@ const PaginatorControls = (): React.ReactElement => {
             <PaginatorControlGroup callback={setLabelSuffix} label="suffixes">
                 {MagicLabeler.suffixes}
             </PaginatorControlGroup>
-            <div className="toggles group">
-                <button onClick={toggleBrackets} title="Toggle Brackets">
-                    [ ]
-                </button>
-                <button onClick={toggleCase} title="Toggle Case">
-                    <i className="fa fa-text-height"></i>
-                </button>
-                <button onClick={toggleRoman} title="Toggle Roman Numerals">
-                    4<i className="fa fa-fw fa-arrows-alt-h"></i>IV
+            <div className="group">
+                <div className="toggles">
+                    <button onClick={toggleBrackets} title="Toggle Brackets">
+                        [ ]
+                    </button>
+                    <button onClick={toggleCase} title="Toggle Case">
+                        Aa
+                    </button>
+                    <button onClick={toggleRoman} title="Toggle Roman Numerals">
+                        4<CompareArrowsIcon />
+                        IV
+                    </button>
+                    <button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
+                        <AutoFixHighIcon />
+                    </button>
+                </div>
+
+                <button className="delete-btn" onClick={deletePage} title="Delete Current Page">
+                    <DeleteForeverIcon /> Delete Current Page
                 </button>
             </div>
-            <button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
-                <i className="fa fa-sort-numeric-down"></i>
-            </button>
-            <button className="danger" onClick={deletePage} title="Delete Current Page">
-                <i className="fa fa-fw fa-trash"></i> Delete Current Page
-            </button>
         </div>
     ) : (
         // No pages, only show save buttons:
diff --git a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
index 82cd74c74..1965d021b 100644
--- a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
+++ b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
@@ -1,47 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JobPaginator renders 1`] = `
-<div
-  id="paginator"
->
+[
+  <ul
+    className="breadcrumbs"
+  >
+    <li>
+      <a
+        href="/"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Main Menu
+      </a>
+    </li>
+    <li>
+      <a
+        href="/paginate"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Paginator
+      </a>
+    </li>
+    <li>
+      testCategory
+       
+      testJob
+    </li>
+  </ul>,
   <div
-    className="row"
+    className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+    id="paginator"
   >
     <div
-      className="six col"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
     >
       JobPaginatorZoomToggle
     </div>
     <div
-      className="six col"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
     >
-      <p>
-        <a
-          href="/"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Main Menu
-        </a>
-         &gt; 
-        <a
-          href="/paginate"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Paginator
-        </a>
-         &gt; 
-        testCategory
-         
-        &gt; 
-        testJob
-      </p>
       PaginatorControls
       PaginatorList
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
diff --git a/client/components/shared/BasicBreadcrumbs.tsx b/client/components/shared/BasicBreadcrumbs.tsx
index d82f7b94a..9e24421e8 100644
--- a/client/components/shared/BasicBreadcrumbs.tsx
+++ b/client/components/shared/BasicBreadcrumbs.tsx
@@ -1,10 +1,9 @@
-import styles from "./Breadcrumbs.module.css";
 import React from "react";
 import Link from "next/link";
 
 const BasicBreadcrumbs = (): React.ReactElement => {
     return (
-        <ul className={styles.breadcrumb}>
+        <ul className="breadcrumbs">
             <li>
                 <Link href="/">Main Menu</Link>
             </li>
diff --git a/client/components/shared/Breadcrumbs.module.css b/client/components/shared/Breadcrumbs.module.css
deleted file mode 100644
index 5e150d1de..000000000
--- a/client/components/shared/Breadcrumbs.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.breadcrumb li {
-    display: inline;
-}
-
-.breadcrumb li:not(:first-child):before {
-    content: " > "
-}
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index 0156b1333..5ad5549ee 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,7 +9,6 @@
       "dependencies": {
         "@date-io/dayjs": "^2",
         "@emotion/styled": "^11",
-        "@fortawesome/fontawesome-free": "^6",
         "@mui/icons-material": "^5",
         "@mui/lab": "^5.0.0-alpha.150",
         "@mui/material": "^5",
@@ -882,15 +881,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
-      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -2589,17 +2579,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
-      "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
diff --git a/client/package.json b/client/package.json
index 8fd8af768..b70cc8546 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,7 +19,6 @@
   "dependencies": {
     "@date-io/dayjs": "^2",
     "@emotion/styled": "^11",
-    "@fortawesome/fontawesome-free": "^6",
     "@mui/icons-material": "^5",
     "@mui/lab": "^5.0.0-alpha.150",
     "@mui/material": "^5",
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index 44e603ea5..ec5793ce9 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -4,13 +4,16 @@ import { GlobalContextProvider } from "../context/GlobalContext";
 import { PaginatorContextProvider } from "../context/PaginatorContext";
 import { FetchContextProvider } from "../context/FetchContext";
 
-import "../styles/normalize.css";
-import "../styles/application.css";
-import "../styles/client.css";
-import "../styles/justgrid.css";
-import "@fortawesome/fontawesome-free/css/all.min.css";
 import LogoutButton from "../components/LogoutButton";
 
+import "../styles/vendor/modern-normalize.css";
+import "../styles/vendor/colors-radix-light.css";
+
+import "../styles/reset.css";
+import "../styles/variables.css";
+import "../styles/global.css";
+import "../styles/job-paginator.css";
+
 function MyApp({ Component, pageProps }: { Component: React.ReactNode }): React.ReactElement {
     return (
         <GlobalContextProvider>
diff --git a/client/styles/Home.module.css b/client/styles/Home.module.css
deleted file mode 100644
index 32a57d52f..000000000
--- a/client/styles/Home.module.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
diff --git a/client/styles/application.css b/client/styles/application.css
deleted file mode 100644
index 5c6286eda..000000000
--- a/client/styles/application.css
+++ /dev/null
@@ -1,101 +0,0 @@
-body {
-    background: #fafbfc;
-    font-size: 14px;
-    font-family: "Roboto", Arial;
-    font-weight: 500;
-    overflow-x: hidden;
-}
-
-.hidden {
-    display: none;
-}
-
-#jobSelector {
-    margin-left: 1rem;
-}
-
-h2 {
-    margin-top: 2rem;
-    margin-bottom: 0;
-    font-size: 1.6rem;
-    color: #4d4d4d;
-}
-
-ul {
-    margin-top: 0.25rem;
-    padding-left: 1rem;
-    list-style-position: inside;
-}
-li {
-    margin-bottom: 0.25rem;
-}
-
-button,
-.button {
-    display: inline-block;
-    margin: 0 2px;
-    padding: 4px 10px;
-    border: 0;
-    color: #fff;
-    line-height: 1.5;
-    text-decoration: none;
-    background-color: #485a6c;
-    cursor: pointer;
-    border-radius: 5px;
-}
-
-button:hover,
-button:focus,
-button.active,
-.button:hover,
-.button:focus,
-.button.active {
-    background-color: #3498db;
-    border-color: #275575;
-}
-
-button.primary,
-.button.primary {
-    background-color: #27ae60;
-    border-color: #13562f;
-    color: #fff;
-}
-button.primary:hover,
-.button.primary:hover,
-button.primary:focus,
-.button.primary:focus {
-    background-color: #155724;
-}
-
-button.danger,
-.button.danger {
-    background-color: red;
-    margin-left: 20px;
-}
-button.danger:hover,
-.button.danger:hover,
-button.danger:focus,
-.button.danger:focus {
-    background-color: #a10705;
-}
-
-button.btn-link {
-    margin: 0;
-    padding: 0 0.25rem;
-    border-color: transparent;
-    font-weight: bold;
-    color: #008aed;
-    text-decoration: underline;
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.logout {
-    position: absolute;
-    top: 12px;
-    right: 8px;
-}
-.logout .button {
-    background: #1abc9c;
-    border-color: #16a085;
-}
diff --git a/client/styles/client.css b/client/styles/client.css
deleted file mode 100644
index 4456f7797..000000000
--- a/client/styles/client.css
+++ /dev/null
@@ -1,201 +0,0 @@
-p {
-    padding: 0 12px;
-    width: 100%;
-    margin-bottom: 9px;
-}
-.controls {
-    margin-top: 0px;
-    padding: 0 8px;
-}
-.top {
-    position: absolute;
-    top: 41px;
-    right: 8px;
-}
-.top button {
-    margin: 0 2px;
-}
-
-.controls input,
-.status {
-    float: left;
-    margin-right: 4px;
-}
-input {
-    padding: 2px;
-    border: 1px solid #6a737d;
-    border-radius: 4px;
-}
-input:focus {
-    border-color: #2188ff;
-    outline-color: #2188ff;
-    box-shadow: 0 0 0 4px #c8e1ff;
-}
-.status {
-    padding: 0;
-    padding-top: 5px;
-}
-.group input[type="text"] {
-    height: auto;
-    margin-right: 3px;
-    padding: 6px;
-    border: 1px solid #53626f;
-    border-radius: 2px;
-}
-
-form {
-    max-width: 28rem;
-    margin: auto;
-    padding: 1rem;
-}
-label {
-    display: block;
-    padding: 1px 4px;
-    cursor: pointer;
-}
-label:hover {
-    background-color: #c8e1ff;
-}
-label input[type="text"],
-label input[type="number"],
-label input[type="password"] {
-    display: block;
-    width: 100%;
-    margin: 6px 0;
-    padding: 0.5rem 0.75rem;
-    font: inherit;
-}
-label input[type="checkbox"],
-label input[type="radio"] {
-    margin: 0 4px;
-    padding: 0.75rem;
-}
-
-.group {
-    display: block;
-    margin: 4px 2px;
-    margin-left: 0;
-    overflow: hidden;
-}
-.group button {
-    margin: 0;
-    border-right: 1px solid #ececec;
-    color: #fff;
-    border-radius: 0;
-}
-.group input[type="text"] + button,
-.group button:first-child {
-    border-radius: 4px 0 0 4px;
-}
-.group button:last-child {
-    border-right-width: 0;
-    border-radius: 0 4px 4px 0;
-}
-.toggles,
-.toggles + button {
-    display: inline-block;
-    margin-top: 0;
-    margin-right: 4px;
-    vertical-align: top;
-}
-.toggles button,
-.toggles + button {
-    padding: 5px 40px;
-    background-color: #7f8c8d;
-    border-color: #34495e;
-}
-.toggles button:hover,
-.toggles + button:hover,
-.toggles button:focus,
-.toggles + button:focus {
-    background-color: #53626f;
-}
-
-.group#prefixes button {
-    width: 25%;
-}
-.group#labels button {
-    width: 16.66%;
-}
-.group#suffixes button {
-    width: 25%;
-}
-
-.pageList {
-    overflow: auto;
-    height: 600px;
-    margin-top: 0.5rem;
-    margin-left: 8px;
-    padding: 4px;
-    padding-bottom: 400px;
-    border: 1px solid #c1c1c1;
-    background-color: #fff;
-    border-radius: 6px 0 0 6px;
-}
-.thumbnail {
-    position: relative;
-    float: left;
-    display: flex;
-    align-items: center;
-    width: 125px;
-    height: 202px;
-    margin: 2px;
-    padding: 4px;
-    background: #e1e1e1;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    cursor: pointer;
-    word-break: break-all;
-}
-.thumbnail.selected {
-    background: #51aded;
-}
-.thumbnail img {
-    display: block;
-    width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.thumbnail .label {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0.25em;
-    line-height: 1.15;
-}
-.thumbnail .label.magic {
-    font-style: italic;
-}
-.thumbnail .number {
-    position: absolute;
-    display: table;
-    top: 0;
-    left: 0;
-    padding: 2px;
-    font-size: 10px;
-    background: #fff;
-    color: #000;
-}
-.preview,
-#zoomy {
-    text-align: center;
-}
-#zoomy {
-    width: 100%;
-    height: 600px;
-}
-#zoomyStatus {
-    text-align: center;
-}
-
-.preview img {
-  border: 1px solid black;
-}
-
-.MuiTreeItem-root.Mui-selected,
-.MuiTreeItem-root.Mui-selected:hover {
-    color: #fff;
-    background-color: #000;
-}
diff --git a/client/styles/global.css b/client/styles/global.css
new file mode 100644
index 000000000..116291ce6
--- /dev/null
+++ b/client/styles/global.css
@@ -0,0 +1,140 @@
+@layer reset {
+    html {
+        color-scheme: light;
+    }
+
+    body {
+        padding: 0;
+        font-family: var(--family-sans-serif);
+        line-height: 1.5;
+    }
+}
+
+@layer global {
+    a {
+        &:hover,
+        &:focus {
+            color: black;
+        }
+    }
+
+    h1 {
+        margin-block-start: 0;
+    }
+
+    h2,
+    h3,
+    h4 {
+        margin-block: 1em 1rem;
+    }
+
+    p,
+    ol,
+    ul {
+        margin-block: 1rem;
+    }
+
+    /* Focus Outlines */
+
+    :is(a, button, input, textarea, summary) {
+        --outline-size: max(2px, 0.08em);
+        --outline-style: solid;
+        --outline-color: currentColor;
+    }
+
+    /* fallback :focus styles for fallback purposes */
+    :is(a, button, input, textarea, summary):focus,
+    /* :focus-visible styles */
+    :is(a, button, input, textarea):focus-visible {
+        position: relative;
+        outline: var(--outline-size) var(--outline-style) var(--outline-color);
+        outline-offset: var(--outline-offset, var(--outline-size));
+        z-index: 100;
+    }
+
+    /* Remove fallback :focus styles when :focus-visible is available */
+    :is(a, button, input, textarea):focus:not(:focus-visible) {
+        outline: none;
+    }
+}
+
+@layer layout {
+    #__next {
+        position: relative;
+        margin: 0;
+        padding-inline: 1rem;
+        padding-block: 1px;
+    }
+
+    .logout {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+}
+
+@layer components {
+    .breadcrumbs {
+        width: fit-content;
+        margin-block: 1rem;
+        padding-inline: 0;
+        padding-block: 0.5rem;
+        font-size: 0.875rem;
+        list-style: none;
+        background-color: var(--panel);
+    }
+
+    .breadcrumbs li {
+        display: inline;
+    }
+
+    .breadcrumbs li:not(:first-child):before {
+        color: var(--text-muted);
+        content: " ❭ ";
+    }
+
+    button,
+    .button {
+        --outline-color: var(--button-text);
+
+        display: inline-block;
+        padding-inline: 1rem;
+        padding-block: 0.5rem;
+        font-size: 1em;
+        color: var(--button-text);
+        line-height: normal;
+        text-decoration: none;
+        background-color: var(--button-face);
+        border: 1px solid var(--edge);
+        border-radius: 0.25rem;
+        cursor: pointer;
+
+        &:hover {
+            color: Canvas;
+            background-color: CanvasText;
+            border-color: CanvasText;
+
+            --outline-color: CanvasText;
+        }
+    }
+
+    .btn-primary {
+        color: var(--primary-text);
+        background-color: var(--primary);
+        border-color: var(--primary);
+
+        --outline-color: var(--primary);
+    }
+}
+
+/* MUI: better default icon size */
+svg[class*="MuiSvgIcon-root"] {
+    margin-top: 0.1em;
+    font-size: 1em;
+    vertical-align: top;
+}
+
+/* MUI: modal */
+[class*="MuiPaper-root"][class*="MuiDialog-paper"] {
+    background-color: Canvas;
+}
diff --git a/client/styles/globals.css b/client/styles/globals.css
deleted file mode 100644
index e5e2dcc23..000000000
--- a/client/styles/globals.css
+++ /dev/null
@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
new file mode 100644
index 000000000..1c7b05a6c
--- /dev/null
+++ b/client/styles/job-paginator.css
@@ -0,0 +1,202 @@
+/* Layout */
+
+body:has(#paginator) {
+    background-color: var(--soft);
+}
+
+.controls {
+    font-size: 14px;
+}
+
+.pageList {
+    overflow: auto;
+    height: calc(100vh - 17rem);
+    margin-top: 0.5rem;
+    padding: 0.25rem;
+    padding-bottom: 400px;
+    border: 1px solid var(--edge);
+    background-color: Canvas;
+    border-radius: 6px 0 0 6px;
+}
+
+.top-row {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    margin-block: 0.25rem;
+}
+.top-row__left {
+    display: flex;
+    flex: 1 1 0%;
+    gap: 0.25rem;
+}
+.top-row__right {
+    display: flex;
+    flex: 1 1 0%;
+    gap: 0.25rem;
+    justify-content: flex-end;
+}
+
+/* Components */
+
+input {
+    height: 100%;
+    padding: 0.5rem;
+    font: inherit;
+    border: 1px solid var(--edge);
+    border-radius: 0.25rem;
+
+    --outline-color: var(--primary);
+}
+
+form {
+    max-width: 28rem;
+    margin: auto;
+    padding: 1rem;
+}
+label {
+    display: block;
+    padding: 1px 0.25rem;
+    cursor: pointer;
+}
+label:hover {
+    background-color: var(--soft);
+}
+label input[type="text"],
+label input[type="number"],
+label input[type="password"] {
+    display: block;
+    width: 100%;
+    margin: 6px 0;
+    padding: 0.5rem 0.75rem;
+    font: inherit;
+}
+label input[type="checkbox"],
+label input[type="radio"] {
+    margin: 0 0.25rem;
+    padding: 0.75rem;
+}
+
+.group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    margin-block: 0.25rem;
+}
+.group button {
+    width: 100%;
+    color: white;
+    background-color: var(--slate-11);
+    border-color: black;
+    border-right-width: 0;
+    border-radius: 0;
+
+    &:hover,
+    &:focus {
+        background-color: black;
+    }
+}
+.group button:first-child,
+.group input[type="text"] + button {
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+.group button:last-child {
+    border-right-width: 1px;
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.group:has(.toggles) {
+    gap: 0.25rem;
+}
+.toggles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-column: 1 / 3;
+}
+.toggles button:not(:hover) {
+    color: var(--text);
+    background-color: white;
+}
+
+.controls button.delete-btn {
+    border-radius: 0.25rem;
+
+    &:hover {
+        color: var(--danger-text);
+        background-color: var(--danger);
+        border-color: var(--danger-text);
+    }
+}
+
+.thumbnail {
+    float: left;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 125px;
+    height: 202px;
+    margin: 2px;
+    padding: 0.25rem;
+    font-weight: 400;
+    text-align: center;
+    word-break: break-all;
+    background-color: var(--soft);
+    border: 1px solid var(--edge);
+    cursor: pointer;
+}
+.thumbnail.selected {
+    background-color: var(--selected);
+    border-color: var(--selected-border);
+}
+.thumbnail img {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.thumbnail .label {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0.25em;
+    line-height: 1.15;
+}
+.thumbnail .label.magic {
+    font-style: italic;
+}
+.thumbnail .number {
+    position: absolute;
+    display: table;
+    top: -1px;
+    left: -1px;
+    padding-inline: 0.75ch;
+    padding-block: 0.25ch;
+    font-family: monospace;
+    font-weight: 700;
+    font-size: 10px;
+    color: var(--mute);
+    background-color: Canvas;
+    border: inherit;
+}
+
+.preview,
+#zoomy {
+    text-align: center;
+}
+#zoomy {
+    width: 100%;
+    height: 600px;
+}
+#zoomyStatus {
+    text-align: center;
+}
+
+.preview img {
+    border: 1px solid black;
+}
+
+.MuiTreeItem-root.Mui-selected,
+.MuiTreeItem-root.Mui-selected:hover {
+    color: var(--button-hover-text);
+    background-color: var(--button-hover);
+}
diff --git a/client/styles/normalize.css b/client/styles/normalize.css
deleted file mode 100644
index 2e2610e91..000000000
--- a/client/styles/normalize.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
\ No newline at end of file
diff --git a/client/styles/reset.css b/client/styles/reset.css
new file mode 100644
index 000000000..4a04e0ff1
--- /dev/null
+++ b/client/styles/reset.css
@@ -0,0 +1,2 @@
+@layer reset {
+}
diff --git a/client/styles/variables.css b/client/styles/variables.css
new file mode 100644
index 000000000..ee635e157
--- /dev/null
+++ b/client/styles/variables.css
@@ -0,0 +1,55 @@
+/* Radix colors imported in _app.tsx */
+
+:root {
+    --soft: var(--slate-02);
+    --edge: var(--slate-07);
+    --mute: var(--slate-11);
+    --text: var(--slate-12);
+}
+
+:root {
+    --text-muted: var(--mute);
+
+    --family-sans-serif: system-ui, ui-sans-serif, sans-serif;
+    --family-serif: ui-serif, serif;
+    --family-monospace: ui-monospace, monospace;
+
+    --primary: var(--sky-11);
+    --primary-text: white;
+
+    --secondary: var(--mute);
+    --secondary-text: white;
+
+    --button-face: white;
+    --button-text: black;
+
+    --button-hover: black;
+    --button-hover-text: white;
+
+    --active: var(--red-11);
+    --active-text: white;
+
+    --selected: var(--green-03);
+    --selected-text: black;
+    --selected-border: var(--green-07);
+
+    --info: var(--sky-02);
+    --info-text: var(--sky-11);
+    --info-border: var(--sky-07);
+
+    --success: var(--green-02);
+    --success-text: var(--green-11);
+
+    --danger: var(--red-02);
+    --danger-text: var(--red-11);
+
+    --object-status-active: var(--green-03);
+    --object-status-inactive: var(--yellow-03);
+    --object-status-deleted: var(--red-03);
+    --object-status-unknown: var(--gray-03);
+
+    --object-status-active-text: var(--green-11);
+    --object-status-inactive-text: var(--yellow-11);
+    --object-status-deleted-text: var(--red-11);
+    --object-status-unknown-text: var(--gray-11);
+}
diff --git a/client/styles/vendor/colors-radix-light.css b/client/styles/vendor/colors-radix-light.css
new file mode 100644
index 000000000..e39135a33
--- /dev/null
+++ b/client/styles/vendor/colors-radix-light.css
@@ -0,0 +1,408 @@
+/**
+ * @see https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
+ * @see https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette
+ */
+:root {
+    --amber-01: oklch(0.994 0.003 84.62);
+    --amber-02: oklch(0.9862 0.024 100.26);
+    --amber-03: oklch(0.969 0.069 100.36);
+    --amber-04: oklch(0.9454 0.104 98.19);
+    --amber-05: oklch(0.9184 0.133 98.4);
+    --amber-06: oklch(0.8812 0.124 93.24);
+    --amber-07: oklch(0.8274 0.122 86.18);
+    --amber-08: oklch(0.7582 0.14 76.7);
+    --amber-09: oklch(0.8562 0.178 81.37);
+    --amber-10: oklch(0.8315 0.168 80.94);
+    --amber-11: oklch(0.5692 0.144 67.28);
+    --amber-12: oklch(0.3519 0.049 53.74);
+
+    --blue-01: oklch(0.9932 0.003 247.64);
+    --blue-02: oklch(0.9815 0.01 243.26);
+    --blue-03: oklch(0.96 0.02 236.71);
+    --blue-04: oklch(0.9373 0.037 239.03);
+    --blue-05: oklch(0.906 0.053 242.8);
+    --blue-06: oklch(0.8638 0.069 243.18);
+    --blue-07: oklch(0.8092 0.088 243.34);
+    --blue-08: oklch(0.7348 0.121 243);
+    --blue-09: oklch(0.6493 0.193 251.81);
+    --blue-10: oklch(0.6211 0.184 251.92);
+    --blue-11: oklch(0.5577 0.189 253.01);
+    --blue-12: oklch(0.324 0.097 258.96);
+
+    --bronze-01: oklch(0.9915 0.001 15.92);
+    --bronze-02: oklch(0.9806 0.007 42.99);
+    --bronze-03: oklch(0.9528 0.01 44.26);
+    --bronze-04: oklch(0.9252 0.014 43.57);
+    --bronze-05: oklch(0.8954 0.018 42.64);
+    --bronze-06: oklch(0.8599 0.023 43.4);
+    --bronze-07: oklch(0.8113 0.03 41.94);
+    --bronze-08: oklch(0.7418 0.039 41.18);
+    --bronze-09: oklch(0.6275 0.046 44.29);
+    --bronze-10: oklch(0.588 0.045 42.44);
+    --bronze-11: oklch(0.5105 0.044 38.37);
+    --bronze-12: oklch(0.3292 0.029 35.24);
+
+    --brown-01: oklch(0.9943 0.002 63.24);
+    --brown-02: oklch(0.9832 0.006 65.73);
+    --brown-03: oklch(0.9541 0.013 67.82);
+    --brown-04: oklch(0.9261 0.02 66.85);
+    --brown-05: oklch(0.8969 0.029 65.79);
+    --brown-06: oklch(0.8624 0.039 65.47);
+    --brown-07: oklch(0.8153 0.053 64.22);
+    --brown-08: oklch(0.7467 0.072 62.45);
+    --brown-09: oklch(0.6327 0.078 60.77);
+    --brown-10: oklch(0.5967 0.072 59.28);
+    --brown-11: oklch(0.5121 0.058 55.46);
+    --brown-12: oklch(0.3315 0.018 46.98);
+
+    --crimson-01: oklch(0.9938 0.003 356.31);
+    --crimson-02: oklch(0.9818 0.008 357.23);
+    --crimson-03: oklch(0.9541 0.026 356.27);
+    --crimson-04: oklch(0.9252 0.041 356.3);
+    --crimson-05: oklch(0.8928 0.054 355.77);
+    --crimson-06: oklch(0.855 0.065 355.57);
+    --crimson-07: oklch(0.8078 0.078 354.8);
+    --crimson-08: oklch(0.75 0.099 354.12);
+    --crimson-09: oklch(0.6343 0.213 1.3);
+    --crimson-10: oklch(0.608 0.211 2.36);
+    --crimson-11: oklch(0.5521 0.207 4.49);
+    --crimson-12: oklch(0.3408 0.113 356.83);
+
+    --cyan-01: oklch(0.9921 0.004 219.25);
+    --cyan-02: oklch(0.9803 0.009 202.89);
+    --cyan-03: oklch(0.9581 0.026 203.61);
+    --cyan-04: oklch(0.9319 0.041 204.74);
+    --cyan-05: oklch(0.8998 0.054 206.49);
+    --cyan-06: oklch(0.8593 0.066 207.67);
+    --cyan-07: oklch(0.8045 0.082 209.58);
+    --cyan-08: oklch(0.727 0.11 211.67);
+    --cyan-09: oklch(0.6609 0.122 221.49);
+    --cyan-10: oklch(0.6267 0.114 221.32);
+    --cyan-11: oklch(0.5403 0.127 223.72);
+    --cyan-12: oklch(0.3317 0.053 218.57);
+
+    --gold-01: oklch(0.9937 0.001 106.42);
+    --gold-02: oklch(0.9809 0.009 97.34);
+    --gold-03: oklch(0.9534 0.012 94.69);
+    --gold-04: oklch(0.9257 0.015 93.18);
+    --gold-05: oklch(0.8958 0.019 90.73);
+    --gold-06: oklch(0.8596 0.025 88.38);
+    --gold-07: oklch(0.8101 0.032 83.41);
+    --gold-08: oklch(0.7386 0.042 78.17);
+    --gold-09: oklch(0.6206 0.049 78.13);
+    --gold-10: oklch(0.5877 0.047 77.42);
+    --gold-11: oklch(0.5039 0.039 78.1);
+    --gold-12: oklch(0.3321 0.019 81.67);
+
+    --grass-01: oklch(0.994 0.005 146.39);
+    --grass-02: oklch(0.982 0.009 145.93);
+    --grass-03: oklch(0.9608 0.023 145.27);
+    --grass-04: oklch(0.9342 0.037 146.18);
+    --grass-05: oklch(0.9013 0.053 146.35);
+    --grass-06: oklch(0.8578 0.071 146.83);
+    --grass-07: oklch(0.7985 0.095 147.47);
+    --grass-08: oklch(0.7165 0.13 148.35);
+    --grass-09: oklch(0.6516 0.147 147.37);
+    --grass-10: oklch(0.6138 0.142 147.32);
+    --grass-11: oklch(0.5268 0.13 147.18);
+    --grass-12: oklch(0.3268 0.053 148.58);
+
+    --gray-01: oklch(0.9909 0 0);
+    --gray-02: oklch(0.981 0 0);
+    --gray-03: oklch(0.9535 0 0);
+    --gray-04: oklch(0.9296 0 167.47);
+    --gray-05: oklch(0.9079 0 180);
+    --gray-06: oklch(0.8838 0 0);
+    --gray-07: oklch(0.8508 0 213.69);
+    --gray-08: oklch(0.791 0 180);
+    --gray-09: oklch(0.6435 0 0);
+    --gray-10: oklch(0.6085 0 0);
+    --gray-11: oklch(0.5031 0 187.13);
+    --gray-12: oklch(0.243 0 180);
+
+    --green-01: oklch(0.9943 0.004 159.06);
+    --green-02: oklch(0.9816 0.009 155.31);
+    --green-03: oklch(0.9588 0.023 156.38);
+    --green-04: oklch(0.9325 0.036 156.6);
+    --green-05: oklch(0.8995 0.05 157.22);
+    --green-06: oklch(0.857 0.065 157.89);
+    --green-07: oklch(0.7977 0.084 159.02);
+    --green-08: oklch(0.7144 0.112 160.6);
+    --green-09: oklch(0.6405 0.133 157.75);
+    --green-10: oklch(0.6112 0.126 158.31);
+    --green-11: oklch(0.529 0.133 158.33);
+    --green-12: oklch(0.3218 0.047 164.62);
+
+    --indigo-01: oklch(0.9942 0.001 286.37);
+    --indigo-02: oklch(0.9829 0.008 271.38);
+    --indigo-03: oklch(0.9607 0.017 268.55);
+    --indigo-04: oklch(0.9353 0.034 268.49);
+    --indigo-05: oklch(0.9032 0.051 269.98);
+    --indigo-06: oklch(0.863 0.071 271.51);
+    --indigo-07: oklch(0.8068 0.087 271.37);
+    --indigo-08: oklch(0.7301 0.113 270.52);
+    --indigo-09: oklch(0.5436 0.191 267.08);
+    --indigo-10: oklch(0.5112 0.195 266.48);
+    --indigo-11: oklch(0.5097 0.173 267.11);
+    --indigo-12: oklch(0.3126 0.086 268.56);
+
+    --iris-01: oklch(0.9945 0.003 286.35);
+    --iris-02: oklch(0.9812 0.009 284.1);
+    --iris-03: oklch(0.9614 0.018 283.8);
+    --iris-04: oklch(0.9351 0.035 283.44);
+    --iris-05: oklch(0.9045 0.053 283.77);
+    --iris-06: oklch(0.8646 0.07 283.11);
+    --iris-07: oklch(0.8079 0.088 282.85);
+    --iris-08: oklch(0.7292 0.118 281.48);
+    --iris-09: oklch(0.5403 0.184 278.3);
+    --iris-10: oklch(0.5086 0.186 277.49);
+    --iris-11: oklch(0.5104 0.173 279.69);
+    --iris-12: oklch(0.3145 0.099 277.36);
+
+    --jade-01: oklch(0.9945 0.004 172.63);
+    --jade-02: oklch(0.9815 0.009 160.3);
+    --jade-03: oklch(0.9596 0.022 161.88);
+    --jade-04: oklch(0.9339 0.034 163.54);
+    --jade-05: oklch(0.9019 0.046 164.78);
+    --jade-06: oklch(0.8592 0.059 166.88);
+    --jade-07: oklch(0.8003 0.077 169.53);
+    --jade-08: oklch(0.7209 0.103 173.37);
+    --jade-09: oklch(0.6421 0.115 170.85);
+    --jade-10: oklch(0.6134 0.11 170.61);
+    --jade-11: oklch(0.5289 0.127 167.17);
+    --jade-12: oklch(0.3257 0.041 169.78);
+
+    --lime-01: oklch(0.9924 0.004 120.67);
+    --lime-02: oklch(0.9817 0.01 116.7);
+    --lime-03: oklch(0.9594 0.043 119.1);
+    --lime-04: oklch(0.9321 0.069 120.38);
+    --lime-05: oklch(0.8974 0.087 121.84);
+    --lime-06: oklch(0.853 0.099 123.38);
+    --lime-07: oklch(0.7946 0.111 125.31);
+    --lime-08: oklch(0.7236 0.135 128.06);
+    --lime-09: oklch(0.8875 0.175 126.09);
+    --lime-10: oklch(0.8589 0.188 126.73);
+    --lime-11: oklch(0.5438 0.111 128.63);
+    --lime-12: oklch(0.3537 0.057 121.18);
+
+    --mauve-01: oklch(0.9918 0.002 321.13);
+    --mauve-02: oklch(0.9832 0.003 311.22);
+    --mauve-03: oklch(0.9556 0.006 314.24);
+    --mauve-04: oklch(0.9316 0.008 310.01);
+    --mauve-05: oklch(0.909 0.01 306.61);
+    --mauve-06: oklch(0.886 0.012 303.95);
+    --mauve-07: oklch(0.8536 0.014 300.59);
+    --mauve-08: oklch(0.7936 0.019 293.52);
+    --mauve-09: oklch(0.6458 0.019 292.62);
+    --mauve-10: oklch(0.6106 0.018 293.07);
+    --mauve-11: oklch(0.5048 0.016 296.08);
+    --mauve-12: oklch(0.2446 0.013 298.05);
+
+    --mint-01: oklch(0.9928 0.005 183.68);
+    --mint-02: oklch(0.982 0.01 178.66);
+    --mint-03: oklch(0.9595 0.03 179.57);
+    --mint-04: oklch(0.933 0.047 178.98);
+    --mint-05: oklch(0.8994 0.061 178.72);
+    --mint-06: oklch(0.8559 0.072 178.68);
+    --mint-07: oklch(0.7979 0.085 178.22);
+    --mint-08: oklch(0.722 0.107 177.69);
+    --mint-09: oklch(0.8696 0.1 177.97);
+    --mint-10: oklch(0.8412 0.1 177.77);
+    --mint-11: oklch(0.5118 0.095 176.02);
+    --mint-12: oklch(0.3497 0.051 181.44);
+
+    --olive-01: oklch(0.9931 0.002 149.08);
+    --olive-02: oklch(0.983 0.003 144.76);
+    --olive-03: oklch(0.9561 0.004 141.14);
+    --olive-04: oklch(0.932 0.004 142.11);
+    --olive-05: oklch(0.9095 0.005 139.33);
+    --olive-06: oklch(0.8855 0.006 141.14);
+    --olive-07: oklch(0.8517 0.006 141.14);
+    --olive-08: oklch(0.7921 0.007 140.55);
+    --olive-09: oklch(0.6404 0.011 136.53);
+    --olive-10: oklch(0.6054 0.012 136.54);
+    --olive-11: oklch(0.5001 0.011 139.89);
+    --olive-12: oklch(0.2419 0.011 138.23);
+
+    --orange-01: oklch(0.9922 0.003 40.73);
+    --orange-02: oklch(0.9787 0.015 70.83);
+    --orange-03: oklch(0.9576 0.037 78.11);
+    --orange-04: oklch(0.9203 0.081 74.16);
+    --orange-05: oklch(0.8904 0.107 70.84);
+    --orange-06: oklch(0.8573 0.11 64.43);
+    --orange-07: oklch(0.8053 0.113 59.88);
+    --orange-08: oklch(0.7454 0.132 54.82);
+    --orange-09: oklch(0.689 0.191 44.8);
+    --orange-10: oklch(0.6622 0.194 43.49);
+    --orange-11: oklch(0.5919 0.186 46.95);
+    --orange-12: oklch(0.3501 0.069 40.82);
+
+    --pink-01: oklch(0.9941 0.004 336.25);
+    --pink-02: oklch(0.9831 0.009 339.97);
+    --pink-03: oklch(0.9543 0.027 340.64);
+    --pink-04: oklch(0.9251 0.042 340.66);
+    --pink-05: oklch(0.8931 0.054 340.86);
+    --pink-06: oklch(0.8554 0.067 340.9);
+    --pink-07: oklch(0.8091 0.083 341.21);
+    --pink-08: oklch(0.7517 0.107 341.63);
+    --pink-09: oklch(0.6167 0.208 346.05);
+    --pink-10: oklch(0.5957 0.207 346.5);
+    --pink-11: oklch(0.5566 0.206 347.33);
+    --pink-12: oklch(0.35 0.129 345.45);
+
+    --plum-01: oklch(0.9933 0.005 316.87);
+    --plum-02: oklch(0.9831 0.009 325.99);
+    --plum-03: oklch(0.9569 0.027 325.49);
+    --plum-04: oklch(0.9292 0.044 324.87);
+    --plum-05: oklch(0.8985 0.057 324.37);
+    --plum-06: oklch(0.8603 0.072 323.91);
+    --plum-07: oklch(0.8092 0.091 323.15);
+    --plum-08: oklch(0.7418 0.12 321.88);
+    --plum-09: oklch(0.5789 0.188 322.09);
+    --plum-10: oklch(0.5527 0.181 322.1);
+    --plum-11: oklch(0.5213 0.173 322.02);
+    --plum-12: oklch(0.3376 0.125 321.41);
+
+    --purple-01: oklch(0.993 0.004 325.35);
+    --purple-02: oklch(0.9823 0.009 313.12);
+    --purple-03: oklch(0.9591 0.024 313.27);
+    --purple-04: oklch(0.9328 0.039 312.06);
+    --purple-05: oklch(0.9007 0.054 311.57);
+    --purple-06: oklch(0.8596 0.071 311.03);
+    --purple-07: oklch(0.804 0.093 309.93);
+    --purple-08: oklch(0.7331 0.123 307.97);
+    --purple-09: oklch(0.5555 0.183 305.88);
+    --purple-10: oklch(0.5242 0.176 305.69);
+    --purple-11: oklch(0.516 0.174 305.7);
+    --purple-12: oklch(0.3223 0.11 303.8);
+
+    --red-01: oklch(0.9935 0.003 22.75);
+    --red-02: oklch(0.9832 0.008 16.02);
+    --red-03: oklch(0.9561 0.021 16.23);
+    --red-04: oklch(0.9281 0.047 16.68);
+    --red-05: oklch(0.8961 0.062 17.33);
+    --red-06: oklch(0.857 0.075 17.87);
+    --red-07: oklch(0.8072 0.089 18.44);
+    --red-08: oklch(0.745 0.113 19.09);
+    --red-09: oklch(0.6254 0.193 22.98);
+    --red-10: oklch(0.5999 0.195 23.89);
+    --red-11: oklch(0.5572 0.198 25.13);
+    --red-12: oklch(0.3391 0.109 16.68);
+
+    --ruby-01: oklch(0.9938 0.003 356.31);
+    --ruby-02: oklch(0.9834 0.008 8.41);
+    --ruby-03: oklch(0.9536 0.022 8.56);
+    --ruby-04: oklch(0.928 0.042 8.46);
+    --ruby-05: oklch(0.8964 0.055 8.16);
+    --ruby-06: oklch(0.8581 0.066 7.84);
+    --ruby-07: oklch(0.8101 0.08 7.49);
+    --ruby-08: oklch(0.7488 0.101 6.86);
+    --ruby-09: oklch(0.6284 0.195 13.19);
+    --ruby-10: oklch(0.6013 0.196 13.39);
+    --ruby-11: oklch(0.5489 0.199 13.92);
+    --ruby-12: oklch(0.3412 0.11 10.04);
+
+    --sage-01: oklch(0.9923 0.003 160.4);
+    --sage-02: oklch(0.9808 0.003 171.2);
+    --sage-03: oklch(0.955 0.003 170.38);
+    --sage-04: oklch(0.9312 0.003 170.38);
+    --sage-05: oklch(0.9092 0.004 167.67);
+    --sage-06: oklch(0.8851 0.004 167.67);
+    --sage-07: oklch(0.8511 0.004 169.85);
+    --sage-08: oklch(0.7924 0.005 169.48);
+    --sage-09: oklch(0.6393 0.01 172.38);
+    --sage-10: oklch(0.6048 0.01 172.84);
+    --sage-11: oklch(0.5007 0.008 175.92);
+    --sage-12: oklch(0.2398 0.012 166.78);
+
+    --sand-01: oklch(0.9937 0.001 106.42);
+    --sand-02: oklch(0.9822 0.001 106.43);
+    --sand-03: oklch(0.9555 0.002 97.61);
+    --sand-04: oklch(0.9322 0.003 100.56);
+    --sand-05: oklch(0.9099 0.004 95.91);
+    --sand-06: oklch(0.8855 0.005 98.34);
+    --sand-07: oklch(0.8525 0.006 96.6);
+    --sand-08: oklch(0.7918 0.008 96.5);
+    --sand-09: oklch(0.6413 0.01 106.69);
+    --sand-10: oklch(0.6057 0.01 106.68);
+    --sand-11: oklch(0.4979 0.008 106.68);
+    --sand-12: oklch(0.2434 0.008 96.31);
+
+    --sky-01: oklch(0.9933 0.005 211.91);
+    --sky-02: oklch(0.9799 0.01 217.67);
+    --sky-03: oklch(0.9606 0.024 219.58);
+    --sky-04: oklch(0.9356 0.036 220.39);
+    --sky-05: oklch(0.9028 0.047 221.37);
+    --sky-06: oklch(0.861 0.058 222.87);
+    --sky-07: oklch(0.8058 0.072 225.65);
+    --sky-08: oklch(0.7294 0.096 227.98);
+    --sky-09: oklch(0.8614 0.103 217.81);
+    --sky-10: oklch(0.8377 0.104 219.57);
+    --sky-11: oklch(0.5256 0.108 232.54);
+    --sky-12: oklch(0.3511 0.057 241.61);
+
+    --slate-01: oklch(0.9912 0.001 286.37);
+    --slate-02: oklch(0.9824 0.003 286.35);
+    --slate-03: oklch(0.9557 0.004 281.88);
+    --slate-04: oklch(0.9314 0.006 282.96);
+    --slate-05: oklch(0.9101 0.008 283.59);
+    --slate-06: oklch(0.8876 0.009 281.79);
+    --slate-07: oklch(0.8534 0.012 280.85);
+    --slate-08: oklch(0.7939 0.016 278.12);
+    --slate-09: oklch(0.6456 0.016 277.83);
+    --slate-10: oklch(0.6098 0.016 273.24);
+    --slate-11: oklch(0.5026 0.014 263.44);
+    --slate-12: oklch(0.2413 0.01 249.52);
+
+    --teal-01: oklch(0.9939 0.005 177.55);
+    --teal-02: oklch(0.9812 0.009 179);
+    --teal-03: oklch(0.9606 0.027 180.32);
+    --teal-04: oklch(0.9346 0.042 180.22);
+    --teal-05: oklch(0.9004 0.054 180.5);
+    --teal-06: oklch(0.8558 0.064 181.42);
+    --teal-07: oklch(0.7974 0.076 182.21);
+    --teal-08: oklch(0.7211 0.097 183.46);
+    --teal-09: oklch(0.6488 0.113 182.01);
+    --teal-10: oklch(0.6195 0.11 181.2);
+    --teal-11: oklch(0.5296 0.124 179.04);
+    --teal-12: oklch(0.3269 0.05 185.02);
+
+    --tomato-01: oklch(0.9935 0.003 22.75);
+    --tomato-02: oklch(0.9842 0.007 31.02);
+    --tomato-03: oklch(0.9544 0.022 30.88);
+    --tomato-04: oklch(0.926 0.047 31.76);
+    --tomato-05: oklch(0.8921 0.063 31.49);
+    --tomato-06: oklch(0.8524 0.077 32.01);
+    --tomato-07: oklch(0.8028 0.094 32.17);
+    --tomato-08: oklch(0.7415 0.118 32.07);
+    --tomato-09: oklch(0.627 0.194 33.31);
+    --tomato-10: oklch(0.604 0.195 33.26);
+    --tomato-11: oklch(0.5665 0.198 32.81);
+    --tomato-12: oklch(0.3461 0.08 30.53);
+
+    --violet-01: oklch(0.9921 0.003 308.03);
+    --violet-02: oklch(0.983 0.009 295.04);
+    --violet-03: oklch(0.9628 0.019 296.58);
+    --violet-04: oklch(0.934 0.039 295.38);
+    --violet-05: oklch(0.9039 0.057 294.12);
+    --violet-06: oklch(0.8641 0.072 293.86);
+    --violet-07: oklch(0.8065 0.09 293.47);
+    --violet-08: oklch(0.7291 0.119 292.43);
+    --violet-09: oklch(0.5418 0.179 288.1);
+    --violet-10: oklch(0.5107 0.177 287.64);
+    --violet-11: oklch(0.508 0.159 288.59);
+    --violet-12: oklch(0.3127 0.098 286.76);
+
+    --yellow-01: oklch(0.9928 0.005 106.49);
+    --yellow-02: oklch(0.9884 0.025 102.92);
+    --yellow-03: oklch(0.974 0.084 104.36);
+    --yellow-04: oklch(0.9527 0.117 101.74);
+    --yellow-05: oklch(0.9251 0.141 98.2);
+    --yellow-06: oklch(0.8809 0.134 95.42);
+    --yellow-07: oklch(0.8355 0.12 92.79);
+    --yellow-08: oklch(0.7661 0.137 89.85);
+    --yellow-09: oklch(0.9266 0.209 102.14);
+    --yellow-10: oklch(0.8967 0.185 97.53);
+    --yellow-11: oklch(0.5744 0.136 81.69);
+    --yellow-12: oklch(0.3578 0.046 86.63);
+}
diff --git a/client/styles/vendor/modern-normalize.css b/client/styles/vendor/modern-normalize.css
new file mode 100644
index 000000000..6a6c49108
--- /dev/null
+++ b/client/styles/vendor/modern-normalize.css
@@ -0,0 +1,3 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+/*# sourceMappingURL=/sm/d2d8cd206fb9f42f071e97460f3ad9c875edb5e7a4b10f900a83cdf8401c53a9.map */