diff --git a/package.json b/package.json
index 2ff501e6..f0f34ff1 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@mui/styles": "^5.0.0",
     "@rowy/form-builder": "^0.1.2",
     "@rowy/multiselect": "^0.1.12",
-    "@tinymce/tinymce-react": "^3.4.0",
+    "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
     "chroma-js": "^2.1.2",
@@ -62,7 +62,7 @@
     "react-scroll-sync": "^0.8.0",
     "react-usestateref": "^1.0.5",
     "serve": "^11.3.2",
-    "tinymce": "^5.2.0",
+    "tinymce": "^5.9.2",
     "typescript": "^4.4.2",
     "use-algolia": "^1.4.1",
     "use-debounce": "^3.3.0",
@@ -120,7 +120,8 @@
     "monaco-editor": "^0.21.2",
     "playwright": "^1.5.2",
     "prettier": "^2.2.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "raw-loader": "^4.0.2"
   },
   "husky": {
     "hooks": {
diff --git a/src/components/RenderedHtml.tsx b/src/components/RenderedHtml.tsx
index bad6e81f..60c64ba1 100644
--- a/src/components/RenderedHtml.tsx
+++ b/src/components/RenderedHtml.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) =>
       },
 
       "& h1, & h2, & h3, & h4, & h5, & h6": {
-        fontFamily: '"Europa", "Open Sans", sans-serif',
+        fontFamily: theme.typography.fontFamily,
         margin: 0,
         lineHeight: 1.2,
         fontWeight: "bold",
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index aea50780..52efca59 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -1,10 +1,24 @@
 import { useState } from "react";
 import clsx from "clsx";
 
+import { Editor } from "@tinymce/tinymce-react";
+
+// TinyMCE so the global var exists
 import "tinymce/tinymce.min.js";
+// Theme
 import "tinymce/themes/silver";
+// Toolbar icons
+import "tinymce/icons/default";
+// Editor styles
 import "tinymce/skins/ui/oxide/skin.min.css";
-import "tinymce/skins/ui/oxide/content.min.css";
+// Content styles, including inline UI like fake cursors
+/* eslint import/no-webpack-loader-syntax: off */
+import contentCss from "!!raw-loader!tinymce/skins/content/default/content.min.css";
+import contentUiCss from "!!raw-loader!tinymce/skins/ui/oxide/content.min.css";
+import contentCssDark from "!!raw-loader!tinymce/skins/content/dark/content.min.css";
+import contentUiCssDark from "!!raw-loader!tinymce/skins/ui/oxide-dark/content.min.css";
+
+// Plugins
 import "tinymce/plugins/autoresize";
 import "tinymce/plugins/lists";
 import "tinymce/plugins/link";
@@ -12,11 +26,9 @@ import "tinymce/plugins/image";
 import "tinymce/plugins/paste";
 import "tinymce/plugins/help";
 import "tinymce/plugins/code";
-import { Editor } from "@tinymce/tinymce-react";
 
 import { makeStyles, createStyles } from "@mui/styles";
 import { useTheme } from "@mui/material";
-
 const useStyles = makeStyles((theme) =>
   createStyles({
     "@global": {
@@ -30,21 +42,17 @@ const useStyles = makeStyles((theme) =>
         "&.tox-tinymce": {
           borderRadius: theme.shape.borderRadius,
           border: "none",
-          backgroundColor:
-            theme.palette.mode === "light"
-              ? "rgba(0, 0, 0, 0.09)"
-              : "rgba(255, 255, 255, 0.09)",
 
-          transition: theme.transitions.create("background-color", {
-            duration: theme.transitions.duration.shorter,
-            easing: theme.transitions.easing.easeOut,
+          backgroundColor: theme.palette.action.input,
+          boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
+                        0 -1px 0 0 ${theme.palette.text.disabled} inset`,
+          transition: theme.transitions.create("box-shadow", {
+            duration: theme.transitions.duration.short,
           }),
 
           "&:hover": {
-            backgroundColor:
-              theme.palette.mode === "light"
-                ? "rgba(0, 0, 0, 0.13)"
-                : "rgba(255, 255, 255, 0.13)",
+            boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
+                          0 -1px 0 0 ${theme.palette.text.primary} inset`,
           },
         },
 
@@ -90,11 +98,18 @@ const useStyles = makeStyles((theme) =>
     },
 
     focus: {
-      "& .tox.tox-tinymce": {
+      "& .tox.tox-tinymce, & .tox.tox-tinymce:hover": {
+        boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
+                    0 -2px 0 0 ${theme.palette.primary.main} inset`,
+      },
+    },
+
+    disabled: {
+      "& .tox.tox-tinymce, & .tox.tox-tinymce:hover": {
         backgroundColor:
-          (theme.palette.mode === "light"
-            ? "rgba(0, 0, 0, 0.09)"
-            : "rgba(255, 255, 255, 0.09)") + "!important",
+          theme.palette.mode === "dark"
+            ? "transparent"
+            : theme.palette.action.disabledBackground,
       },
     },
   })
@@ -104,37 +119,53 @@ export interface IRichTextEditorProps {
   value?: string;
   onChange: (value: string) => void;
   disabled?: boolean;
+  id: string;
 }
 
 export default function RichTextEditor({
   value,
   onChange,
   disabled,
+  id,
 }: IRichTextEditorProps) {
   const classes = useStyles();
   const theme = useTheme();
   const [focus, setFocus] = useState(false);
 
   return (
-    <div className={clsx(classes.root, focus && classes.focus)}>
+    <div
+      className={clsx(
+        classes.root,
+        focus && classes.focus,
+        disabled && classes.disabled
+      )}
+    >
       <Editor
         disabled={disabled}
         init={{
+          skin: false,
+          content_css: false,
+          content_style: [
+            theme.palette.mode === "dark" ? contentCssDark : contentCss,
+            theme.palette.mode === "dark" ? contentUiCssDark : contentUiCss,
+            `:root { font-size: 14px; }
+              body {
+                background-color: ${
+                  theme.palette.mode === "dark"
+                    ? theme.palette.background.paper
+                    : "transparent"
+                };
+                font-family: ${theme.typography.fontFamily};
+                color: ${theme.palette.text.primary};
+              }`,
+          ].join("\n"),
           minHeight: 300,
           menubar: false,
           plugins: ["autoresize", "lists link image", "paste help", "code"],
           statusbar: false,
           toolbar:
             "formatselect | bold italic forecolor | link | bullist numlist outdent indent | removeformat code | help",
-          skin: false,
-          content_css: [
-            "https://use.typekit.net/ngg8buf.css",
-            "https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap",
-            // theme.palette.mode === "light"
-            // ?
-            "/static/tinymce_content.css",
-            // : "/static/tinymce_content-dark.css",
-          ],
+          body_id: id,
         }}
         value={value}
         onEditorChange={onChange}
diff --git a/src/components/Setup/Step0Welcome.tsx b/src/components/Setup/Step0Welcome.tsx
index 0d858c95..ebf89467 100644
--- a/src/components/Setup/Step0Welcome.tsx
+++ b/src/components/Setup/Step0Welcome.tsx
@@ -16,10 +16,10 @@ export default function Step0Welcome({
     <>
       <div>
         <Typography variant="body1" gutterBottom>
-          You will be up and running in just a few minutes.
+          You’ll be up and running in just a few minutes.
         </Typography>
-        <Typography variant="body1">
-          Configure your project backend functionality, Firestore Rules, and
+        <Typography variant="body1" gutterBottom>
+          Configure your project’s backend functionality, Firestore Rules, and
           user management.
         </Typography>
         <Typography variant="body1">
diff --git a/src/components/SideDrawer/Form/FieldWrapper.tsx b/src/components/SideDrawer/Form/FieldWrapper.tsx
index dd5745dc..a049865e 100644
--- a/src/components/SideDrawer/Form/FieldWrapper.tsx
+++ b/src/components/SideDrawer/Form/FieldWrapper.tsx
@@ -16,7 +16,7 @@ import { useAppContext } from "contexts/AppContext";
 const useStyles = makeStyles((theme) =>
   createStyles({
     header: {
-      paddingBottom: theme.spacing(1),
+      padding: theme.spacing(3 / 8, 0),
       color: theme.palette.text.secondary,
 
       "& svg": {
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) =>
       },
     },
     iconContainer: {
-      marginRight: theme.spacing(1),
+      marginRight: theme.spacing(0.75),
     },
 
     label: {
diff --git a/src/components/SideDrawer/Form/utils.ts b/src/components/SideDrawer/Form/utils.ts
index 185eae19..77b78968 100644
--- a/src/components/SideDrawer/Form/utils.ts
+++ b/src/components/SideDrawer/Form/utils.ts
@@ -23,7 +23,7 @@ export const useFieldStyles = makeStyles((theme) =>
   createStyles({
     root: {
       borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(0.5, 1),
+      padding: theme.spacing(0.5, 1.5),
 
       backgroundColor: theme.palette.action.input,
       boxShadow: `0 0 0 1px ${
diff --git a/src/components/SideDrawer/useStyles.ts b/src/components/SideDrawer/useStyles.ts
index 407e090b..35d145fd 100644
--- a/src/components/SideDrawer/useStyles.ts
+++ b/src/components/SideDrawer/useStyles.ts
@@ -114,7 +114,7 @@ export const useStyles = makeStyles((theme) =>
 
     drawerContents: {
       padding: theme.spacing(5),
-      paddingRight: `max(env(safe-area-inset-right), ${theme.spacing(5)})`,
+      paddingRight: `max(env(safe-area-inset-right), ${theme.spacing(4)})`,
       paddingBottom: `max(env(safe-area-inset-bottom), ${theme.spacing(5)})`,
       overflowY: "auto",
     },
diff --git a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index f64f99ce..8b2f7b63 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { IMenuModalProps } from "..";
 
 import { makeStyles, createStyles } from "@mui/styles";
-import Switch from "@mui/material/Switch";
+import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { Typography, TextField, MenuItem, ListItemText } from "@mui/material";
 import Subheading from "../Subheading";
@@ -58,12 +58,6 @@ export default function DefaultValueInput({
   });
   return (
     <>
-      <Subheading>Default Value</Subheading>
-      <Typography color="textSecondary" gutterBottom>
-        The default value will be the initial value of this cell when a new row
-        is added.
-      </Typography>
-
       <TextField
         select
         label="Default Value Type"
@@ -109,26 +103,27 @@ export default function DefaultValueInput({
         <>
           <FormControlLabel
             value="required"
-            label="Make this column required"
-            labelPlacement="start"
+            label={
+              <>
+                Make this column required
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  display="block"
+                >
+                  The row will not be created or updated unless all required
+                  values are set.
+                </Typography>
+              </>
+            }
             control={
-              <Switch
+              <Checkbox
                 checked={config.required}
-                onChange={(event, checked) => handleChange("required")(checked)}
+                onChange={(e) => handleChange("required")(e.target.checked)}
                 name="required"
               />
             }
-            style={{
-              marginLeft: 0,
-              justifyContent: "space-between",
-            }}
           />
-          {
-            <Typography color="textSecondary" paragraph>
-              The row will not be created or updated unless all required values
-              are set.
-            </Typography>
-          }
         </>
       )}
       {config.defaultValue?.type === "static" && customFieldInput && (
diff --git a/src/components/Table/ColumnMenu/FieldSettings/index.tsx b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
index 8255399d..917351e0 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/index.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
@@ -1,9 +1,9 @@
 import { useState, Suspense, useMemo, createElement } from "react";
-import { useSnackbar } from "notistack";
-
 import _set from "lodash/set";
 import { IMenuModalProps } from "..";
 
+import { Typography, Divider, Stack } from "@mui/material";
+
 import Modal from "components/Modal";
 import { getFieldProp } from "components/fields";
 import DefaultValueInput from "./DefaultValueInput";
@@ -11,18 +11,8 @@ import ErrorBoundary from "components/ErrorBoundary";
 import Loading from "components/Loading";
 
 import { useProjectContext } from "contexts/ProjectContext";
-import { useSnackLogContext } from "contexts/SnackLogContext";
-import { db } from "../../../../firebase";
-import { useAppContext } from "contexts/AppContext";
 import { useConfirmation } from "components/ConfirmationDialog";
 import { FieldType } from "constants/fields";
-
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import Button from "@mui/material/Button";
-import routes from "constants/routes";
-import { SETTINGS } from "config/dbPaths";
-import { name as appName } from "@root/package.json";
 import { runRoutes } from "constants/runRoutes";
 
 export default function FieldSettings(props: IMenuModalProps) {
@@ -35,10 +25,7 @@ export default function FieldSettings(props: IMenuModalProps) {
   const initializable = getFieldProp("initializable", type);
 
   const { requestConfirmation } = useConfirmation();
-  const { enqueueSnackbar } = useSnackbar();
   const { tableState, rowyRun } = useProjectContext();
-  const snackLog = useSnackLogContext();
-  const appContext = useAppContext();
 
   const handleChange = (key: string) => (update: any) => {
     if (
@@ -62,6 +49,7 @@ export default function FieldSettings(props: IMenuModalProps) {
   );
   if (!open) return null;
   console.log(newConfig);
+
   return (
     <Modal
       maxWidth="md"
@@ -85,24 +73,31 @@ export default function FieldSettings(props: IMenuModalProps) {
               </>
             )}
 
-            <section>
-              {customFieldSettings &&
-                createElement(customFieldSettings, {
+            {customFieldSettings && (
+              <Stack
+                spacing={3}
+                sx={{ borderTop: 1, borderColor: "divider", pt: 3 }}
+              >
+                {createElement(customFieldSettings, {
                   config: newConfig,
                   handleChange,
                 })}
-            </section>
+              </Stack>
+            )}
+
             {rendedFieldSettings && (
-              <section>
-                <Divider />
-                <Typography variant="overline">
-                  Rendered field config
+              <Stack
+                spacing={3}
+                sx={{ borderTop: 1, borderColor: "divider", pt: 3 }}
+              >
+                <Typography variant="subtitle1">
+                  Rendered Field Config
                 </Typography>
                 {createElement(rendedFieldSettings, {
                   config: newConfig,
                   handleChange,
                 })}
-              </section>
+              </Stack>
             )}
             {/* {
             <ConfigForm
diff --git a/src/components/Table/ColumnMenu/FieldsDropdown.tsx b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
index 169e4d2c..766ae672 100644
--- a/src/components/Table/ColumnMenu/FieldsDropdown.tsx
+++ b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
@@ -9,6 +9,7 @@ export interface IFieldsDropdownProps {
   value: FieldType;
   onChange: (value: FieldType) => void;
   hideLabel?: boolean;
+  label?: string;
   options?: FieldType[];
 }
 
@@ -19,6 +20,7 @@ export default function FieldsDropdown({
   value,
   onChange,
   hideLabel = false,
+  label,
   options: optionsProp,
 }: IFieldsDropdownProps) {
   const options = optionsProp
@@ -47,7 +49,7 @@ export default function FieldsDropdown({
           {option.label}
         </>
       )}
-      label="Field Type"
+      label={label || "Field Type"}
       labelPlural="Field Types"
       TextFieldProps={{
         hiddenLabel: hideLabel,
diff --git a/src/components/Table/ColumnMenu/NewColumn.tsx b/src/components/Table/ColumnMenu/NewColumn.tsx
index 36b4bdd5..6f00e1a6 100644
--- a/src/components/Table/ColumnMenu/NewColumn.tsx
+++ b/src/components/Table/ColumnMenu/NewColumn.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import _camel from "lodash/camelCase";
 import { IMenuModalProps } from ".";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { TextField } from "@mui/material";
 
 import Modal from "components/Modal";
@@ -10,33 +9,24 @@ import { FieldType } from "constants/fields";
 import FieldsDropdown from "./FieldsDropdown";
 import { getFieldProp } from "components/fields";
 import { analytics } from "analytics";
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    helperText: {
-      ...theme.typography.body2,
-      marginTop: theme.spacing(1),
-    },
-  })
-);
 
-export interface IFormDialogProps extends IMenuModalProps {
+export interface INewColumnProps extends IMenuModalProps {
   data: Record<string, any>;
   openSettings: (column: any) => void;
 }
 
-export default function FormDialog({
+export default function NewColumn({
   open,
   data,
   openSettings,
   handleClose,
   handleSave,
-}: IFormDialogProps) {
-  const classes = useStyles();
-
+}: INewColumnProps) {
   const [columnLabel, setColumnLabel] = useState("");
   const [fieldKey, setFieldKey] = useState("");
   const [type, setType] = useState(FieldType.shortText);
   const requireConfiguration = getFieldProp("requireConfiguration", type);
+
   useEffect(() => {
     if (type !== FieldType.id) setFieldKey(_camel(columnLabel));
   }, [columnLabel]);
@@ -69,7 +59,6 @@ export default function FormDialog({
               fullWidth
               onChange={(e) => setColumnLabel(e.target.value)}
               helperText="Set the user-facing name for this column."
-              FormHelperTextProps={{ classes: { root: classes.helperText } }}
             />
           </section>
 
@@ -84,7 +73,6 @@ export default function FormDialog({
               onChange={(e) => setFieldKey(e.target.value)}
               disabled={type === FieldType.id && fieldKey === "id"}
               helperText="Set the Firestore field key to link to this column. It will display any existing data for this field key."
-              FormHelperTextProps={{ classes: { root: classes.helperText } }}
             />
           </section>
 
diff --git a/src/components/Table/TableHeader/ImportCsv.tsx b/src/components/Table/TableHeader/ImportCsv.tsx
index 47a32c09..caa26b7e 100644
--- a/src/components/Table/TableHeader/ImportCsv.tsx
+++ b/src/components/Table/TableHeader/ImportCsv.tsx
@@ -244,7 +244,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
             <TextField
               variant="filled"
               multiline
-              inputProps={{ minRows: 5 }}
+              inputProps={{ minRows: 3 }}
               autoFocus
               fullWidth
               label="Paste CSV Text"
diff --git a/src/components/Table/editors/TextEditor.tsx b/src/components/Table/editors/TextEditor.tsx
index a57afe0f..5b18d6ac 100644
--- a/src/components/Table/editors/TextEditor.tsx
+++ b/src/components/Table/editors/TextEditor.tsx
@@ -76,9 +76,11 @@ export default function TextEditor({ row, column }: EditorProps<any>) {
           letterSpacing: "inherit", // Prevent text jumping
         },
         "& .MuiInputBase-input": {
+          height: "100%",
           font: "inherit", // Prevent text jumping
           letterSpacing: "inherit", // Prevent text jumping
-          padding: "var(--cell-padding)",
+          p: "var(--cell-padding)",
+          pb: 1 / 8,
         },
       }}
       InputProps={{
diff --git a/src/components/Table/editors/withNullEditor.tsx b/src/components/Table/editors/withNullEditor.tsx
new file mode 100644
index 00000000..4ee4abb8
--- /dev/null
+++ b/src/components/Table/editors/withNullEditor.tsx
@@ -0,0 +1,45 @@
+import { EditorProps } from "react-data-grid";
+import { IHeavyCellProps } from "components/fields/types";
+
+import { getCellValue } from "utils/fns";
+
+/**
+ * Allow the cell to be editable, but disable react-data-grid’s default
+ * text editor to show.
+ *
+ * Hides the editor container so the cell below remains editable inline.
+ *
+ * Use for cells that have inline editing and don’t need to be double-clicked.
+ */
+export default function withNullEditor(
+  HeavyCell?: React.ComponentType<IHeavyCellProps>
+) {
+  return function NullEditor(props: EditorProps<any, any>) {
+    const { row, column } = props;
+
+    return HeavyCell ? (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          padding: "var(--cell-padding)",
+          position: "relative",
+          overflow: "hidden",
+          contain: "strict",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <HeavyCell
+          {...(props as any)}
+          value={getCellValue(row, column.key)}
+          name={column.name as string}
+          type={(column as any).type}
+          docRef={props.row.ref}
+          onSubmit={() => {}}
+          disabled={props.column.editable === false}
+        />
+      </div>
+    ) : null;
+  };
+}
diff --git a/src/components/Table/editors/withSideDrawerEditor.tsx b/src/components/Table/editors/withSideDrawerEditor.tsx
index 2153ddd3..3be42662 100644
--- a/src/components/Table/editors/withSideDrawerEditor.tsx
+++ b/src/components/Table/editors/withSideDrawerEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { EditorProps } from "react-data-grid";
 import { useProjectContext } from "contexts/ProjectContext";
 import { IHeavyCellProps } from "components/fields/types";
@@ -26,15 +26,28 @@ export default function withSideDrawerEditor(
     }, [column]);
 
     return HeavyCell ? (
-      <HeavyCell
-        {...(props as any)}
-        value={getCellValue(row, column.key)}
-        name={column.name as string}
-        type={(column as any).type}
-        docRef={props.row.ref}
-        onSubmit={() => {}}
-        disabled={props.column.editable === false}
-      />
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          padding: "var(--cell-padding)",
+          position: "relative",
+          overflow: "hidden",
+          contain: "strict",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <HeavyCell
+          {...(props as any)}
+          value={getCellValue(row, column.key)}
+          name={column.name as string}
+          type={(column as any).type}
+          docRef={props.row.ref}
+          onSubmit={() => {}}
+          disabled={props.column.editable === false}
+        />
+      </div>
     ) : null;
   };
 }
diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
index 9f2c10af..7f812e72 100644
--- a/src/components/Table/styles.ts
+++ b/src/components/Table/styles.ts
@@ -148,6 +148,14 @@ export const useStyles = makeStyles((theme) =>
         margin: theme.spacing(0, -1.25),
         width: `calc(100% + ${theme.spacing(1.25 * 2)})`,
       },
+
+      ".rdg-cell .MuiChip-root": {
+        height: 24,
+        font: "inherit",
+        letterSpacing: "inherit",
+        display: "flex",
+        cursor: "inherit",
+      },
     },
   })
 );
diff --git a/src/components/fields/Checkbox/SideDrawerField.tsx b/src/components/fields/Checkbox/SideDrawerField.tsx
index 240cb2f6..9a4ae4be 100644
--- a/src/components/fields/Checkbox/SideDrawerField.tsx
+++ b/src/components/fields/Checkbox/SideDrawerField.tsx
@@ -1,38 +1,15 @@
-import clsx from "clsx";
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { ButtonBase, FormControlLabel, Switch } from "@mui/material";
 
 import { useFieldStyles } from "components/SideDrawer/Form/utils";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: { padding: 0 },
-
-    formControlLabel: {
-      margin: 0,
-      width: "100%",
-      display: "flex",
-
-      padding: theme.spacing(0, 0.25, 0, 1.5),
-    },
-
-    label: {
-      ...theme.typography.body2,
-      flexGrow: 1,
-      whiteSpace: "normal",
-    },
-  })
-);
-
 export default function Checkbox({
   column,
   control,
   disabled,
 }: ISideDrawerFieldProps) {
-  const classes = useStyles();
   const fieldClasses = useFieldStyles();
 
   return (
@@ -45,10 +22,7 @@ export default function Checkbox({
         };
 
         return (
-          <ButtonBase
-            className={clsx(fieldClasses.root, classes.root)}
-            disabled={disabled}
-          >
+          <ButtonBase className={fieldClasses.root} disabled={disabled}>
             <FormControlLabel
               control={
                 <Switch
@@ -61,7 +35,22 @@ export default function Checkbox({
               }
               label={column.name as string}
               labelPlacement="start"
-              classes={{ root: classes.formControlLabel, label: classes.label }}
+              sx={{
+                mx: 0,
+                my: -0.25,
+                width: "100%",
+                alignItems: "center",
+
+                "& .MuiFormControlLabel-label": {
+                  font: "inherit",
+                  letterSpacing: "inherit",
+                  flexGrow: 1,
+                  overflowX: "hidden",
+                  mt: 0,
+                },
+
+                "& .MuiSwitch-root": { mr: -1.25 },
+              }}
             />
           </ButtonBase>
         );
diff --git a/src/components/fields/Checkbox/TableCell.tsx b/src/components/fields/Checkbox/TableCell.tsx
index dccc33db..fce6ca3b 100644
--- a/src/components/fields/Checkbox/TableCell.tsx
+++ b/src/components/fields/Checkbox/TableCell.tsx
@@ -1,30 +1,9 @@
 import { IHeavyCellProps } from "../types";
 import _get from "lodash/get";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { FormControlLabel, Switch } from "@mui/material";
-
 import Confirmation from "components/Confirmation";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      marginLeft: 0,
-      marginRight: theme.spacing(-1),
-      width: `calc(100% + ${theme.spacing(1)})`,
-    },
-
-    label: {
-      font: "inherit",
-      letterSpacing: "inherit",
-
-      flexGrow: 1,
-      width: "calc(100% - 58px)",
-      overflowX: "hidden",
-    },
-  })
-);
-
 const replacer = (data: any) => (m: string, key: string) => {
   const objKey = key.split(":")[0];
   const defaultValue = key.split(":")[1] || "";
@@ -38,8 +17,6 @@ export default function Checkbox({
   onSubmit,
   disabled,
 }: IHeavyCellProps) {
-  const classes = useStyles();
-
   let component = (
     <Switch
       checked={!!value}
@@ -70,8 +47,21 @@ export default function Checkbox({
       control={component}
       label={column.name as string}
       labelPlacement="start"
-      // className="cell-collapse-padding"
-      classes={{ root: classes.root, label: classes.label }}
+      sx={{
+        m: 0,
+        width: "100%",
+        alignItems: "center",
+
+        "& .MuiFormControlLabel-label": {
+          font: "inherit",
+          letterSpacing: "inherit",
+          flexGrow: 1,
+          overflowX: "hidden",
+          mt: 0,
+        },
+
+        "& .MuiSwitch-root": { mr: -0.75 },
+      }}
     />
   );
 }
diff --git a/src/components/fields/Code/BasicCell.tsx b/src/components/fields/Code/BasicCell.tsx
index b37e6c50..38feca53 100644
--- a/src/components/fields/Code/BasicCell.tsx
+++ b/src/components/fields/Code/BasicCell.tsx
@@ -10,7 +10,7 @@ export default function Code({ value }: IBasicCellProps) {
       style={{
         width: "100%",
         maxHeight: "100%",
-        padding: theme.spacing(0.5, 0),
+        padding: theme.spacing(3 / 8, 0),
 
         whiteSpace: "pre-wrap",
         lineHeight: theme.typography.body2.lineHeight,
diff --git a/src/components/fields/Color/InlineCell.tsx b/src/components/fields/Color/InlineCell.tsx
index e1813c96..1db4c9a0 100644
--- a/src/components/fields/Color/InlineCell.tsx
+++ b/src/components/fields/Color/InlineCell.tsx
@@ -1,59 +1,40 @@
-import React from "react";
-import clsx from "clsx";
+import { forwardRef } from "react";
 import { IPopoverInlineCellProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
-import { Grid, ButtonBase } from "@mui/material";
+import { ButtonBase, Box } from "@mui/material";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      font: "inherit",
-      color: "inherit !important",
-      letterSpacing: "inherit",
-      textAlign: "inherit",
-
-      padding: theme.spacing(0, 1),
-    },
-
-    colorIndicator: {
-      width: 20,
-      height: 20,
-
-      boxShadow: `0 0 0 1px ${theme.palette.text.disabled} inset`,
-      borderRadius: (theme.shape.borderRadius as number) / 2,
-    },
-  })
-);
-
-export const Color = React.forwardRef(function Color(
+export const Color = forwardRef(function Color(
   { value, showPopoverCell, disabled }: IPopoverInlineCellProps,
   ref: React.Ref<any>
 ) {
-  const classes = useStyles();
-
   return (
-    <Grid
-      container
-      alignItems="center"
-      spacing={1}
-      className={clsx("cell-collapse-padding", classes.root)}
-      component={ButtonBase}
+    <ButtonBase
       onClick={() => showPopoverCell(true)}
       ref={ref}
       disabled={disabled}
+      className="cell-collapse-padding"
+      sx={{
+        font: "inherit",
+        letterSpacing: "inherit",
+        p: "var(--cell-padding)",
+        justifyContent: "flex-start",
+      }}
     >
-      <Grid item>
-        <div
-          className={classes.colorIndicator}
-          style={{ backgroundColor: value?.hex }}
-        />
-      </Grid>
+      <Box
+        sx={{
+          width: 18,
+          height: 18,
+          mr: 1,
 
-      <Grid item xs>
-        {value?.hex}
-      </Grid>
-    </Grid>
+          backgroundColor: value?.hex,
+          boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
+          borderRadius: 0.5,
+        }}
+      />
+
+      {value?.hex}
+    </ButtonBase>
   );
 });
+
 export default Color;
diff --git a/src/components/fields/ConnectService/InlineCell.tsx b/src/components/fields/ConnectService/InlineCell.tsx
index b49e346c..2a22b178 100644
--- a/src/components/fields/ConnectService/InlineCell.tsx
+++ b/src/components/fields/ConnectService/InlineCell.tsx
@@ -25,12 +25,6 @@ const useStyles = makeStyles((theme) =>
       overflow: "hidden",
       marginRight: 0,
     },
-    chip: {
-      display: "flex",
-      cursor: "inherit",
-      height: 24,
-    },
-    chipLabel: { whiteSpace: "nowrap" },
 
     icon: {
       display: "block",
@@ -66,11 +60,7 @@ export const ConnectService = React.forwardRef(function ConnectService(
         {Array.isArray(value) &&
           value.map((doc: any) => (
             <Grid item key={doc.primaryKey}>
-              <Chip
-                label={config.titleKey}
-                className={classes.chip}
-                size="small"
-              />
+              <Chip label={config.titleKey} size="small" />
             </Grid>
           ))}
       </Grid>
diff --git a/src/components/fields/ConnectTable/InlineCell.tsx b/src/components/fields/ConnectTable/InlineCell.tsx
index d13c4e5c..1c010cc8 100644
--- a/src/components/fields/ConnectTable/InlineCell.tsx
+++ b/src/components/fields/ConnectTable/InlineCell.tsx
@@ -25,12 +25,6 @@ const useStyles = makeStyles((theme) =>
       overflow: "hidden",
       marginRight: 0,
     },
-    chip: {
-      display: "flex",
-      cursor: "inherit",
-      height: 24,
-    },
-    chipLabel: { whiteSpace: "nowrap" },
 
     icon: {
       display: "block",
@@ -71,8 +65,6 @@ export const ConnectTable = React.forwardRef(function ConnectTable(
                 label={config.primaryKeys
                   .map((key: string) => doc.snapshot[key])
                   .join(" ")}
-                // size="small"
-                className={classes.chip}
               />
             </Grid>
           ))}
diff --git a/src/components/fields/Date/TableCell.tsx b/src/components/fields/Date/TableCell.tsx
index befa23cb..7d6c38d7 100644
--- a/src/components/fields/Date/TableCell.tsx
+++ b/src/components/fields/Date/TableCell.tsx
@@ -85,6 +85,7 @@ export default function Date_({
               ".rdg-cell &": {
                 padding: "var(--cell-padding)",
                 pr: 0,
+                pb: 1 / 8,
               },
             },
             "& .MuiInputAdornment-root": { m: 0 },
diff --git a/src/components/fields/DateTime/TableCell.tsx b/src/components/fields/DateTime/TableCell.tsx
index f7957ae0..ac36da2d 100644
--- a/src/components/fields/DateTime/TableCell.tsx
+++ b/src/components/fields/DateTime/TableCell.tsx
@@ -86,6 +86,7 @@ export default function DateTime({
               ".rdg-cell &": {
                 padding: "var(--cell-padding)",
                 pr: 0,
+                pb: 1 / 8,
               },
             },
             "& .MuiInputAdornment-root": { m: 0 },
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 6792cc46..74a8af03 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from "react";
-import { Typography, Grid } from "@mui/material";
+import { Grid, InputLabel } from "@mui/material";
 import MultiSelect from "@rowy/multiselect";
 import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
 import { FieldType } from "constants/fields";
@@ -22,24 +22,26 @@ const Settings = ({ config, handleChange }) => {
   const columnOptions = Object.values(tableState.columns)
     .filter((column) => column.type !== FieldType.subTable)
     .map((c) => ({ label: c.name, value: c.key }));
+
   return (
     <>
-      <Grid container direction="row" spacing={2}>
+      <Grid container direction="row" spacing={2} flexWrap="nowrap">
         <Grid item xs={12} md={6}>
-          <Typography variant="overline">listener Fields</Typography>
           <MultiSelect
-            //label={"Listener fields"}
+            label={"Listener Fields"}
             options={columnOptions}
             value={config.listenerFields ?? []}
             onChange={handleChange("listenerFields")}
+            TextFieldProps={{
+              helperText:
+                "Changes to these fields will trigger the evaluation of the column.",
+            }}
           />
-          <Typography color="textSecondary" paragraph>
-            Changes to these fields will trigger the evaluation of the column.
-          </Typography>
         </Grid>
+
         <Grid item xs={12} md={6}>
-          <Typography variant="overline">Output Field type</Typography>
           <FieldsDropdown
+            label="Output Field Type"
             value={config.renderFieldType}
             options={Object.values(FieldType).filter(
               (f) =>
@@ -56,7 +58,9 @@ const Settings = ({ config, handleChange }) => {
           />
         </Grid>
       </Grid>
-      <Typography variant="overline">derivative script</Typography>
+
+<div>
+      <InputLabel>Derivative Script</InputLabel>
       <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
       <Suspense fallback={<FieldSkeleton height={200} />}>
         <CodeEditor
@@ -64,6 +68,7 @@ const Settings = ({ config, handleChange }) => {
           handleChange={handleChange("script")}
         />
       </Suspense>
+      </div>
     </>
   );
 };
diff --git a/src/components/fields/File/TableCell.tsx b/src/components/fields/File/TableCell.tsx
index 34b80485..2cff3ff9 100644
--- a/src/components/fields/File/TableCell.tsx
+++ b/src/components/fields/File/TableCell.tsx
@@ -44,11 +44,7 @@ const useStyles = makeStyles((theme) =>
       flexGrow: 1,
       marginLeft: "0 !important",
     },
-    chip: {
-      width: "100%",
-      height: 24,
-      display: "flex",
-    },
+    chip: { width: "100%" },
 
     endButtonContainer: {},
     circularProgress: {
diff --git a/src/components/fields/Json/BasicCell.tsx b/src/components/fields/Json/BasicCell.tsx
index 74bc6ba2..7bc5c8b2 100644
--- a/src/components/fields/Json/BasicCell.tsx
+++ b/src/components/fields/Json/BasicCell.tsx
@@ -19,7 +19,7 @@ export default function Json({ value }: IBasicCellProps) {
       style={{
         width: "100%",
         maxHeight: "100%",
-        padding: theme.spacing(0.5, 0),
+        padding: theme.spacing(3 / 8, 0),
 
         whiteSpace: "pre-wrap",
         lineHeight: theme.typography.body2.lineHeight,
diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx
index 3cdc5297..757a5439 100644
--- a/src/components/fields/Json/SideDrawerField.tsx
+++ b/src/components/fields/Json/SideDrawerField.tsx
@@ -1,11 +1,9 @@
-import clsx from "clsx";
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
 import ReactJson from "react-json-view";
 import jsonFormat from "json-format";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { useTheme } from "@mui/material";
 import { useFieldStyles } from "components/SideDrawer/Form/utils";
 
@@ -19,32 +17,14 @@ const isValidJson = (val: any) => {
   return true;
 };
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      padding: theme.spacing(2),
-      margin: 0,
-      overflowX: "auto",
-      ...theme.typography.caption,
-    },
-
-    readOnly: {
-      whiteSpace: "pre-wrap",
-      ...theme.typography.caption,
-      fontFamily: theme.typography.fontFamilyMono,
-      wordBreak: "break-word",
-    },
-  })
-);
-
 export default function Json({
   control,
   column,
   disabled,
 }: ISideDrawerFieldProps) {
   const fieldClasses = useFieldStyles();
-  const classes = useStyles();
   const theme = useTheme();
+
   return (
     <Controller
       control={control}
@@ -52,7 +32,15 @@ export default function Json({
       render={({ onChange, value }) => {
         if (disabled)
           return (
-            <div className={clsx(fieldClasses.root, classes.readOnly)}>
+            <div
+              className={fieldClasses.root}
+              style={{
+                whiteSpace: "pre-wrap",
+                ...theme.typography.caption,
+                fontFamily: theme.typography.fontFamilyMono,
+                wordBreak: "break-word",
+              }}
+            >
               {value &&
                 jsonFormat(value, {
                   type: "space",
@@ -67,7 +55,10 @@ export default function Json({
         };
 
         return (
-          <div className={clsx(fieldClasses.root, classes.root)}>
+          <div
+            className={fieldClasses.root}
+            style={{ overflowX: "auto", ...theme.typography.caption }}
+          >
             <ReactJson
               src={
                 value !== undefined && isValidJson(value)
diff --git a/src/components/fields/LongText/BasicCell.tsx b/src/components/fields/LongText/BasicCell.tsx
index 172253aa..cf10a374 100644
--- a/src/components/fields/LongText/BasicCell.tsx
+++ b/src/components/fields/LongText/BasicCell.tsx
@@ -10,7 +10,7 @@ export default function LongText({ value }: IBasicCellProps) {
       style={{
         width: "100%",
         maxHeight: "100%",
-        padding: theme.spacing(0.5, 0),
+        padding: theme.spacing(3 / 8, 0),
 
         whiteSpace: "pre-line",
         lineHeight: theme.typography.body2.lineHeight,
diff --git a/src/components/fields/LongText/SideDrawerField.tsx b/src/components/fields/LongText/SideDrawerField.tsx
index 31f1768b..6b02f235 100644
--- a/src/components/fields/LongText/SideDrawerField.tsx
+++ b/src/components/fields/LongText/SideDrawerField.tsx
@@ -26,7 +26,7 @@ export default function LongText({
             hiddenLabel
             disabled={disabled}
             multiline
-            minRows={5}
+            minRows={3}
             inputProps={{ maxLength: column.config?.maxLength }}
           />
         );
diff --git a/src/components/fields/MultiSelect/InlineCell.tsx b/src/components/fields/MultiSelect/InlineCell.tsx
index ef5495de..0528d81e 100644
--- a/src/components/fields/MultiSelect/InlineCell.tsx
+++ b/src/components/fields/MultiSelect/InlineCell.tsx
@@ -1,8 +1,6 @@
-import React from "react";
-import clsx from "clsx";
+import { forwardRef } from "react";
 import { IPopoverInlineCellProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { ButtonBase, Grid } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
@@ -10,82 +8,62 @@ import { sanitiseValue } from "./utils";
 import FormattedChip from "components/FormattedChip";
 import { ConvertStringToArray } from "./ConvertStringToArray";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      height: "100%",
-      padding: theme.spacing(0, 1, 0, 1.5),
-
-      font: "inherit",
-      color: "inherit !important",
-      letterSpacing: "inherit",
-      textAlign: "inherit",
-      justifyContent: "flex-start",
-    },
-
-    value: {
-      flex: 1,
-      maxWidth: `calc(100% - 24px + 4px)`,
-      overflow: "hidden",
-      marginRight: 0,
-    },
-    chip: {
-      display: "flex",
-      cursor: "inherit",
-      height: 24,
-    },
-    chipLabel: { whiteSpace: "nowrap" },
-
-    icon: {
-      display: "block",
-      color: theme.palette.action.active,
-    },
-    disabled: {
-      color: theme.palette.action.disabled,
-    },
-  })
-);
-
-export const MultiSelect = React.forwardRef(function MultiSelect(
+export const MultiSelect = forwardRef(function MultiSelect(
   { value, showPopoverCell, disabled, onSubmit }: IPopoverInlineCellProps,
   ref: React.Ref<any>
 ) {
-  const classes = useStyles();
-
   if (typeof value === "string" && value !== "")
     return <ConvertStringToArray value={value} onSubmit={onSubmit} />;
 
   return (
     <ButtonBase
-      className={clsx("cell-collapse-padding", classes.root)}
       onClick={() => showPopoverCell(true)}
       ref={ref}
       disabled={disabled}
+      className="cell-collapse-padding"
+      sx={{
+        pl: 1,
+        pr: 0,
+        height: "100%",
+
+        font: "inherit",
+        color: "inherit !important",
+        letterSpacing: "inherit",
+        textAlign: "inherit",
+        justifyContent: "flex-start",
+      }}
     >
       <Grid
         container
         wrap="nowrap"
         alignItems="center"
-        spacing={1}
-        className={classes.value}
+        spacing={0.5}
+        style={{ flexGrow: 1, overflow: "hidden" }}
       >
         {sanitiseValue(value).map(
           (item) =>
             typeof item === "string" && (
               <Grid item key={item}>
-                <FormattedChip
-                  label={item}
-                  classes={{ root: classes.chip, label: classes.chipLabel }}
-                />
+                <FormattedChip label={item} />
               </Grid>
             )
         )}
       </Grid>
 
-      <ArrowDropDownIcon
-        className={clsx(classes.icon, disabled && classes.disabled)}
-      />
+      {!disabled && (
+        <ArrowDropDownIcon
+          className="row-hover-iconButton"
+          sx={{
+            flexShrink: 0,
+            mr: 0.5,
+            borderRadius: 1,
+            p: (32 - 24) / 2 / 8,
+            boxSizing: "content-box",
+          }}
+        />
+      )}
     </ButtonBase>
   );
 });
+
 export default MultiSelect;
diff --git a/src/components/fields/MultiSelect/SideDrawerField.tsx b/src/components/fields/MultiSelect/SideDrawerField.tsx
index d0ab4e5c..3f1fd0cf 100644
--- a/src/components/fields/MultiSelect/SideDrawerField.tsx
+++ b/src/components/fields/MultiSelect/SideDrawerField.tsx
@@ -1,8 +1,8 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { useTheme, Grid } from "@mui/material";
-import MultiSelect_ from "@rowy/multiselect";
+import { Grid } from "@mui/material";
+import MultiSelectComponent from "@rowy/multiselect";
 import FormattedChip from "components/FormattedChip";
 
 import { sanitiseValue } from "./utils";
@@ -13,8 +13,6 @@ export default function MultiSelect({
   control,
   disabled,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
 
   return (
@@ -33,7 +31,7 @@ export default function MultiSelect({
 
         return (
           <>
-            <MultiSelect_
+            <MultiSelectComponent
               value={sanitiseValue(value)}
               onChange={onChange}
               options={config.options ?? []}
@@ -44,15 +42,12 @@ export default function MultiSelect({
                 label: "",
                 hiddenLabel: true,
                 onBlur,
+                id: `sidedrawer-field-${column.key}`,
               }}
             />
 
             {value && Array.isArray(value) && (
-              <Grid
-                container
-                spacing={1}
-                style={{ marginTop: theme.spacing(1) }}
-              >
+              <Grid container spacing={0.5} style={{ marginTop: 2 }}>
                 {value.map(
                   (item, i) =>
                     item?.length > 0 && (
diff --git a/src/components/fields/Rating/SideDrawerField.tsx b/src/components/fields/Rating/SideDrawerField.tsx
index 18c61a36..ea813bb4 100644
--- a/src/components/fields/Rating/SideDrawerField.tsx
+++ b/src/components/fields/Rating/SideDrawerField.tsx
@@ -7,7 +7,6 @@ import "@mui/lab";
 import StarBorderIcon from "@mui/icons-material/StarBorder";
 
 import { useFieldStyles } from "components/SideDrawer/Form/utils";
-import { useRatingStyles } from "./styles";
 
 export default function Rating({
   control,
@@ -15,7 +14,6 @@ export default function Rating({
   disabled,
 }: ISideDrawerFieldProps) {
   const fieldClasses = useFieldStyles();
-  const ratingClasses = useRatingStyles();
 
   // Set max and precision from config
   const {
@@ -45,7 +43,7 @@ export default function Rating({
             emptyIcon={<StarBorderIcon fontSize="inherit" />}
             max={max}
             precision={precision}
-            classes={ratingClasses}
+            sx={{ ml: -0.5 }}
           />
         </Grid>
       )}
diff --git a/src/components/fields/Rating/TableCell.tsx b/src/components/fields/Rating/TableCell.tsx
index 931c1f0a..6faee0d6 100644
--- a/src/components/fields/Rating/TableCell.tsx
+++ b/src/components/fields/Rating/TableCell.tsx
@@ -3,8 +3,6 @@ import { IHeavyCellProps } from "../types";
 import MuiRating from "@mui/material/Rating";
 import StarBorderIcon from "@mui/icons-material/StarBorder";
 
-import { useRatingStyles } from "./styles";
-
 export default function Rating({
   row,
   column,
@@ -12,8 +10,6 @@ export default function Rating({
   onSubmit,
   disabled,
 }: IHeavyCellProps) {
-  const ratingClasses = useRatingStyles();
-
   // Set max and precision from config
   const {
     max,
@@ -37,7 +33,7 @@ export default function Rating({
       emptyIcon={<StarBorderIcon />}
       max={max}
       precision={precision}
-      classes={ratingClasses}
+      sx={{ mx: -0.25 }}
     />
   );
 }
diff --git a/src/components/fields/Rating/styles.ts b/src/components/fields/Rating/styles.ts
deleted file mode 100644
index 2878a64b..00000000
--- a/src/components/fields/Rating/styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { makeStyles, createStyles } from "@mui/styles";
-
-export const useRatingStyles = makeStyles((theme) =>
-  createStyles({
-    root: { color: theme.palette.text.secondary },
-    iconEmpty: { color: theme.palette.text.secondary },
-  })
-);
diff --git a/src/components/fields/RichText/SideDrawerField.tsx b/src/components/fields/RichText/SideDrawerField.tsx
index f5fc56f8..a1907cca 100644
--- a/src/components/fields/RichText/SideDrawerField.tsx
+++ b/src/components/fields/RichText/SideDrawerField.tsx
@@ -1,8 +1,8 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
-import _RichText from "components/RichTextEditor";
+import RichTextEditor from "components/RichTextEditor";
 
-export default function RichTextEditor({
+export default function RichText({
   control,
   column,
   disabled,
@@ -12,7 +12,12 @@ export default function RichTextEditor({
       control={control}
       name={column.key}
       render={({ onChange, value }) => (
-        <_RichText disabled={disabled} value={value} onChange={onChange} />
+        <RichTextEditor
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+          id={`sidedrawer-field-${column.key}`}
+        />
       )}
     />
   );
diff --git a/src/components/fields/RichText/TableCell.tsx b/src/components/fields/RichText/TableCell.tsx
index ad55d057..4df58e5c 100644
--- a/src/components/fields/RichText/TableCell.tsx
+++ b/src/components/fields/RichText/TableCell.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { IHeavyCellProps } from "../types";
 
 import { makeStyles, createStyles } from "@mui/styles";
@@ -11,12 +12,11 @@ type StylesProps = { width: number; rowHeight: number };
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
-      padding: theme.spacing(0.5, 0),
+      width: "100%",
+      padding: theme.spacing(3 / 8, 1.25),
       position: "absolute",
       top: 0,
       bottom: 0,
-      right: theme.spacing(1.5),
-      left: theme.spacing(1.5),
 
       display: "flex",
       alignItems: "center",
@@ -28,11 +28,13 @@ const useStyles = makeStyles((theme) =>
 
       ...theme.typography.body2,
       fontSize: "0.75rem",
+      font: "inherit",
     },
 
     tooltip: ({ width, rowHeight }: StylesProps) => ({
-      margin: `-${rowHeight - 1}px 0 0 -${theme.spacing(1.5)}`,
-      padding: theme.spacing(0.5, 1.5),
+      margin: 0,
+      marginTop: `-${rowHeight - 1}px !important`,
+      padding: theme.spacing(3 / 8, 1.25),
 
       width: width - 1,
       maxWidth: "none",
@@ -41,7 +43,7 @@ const useStyles = makeStyles((theme) =>
 
       background: theme.palette.background.paper,
       borderRadius: 0,
-      boxShadow: theme.shadows[4],
+      boxShadow: `0 0 0 1px ${theme.palette.divider}, ${theme.shadows[4]}`,
       color: theme.palette.text.primary,
 
       display: "flex",
@@ -57,6 +59,8 @@ export default function RichText({ column, value }: IHeavyCellProps) {
     rowHeight: tableState?.config?.rowHeight ?? 44,
   });
 
+  if (!value) return null;
+
   return (
     <Tooltip
       title={<RenderedHtml html={value} className={classes.renderedHtml} />}
@@ -64,31 +68,15 @@ export default function RichText({ column, value }: IHeavyCellProps) {
       placement="bottom-start"
       PopperProps={{
         modifiers: [
-          {
-            name: "flip",
-            options: {
-              enabled: false,
-            },
-          },
-          {
-            name: "preventOverflow",
-            options: {
-              enabled: false,
-              boundariesElement: "scrollParent",
-            },
-          },
-          {
-            name: "hide",
-            options: {
-              enabled: false,
-            },
-          },
+          { name: "flip", enabled: false },
+          { name: "preventOverflow", enabled: false },
+          { name: "hide", enabled: false },
         ],
       }}
       TransitionComponent={Fade}
       classes={{ tooltip: classes.tooltip }}
     >
-      <div className={classes.root}>
+      <div className={clsx("cell-collapse-padding", classes.root)}>
         <RenderedHtml html={value} className={classes.renderedHtml} />
       </div>
     </Tooltip>
diff --git a/src/components/fields/ShortText/Settings.tsx b/src/components/fields/ShortText/Settings.tsx
index 385f6e58..7592fdbe 100644
--- a/src/components/fields/ShortText/Settings.tsx
+++ b/src/components/fields/ShortText/Settings.tsx
@@ -1,25 +1,24 @@
 import { TextField } from "@mui/material";
-import Subheading from "components/Table/ColumnMenu/Subheading";
 
 export default function Settings({ handleChange, config }) {
   return (
     <>
-      <Subheading>Short Text Config</Subheading>
       <TextField
         type="number"
+        label="Character Limit"
+        id="character-limit"
         value={config.maxLength}
-        label={"Character Limit"}
         fullWidth
         onChange={(e) => {
           if (e.target.value === "0") handleChange("maxLength")(null);
           else handleChange("maxLength")(e.target.value);
         }}
       />
-      <Subheading>Validation Regex</Subheading>
       <TextField
         type="text"
+        label="Validation Regex"
+        id="validation-regex"
         value={config.validationRegex}
-        label={"Validation Regex"}
         fullWidth
         onChange={(e) => {
           if (e.target.value === "") handleChange("validationRegex")(null);
diff --git a/src/components/fields/SingleSelect/InlineCell.tsx b/src/components/fields/SingleSelect/InlineCell.tsx
index 875168c4..a5d08e65 100644
--- a/src/components/fields/SingleSelect/InlineCell.tsx
+++ b/src/components/fields/SingleSelect/InlineCell.tsx
@@ -1,62 +1,51 @@
-import React from "react";
-import clsx from "clsx";
+import { forwardRef } from "react";
 import { IPopoverInlineCellProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { ButtonBase } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
 import { sanitiseValue } from "./utils";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      height: "100%",
-      padding: theme.spacing(0, 1, 0, 1.5),
-
-      font: "inherit",
-      color: "inherit !important",
-      letterSpacing: "inherit",
-      textAlign: "inherit",
-      justifyContent: "flex-start",
-    },
-
-    value: {
-      flex: 1,
-      maxWidth: `calc(100% - 24px)`,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-
-    icon: {
-      display: "block",
-      color: theme.palette.action.active,
-    },
-    disabled: {
-      color: theme.palette.action.disabled,
-    },
-  })
-);
-
-export const SingleSelect = React.forwardRef(function SingleSelect(
+export const SingleSelect = forwardRef(function SingleSelect(
   { value, showPopoverCell, disabled }: IPopoverInlineCellProps,
   ref: React.Ref<any>
 ) {
-  const classes = useStyles();
-
   return (
     <ButtonBase
-      className={clsx("cell-collapse-padding", classes.root)}
       onClick={() => showPopoverCell(true)}
       ref={ref}
       disabled={disabled}
-    >
-      <div className={classes.value}>{sanitiseValue(value)}</div>
+      className="cell-collapse-padding"
+      style={{
+        padding: "var(--cell-padding)",
+        paddingRight: 0,
+        height: "100%",
 
-      <ArrowDropDownIcon
-        className={clsx(classes.icon, disabled && classes.disabled)}
-      />
+        font: "inherit",
+        color: "inherit !important",
+        letterSpacing: "inherit",
+        textAlign: "inherit",
+        justifyContent: "flex-start",
+      }}
+    >
+      <div style={{ flexGrow: 1, overflow: "hidden" }}>
+        {sanitiseValue(value)}
+      </div>
+
+      {!disabled && (
+        <ArrowDropDownIcon
+          className="row-hover-iconButton"
+          sx={{
+            flexShrink: 0,
+            mr: 0.5,
+            borderRadius: 1,
+            p: (32 - 24) / 2 / 8,
+            boxSizing: "content-box",
+          }}
+        />
+      )}
     </ButtonBase>
   );
 });
+
 export default SingleSelect;
diff --git a/src/components/fields/SingleSelect/Settings.tsx b/src/components/fields/SingleSelect/Settings.tsx
index 3bc65380..7a89f746 100644
--- a/src/components/fields/SingleSelect/Settings.tsx
+++ b/src/components/fields/SingleSelect/Settings.tsx
@@ -2,6 +2,7 @@ import { useState, useRef } from "react";
 
 import { makeStyles, createStyles } from "@mui/styles";
 import {
+  InputLabel,
   TextField,
   Grid,
   IconButton,
@@ -41,8 +42,8 @@ export default function Settings({ handleChange, config }) {
   };
 
   return (
-    <>
-      <Subheading>OPTIONS</Subheading>
+    <div>
+      <InputLabel>Options</InputLabel>
       <div className={classes.optionsList}>
         {options?.map((option: string) => (
           <>
@@ -75,7 +76,7 @@ export default function Settings({ handleChange, config }) {
         <div ref={listEndRef} style={{ height: 40 }} />
       </div>
 
-      <Grid container direction="row">
+      <Grid container direction="row" alignItems="center">
         <Grid item>
           <IconButton
             aria-label="add new"
@@ -92,6 +93,7 @@ export default function Settings({ handleChange, config }) {
             className={classes.field}
             fullWidth
             label={"New Option"}
+            id="new-option"
             onChange={(e) => {
               setNewOption(e.target.value);
             }}
@@ -100,9 +102,10 @@ export default function Settings({ handleChange, config }) {
                 handleAdd();
               }
             }}
+            helperText=" "
           />
         </Grid>
       </Grid>
-    </>
+    </div>
   );
 }
diff --git a/src/components/fields/SingleSelect/SideDrawerField.tsx b/src/components/fields/SingleSelect/SideDrawerField.tsx
index 2ae8e13d..912e7e67 100644
--- a/src/components/fields/SingleSelect/SideDrawerField.tsx
+++ b/src/components/fields/SingleSelect/SideDrawerField.tsx
@@ -1,10 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { useTheme } from "@mui/material";
-import MultiSelect_ from "@rowy/multiselect";
-import FormattedChip from "components/FormattedChip";
-
+import MultiSelect from "@rowy/multiselect";
 import { sanitiseValue } from "./utils";
 
 export default function SingleSelect({
@@ -12,8 +9,6 @@ export default function SingleSelect({
   control,
   disabled,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
 
   return (
@@ -22,7 +17,7 @@ export default function SingleSelect({
       name={column.key}
       render={({ onChange, onBlur, value }) => (
         <>
-          <MultiSelect_
+          <MultiSelect
             value={sanitiseValue(value)}
             onChange={onChange}
             options={config.options ?? []}
@@ -33,14 +28,9 @@ export default function SingleSelect({
               label: "",
               hiddenLabel: true,
               onBlur,
+              id: `sidedrawer-field-${column.key}`,
             }}
           />
-
-          {value?.length > 0 && (
-            <div style={{ marginTop: theme.spacing(1) }}>
-              <FormattedChip label={value} />
-            </div>
-          )}
         </>
       )}
     />
diff --git a/src/components/fields/Slider/SideDrawerField.tsx b/src/components/fields/Slider/SideDrawerField.tsx
index ac8ce7e0..cb8e7816 100644
--- a/src/components/fields/Slider/SideDrawerField.tsx
+++ b/src/components/fields/Slider/SideDrawerField.tsx
@@ -1,7 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { Slider as MuiSlider, Grid, Typography } from "@mui/material";
+import { Slider as MuiSlider, Grid, Stack, Typography } from "@mui/material";
 
 export default function Slider({
   control,
@@ -42,44 +42,30 @@ export default function Slider({
           `${value}${unit ? " " + unit : ""}`;
 
         return (
-          <Grid container spacing={2} alignItems="center">
-            <Grid item>
-              <Typography
-                variant="overline"
-                component="span"
-                color="textSecondary"
-              >
-                {minLabel ?? `${min}${unit ? " " + unit : ""}`}
-              </Typography>
-            </Grid>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Typography variant="button" component="span" color="textSecondary">
+              {minLabel ?? `${min}${unit ? " " + unit : ""}`}
+            </Typography>
 
-            <Grid item xs>
-              <MuiSlider
-                valueLabelDisplay="auto"
-                min={min}
-                max={max}
-                marks={marks}
-                step={step ?? 1}
-                getAriaValueText={getAriaValueText}
-                valueLabelFormat={getValueLabelFormat}
-                value={value ?? min}
-                onClick={onBlur}
-                onChange={handleChange}
-                disabled={disabled}
-                style={{ display: "block" }}
-              />
-            </Grid>
+            <MuiSlider
+              valueLabelDisplay="auto"
+              min={min}
+              max={max}
+              marks={marks}
+              step={step ?? 1}
+              getAriaValueText={getAriaValueText}
+              valueLabelFormat={getValueLabelFormat}
+              value={value ?? min}
+              onClick={onBlur}
+              onChange={handleChange}
+              disabled={disabled}
+              style={{ display: "block", flexGrow: 1 }}
+            />
 
-            <Grid item>
-              <Typography
-                variant="overline"
-                component="span"
-                color="textSecondary"
-              >
-                {maxLabel ?? `${max}${unit ? " " + unit : ""}`}
-              </Typography>
-            </Grid>
-          </Grid>
+            <Typography variant="button" component="span" color="textSecondary">
+              {maxLabel ?? `${max}${unit ? " " + unit : ""}`}
+            </Typography>
+          </Stack>
         );
       }}
     />
diff --git a/src/components/fields/Slider/TableCell.tsx b/src/components/fields/Slider/TableCell.tsx
index f2912e96..9307b3fb 100644
--- a/src/components/fields/Slider/TableCell.tsx
+++ b/src/components/fields/Slider/TableCell.tsx
@@ -1,28 +1,10 @@
 import { IHeavyCellProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
-import { Grid } from "@mui/material";
+import { Grid, Box } from "@mui/material";
 
 import { resultColorsScale } from "utils/color";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    progress: {
-      width: "100%",
-      backgroundColor: theme.palette.divider,
-      borderRadius: 4,
-    },
-    bar: {
-      borderRadius: 4,
-      height: 8,
-      maxWidth: "100%",
-    },
-  })
-);
-
 export default function Slider({ column, value }: IHeavyCellProps) {
-  const classes = useStyles();
-
   const {
     max,
     min,
@@ -44,19 +26,32 @@ export default function Slider({ column, value }: IHeavyCellProps) {
 
   return (
     <Grid container alignItems="center" wrap="nowrap" spacing={1}>
-      <Grid item xs={6}>
+      <Grid item xs={6} style={{ fontVariantNumeric: "tabular-nums" }}>
         {value ?? 0}/{max} {unit}
       </Grid>
+
       <Grid item xs={6}>
-        <div className={classes.progress}>
-          <div
-            className={classes.bar}
-            style={{
+        <Box
+          sx={{
+            width: "100%",
+            height: 8,
+            borderRadius: 1,
+            bgcolor: "divider",
+
+            ml: -2 / 8,
+          }}
+        >
+          <Box
+            sx={{
+              borderRadius: "inherit",
+              height: "100%",
+              maxWidth: "100%",
+
               width: `${progress}%`,
               backgroundColor: resultColorsScale(progress / 100).hex(),
             }}
-          ></div>
-        </div>
+          />
+        </Box>
       </Grid>
     </Grid>
   );
diff --git a/src/components/fields/SubTable/TableCell.tsx b/src/components/fields/SubTable/TableCell.tsx
index 5fb28dfe..23b7a830 100644
--- a/src/components/fields/SubTable/TableCell.tsx
+++ b/src/components/fields/SubTable/TableCell.tsx
@@ -1,22 +1,12 @@
 import { IHeavyCellProps } from "../types";
-import clsx from "clsx";
 import { Link } from "react-router-dom";
 
-import { makeStyles, createStyles } from "@mui/styles";
-import { Grid, IconButton } from "@mui/material";
+import { Stack, IconButton } from "@mui/material";
 import LaunchIcon from "@mui/icons-material/Launch";
 
 import { useSubTableData } from "./utils";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: { padding: theme.spacing(0, 0.625, 0, 1) },
-    labelContainer: { overflowX: "hidden" },
-  })
-);
-
 export default function SubTable({ column, row }: IHeavyCellProps) {
-  const classes = useStyles();
   const { documentCount, label, subTablePath } = useSubTableData(
     column,
     row,
@@ -26,28 +16,27 @@ export default function SubTable({ column, row }: IHeavyCellProps) {
   if (!row.ref) return null;
 
   return (
-    <Grid
-      container
-      wrap="nowrap"
+    <Stack
+      direction="row"
       alignItems="center"
-      spacing={1}
-      className={clsx("cell-collapse-padding", classes.root)}
+      justifyContent="space-between"
+      className="cell-collapse-padding"
+      sx={{ p: "var(--cell-padding)", pr: 0.5 }}
     >
-      <Grid item xs className={classes.labelContainer}>
+      <div style={{ flexGrow: 1, overflow: "hidden" }}>
         {documentCount} {column.name as string}: {label}
-      </Grid>
+      </div>
 
-      <Grid item>
-        <IconButton
-          component={Link}
-          to={subTablePath}
-          className="row-hover-iconButton"
-          size="small"
-          disabled={!subTablePath}
-        >
-          <LaunchIcon />
-        </IconButton>
-      </Grid>
-    </Grid>
+      <IconButton
+        component={Link}
+        to={subTablePath}
+        className="row-hover-iconButton"
+        size="small"
+        disabled={!subTablePath}
+        style={{ flexShrink: 0 }}
+      >
+        <LaunchIcon />
+      </IconButton>
+    </Stack>
   );
 }
diff --git a/src/components/fields/Url/BasicCell.tsx b/src/components/fields/Url/BasicCell.tsx
deleted file mode 100644
index 79d00c2e..00000000
--- a/src/components/fields/Url/BasicCell.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IBasicCellProps } from "../types";
-
-import { Link } from "@mui/material";
-
-export default function Url({ value }: IBasicCellProps) {
-  if (!value || typeof value !== "string") return null;
-
-  const href = value.includes("http") ? value : `https://${value}`;
-
-  return (
-    <Link
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      underline="always"
-      style={{ fontWeight: "bold" }}
-    >
-      {value}
-    </Link>
-  );
-}
diff --git a/src/components/fields/Url/SideDrawerField.tsx b/src/components/fields/Url/SideDrawerField.tsx
index 7ee5de1d..4729a251 100644
--- a/src/components/fields/Url/SideDrawerField.tsx
+++ b/src/components/fields/Url/SideDrawerField.tsx
@@ -1,7 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { Grid, TextField, IconButton } from "@mui/material";
+import { Stack, TextField, IconButton } from "@mui/material";
 import LaunchIcon from "@mui/icons-material/Launch";
 
 export default function Url({
@@ -15,7 +15,7 @@ export default function Url({
       name={column.key}
       render={({ onChange, onBlur, value }) => {
         return (
-          <Grid container wrap="nowrap">
+          <Stack direction="row">
             <TextField
               variant="filled"
               fullWidth
@@ -29,8 +29,9 @@ export default function Url({
               disabled={disabled}
               type="url"
             />
+
             <IconButton
-              component="a"
+              size="small"
               href={
                 typeof value !== "string" || value.includes("http")
                   ? value
@@ -38,12 +39,13 @@ export default function Url({
               }
               target="_blank"
               rel="noopener noreferrer"
-              style={{ width: 56, marginLeft: 16 }}
               disabled={!value || typeof value !== "string"}
+              edge="end"
+              sx={{ ml: 1 }}
             >
               <LaunchIcon />
             </IconButton>
-          </Grid>
+          </Stack>
         );
       }}
     />
diff --git a/src/components/fields/Url/TableCell.tsx b/src/components/fields/Url/TableCell.tsx
new file mode 100644
index 00000000..a46e4e80
--- /dev/null
+++ b/src/components/fields/Url/TableCell.tsx
@@ -0,0 +1,33 @@
+import { IBasicCellProps } from "../types";
+
+import { Stack, IconButton } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+export default function Url({ value }: IBasicCellProps) {
+  if (!value || typeof value !== "string") return null;
+
+  const href = value.includes("http") ? value : `https://${value}`;
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      className="cell-collapse-padding"
+      sx={{ p: "var(--cell-padding)", pr: 0.5 }}
+    >
+      <div style={{ flexGrow: 1, overflow: "hidden" }}>{value}</div>
+
+      <IconButton
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="row-hover-iconButton"
+        size="small"
+        style={{ flexShrink: 0 }}
+      >
+        <LaunchIcon />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/src/components/fields/Url/index.tsx b/src/components/fields/Url/index.tsx
index 327bde1b..ff996d7d 100644
--- a/src/components/fields/Url/index.tsx
+++ b/src/components/fields/Url/index.tsx
@@ -3,7 +3,7 @@ import { IFieldConfig, FieldType } from "components/fields/types";
 import withBasicCell from "../_withTableCell/withBasicCell";
 
 import UrlIcon from "@mui/icons-material/Link";
-import BasicCell from "../_BasicCell/BasicCellValue";
+import TableCell from "./TableCell";
 import TextEditor from "components/Table/editors/TextEditor";
 
 const SideDrawerField = lazy(
@@ -20,7 +20,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <UrlIcon />,
   description: "Web address.",
-  TableCell: withBasicCell(BasicCell),
+  TableCell: withBasicCell(TableCell),
   TableEditor: TextEditor,
   SideDrawerField,
 };
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index 21b84d8b..e7be0ebb 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -1,28 +1,13 @@
-import clsx from "clsx";
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { makeStyles, createStyles } from "@mui/styles";
-import { Grid, Typography, Avatar } from "@mui/material";
+import { Stack, Typography, Avatar } from "@mui/material";
 import { useFieldStyles } from "components/SideDrawer/Form/utils";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "constants/dates";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    labelContainer: { cursor: "default" },
-
-    avatar: {
-      width: 32,
-      height: 32,
-      marginRight: theme.spacing(1.5),
-    },
-  })
-);
-
 export default function User({ control, column }: ISideDrawerFieldProps) {
-  const classes = useStyles();
   const fieldClasses = useFieldStyles();
 
   return (
@@ -37,27 +22,28 @@ export default function User({ control, column }: ISideDrawerFieldProps) {
           DATE_TIME_FORMAT
         );
         return (
-          <Grid
-            container
+          <Stack
+            direction="row"
             alignItems="center"
-            className={clsx(fieldClasses.root, classes.labelContainer)}
+            className={fieldClasses.root}
           >
-            <Grid item>
-              <Avatar
-                alt="Avatar"
-                src={value.photoURL}
-                className={classes.avatar}
-              />
-            </Grid>
-            <Grid item>
-              <Typography variant="body2">
-                {value.displayName} ({value.email})
+            <Avatar
+              alt="Avatar"
+              src={value.photoURL}
+              sx={{ width: 32, height: 32, ml: -0.5, mr: 1.5 }}
+            />
+
+            <Typography variant="body2" component="div">
+              {value.displayName} ({value.email})
+              <Typography
+                variant="caption"
+                color="textSecondary"
+                component="div"
+              >
+                Updated at {dateLabel}
               </Typography>
-              <Typography variant="body2" color="textSecondary">
-                {dateLabel}
-              </Typography>
-            </Grid>
-          </Grid>
+            </Typography>
+          </Stack>
         );
       }}
     />
diff --git a/src/components/fields/User/TableCell.tsx b/src/components/fields/User/TableCell.tsx
index ae110517..c35f34b3 100644
--- a/src/components/fields/User/TableCell.tsx
+++ b/src/components/fields/User/TableCell.tsx
@@ -18,7 +18,7 @@ export default function User({ value }: IHeavyCellProps) {
         size="small"
         avatar={<Avatar alt="Avatar" src={value.photoURL} />}
         label={value.displayName}
-        sx={{ height: 24 }}
+        sx={{ mx: -0.25 }}
       />
     </Tooltip>
   );
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 3c5a8f8f..aaa56e91 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -281,10 +281,12 @@ export const components = (theme: Theme): ThemeOptions => {
         },
       },
       MuiInputLabel: {
-        defaultProps: {
-          shrink: true,
-        },
         styleOverrides: {
+          root: {
+            ...theme.typography.caption,
+            fontWeight: 500,
+            color: theme.palette.text.primary,
+          },
           filled: {
             "&, &.MuiInputLabel-shrink": { transform: "none" },
 
@@ -295,10 +297,6 @@ export const components = (theme: Theme): ThemeOptions => {
             maxWidth: "none",
             overflow: "visible",
             whiteSpace: "normal",
-
-            ...theme.typography.caption,
-            fontWeight: 500,
-            color: theme.palette.text.primary,
           },
         },
       },
@@ -760,8 +758,12 @@ export const components = (theme: Theme): ThemeOptions => {
         styleOverrides: {
           root: {
             display: "flex",
+            alignItems: "flex-start",
             "& .MuiSwitch-root": { marginRight: theme.spacing(1) },
           },
+          label: {
+            marginTop: 10,
+          },
           labelPlacementStart: {
             "& .MuiSwitch-root": { marginLeft: theme.spacing(1) },
           },
@@ -871,6 +873,12 @@ export const components = (theme: Theme): ThemeOptions => {
         },
       },
 
+      MuiRating: {
+        styleOverrides: {
+          iconFilled: { color: theme.palette.text.secondary },
+        },
+      },
+
       MuiYearPicker: {
         styleOverrides: {
           root: {
diff --git a/types/custom.ts b/types/custom.ts
new file mode 100644
index 00000000..9ce1a20b
--- /dev/null
+++ b/types/custom.ts
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: any;
+  export default content;
+}
diff --git a/yarn.lock b/yarn.lock
index 1f6729fd..f190913e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2904,7 +2904,7 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@tinymce/tinymce-react@^3.4.0":
+"@tinymce/tinymce-react@^3.12.6":
   version "3.12.6"
   resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.12.6.tgz#8a4e2a5c5026b7a0c9c4c839af4d691804aa0604"
   integrity sha512-a7/Ns7uVsSr2N0fCxn+OhDx8f9JqfywTlHbXsgcwlWB6vIBMIjjRBJ6PGo/5H0y2vfzO6fBzd4gc6h05Cm5R7A==
@@ -13369,6 +13369,14 @@ raw-body@^2.3.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -15666,11 +15674,16 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tinymce@^5.2.0, tinymce@^5.5.1:
+tinymce@^5.5.1:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.9.0.tgz#c579ab337e315cc54f568f65d081002e6e1dc3e6"
   integrity sha512-kaCTgR2NtJe9mgU46WPgUZFy5e2x9IgC9/kxqHg8ikFePi8bYE3bf3qmiWR+hXH/pr8PDFRsRCpqOuLEtdhG8Q==
 
+tinymce@^5.9.2:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.9.2.tgz#c56a1d7800ac23026fbe6e0fcf444c0f157ccafe"
+  integrity sha512-/dHTsbxo0YwLvB5krRqiw/qHEm04/k6l0dvAQ3hO5oNw4e9QalKcUQCdr+g/b/FWcsUMP6scvKmm8MX50/j3Cg==
+
 tmp@0.0.33, tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"