diff --git a/package.json b/package.json
index 202b7027..d1943637 100644
--- a/package.json
+++ b/package.json
@@ -12,14 +12,15 @@
     "@date-io/date-fns": "1.x",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@hookform/resolvers": "^2.8.1",
     "@mdi/js": "^5.9.55",
     "@monaco-editor/react": "^4.1.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/lab": "^5.0.0-alpha.47",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
-    "@rowy/form-builder": "^0.1.2",
-    "@rowy/multiselect": "^0.1.12",
+    "@rowy/form-builder": "^0.2.0",
+    "@rowy/multiselect": "^0.2.0",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
@@ -51,7 +52,7 @@
     "react-element-scroll-hook": "^1.1.0",
     "react-firebaseui": "^5.0.2",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6",
+    "react-hook-form": "^7.16.1",
     "react-image": "^4.0.3",
     "react-joyride": "^2.3.0",
     "react-json-view": "^1.19.1",
diff --git a/src/components/Auth/MarketingBanner.tsx b/src/components/Auth/MarketingBanner.tsx
index bc0f91d7..20021334 100644
--- a/src/components/Auth/MarketingBanner.tsx
+++ b/src/components/Auth/MarketingBanner.tsx
@@ -76,7 +76,7 @@ export default function MarketingBanner() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            Join our Community
+            Join our community
           </Button>
           <Button
             variant="outlined"
diff --git a/src/components/CodeEditorHelper/index.tsx b/src/components/CodeEditorHelper/index.tsx
index 660f5e3e..28e45fc0 100644
--- a/src/components/CodeEditorHelper/index.tsx
+++ b/src/components/CodeEditorHelper/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Stack,
-  Typography,
-  Grid,
-  Tooltip,
-  Chip,
-  Button,
-} from "@mui/material";
+import { Stack, Typography, Grid, Tooltip, Chip, Button } from "@mui/material";
 import OpenIcon from "@mui/icons-material/OpenInNew";
 export interface ICodeEditorHelperProps {
   docLink: string;
@@ -79,7 +72,7 @@ export default function CodeEditorHelper({
         href={docLink}
         style={{ flexShrink: 0 }}
       >
-        Examples & Docs
+        Examples & docs
       </Button>
     </Stack>
   );
diff --git a/src/components/ConnectServiceSelect/PopupContents.tsx b/src/components/ConnectServiceSelect/PopupContents.tsx
index cfd77e59..0b6b71c7 100644
--- a/src/components/ConnectServiceSelect/PopupContents.tsx
+++ b/src/components/ConnectServiceSelect/PopupContents.tsx
@@ -194,7 +194,7 @@ export default function PopupContents({
               color="primary"
               className={classes.selectAllButton}
             >
-              Clear Selection
+              Clear selection
             </Button>
           </Grid>
         </Grid>
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 6ac2a78d..11e28d99 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -29,7 +29,7 @@ export interface IEmptyStateProps extends Partial<GridProps> {
  * Override with props that are passed to the root MUI `Grid` component.
  */
 export default function EmptyState({
-  message = "Nothing Here",
+  message = "Nothing here",
   description,
   Icon = ErrorIcon,
   fullScreen = false,
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index aa9f78ae..5c20b96d 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -27,7 +27,7 @@ class ErrorBoundary extends React.Component<
 
       return (
         <EmptyState
-          message="Something Went Wrong"
+          message="Something went wrong"
           description={
             <>
               <span>{this.state.errorMessage}</span>
@@ -50,7 +50,7 @@ class ErrorBoundary extends React.Component<
                   rel="noopener noreferrer"
                   endIcon={<OpenInNewIcon />}
                 >
-                  Report Issue
+                  Report issue
                 </Button>
               )}
             </>
diff --git a/src/components/Home/AccessDenied.tsx b/src/components/Home/AccessDenied.tsx
index e2ac2f48..5c103085 100644
--- a/src/components/Home/AccessDenied.tsx
+++ b/src/components/Home/AccessDenied.tsx
@@ -15,7 +15,7 @@ export default function AccessDenied() {
     <EmptyState
       fullScreen
       Icon={SecurityIcon}
-      message="Access Denied"
+      message="Access denied"
       description={
         <>
           <Typography>
@@ -38,7 +38,7 @@ export default function AccessDenied() {
           </Typography>
 
           <Button component={Link} to={routes.signOut}>
-            Sign Out
+            Sign out
           </Button>
         </>
       }
diff --git a/src/components/Navigation/Breadcrumbs.tsx b/src/components/Navigation/Breadcrumbs.tsx
index c44cee6e..b12898f8 100644
--- a/src/components/Navigation/Breadcrumbs.tsx
+++ b/src/components/Navigation/Breadcrumbs.tsx
@@ -34,7 +34,7 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       separator={<ArrowRightIcon />}
-      aria-label="sub-table breadcrumbs"
+      aria-label="Sub-table breadcrumbs"
       sx={{
         "& ol": {
           pl: 2,
diff --git a/src/components/Navigation/Notifications/index.tsx b/src/components/Navigation/Notifications/index.tsx
index ee160e68..162e2a3e 100644
--- a/src/components/Navigation/Notifications/index.tsx
+++ b/src/components/Navigation/Notifications/index.tsx
@@ -98,7 +98,7 @@ const Notification = () => {
                 secondary={notification.subtitle}
               />
               <ListItemSecondaryAction>
-                <IconButton edge="end" aria-label="delete">
+                <IconButton edge="end" aria-label="Delete">
                   <DeleteIcon />
                 </IconButton>
               </ListItemSecondaryAction>
diff --git a/src/components/Settings/ProjectSettings/About.tsx b/src/components/Settings/ProjectSettings/About.tsx
index 84827fc8..de51d51a 100644
--- a/src/components/Settings/ProjectSettings/About.tsx
+++ b/src/components/Settings/ProjectSettings/About.tsx
@@ -161,7 +161,7 @@ export default function About() {
                 onClick={checkForUpdate}
                 loading={checkState === "LOADING"}
               >
-                Check for Updates
+                Check for updates
               </LoadingButton>
             ) : (
               <Button
@@ -172,7 +172,7 @@ export default function About() {
                   <InlineOpenInNewIcon sx={{ fontSize: "18px !important" }} />
                 }
               >
-                How to Update
+                How to update
               </Button>
             )}
           </Grid>
@@ -189,7 +189,7 @@ export default function About() {
           justifyContent="space-between"
         >
           <Grid item>
-            <Typography>Firebase Project: {projectId}</Typography>
+            <Typography>Firebase project: {projectId}</Typography>
           </Grid>
 
           <Grid item>
diff --git a/src/components/Settings/ProjectSettings/Authentication.tsx b/src/components/Settings/ProjectSettings/Authentication.tsx
index 5980a7bf..f4a7af5c 100644
--- a/src/components/Settings/ProjectSettings/Authentication.tsx
+++ b/src/components/Settings/ProjectSettings/Authentication.tsx
@@ -21,7 +21,7 @@ export default function Authentication({
   return (
     <>
       <MultiSelect
-        label="Sign-In Options"
+        label="Sign-in options"
         value={signInOptions}
         options={Object.keys(authOptions).map((option) => ({
           value: option,
diff --git a/src/components/Settings/ProjectSettings/RowyRun.tsx b/src/components/Settings/ProjectSettings/RowyRun.tsx
index cf89505e..5d51d20d 100644
--- a/src/components/Settings/ProjectSettings/RowyRun.tsx
+++ b/src/components/Settings/ProjectSettings/RowyRun.tsx
@@ -157,7 +157,7 @@ export default function RowyRun({
       target="_blank"
       rel="noopener noreferrer"
     >
-      Deploy Instructions
+      Deploy instructions
     </Button>
   );
 
@@ -212,7 +212,7 @@ export default function RowyRun({
                   onClick={checkForUpdate}
                   loading={checkState === "LOADING"}
                 >
-                  Check for Updates
+                  Check for updates
                 </LoadingButton>
               ) : (
                 deployButton
@@ -248,7 +248,7 @@ export default function RowyRun({
         <Grid container spacing={1} alignItems="center" direction="row">
           <Grid item xs>
             <TextField
-              label="Cloud Run Instance URL"
+              label="Cloud Run instance URL"
               id="rowyRunUrl"
               value={inputRowyRunUrl}
               onChange={(e) => setInputRowyRunUrl(e.target.value)}
diff --git a/src/components/Settings/ThemeColorPicker.tsx b/src/components/Settings/ThemeColorPicker.tsx
index cf43c479..c22900d9 100644
--- a/src/components/Settings/ThemeColorPicker.tsx
+++ b/src/components/Settings/ThemeColorPicker.tsx
@@ -51,7 +51,7 @@ export default function ThemeColorPicker({
       >
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
-            Light Theme
+            Light theme
           </Typography>
           <ColorPicker
             width={244}
@@ -100,7 +100,7 @@ export default function ThemeColorPicker({
 
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
-            Dark Theme
+            Dark theme
           </Typography>
           <ColorPicker
             width={244}
diff --git a/src/components/Settings/UserManagement/InviteUser.tsx b/src/components/Settings/UserManagement/InviteUser.tsx
index 404f547a..0c581c75 100644
--- a/src/components/Settings/UserManagement/InviteUser.tsx
+++ b/src/components/Settings/UserManagement/InviteUser.tsx
@@ -48,19 +48,19 @@ export default function InviteUser() {
   return (
     <>
       <Button
-        aria-label="Invite User"
+        aria-label="Invite user"
         onClick={() => setOpen(true)}
         variant="text"
         color="primary"
         startIcon={<AddIcon />}
         sx={{ "&&": { mb: -0.5 } }}
       >
-        Invite User
+        Invite user
       </Button>
 
       {open && (
         <Modal
-          title="Invite User"
+          title="Invite user"
           onClose={() => setOpen(false)}
           maxWidth="xs"
           body={
@@ -80,7 +80,7 @@ export default function InviteUser() {
               </DialogContentText>
 
               <TextField
-                label="Email Address"
+                label="Email address"
                 id="invite-email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
diff --git a/src/components/Settings/UserManagement/UserItem.tsx b/src/components/Settings/UserManagement/UserItem.tsx
index 5d42967f..3fdc086c 100644
--- a/src/components/Settings/UserManagement/UserItem.tsx
+++ b/src/components/Settings/UserManagement/UserItem.tsx
@@ -126,24 +126,24 @@ export default function UserItem({ id, user, roles: rolesProp }: User) {
               sx: {
                 mr: 0.5,
 
-                "& .MuiInputLabel-root": {
+                "&& .MuiInputLabel-root": {
                   opacity: 0,
                   mt: -3,
                 },
 
-                "& .MuiFilledInput-root": {
+                "&& .MuiFilledInput-root": {
                   bgcolor: "transparent",
                   boxShadow: 0,
                   "&::before": { content: "none" },
 
                   "&:hover, &.Mui-focused": { bgcolor: "action.hover" },
                 },
-                "& .MuiSelect-select.MuiFilledInput-input": {
+                "&& .MuiSelect-select.MuiFilledInput-input": {
                   typography: "button",
                   pl: 1,
                   pr: 3.25,
                 },
-                "& .MuiSelect-icon": {
+                "&& .MuiSelect-icon": {
                   right: 2,
                 },
               },
@@ -163,9 +163,9 @@ export default function UserItem({ id, user, roles: rolesProp }: User) {
               <CopyIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip title="Delete">
+          <Tooltip title="Delete…">
             <IconButton
-              aria-label="Delete"
+              aria-label="Delete…"
               color="error"
               onClick={handleDelete}
             >
diff --git a/src/components/Settings/UserSettings/Account.tsx b/src/components/Settings/UserSettings/Account.tsx
index 90ef50a3..96e6958b 100644
--- a/src/components/Settings/UserSettings/Account.tsx
+++ b/src/components/Settings/UserSettings/Account.tsx
@@ -27,7 +27,7 @@ export default function Account({ settings }: IUserSettingsChildProps) {
 
       <Grid item>
         <Button component={Link} to={routes.signOut}>
-          Sign Out
+          Sign out
         </Button>
       </Grid>
     </Grid>
diff --git a/src/components/Setup/Step1RowyRun.tsx b/src/components/Setup/Step1RowyRun.tsx
index f4d89755..ee55026e 100644
--- a/src/components/Setup/Step1RowyRun.tsx
+++ b/src/components/Setup/Step1RowyRun.tsx
@@ -85,7 +85,7 @@ export default function Step1RowyRun({
       rel="noopener noreferrer"
       endIcon={<OpenInNewIcon />}
     >
-      Deploy Instructions
+      Deploy instructions
     </Button>
   );
 
@@ -122,7 +122,7 @@ export default function Step1RowyRun({
               >
                 <TextField
                   id="rowyRunUrl"
-                  label="Rowy Run Instance URL"
+                  label="Rowy Run instance URL"
                   placeholder="https://*.run.app"
                   value={rowyRunUrl}
                   onChange={(e) => setRowyRunUrl(e.target.value)}
diff --git a/src/components/Setup/Step2ServiceAccount.tsx b/src/components/Setup/Step2ServiceAccount.tsx
index 08af0388..264cdf7d 100644
--- a/src/components/Setup/Step2ServiceAccount.tsx
+++ b/src/components/Setup/Step2ServiceAccount.tsx
@@ -104,7 +104,7 @@ export default function Step2ServiceAccount({
                 rel="noopener noreferrer"
                 endIcon={<OpenInNewIcon />}
               >
-                Set Up Service Account
+                Set up service account
               </LoadingButton>
               <LoadingButton
                 variant="contained"
@@ -126,7 +126,7 @@ export default function Step2ServiceAccount({
                   rel="noopener noreferrer"
                   color="text.primary"
                 >
-                  Setup Guide
+                  Setup guide
                   <InlineOpenInNewIcon />
                 </Link>
               </Typography>
diff --git a/src/components/Setup/Step3ProjectOwner.tsx b/src/components/Setup/Step3ProjectOwner.tsx
index 6228e3b8..73fe92ad 100644
--- a/src/components/Setup/Step3ProjectOwner.tsx
+++ b/src/components/Setup/Step3ProjectOwner.tsx
@@ -101,7 +101,7 @@ export default function Step3ProjectOwner({
                 rel="noopener noreferrer"
                 endIcon={<OpenInNewIcon />}
               >
-                Set Up in Firebase Console
+                Set up in Firebase Console
               </Button>
 
               <Button
@@ -155,7 +155,7 @@ export default function Step3ProjectOwner({
                 loading={hasRoles === "LOADING"}
                 onClick={setRoles}
               >
-                Assign Roles
+                Assign roles
               </LoadingButton>
 
               {typeof hasRoles === "string" && hasRoles !== "LOADING" && (
diff --git a/src/components/Setup/Step4Rules.tsx b/src/components/Setup/Step4Rules.tsx
index f80fed07..404351cf 100644
--- a/src/components/Setup/Step4Rules.tsx
+++ b/src/components/Setup/Step4Rules.tsx
@@ -140,7 +140,7 @@ export default function Step4Rules({
               startIcon={<CopyIcon />}
               onClick={() => navigator.clipboard.writeText(rules)}
             >
-              Copy to Clipboard
+              Copy to clipboard
             </Button>
           </>
         )}
@@ -168,7 +168,7 @@ export default function Step4Rules({
         >
           <TextField
             id="new-rules"
-            label="New Rules"
+            label="New rules"
             value={newRules}
             onChange={(e) => setNewRules(e.target.value)}
             multiline
@@ -189,7 +189,7 @@ export default function Step4Rules({
             onClick={setRules}
             loading={rulesStatus === "LOADING"}
           >
-            Set Firestore Rules
+            Set Firestore rules
           </LoadingButton>
 
           {rulesStatus !== "LOADING" && typeof rulesStatus === "string" && (
diff --git a/src/components/SideDrawer/Form/Autosave.tsx b/src/components/SideDrawer/Form/Autosave.tsx
index de996ad7..7dc6854f 100644
--- a/src/components/SideDrawer/Form/Autosave.tsx
+++ b/src/components/SideDrawer/Form/Autosave.tsx
@@ -4,7 +4,7 @@ import _isEqual from "lodash/isEqual";
 import _pick from "lodash/pick";
 import _pickBy from "lodash/pickBy";
 
-import { Control, UseFormMethods, useWatch } from "react-hook-form";
+import { Control, UseFormReturn, useWatch } from "react-hook-form";
 import { Values } from "./utils";
 
 import { useProjectContext } from "contexts/ProjectContext";
@@ -14,8 +14,8 @@ export interface IAutosaveProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   row: any;
-  reset: UseFormMethods["reset"];
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
 }
 
 const getEditables = (values: Values, tableState?: TableState) =>
diff --git a/src/components/SideDrawer/Form/Reset.tsx b/src/components/SideDrawer/Form/Reset.tsx
index eef61568..fd75d038 100644
--- a/src/components/SideDrawer/Form/Reset.tsx
+++ b/src/components/SideDrawer/Form/Reset.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { UseFormMethods } from "react-hook-form";
+import { UseFormReturn } from "react-hook-form";
 import _pickBy from "lodash/pickBy";
 import _isEqual from "lodash/isEqual";
 
@@ -7,9 +7,9 @@ import { Values } from "./utils";
 
 export interface IResetProps {
   defaultValues: Values;
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
-  reset: UseFormMethods["reset"];
-  getValues: UseFormMethods["getValues"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  getValues: UseFormReturn["getValues"];
 }
 
 /**
@@ -38,7 +38,7 @@ export default function Reset({
       const diff = _pickBy(getValues(), (v, k) => !_isEqual(v, resetValues[k]));
       // Reset if needed & keep the current dirty fields
       if (Object.keys(diff).length > 0) {
-        reset(resetValues, { isDirty: true, dirtyFields: true });
+        reset(resetValues, { keepDirty: true });
       }
     },
     // `defaultValues` is the `initialValue` of each field type +
diff --git a/src/components/SideDrawer/Form/index.tsx b/src/components/SideDrawer/Form/index.tsx
index 13b8d54e..729342d2 100644
--- a/src/components/SideDrawer/Form/index.tsx
+++ b/src/components/SideDrawer/Form/index.tsx
@@ -38,10 +38,8 @@ export default function Form({ values }: IFormProps) {
   const { ref: docRef, ...rowValues } = values;
   const defaultValues = { ...initialValues, ...rowValues };
 
-  const { control, reset, formState, getValues } = useForm({
-    mode: "onBlur",
-    defaultValues,
-  });
+  const methods = useForm({ mode: "onBlur", defaultValues });
+  const { control, reset, formState, getValues } = methods;
   const { dirtyFields } = formState;
 
   // const { sideDrawerRef } = useProjectContext();
@@ -105,6 +103,7 @@ export default function Form({ values }: IFormProps) {
                 control,
                 docRef,
                 disabled: field.editable === false,
+                useFormMethods: methods,
               })}
             </FieldWrapper>
           );
@@ -113,7 +112,7 @@ export default function Form({ values }: IFormProps) {
         <FieldWrapper
           type="debug"
           name="_debug_path"
-          label="Document Path"
+          label="Document path"
           debugText={values.ref?.path ?? values.id ?? "No ref"}
         />
       </Stack>
diff --git a/src/components/Table/BulkActions/index.tsx b/src/components/Table/BulkActions/index.tsx
index bd015d06..f9b8f955 100644
--- a/src/components/Table/BulkActions/index.tsx
+++ b/src/components/Table/BulkActions/index.tsx
@@ -262,11 +262,11 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
                   color="secondary"
                   onClick={() => {
                     requestConfirmation({
-                      title: "Duplicate Rows?",
+                      title: "Duplicate rows?",
                       body: `Are you sure you want to duplicate the ${numSelected} selected row${
                         numSelected !== 1 ? "s" : ""
                       }?`,
-                      confirm: "Duplicate Rows",
+                      confirm: "Duplicate rows",
                       handleConfirm: handleDuplicate,
                     });
                   }}
@@ -283,11 +283,11 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
                   color="secondary"
                   onClick={() => {
                     requestConfirmation({
-                      title: "Delete Rows?",
+                      title: "Delete rows?",
                       body: `Are you sure you want to delete the ${numSelected} select row${
                         numSelected !== 1 ? "s" : ""
                       }?`,
-                      confirm: "Delete Rows",
+                      confirm: "Delete rows",
                       handleConfirm: handleDelete,
                     });
                   }}
diff --git a/src/components/Table/CellValidation.tsx b/src/components/Table/CellValidation.tsx
index 02fb78db..16d9bf04 100644
--- a/src/components/Table/CellValidation.tsx
+++ b/src/components/Table/CellValidation.tsx
@@ -67,7 +67,7 @@ export default function CellValidation({
       <>
         <RichTooltip
           icon={<ErrorIcon fontSize="inherit" color="error" />}
-          title="Invalid Data"
+          title="Invalid data"
           message="This row will not be saved until all the required fields contain valid data"
           placement="right"
           render={({ openTooltip }) => <Dot onClick={openTooltip} />}
@@ -82,7 +82,7 @@ export default function CellValidation({
       <>
         <RichTooltip
           icon={<WarningIcon fontSize="inherit" color="warning" />}
-          title="Required Field"
+          title="Required field"
           message="This row will not be saved until all the required fields contain valid data"
           placement="right"
           render={({ openTooltip }) => <Dot onClick={openTooltip} />}
diff --git a/src/components/Table/ColumnHeader.tsx b/src/components/Table/ColumnHeader.tsx
index fb33e31c..c5e720b1 100644
--- a/src/components/Table/ColumnHeader.tsx
+++ b/src/components/Table/ColumnHeader.tsx
@@ -263,7 +263,7 @@ export default function DraggableHeaderRenderer<R>({
             title={
               isAsc
                 ? "Unsort"
-                : `Sort by ${isDesc ? "Ascending" : "Descending"}`
+                : `Sort by ${isDesc ? "ascending" : "descending"}`
             }
           >
             <IconButton
@@ -274,7 +274,7 @@ export default function DraggableHeaderRenderer<R>({
               aria-label={
                 isAsc
                   ? "Unsort"
-                  : `Sort by ${isDesc ? "Ascending" : "Descending"}`
+                  : `Sort by ${isDesc ? "ascending" : "descending"}`
               }
               className={clsx(classes.sortIcon, isAsc && classes.sortIconAsc)}
             >
@@ -290,7 +290,7 @@ export default function DraggableHeaderRenderer<R>({
             (column as any).type
           ))) && (
         <Grid item>
-          <Tooltip title="Column Settings">
+          <Tooltip title="Column settings">
             <IconButton
               size="small"
               className={classes.dropdownButton}
diff --git a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index 8b2f7b63..45bc8cec 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -60,7 +60,7 @@ export default function DefaultValueInput({
     <>
       <TextField
         select
-        label="Default Value Type"
+        label="Default value type"
         value={config.defaultValue?.type ?? "undefined"}
         onChange={(e) => handleChange("defaultValue.type")(e.target.value)}
         fullWidth
diff --git a/src/components/Table/ColumnMenu/FieldSettings/index.tsx b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
index 917351e0..ce388fe7 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/index.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
@@ -91,7 +91,7 @@ export default function FieldSettings(props: IMenuModalProps) {
                 sx={{ borderTop: 1, borderColor: "divider", pt: 3 }}
               >
                 <Typography variant="subtitle1">
-                  Rendered Field Config
+                  Rendered field config
                 </Typography>
                 {createElement(rendedFieldSettings, {
                   config: newConfig,
@@ -114,7 +114,7 @@ export default function FieldSettings(props: IMenuModalProps) {
           onClick: () => {
             if (showRebuildPrompt) {
               requestConfirmation({
-                title: "Deploy Changes",
+                title: "Deploy changes",
                 body: "You have made changes that affect the behavior of the cloud function of this table, Would you like to redeploy it now?",
                 confirm: "Deploy",
                 cancel: "Later",
diff --git a/src/components/Table/ColumnMenu/FieldsDropdown.tsx b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
index 766ae672..43fc7702 100644
--- a/src/components/Table/ColumnMenu/FieldsDropdown.tsx
+++ b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
@@ -49,8 +49,8 @@ export default function FieldsDropdown({
           {option.label}
         </>
       )}
-      label={label || "Field Type"}
-      labelPlural="Field Types"
+      label={label || "Field type"}
+      labelPlural="field types"
       TextFieldProps={{
         hiddenLabel: hideLabel,
         helperText: value && getFieldProp("description", value),
diff --git a/src/components/Table/ColumnMenu/NameChange.tsx b/src/components/Table/ColumnMenu/NameChange.tsx
index 04dbbf73..a2320672 100644
--- a/src/components/Table/ColumnMenu/NameChange.tsx
+++ b/src/components/Table/ColumnMenu/NameChange.tsx
@@ -19,7 +19,7 @@ export default function NameChange({
   return (
     <Modal
       onClose={handleClose}
-      title="Rename Column"
+      title="Rename column"
       maxWidth="xs"
       children={
         <TextField
@@ -27,7 +27,7 @@ export default function NameChange({
           autoFocus
           variant="filled"
           id="name"
-          label="Column Name"
+          label="Column name"
           type="text"
           fullWidth
           onChange={(e) => {
diff --git a/src/components/Table/ColumnMenu/NewColumn.tsx b/src/components/Table/ColumnMenu/NewColumn.tsx
index 6f00e1a6..78ea9b7c 100644
--- a/src/components/Table/ColumnMenu/NewColumn.tsx
+++ b/src/components/Table/ColumnMenu/NewColumn.tsx
@@ -43,7 +43,7 @@ export default function NewColumn({
   return (
     <Modal
       onClose={handleClose}
-      title="Add New Column"
+      title="Add new column"
       fullWidth
       maxWidth="xs"
       children={
@@ -54,7 +54,7 @@ export default function NewColumn({
               autoFocus
               variant="filled"
               id="columnName"
-              label="Column Name"
+              label="Column name"
               type="text"
               fullWidth
               onChange={(e) => setColumnLabel(e.target.value)}
@@ -67,7 +67,7 @@ export default function NewColumn({
               value={fieldKey}
               variant="filled"
               id="fieldKey"
-              label="Field Key"
+              label="Field key"
               type="text"
               fullWidth
               onChange={(e) => setFieldKey(e.target.value)}
diff --git a/src/components/Table/ColumnMenu/TypeChange.tsx b/src/components/Table/ColumnMenu/TypeChange.tsx
index 6e9a227b..93a2fafb 100644
--- a/src/components/Table/ColumnMenu/TypeChange.tsx
+++ b/src/components/Table/ColumnMenu/TypeChange.tsx
@@ -18,7 +18,7 @@ export default function FormDialog({
   return (
     <Modal
       onClose={handleClose}
-      title="Change Column Type"
+      title="Change column type"
       children={<FieldsDropdown value={newType} onChange={setType} />}
       actions={{
         primary: {
diff --git a/src/components/Table/EmptyTable.tsx b/src/components/Table/EmptyTable.tsx
index 7c82e1fd..0fb9944d 100644
--- a/src/components/Table/EmptyTable.tsx
+++ b/src/components/Table/EmptyTable.tsx
@@ -19,7 +19,7 @@ export default function EmptyTable() {
       <>
         <div>
           <Typography variant="h6" component="h2" gutterBottom>
-            Get Started
+            Get started
           </Typography>
           <Typography>
             There is existing data in the Firestore collection:
@@ -51,7 +51,7 @@ export default function EmptyTable() {
       <>
         <div>
           <Typography variant="h6" component="h2" gutterBottom>
-            Get Started
+            Get started
           </Typography>
           <Typography>
             There is no data in the Firestore collection:
@@ -113,7 +113,7 @@ export default function EmptyTable() {
               }
               disabled={!columnMenuRef?.current}
             >
-              Add Column
+              Add column
             </Button>
 
             <ColumnMenu />
diff --git a/src/components/Table/Filters/index.tsx b/src/components/Table/Filters/index.tsx
index f1a6ca06..c8aac8ee 100644
--- a/src/components/Table/Filters/index.tsx
+++ b/src/components/Table/Filters/index.tsx
@@ -455,7 +455,7 @@ const Filters = () => {
                 SelectProps={{ displayEmpty: true }}
               >
                 <MenuItem disabled value="" style={{ display: "none" }}>
-                  Select Column
+                  Select column
                 </MenuItem>
                 {filterColumns.map((c) => (
                   <MenuItem key={c.key} value={c.key}>
@@ -483,7 +483,7 @@ const Filters = () => {
                 SelectProps={{ displayEmpty: true }}
               >
                 <MenuItem disabled value="" style={{ display: "none" }}>
-                  Select Condition
+                  Select condition
                 </MenuItem>
                 {operators.map((operator) => (
                   <MenuItem key={operator.value} value={operator.value}>
diff --git a/src/components/Table/FinalColumnHeader.tsx b/src/components/Table/FinalColumnHeader.tsx
index 98b90175..75eb32a9 100644
--- a/src/components/Table/FinalColumnHeader.tsx
+++ b/src/components/Table/FinalColumnHeader.tsx
@@ -69,7 +69,7 @@ const FinalColumnHeader: Column<any>["headerRenderer"] = ({ column }) => {
         className={classes.button}
         startIcon={<AddColumnIcon />}
       >
-        Add Column
+        Add column
       </Button>
     </Grid>
   );
diff --git a/src/components/Table/HiddenFields.tsx b/src/components/Table/HiddenFields.tsx
index 04881fa2..c8455aa3 100644
--- a/src/components/Table/HiddenFields.tsx
+++ b/src/components/Table/HiddenFields.tsx
@@ -140,7 +140,7 @@ export default function HiddenFields() {
           },
         } as any)}
         label="Hidden fields"
-        labelPlural="Fields"
+        labelPlural="fields"
         options={tableColumns}
         value={hiddenFields ?? []}
         onChange={setHiddenFields}
diff --git a/src/components/Table/Settings/Menu.tsx b/src/components/Table/Settings/Menu.tsx
index 532c8997..010a03d8 100644
--- a/src/components/Table/Settings/Menu.tsx
+++ b/src/components/Table/Settings/Menu.tsx
@@ -24,7 +24,7 @@ export default function SettingsMenu({ modal, setModal }) {
   return (
     <div>
       <IconButton
-        aria-label="more"
+        aria-label="More"
         aria-controls="long-menu"
         aria-haspopup="true"
         onClick={handleClick}
diff --git a/src/components/Table/Settings/Webhooks.tsx b/src/components/Table/Settings/Webhooks.tsx
index ad6407ed..bb00aa4e 100644
--- a/src/components/Table/Settings/Webhooks.tsx
+++ b/src/components/Table/Settings/Webhooks.tsx
@@ -130,7 +130,7 @@ export default function WebhooksDialog({ open, handleClose }) {
               }}
               // classes={{ root: classes.formControlLabel, label: classes.label }}
             />
-            <InputLabel htmlFor="webhook-type">Webhook Type</InputLabel>
+            <InputLabel htmlFor="webhook-type">Webhook type</InputLabel>
             <Select
               autoFocus
               value={state.type}
diff --git a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
index f8d467c2..03439c40 100644
--- a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
+++ b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
@@ -39,7 +39,7 @@ export default function HeaderRowSkeleton() {
           sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}
         >
           <Button variant="contained" startIcon={<AddColumnIcon />}>
-            Add Column
+            Add column
           </Button>
         </Skeleton>
       </Stack>
diff --git a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
index 50d9c9b1..5709b638 100644
--- a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
+++ b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
@@ -26,7 +26,7 @@ export default function TableHeaderSkeleton() {
       >
         <ButtonSkeleton>
           <Button variant="contained" startIcon={<AddRowIcon />}>
-            Add Row
+            Add row
           </Button>
         </ButtonSkeleton>
 
diff --git a/src/components/Table/TableHeader/Export/Download.tsx b/src/components/Table/TableHeader/Export/Download.tsx
index 50fa4eb8..37aa2a60 100644
--- a/src/components/Table/TableHeader/Export/Download.tsx
+++ b/src/components/Table/TableHeader/Export/Download.tsx
@@ -138,7 +138,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Columns to Export"
+        label="Columns to export"
         labelPlural="columns"
         TextFieldProps={{
           helperText: "Only File and Image columns are downloadable",
@@ -149,7 +149,7 @@ export default function Export({ query, closeModal }) {
 
       <TextField
         fullWidth
-        label="Package Name"
+        label="Package name"
         value={packageName}
         helperText={`${packageName}.zip`}
         onChange={(e) => setPackageName(e.target.value)}
@@ -180,7 +180,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Column Values to Include in File Names"
+        label="Column values to include in file names"
         labelPlural="columns"
         TextFieldProps={{
           autoFocus: true,
diff --git a/src/components/Table/TableHeader/Export/Export.tsx b/src/components/Table/TableHeader/Export/Export.tsx
index 2df9c7d7..22619455 100644
--- a/src/components/Table/TableHeader/Export/Export.tsx
+++ b/src/components/Table/TableHeader/Export/Export.tsx
@@ -163,7 +163,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Columns to Export"
+        label="Columns to export"
         labelPlural="columns"
         TextFieldProps={{
           autoFocus: true,
@@ -179,7 +179,7 @@ export default function Export({ query, closeModal }) {
           { label: ".json", value: "json" },
           { label: ".csv", value: "csv" },
         ]}
-        label="Export Type"
+        label="Export type"
         onChange={(v) => {
           if (v) {
             setExportType(v as "csv" | "json");
diff --git a/src/components/Table/TableHeader/Export/index.tsx b/src/components/Table/TableHeader/Export/index.tsx
index 1bf9469a..ee24afeb 100644
--- a/src/components/Table/TableHeader/Export/index.tsx
+++ b/src/components/Table/TableHeader/Export/index.tsx
@@ -114,7 +114,7 @@ export default function Export() {
                   <Tab className={classes.tab} label="Export" value="Export" />
                   <Tab
                     className={classes.tab}
-                    label="Download Attachments"
+                    label="Download attachments"
                     value="Download"
                   />
                 </TabList>
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionList.tsx b/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
index 3acecad9..e6e5b2c8 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
@@ -117,7 +117,7 @@ export default function ExtensionList({
           }}
         >
           <EmptyState
-            message="Add Your First Extension"
+            message="Add your first extension"
             description="Your extensions will appear here."
             Icon={ExtensionIcon}
           />
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
index 5b79049a..1f9fe65b 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
@@ -92,7 +92,7 @@ export default function ExtensionMigration({
 
           <div>
             <Typography variant="subtitle1" component="h3" gutterBottom>
-              1. Back Up Existing Sparks
+              1. Back up existing Sparks
             </Typography>
             <Typography paragraph>
               Back up your existing Sparks to a .ts file.
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx b/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
index 9ff548b4..b02f76bf 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
@@ -137,7 +137,7 @@ export default function ExtensionModal({
               <TextField
                 size="small"
                 required
-                label="Extension Name"
+                label="Extension name"
                 variant="filled"
                 fullWidth
                 autoFocus
@@ -178,7 +178,7 @@ export default function ExtensionModal({
             <Grid item xs={4}>
               <TextField
                 size="small"
-                label="Extension Type"
+                label="Extension type"
                 value={extensionObject.type}
                 variant="filled"
                 fullWidth
@@ -202,7 +202,7 @@ export default function ExtensionModal({
             >
               <Tab
                 value="triggersRequirements"
-                label="Triggers & Requirements"
+                label="Triggers & requirements"
               />
               <Tab value="parameters" label="Parameters" />
             </TabList>
@@ -286,7 +286,7 @@ export default function ExtensionModal({
                         mb: 1,
                       }}
                     >
-                      Required Fields (optional)
+                      Required fields (optional)
                     </FormLabel>
                     <Typography gutterBottom>
                       Optionally, select the fields that are required for the
@@ -353,7 +353,7 @@ export default function ExtensionModal({
                             <IconButton
                               color="secondary"
                               component="span"
-                              aria-label="Delete Firestore Field"
+                              aria-label="Delete Firestore field"
                               onClick={() => {
                                 setExtensionObject({
                                   ...extensionObject,
@@ -368,7 +368,7 @@ export default function ExtensionModal({
                             </IconButton>
                             <TextField
                               id={`extensions-requiredFields-firestoreField-${index}`}
-                              label="Firestore Field"
+                              label="Firestore field"
                               sx={{
                                 flexDirection: "row",
                                 alignItems: "baseline",
@@ -410,7 +410,7 @@ export default function ExtensionModal({
                             });
                           }}
                         >
-                          Add Firestore Field
+                          Add Firestore field
                         </Button>
                       </Stack>
                     </FormGroup>
@@ -464,7 +464,7 @@ export default function ExtensionModal({
             <StyledTabPanel value="parameters">
               <div style={{ flexGrow: 1 }}>
                 <Typography variant="subtitle2" gutterBottom>
-                  Extension Body
+                  Extension body
                 </Typography>
 
                 <CodeEditor
@@ -523,7 +523,7 @@ export default function ExtensionModal({
 
             if (warningMessage) {
               requestConfirmation({
-                title: "Validation Failed",
+                title: "Validation failed",
                 body: `${warningMessage}. Continue?`,
                 confirm: "Yes, I know what I’m doing",
                 cancel: "No, I’ll fix the errors",
diff --git a/src/components/Table/TableHeader/Extensions/index.tsx b/src/components/Table/TableHeader/Extensions/index.tsx
index 0b473816..247edc89 100644
--- a/src/components/Table/TableHeader/Extensions/index.tsx
+++ b/src/components/Table/TableHeader/Extensions/index.tsx
@@ -61,7 +61,7 @@ export default function ExtensionsEditor() {
   const handleClose = () => {
     if (edited) {
       requestConfirmation({
-        title: "Discard Changes",
+        title: "Discard changes",
         body: "You will lose changes you have made to extensions",
         confirm: "Discard",
         handleConfirm: () => {
diff --git a/src/components/Table/TableHeader/ImportCsv.tsx b/src/components/Table/TableHeader/ImportCsv.tsx
index caa26b7e..7cbaa762 100644
--- a/src/components/Table/TableHeader/ImportCsv.tsx
+++ b/src/components/Table/TableHeader/ImportCsv.tsx
@@ -247,7 +247,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
               inputProps={{ minRows: 3 }}
               autoFocus
               fullWidth
-              label="Paste CSV Text"
+              label="Paste CSV text"
               placeholder="column, column, …"
               onChange={(e) => {
                 if (csvData !== null) setCsvData(null);
@@ -269,7 +269,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
               variant="filled"
               autoFocus
               fullWidth
-              label="Paste URL to CSV File"
+              label="Paste URL to CSV file"
               placeholder="https://"
               onChange={(e) => {
                 if (csvData !== null) setCsvData(null);
diff --git a/src/components/Table/TableHeader/ReExecute.tsx b/src/components/Table/TableHeader/ReExecute.tsx
index d31804ff..bfa5ccc5 100644
--- a/src/components/Table/TableHeader/ReExecute.tsx
+++ b/src/components/Table/TableHeader/ReExecute.tsx
@@ -44,7 +44,7 @@ export default function ReExecute() {
   return (
     <>
       <TableHeaderButton
-        title="Force Refresh"
+        title="Force refresh"
         onClick={() => setOpen(true)}
         icon={<LoopIcon />}
       />
@@ -55,7 +55,7 @@ export default function ReExecute() {
           maxWidth="xs"
           fullWidth
           hideCloseButton
-          title="Force Refresh?"
+          title="Force refresh?"
           children="All Extensions and Derivatives in this table will re-execute."
           actions={{
             primary: {
diff --git a/src/components/Table/TableHeader/RowHeight.tsx b/src/components/Table/TableHeader/RowHeight.tsx
index f97dd2c5..11394c6d 100644
--- a/src/components/Table/TableHeader/RowHeight.tsx
+++ b/src/components/Table/TableHeader/RowHeight.tsx
@@ -26,7 +26,7 @@ export default function RowHeight() {
     <>
       <TableHeaderButton
         disabled={!tableState || !tableActions}
-        title="Row Height"
+        title="Row height"
         icon={<RowHeightIcon />}
         onClick={handleOpen}
         ref={buttonRef}
@@ -50,10 +50,10 @@ export default function RowHeight() {
             style: { zIndex: theme.zIndex.tooltip },
           },
         }}
-        label="Row Height"
+        label="Row height"
         id="row-height-select"
       >
-        <ListSubheader>Row Height</ListSubheader>
+        <ListSubheader>Row height</ListSubheader>
         {ROW_HEIGHTS.map((height) => (
           <MenuItem key={height} value={height}>
             {height - 1}px
diff --git a/src/components/Table/TableHeader/TableLogs.tsx b/src/components/Table/TableHeader/TableLogs.tsx
index 660c45fb..4d7d351d 100644
--- a/src/components/Table/TableHeader/TableLogs.tsx
+++ b/src/components/Table/TableHeader/TableLogs.tsx
@@ -308,14 +308,14 @@ function SnackLog({ log, onClose, onOpenPanel }) {
     >
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Typography variant="overline">
-          {!log && <span className={classes.whiteText}>Build Pending...</span>}
+          {!log && <span className={classes.whiteText}>Build pending…</span>}
           {log?.status === "SUCCESS" && (
             <span
               style={{
                 color: "#aed581",
               }}
             >
-              Build Completed
+              Build completed
             </span>
           )}
           {log?.status === "FAIL" && (
@@ -324,7 +324,7 @@ function SnackLog({ log, onClose, onOpenPanel }) {
                 color: "#e57373",
               }}
             >
-              Build Failed
+              Build failed
             </span>
           )}
           {log?.status === "BUILDING" && (
@@ -421,7 +421,7 @@ export default function TableLogs() {
   return (
     <>
       <TableHeaderButton
-        title="Build Logs"
+        title="Build logs"
         onClick={() => setPanelOpen(true)}
         icon={
           <>
@@ -467,14 +467,14 @@ export default function TableLogs() {
           fullHeight
           title={
             <>
-              Build Logs <Chip label="ALPHA" size="small" />
+              Build logs <Chip label="ALPHA" size="small" />
             </>
           }
           children={
             <>
               {!latestStatus && (
                 <EmptyState
-                  message="No Logs Found"
+                  message="No logs found"
                   description={
                     "When you start building, your logs should be shown here shortly"
                   }
diff --git a/src/components/Table/TableHeader/TableSettings.tsx b/src/components/Table/TableHeader/TableSettings.tsx
index 05005c2f..ecb4f887 100644
--- a/src/components/Table/TableHeader/TableSettings.tsx
+++ b/src/components/Table/TableHeader/TableSettings.tsx
@@ -18,7 +18,7 @@ export default function TableSettings() {
   return (
     <>
       <TableHeaderButton
-        title="Table Settings"
+        title="Table settings"
         onClick={() => setOpen(true)}
         icon={<SettingsIcon />}
         disabled={!table}
diff --git a/src/components/Table/TableHeader/index.tsx b/src/components/Table/TableHeader/index.tsx
index 5baad4b2..778e7ac4 100644
--- a/src/components/Table/TableHeader/index.tsx
+++ b/src/components/Table/TableHeader/index.tsx
@@ -98,7 +98,7 @@ export default function TableHeader() {
         startIcon={<AddRowIcon />}
         // sx={{ pr: 1.5 }}
       >
-        Add Row
+        Add row
       </Button>
       {/*
         <Button
diff --git a/src/components/Table/formatters/FinalColumn.tsx b/src/components/Table/formatters/FinalColumn.tsx
index 38f782d7..ffc9b057 100644
--- a/src/components/Table/formatters/FinalColumn.tsx
+++ b/src/components/Table/formatters/FinalColumn.tsx
@@ -34,7 +34,7 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
   const handleDelete = async () => tableActions?.row.delete(row.id);
   return (
     <Stack direction="row" spacing={0.5}>
-      <Tooltip title="Duplicate Row">
+      <Tooltip title="Duplicate row">
         <IconButton
           size="small"
           color="inherit"
@@ -53,14 +53,14 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
             });
             if (tableActions) tableActions?.row.add(clonedRow);
           }}
-          aria-label="Duplicate Row"
+          aria-label="Duplicate row"
           className="row-hover-iconButton"
         >
           <CopyCellsIcon />
         </IconButton>
       </Tooltip>
 
-      <Tooltip title={`Delete Row${altPress ? "" : "…"}`}>
+      <Tooltip title={`Delete row${altPress ? "" : "…"}`}>
         <IconButton
           size="small"
           color="inherit"
@@ -87,7 +87,7 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
                   });
                 }
           }
-          aria-label={`Delete Row${altPress ? "" : "…"}`}
+          aria-label={`Delete row${altPress ? "" : "…"}`}
           className="row-hover-iconButton"
           sx={{
             ".rdg-row:hover &.row-hover-iconButton": {
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 2cd24a3c..5735e5e6 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -99,7 +99,7 @@ export default function Table() {
         {
           isNew: true,
           key: "new",
-          name: "Add Column",
+          name: "Add column",
           type: FieldType.last,
           index: _columns.length ?? 0,
           width: 204,
diff --git a/src/components/TableSettings/form.tsx b/src/components/TableSettings/form.tsx
index ed5f304c..97ffceb4 100644
--- a/src/components/TableSettings/form.tsx
+++ b/src/components/TableSettings/form.tsx
@@ -17,7 +17,7 @@ export const tableSettings = (
     {
       type: FieldType.shortText,
       name: "name",
-      label: "Table Name",
+      label: "Table name",
       required: true,
     },
     {
@@ -29,7 +29,7 @@ export const tableSettings = (
     {
       type: FieldType.shortText,
       name: "collection",
-      label: "Collection Name",
+      label: "Collection name",
       required: true,
       assistiveText: (
         <Link
@@ -48,20 +48,20 @@ export const tableSettings = (
     {
       type: FieldType.singleSelect,
       name: "tableType",
-      label: "Table Type",
+      label: "Table type",
       labelPlural: "table types",
       searchable: false,
       defaultValue: "primaryCollection",
       options: [
         {
-          label: "Primary Collection",
+          label: "Primary collection",
           description: `
           Connect this table to the <strong>single collection</strong>
           matching the collection name entered above`,
           value: "primaryCollection",
         },
         {
-          label: "Collection Group",
+          label: "Collection group",
           description: `
           Connect this table to <strong>all collections and subcollections</strong>
           matching the collection name entered above`,
@@ -113,7 +113,7 @@ export const tableSettings = (
     {
       type: FieldType.multiSelect,
       name: "roles",
-      label: "Accessed By",
+      label: "Accessed by",
       options: roles ?? [],
       required: true,
       freeText: true,
@@ -146,7 +146,7 @@ export const tableSettings = (
       defaultValue: 1,
       min: 1,
       max: 5,
-      label: "Collection Depth",
+      label: "Collection depth",
       displayCondition: "return values.tableType === 'collectionGroup'",
       assistiveText: (
         <>
diff --git a/src/components/TableSettings/index.tsx b/src/components/TableSettings/index.tsx
index 14ec015f..6b89ce06 100644
--- a/src/components/TableSettings/index.tsx
+++ b/src/components/TableSettings/index.tsx
@@ -150,8 +150,8 @@ export default function TableSettingsDialog({
       onClose={handleClose}
       title={
         mode === TableSettingsDialogModes.create
-          ? "Create Table"
-          : "Update Table"
+          ? "Create table"
+          : "Update table"
       }
       fields={tableSettings(
         mode,
@@ -229,7 +229,7 @@ export default function TableSettingsDialog({
                 onClick={handleResetStructure}
                 // endIcon={<GoIcon />}
               >
-                Reset Table Structure…
+                Reset table structure…
               </Button>
             </Confirmation>
 
@@ -264,7 +264,7 @@ export default function TableSettingsDialog({
                 onClick={handleDelete}
                 // endIcon={<GoIcon />}
               >
-                Delete Table…
+                Delete table…
               </Button>
             </Confirmation>
           </div>
diff --git a/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx b/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
index a6db6d8f..a42afc64 100644
--- a/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
@@ -165,13 +165,13 @@ export default function Step1Columns({
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Select Columns ({config.pairs.length} of {csvData.columns.length})
+              Select columns ({config.pairs.length} of {csvData.columns.length})
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Table Columns
+            Table columns
           </Typography>
         </Grid>
       </Grid>
@@ -263,10 +263,10 @@ export default function Step1Columns({
                     displayEmpty
                     labelPlural="columns"
                     freeText
-                    AddButtonProps={{ children: "Add New Column" }}
+                    AddButtonProps={{ children: "Add new column" }}
                     AddDialogProps={{
-                      title: "Add New Column",
-                      textFieldLabel: "Column Name",
+                      title: "Add new column",
+                      textFieldLabel: "Column name",
                     }}
                   />
                 )}
diff --git a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
index 962f8471..54b93db2 100644
--- a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
@@ -60,7 +60,7 @@ export default function Step2NewColumns({
         <Grid container spacing={2} className={classes.typeSelectRow}>
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              New Table Columns
+              New table columns
             </Typography>
             <Divider />
 
@@ -91,7 +91,7 @@ export default function Step2NewColumns({
               component="h2"
               className={classes.typeHeading}
             >
-              Column Type: {config.newColumns[fieldToEdit].name}
+              Column type: {config.newColumns[fieldToEdit].name}
             </Typography>
 
             <FieldsDropdown
@@ -109,13 +109,13 @@ export default function Step2NewColumns({
           {!isXs && (
             <Grid item xs={12} sm={6}>
               <Typography variant="subtitle2" gutterBottom component="h2">
-                Raw Data
+                Raw data
               </Typography>
             </Grid>
           )}
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Column Preview
+              Column preview
             </Typography>
           </Grid>
         </Grid>
diff --git a/src/components/Wizards/ImportCsvWizard/index.tsx b/src/components/Wizards/ImportCsvWizard/index.tsx
index 5ba460d4..996a61cc 100644
--- a/src/components/Wizards/ImportCsvWizard/index.tsx
+++ b/src/components/Wizards/ImportCsvWizard/index.tsx
@@ -115,7 +115,7 @@ export default function ImportCsvWizard({
       steps={
         [
           {
-            title: "Choose Columns",
+            title: "Choose columns",
             description: (
               <>
                 <Typography paragraph>
@@ -148,7 +148,7 @@ export default function ImportCsvWizard({
             disableNext: config.pairs.length === 0,
           },
           config.newColumns.length > 0 && {
-            title: "Set Column Types",
+            title: "Set column types",
             description:
               "Set the type of each column to display your data correctly. Some column types have been suggested based on your data.",
             content: (
@@ -168,7 +168,7 @@ export default function ImportCsvWizard({
           {
             title: "Preview",
             description:
-              "Preview your data with your configured columns. You can change column types by clicking “Edit Type” from the column menu at any time.",
+              "Preview your data with your configured columns. You can change column types by clicking “Edit type” from the column menu at any time.",
             content: (
               <Step3Preview
                 csvData={{ ...csvData, rows: parsedRows }}
diff --git a/src/components/Wizards/ImportWizard/Step1Columns.tsx b/src/components/Wizards/ImportWizard/Step1Columns.tsx
index 0506240b..46a98b9a 100644
--- a/src/components/Wizards/ImportWizard/Step1Columns.tsx
+++ b/src/components/Wizards/ImportWizard/Step1Columns.tsx
@@ -108,7 +108,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
     <Grid container spacing={3}>
       <Grid item xs={12} sm={6}>
         <Typography variant="subtitle2" gutterBottom component="h2">
-          Select Columns ({selectedFields.length} of {allFields.length})
+          Select columns ({selectedFields.length} of {allFields.length})
         </Typography>
         <Divider />
 
@@ -167,7 +167,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
       </Grid>
       <Grid item xs={12} sm={6}>
         <Typography variant="subtitle2" gutterBottom component="h2">
-          Sort Table Columns
+          Sort table columns
         </Typography>
         <Divider />
 
diff --git a/src/components/Wizards/ImportWizard/Step2Rename.tsx b/src/components/Wizards/ImportWizard/Step2Rename.tsx
index 11f48607..efe48bd6 100644
--- a/src/components/Wizards/ImportWizard/Step2Rename.tsx
+++ b/src/components/Wizards/ImportWizard/Step2Rename.tsx
@@ -66,13 +66,13 @@ export default function Step2Rename({
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Field Names
+              Field names
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Set Column Names
+            Set column names
           </Typography>
         </Grid>
       </Grid>
diff --git a/src/components/Wizards/ImportWizard/Step3Types.tsx b/src/components/Wizards/ImportWizard/Step3Types.tsx
index 433f7ef9..cad1c3a4 100644
--- a/src/components/Wizards/ImportWizard/Step3Types.tsx
+++ b/src/components/Wizards/ImportWizard/Step3Types.tsx
@@ -45,7 +45,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
       <Grid container spacing={2} className={classes.typeSelectRow}>
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Table Columns
+            Table columns
           </Typography>
           <Divider />
 
@@ -78,7 +78,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
             component="h2"
             className={classes.typeHeading}
           >
-            Column Type: {config[fieldToEdit].name}
+            Column type: {config[fieldToEdit].name}
           </Typography>
 
           <FieldsDropdown
@@ -94,13 +94,13 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Raw Data
+              Raw data
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Column Preview
+            Column preview
           </Typography>
         </Grid>
       </Grid>
diff --git a/src/components/Wizards/ImportWizard/index.tsx b/src/components/Wizards/ImportWizard/index.tsx
index 501e23b7..64c9602b 100644
--- a/src/components/Wizards/ImportWizard/index.tsx
+++ b/src/components/Wizards/ImportWizard/index.tsx
@@ -64,7 +64,7 @@ export default function ImportWizard() {
       title="Import"
       steps={[
         {
-          title: "Choose Columns",
+          title: "Choose columns",
           description: (
             <>
               <Typography gutterBottom>
@@ -88,7 +88,7 @@ export default function ImportWizard() {
           disableNext: Object.keys(config).length === 0,
         },
         {
-          title: "Rename Columns",
+          title: "Rename columns",
           description:
             "Rename your table columns with user-friendly names. These changes will not update the field names in your database.",
           content: (
@@ -101,7 +101,7 @@ export default function ImportWizard() {
           ),
         },
         {
-          title: "Set Column Types",
+          title: "Set column types",
           description:
             "Set the type of each column to display your data correctly. Some column types have been suggested based on your data.",
           content: (
@@ -116,7 +116,7 @@ export default function ImportWizard() {
         {
           title: "Preview",
           description:
-            "Preview your data with your configured columns. You can change column types by clicking “Edit Type” from the column menu at any time.",
+            "Preview your data with your configured columns. You can change column types by clicking “Edit type” from the column menu at any time.",
           content: (
             <Step4Preview
               config={config}
diff --git a/src/components/fields/Action/Settings.tsx b/src/components/fields/Action/Settings.tsx
index 07247936..a7e374fd 100644
--- a/src/components/fields/Action/Settings.tsx
+++ b/src/components/fields/Action/Settings.tsx
@@ -30,7 +30,7 @@ const Settings = ({ config, handleChange }) => {
         Authenticated user must have at least one of these to run the script
       </Typography>
       <MultiSelect
-        label={"Allowed Roles"}
+        label="Allowed roles"
         options={roles ?? []}
         value={config.requiredRoles ?? []}
         onChange={handleChange("requiredRoles")}
@@ -42,19 +42,19 @@ const Settings = ({ config, handleChange }) => {
       </Typography>
 
       <MultiSelect
-        label={"Required fields"}
+        label="Required fields"
         options={columnOptions}
         value={config.requiredFields ?? []}
         onChange={handleChange("requiredFields")}
       />
       <Divider />
-      <Typography variant="overline">Confirmation Template</Typography>
+      <Typography variant="overline">Confirmation template</Typography>
       <Typography variant="body2">
         The action button will not ask for confirmation if this is left empty
       </Typography>
 
       <TextField
-        label="Confirmation Template"
+        label="Confirmation template"
         placeholder="Are sure you want to invest {{stockName}}?"
         value={config.confirmation}
         onChange={(e) => {
@@ -80,7 +80,7 @@ const Settings = ({ config, handleChange }) => {
       />
       {!Boolean(config.isActionScript) ? (
         <TextField
-          label="callable name"
+          label="Callable name"
           name="callableName"
           value={config.callableName}
           fullWidth
@@ -161,10 +161,10 @@ const Settings = ({ config, handleChange }) => {
           {config["undo.enabled"] && (
             <>
               <Typography variant="overline">
-                Undo Confirmation Template
+                Undo confirmation template
               </Typography>
               <TextField
-                label="template"
+                label="Template"
                 placeholder="are you sure you want to sell your stocks in {{stockName}}"
                 value={config["undo.confirmation"]}
                 onChange={(e) => {
@@ -172,7 +172,7 @@ const Settings = ({ config, handleChange }) => {
                 }}
                 fullWidth
               />
-              <Typography variant="overline">Undo Action script</Typography>
+              <Typography variant="overline">Undo action script</Typography>
               <Suspense fallback={<FieldSkeleton height={300} />}>
                 <CodeEditor
                   height={300}
diff --git a/src/components/fields/Action/SideDrawerField.tsx b/src/components/fields/Action/SideDrawerField.tsx
index 663620ee..f6d0dd60 100644
--- a/src/components/fields/Action/SideDrawerField.tsx
+++ b/src/components/fields/Action/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function Action({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const hasRan = value && value.status;
 
         return (
diff --git a/src/components/fields/Aggregate/Settings.tsx b/src/components/fields/Aggregate/Settings.tsx
index f739c940..8d8895a8 100644
--- a/src/components/fields/Aggregate/Settings.tsx
+++ b/src/components/fields/Aggregate/Settings.tsx
@@ -21,7 +21,7 @@ const Settings = ({ config, handleChange }) => {
   return (
     <>
       <MultiSelect
-        label={"Sub Tables"}
+        label="Sub-tables"
         options={columnOptions}
         value={config.requiredFields ?? []}
         onChange={handleChange("subtables")}
diff --git a/src/components/fields/Checkbox/SideDrawerField.tsx b/src/components/fields/Checkbox/SideDrawerField.tsx
index 9a4ae4be..2e8550e0 100644
--- a/src/components/fields/Checkbox/SideDrawerField.tsx
+++ b/src/components/fields/Checkbox/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Checkbox({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
           onChange(event.target.checked);
         };
diff --git a/src/components/fields/Code/SideDrawerField.tsx b/src/components/fields/Code/SideDrawerField.tsx
index 67e9e571..5a443701 100644
--- a/src/components/fields/Code/SideDrawerField.tsx
+++ b/src/components/fields/Code/SideDrawerField.tsx
@@ -30,7 +30,7 @@ export default function Code({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <CodeEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/Color/SideDrawerField.tsx b/src/components/fields/Color/SideDrawerField.tsx
index 71bae526..9c40bb29 100644
--- a/src/components/fields/Color/SideDrawerField.tsx
+++ b/src/components/fields/Color/SideDrawerField.tsx
@@ -52,7 +52,7 @@ export default function Color({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         console.log(value);
         return (
           <>
diff --git a/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx b/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
index cd42447b..708cd0fa 100644
--- a/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
+++ b/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
@@ -192,7 +192,7 @@ export default function PopupContents({
               color="primary"
               className={classes.selectAllButton}
             >
-              Clear Selection
+              Clear selection
             </Button>
           </Grid>
         </Grid>
diff --git a/src/components/fields/ConnectService/Settings.tsx b/src/components/fields/ConnectService/Settings.tsx
index f71a4fa1..fd4205e1 100644
--- a/src/components/fields/ConnectService/Settings.tsx
+++ b/src/components/fields/ConnectService/Settings.tsx
@@ -4,7 +4,7 @@ export default function Settings({ config, handleChange }) {
   return (
     <>
       <TextField
-        label="Webservice Url"
+        label="Web service URL"
         name="url"
         value={config.url}
         fullWidth
@@ -13,7 +13,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Results key Path"
+        label="Results key path"
         name="resultsKey"
         helperText="Can be specified as a key path"
         placeholder="data.results"
@@ -24,7 +24,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Primary Key"
+        label="Primary key"
         name="primaryKey"
         value={config.primaryKey}
         fullWidth
@@ -33,7 +33,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Title Key (optional)"
+        label="Title key (optional)"
         name="titleKey"
         value={config.titleKey}
         fullWidth
@@ -42,7 +42,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="SubTitle Key (optional)"
+        label="Subtitle key (optional)"
         name="subtitleKey"
         value={config.subtitleKey}
         fullWidth
diff --git a/src/components/fields/ConnectService/SideDrawerField.tsx b/src/components/fields/ConnectService/SideDrawerField.tsx
index 09c824a1..9237a0c3 100644
--- a/src/components/fields/ConnectService/SideDrawerField.tsx
+++ b/src/components/fields/ConnectService/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function ConnectService({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(
diff --git a/src/components/fields/ConnectTable/Settings.tsx b/src/components/fields/ConnectTable/Settings.tsx
index fc0fcbb6..61a272c2 100644
--- a/src/components/fields/ConnectTable/Settings.tsx
+++ b/src/components/fields/ConnectTable/Settings.tsx
@@ -50,10 +50,10 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         onChange={handleChange("index")}
         multiple={false}
         label="Table"
-        labelPlural="Tables"
+        labelPlural="tables"
       />
       <TextField
-        label="Filter Template"
+        label="Filter template"
         name="filters"
         fullWidth
         value={config.filters}
@@ -62,7 +62,7 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         }}
       />
       <MultiSelect
-        label={"Primary Keys"}
+        label="Primary keys"
         value={config.primaryKeys ?? []}
         options={columns.filter((c) =>
           [FieldType.shortText, FieldType.singleSelect].includes(c.type)
@@ -70,13 +70,13 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         onChange={handleChange("primaryKeys")}
       />
       <MultiSelect
-        label={"Snapshot Fields"}
+        label="Snapshot fields"
         value={config.snapshotFields ?? []}
         options={columns.filter((c) => ![FieldType.subTable].includes(c.type))}
         onChange={handleChange("snapshotFields")}
       />
       <MultiSelect
-        label={"Tracked Fields"}
+        label="Tracked fields"
         value={config.trackedFields ?? []}
         options={columns.filter((c) => ![FieldType.subTable].includes(c.type))}
         onChange={handleChange("trackedFields")}
diff --git a/src/components/fields/ConnectTable/SideDrawerField.tsx b/src/components/fields/ConnectTable/SideDrawerField.tsx
index 3ccaaa58..f7fc12d3 100644
--- a/src/components/fields/ConnectTable/SideDrawerField.tsx
+++ b/src/components/fields/ConnectTable/SideDrawerField.tsx
@@ -1,7 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { useTheme, Grid, Chip } from "@mui/material";
+import { Grid, Chip } from "@mui/material";
 
 import ConnectTableSelect from "./ConnectTableSelect";
 
@@ -9,16 +9,15 @@ export default function ConnectTable({
   column,
   control,
   disabled,
+  useFormMethods,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
 
   return (
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(value.filter((v) => v.snapshot.objectID !== hit.objectID));
@@ -29,7 +28,7 @@ export default function ConnectTable({
           <>
             {!disabled && (
               <ConnectTableSelect
-                row={control.getValues()}
+                row={useFormMethods.getValues()}
                 column={column}
                 config={(config as any) ?? {}}
                 value={value}
diff --git a/src/components/fields/Date/SideDrawerField.tsx b/src/components/fields/Date/SideDrawerField.tsx
index 7bc9a02d..65663ea4 100644
--- a/src/components/fields/Date/SideDrawerField.tsx
+++ b/src/components/fields/Date/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/DateTime/SideDrawerField.tsx b/src/components/fields/DateTime/SideDrawerField.tsx
index 5f0e1924..f2b9aefb 100644
--- a/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/src/components/fields/DateTime/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 74a8af03..5de64c18 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -28,7 +28,7 @@ const Settings = ({ config, handleChange }) => {
       <Grid container direction="row" spacing={2} flexWrap="nowrap">
         <Grid item xs={12} md={6}>
           <MultiSelect
-            label={"Listener Fields"}
+            label="Listener fields"
             options={columnOptions}
             value={config.listenerFields ?? []}
             onChange={handleChange("listenerFields")}
@@ -41,7 +41,7 @@ const Settings = ({ config, handleChange }) => {
 
         <Grid item xs={12} md={6}>
           <FieldsDropdown
-            label="Output Field Type"
+            label="Output field type"
             value={config.renderFieldType}
             options={Object.values(FieldType).filter(
               (f) =>
@@ -59,15 +59,15 @@ const Settings = ({ config, handleChange }) => {
         </Grid>
       </Grid>
 
-<div>
-      <InputLabel>Derivative Script</InputLabel>
-      <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
-      <Suspense fallback={<FieldSkeleton height={200} />}>
-        <CodeEditor
-          script={config.script}
-          handleChange={handleChange("script")}
-        />
-      </Suspense>
+      <div>
+        <InputLabel>Derivative script</InputLabel>
+        <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
+        <Suspense fallback={<FieldSkeleton height={200} />}>
+          <CodeEditor
+            script={config.script}
+            handleChange={handleChange("script")}
+          />
+        </Suspense>
       </div>
     </>
   );
diff --git a/src/components/fields/Duration/SideDrawerField.tsx b/src/components/fields/Duration/SideDrawerField.tsx
index 555b948f..f1a536b8 100644
--- a/src/components/fields/Duration/SideDrawerField.tsx
+++ b/src/components/fields/Duration/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function Duration({ column, control }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (
           !value ||
           !value.start ||
diff --git a/src/components/fields/Email/SideDrawerField.tsx b/src/components/fields/Email/SideDrawerField.tsx
index abe9e262..0dffb133 100644
--- a/src/components/fields/Email/SideDrawerField.tsx
+++ b/src/components/fields/Email/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Email({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index ab1ffc77..5cea9319 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -126,7 +126,7 @@ function ControlledFileUploader({
                 <div>
                   <Confirmation
                     message={{
-                      title: "Delete File?",
+                      title: "Delete file?",
                       confirm: "Delete",
                     }}
                     functionName={!disabled ? "onDelete" : ""}
@@ -169,7 +169,7 @@ export default function File_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledFileUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/File/TableCell.tsx b/src/components/fields/File/TableCell.tsx
index cd6c92e1..9d609556 100644
--- a/src/components/fields/File/TableCell.tsx
+++ b/src/components/fields/File/TableCell.tsx
@@ -156,7 +156,7 @@ export default function File_({
                       : () =>
                           requestConfirmation({
                             handleConfirm: () => handleDelete(file.ref),
-                            title: "Delete File",
+                            title: "Delete file",
                             body: "Are you sure you want to delete this file?",
                             confirm: "Delete",
                           })
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index a8c541f9..d5275205 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -272,7 +272,7 @@ export default function Image_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledImageUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx
index 757a5439..46c3f761 100644
--- a/src/components/fields/Json/SideDrawerField.tsx
+++ b/src/components/fields/Json/SideDrawerField.tsx
@@ -29,7 +29,7 @@ export default function Json({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         if (disabled)
           return (
             <div
diff --git a/src/components/fields/LongText/SideDrawerField.tsx b/src/components/fields/LongText/SideDrawerField.tsx
index 6b02f235..cae11594 100644
--- a/src/components/fields/LongText/SideDrawerField.tsx
+++ b/src/components/fields/LongText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function LongText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/MultiSelect/SideDrawerField.tsx b/src/components/fields/MultiSelect/SideDrawerField.tsx
index 3f1fd0cf..64314c3d 100644
--- a/src/components/fields/MultiSelect/SideDrawerField.tsx
+++ b/src/components/fields/MultiSelect/SideDrawerField.tsx
@@ -19,7 +19,7 @@ export default function MultiSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (index: number) => () => {
           const newValues = [...value];
           newValues.splice(index, 1);
diff --git a/src/components/fields/Number/SideDrawerField.tsx b/src/components/fields/Number/SideDrawerField.tsx
index 58382147..998e58f5 100644
--- a/src/components/fields/Number/SideDrawerField.tsx
+++ b/src/components/fields/Number/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Number_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value));
 
         return (
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 6fb2f1f7..661890dc 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -39,7 +39,7 @@ export default function Percentage({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value) / 100);
 
         return (
diff --git a/src/components/fields/Phone/SideDrawerField.tsx b/src/components/fields/Phone/SideDrawerField.tsx
index afa99aaa..ee3806bb 100644
--- a/src/components/fields/Phone/SideDrawerField.tsx
+++ b/src/components/fields/Phone/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Phone({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/Rating/SideDrawerField.tsx b/src/components/fields/Rating/SideDrawerField.tsx
index ea813bb4..80ad86e0 100644
--- a/src/components/fields/Rating/SideDrawerField.tsx
+++ b/src/components/fields/Rating/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Rating({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <MuiRating
             name={column.key}
diff --git a/src/components/fields/RichText/SideDrawerField.tsx b/src/components/fields/RichText/SideDrawerField.tsx
index a1907cca..f38f4e30 100644
--- a/src/components/fields/RichText/SideDrawerField.tsx
+++ b/src/components/fields/RichText/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function RichText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <RichTextEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/ShortText/Settings.tsx b/src/components/fields/ShortText/Settings.tsx
index 7592fdbe..90efca64 100644
--- a/src/components/fields/ShortText/Settings.tsx
+++ b/src/components/fields/ShortText/Settings.tsx
@@ -5,7 +5,7 @@ export default function Settings({ handleChange, config }) {
     <>
       <TextField
         type="number"
-        label="Character Limit"
+        label="Character limit"
         id="character-limit"
         value={config.maxLength}
         fullWidth
@@ -16,7 +16,7 @@ export default function Settings({ handleChange, config }) {
       />
       <TextField
         type="text"
-        label="Validation Regex"
+        label="Validation regex"
         id="validation-regex"
         value={config.validationRegex}
         fullWidth
diff --git a/src/components/fields/ShortText/SideDrawerField.tsx b/src/components/fields/ShortText/SideDrawerField.tsx
index 91858dd4..90e32f58 100644
--- a/src/components/fields/ShortText/SideDrawerField.tsx
+++ b/src/components/fields/ShortText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function ShortText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/SingleSelect/Settings.tsx b/src/components/fields/SingleSelect/Settings.tsx
index 7a89f746..b34a7dd3 100644
--- a/src/components/fields/SingleSelect/Settings.tsx
+++ b/src/components/fields/SingleSelect/Settings.tsx
@@ -59,7 +59,7 @@ export default function Settings({ handleChange, config }) {
               </Grid>
               <Grid item>
                 <IconButton
-                  aria-label="remove"
+                  aria-label="Remove"
                   onClick={() =>
                     handleChange("options")(
                       options.filter((o: string) => o !== option)
@@ -79,7 +79,7 @@ export default function Settings({ handleChange, config }) {
       <Grid container direction="row" alignItems="center">
         <Grid item>
           <IconButton
-            aria-label="add new"
+            aria-label="Add new"
             onClick={() => {
               handleAdd();
             }}
@@ -92,7 +92,7 @@ export default function Settings({ handleChange, config }) {
             value={newOption}
             className={classes.field}
             fullWidth
-            label={"New Option"}
+            label="New option"
             id="new-option"
             onChange={(e) => {
               setNewOption(e.target.value);
diff --git a/src/components/fields/SingleSelect/SideDrawerField.tsx b/src/components/fields/SingleSelect/SideDrawerField.tsx
index 912e7e67..3d4dd8c1 100644
--- a/src/components/fields/SingleSelect/SideDrawerField.tsx
+++ b/src/components/fields/SingleSelect/SideDrawerField.tsx
@@ -15,7 +15,7 @@ export default function SingleSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => (
+      render={({ field: { onChange, onBlur, value } }) => (
         <>
           <MultiSelect
             value={sanitiseValue(value)}
diff --git a/src/components/fields/Slider/Settings.tsx b/src/components/fields/Slider/Settings.tsx
index 633d68d2..7ae48102 100644
--- a/src/components/fields/Slider/Settings.tsx
+++ b/src/components/fields/Slider/Settings.tsx
@@ -4,7 +4,7 @@ import Subheading from "components/Table/ColumnMenu/Subheading";
 export default function Settings({ handleChange, config }) {
   return (
     <>
-      <Subheading>Slider Config</Subheading>
+      <Subheading>Slider config</Subheading>
 
       <TextField
         variant="filled"
@@ -13,7 +13,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("min")(parseFloat(e.target.value))}
         value={config["min"]}
         id={`settings-field-min`}
-        label="Minimum Value"
+        label="Minimum value"
         type="number"
       />
 
@@ -24,7 +24,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("max")(parseFloat(e.target.value))}
         value={config["max"]}
         id={`settings-field-max`}
-        label="Maximum Value"
+        label="Maximum value"
         type="number"
       />
 
@@ -35,7 +35,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("step")(parseFloat(e.target.value))}
         value={config["step"]}
         id={`settings-field-step`}
-        label="Step Value"
+        label="Step value"
         type="number"
       />
 
diff --git a/src/components/fields/Slider/SideDrawerField.tsx b/src/components/fields/Slider/SideDrawerField.tsx
index f772addd..8ac3ca8c 100644
--- a/src/components/fields/Slider/SideDrawerField.tsx
+++ b/src/components/fields/Slider/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Slider({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (_: any, value: number | number[]) => {
           onChange(value);
           onBlur();
diff --git a/src/components/fields/Status/Settings.tsx b/src/components/fields/Status/Settings.tsx
index cb2a4362..63a829f8 100644
--- a/src/components/fields/Status/Settings.tsx
+++ b/src/components/fields/Status/Settings.tsx
@@ -8,6 +8,7 @@ import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 
 import EditIcon from "@mui/icons-material/Edit";
+import AddIcon from "@mui/icons-material/Add";
 import Modal from "components/Modal";
 import DeleteIcon from "@mui/icons-material/Delete";
 import Typography from "@mui/material/Typography";
@@ -64,19 +65,19 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
   return (
     <Modal
       open={modal.isOpen}
-      title={`${modal.index ? "Edit" : "Add"} Condition`}
+      title={`${modal.index ? "Edit" : "Add"} condition`}
       maxWidth={"xs"}
       onClose={handleClose}
       actions={{
         primary:
           modal.index === null
             ? {
-                children: "Add Condition",
+                children: "Add condition",
                 onClick: handleAdd,
                 disabled: false,
               }
             : {
-                children: "Save Changes",
+                children: "Save changes",
                 onClick: handleSave,
                 disabled: false,
               },
@@ -90,7 +91,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               }
             : {
                 startIcon: <DeleteIcon />,
-                children: "Remove Condition",
+                children: "Remove condition",
                 onClick: handleRemove,
               },
       }}
@@ -108,7 +109,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
             onChange={handleUpdate("type")}
             value={modal.condition.type}
             multiple={false}
-            label={"Select data type"}
+            label="Select data type"
           />
           <Typography variant="overline">Condition </Typography>
           {modal.condition.type === "boolean" && (
@@ -120,7 +121,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               onChange={(v) => handleUpdate("value")(v === "true")}
               value={modal.condition.value ? "true" : "false"}
               multiple={false}
-              label={"Select Condition Value"}
+              label="Select condition value"
             />
           )}
 
@@ -129,21 +130,21 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               <div style={{ width: "45%" }}>
                 <MultiSelect
                   options={[
-                    { label: "Less Than", value: "<" },
-                    { label: "Less Than or Equal", value: "<=" },
+                    { label: "Less than", value: "<" },
+                    { label: "Less than or equal", value: "<=" },
                     { label: "Equal", value: "==" },
-                    { label: "Equal or More Than", value: ">=" },
-                    { label: "More Than", value: ">" },
+                    { label: "Equal or more than", value: ">=" },
+                    { label: "More than", value: ">" },
                   ]}
                   onChange={handleUpdate("operator")}
                   value={modal.condition.operator}
                   multiple={false}
-                  label={"Select Operator"}
+                  label="Select operator"
                 />
               </div>
               <TextField
-                type={"number"}
-                label={"Value"}
+                type="number"
+                label="Value"
                 value={modal.condition.value}
                 onChange={(e) => handleUpdate("value")(e.target.value)}
               />
@@ -152,16 +153,16 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
           {modal.condition.type === "string" && (
             <TextField
               fullWidth
-              label={"Value"}
+              label="Value"
               value={modal.condition.value}
               onChange={(e) => handleUpdate("value")(e.target.value)}
             />
           )}
 
-          <Typography variant="overline">assigned label (output)</Typography>
+          <Typography variant="overline">Assigned label (output)</Typography>
           <TextField
             value={modal.condition.label}
-            label={"Type the cell output"}
+            label="Type the cell output"
             fullWidth
             onChange={(e) => handleUpdate("label")(e.target.value)}
           />
@@ -212,13 +213,16 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         })
       ) : (
         <>
-          no conditions set yet
+          No conditions set yet
           <br />
         </>
       )}
 
-      <Button onClick={() => setModal({ ...EMPTY_STATE, isOpen: true })}>
-        + ADD CONDITION
+      <Button
+        onClick={() => setModal({ ...EMPTY_STATE, isOpen: true })}
+        startIcon={<AddIcon />}
+      >
+        Add condition
       </Button>
       <ConditionModal
         modal={modal}
diff --git a/src/components/fields/Status/SideDrawerField.tsx b/src/components/fields/Status/SideDrawerField.tsx
index a64d833f..be34c2c9 100644
--- a/src/components/fields/Status/SideDrawerField.tsx
+++ b/src/components/fields/Status/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Rating({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => (
+      render={({ field: { value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <>{value}</>
         </Grid>
diff --git a/src/components/fields/SubTable/Settings.tsx b/src/components/fields/SubTable/Settings.tsx
index 04271a77..1c30cd75 100644
--- a/src/components/fields/SubTable/Settings.tsx
+++ b/src/components/fields/SubTable/Settings.tsx
@@ -18,7 +18,7 @@ const Settings = ({ config, handleChange }) => {
   return (
     <>
       <MultiSelect
-        label={"Parent Label"}
+        label="Parent label"
         options={columnOptions}
         value={config.parentLabel ?? []}
         onChange={handleChange("parentLabel")}
diff --git a/src/components/fields/Url/SideDrawerField.tsx b/src/components/fields/Url/SideDrawerField.tsx
index 4729a251..8d87377a 100644
--- a/src/components/fields/Url/SideDrawerField.tsx
+++ b/src/components/fields/Url/SideDrawerField.tsx
@@ -13,7 +13,7 @@ export default function Url({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <Stack direction="row">
             <TextField
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index e7be0ebb..d560be1c 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -14,7 +14,7 @@ export default function User({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (!value || !value.displayName || !value.timestamp)
           return <div className={fieldClasses.root} />;
         const dateLabel = format(
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 8bb9a56a..7f944ed3 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -1,7 +1,7 @@
 import { FieldType } from "constants/fields";
 
 import { FormatterProps, EditorProps } from "react-data-grid";
-import { Control } from "react-hook-form";
+import { Control, UseFormReturn } from "react-hook-form";
 import { PopoverProps } from "@mui/material";
 
 export { FieldType };
@@ -49,6 +49,7 @@ export interface ISideDrawerFieldProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   disabled: boolean;
+  useFormMethods: UseFormReturn;
 }
 
 export interface ISettingsProps {
diff --git a/src/hooks/useTable/useTableData.tsx b/src/hooks/useTable/useTableData.tsx
index e1a06d90..8b50d65b 100644
--- a/src/hooks/useTable/useTableData.tsx
+++ b/src/hooks/useTable/useTableData.tsx
@@ -189,7 +189,7 @@ const useTableData = () => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Create Index
+                  Create index
                 </Button>
               ),
             }
diff --git a/src/pages/Auth/ImpersonatorAuth.tsx b/src/pages/Auth/ImpersonatorAuth.tsx
index ff6089ab..9ffee15d 100644
--- a/src/pages/Auth/ImpersonatorAuth.tsx
+++ b/src/pages/Auth/ImpersonatorAuth.tsx
@@ -45,7 +45,7 @@ export default function ImpersonatorAuthPage() {
   return (
     <AuthLayout
       loading={loading}
-      title="Admin Auth"
+      title="Admin auth"
       description={
         <>
           <Typography
@@ -99,7 +99,7 @@ export default function ImpersonatorAuthPage() {
             disabled={email === ""}
             onClick={() => handleAuth(email)}
           >
-            Sign In
+            Sign in
           </Button>
         </>
       )}
diff --git a/src/pages/Auth/JwtAuth.tsx b/src/pages/Auth/JwtAuth.tsx
index ea4be549..d75bef30 100644
--- a/src/pages/Auth/JwtAuth.tsx
+++ b/src/pages/Auth/JwtAuth.tsx
@@ -27,7 +27,7 @@ export default function JwtAuthPage() {
   };
 
   return (
-    <AuthLayout loading={loading} title="Test Authentication">
+    <AuthLayout loading={loading} title="Test auth">
       <TextField
         name="JWT"
         label="JWT"
diff --git a/src/pages/Auth/SetupGuide.tsx b/src/pages/Auth/SetupGuide.tsx
index 7d893382..601e4dec 100644
--- a/src/pages/Auth/SetupGuide.tsx
+++ b/src/pages/Auth/SetupGuide.tsx
@@ -9,7 +9,7 @@ import { name } from "@root/package.json";
 export default function AuthSetupGuide() {
   return (
     <AuthLayout
-      title="Set Up Firebase Authentication"
+      title="Set up Firebase Authentication"
       description={
         <>
           To sign in to {name}, first set up Firebase Authentication in the
@@ -25,7 +25,7 @@ export default function AuthSetupGuide() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Setup Guide
+        Setup guide
       </Button>
     </AuthLayout>
   );
diff --git a/src/pages/Auth/SignOut.tsx b/src/pages/Auth/SignOut.tsx
index 74bff1f7..97e8f202 100644
--- a/src/pages/Auth/SignOut.tsx
+++ b/src/pages/Auth/SignOut.tsx
@@ -12,9 +12,9 @@ export default function SignOutPage() {
   }, []);
 
   return (
-    <AuthLayout title="Signed Out">
+    <AuthLayout title="Signed out">
       <Button component={Link} to="/auth" variant="outlined">
-        Sign In Again
+        Sign in again
       </Button>
     </AuthLayout>
   );
diff --git a/src/pages/Auth/SignUp.tsx b/src/pages/Auth/SignUp.tsx
index 57a0100e..7d709aa4 100644
--- a/src/pages/Auth/SignUp.tsx
+++ b/src/pages/Auth/SignUp.tsx
@@ -27,7 +27,7 @@ export default function SignUpPage() {
         <AuthLayout
           hideLogo={!isMobile}
           hideLinks={!isMobile}
-          title="Sign Up"
+          title="Sign up"
           description={
             <>
               Welcome! To join this project, sign in with the email address
diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
index b21e4203..98454375 100644
--- a/src/pages/Auth/index.tsx
+++ b/src/pages/Auth/index.tsx
@@ -14,7 +14,7 @@ export default function AuthPage() {
   }
 
   return (
-    <AuthLayout title="Sign In">
+    <AuthLayout title="Sign in">
       <FirebaseUi uiConfig={uiConfig} />
     </AuthLayout>
   );
diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx
index 6c376c3e..23f8ec44 100644
--- a/src/pages/Deploy.tsx
+++ b/src/pages/Deploy.tsx
@@ -44,7 +44,7 @@ export default function DeployPage() {
           hideLogo={!isMobile}
           hideProject
           hideLinks={!isMobile}
-          title="Get Started"
+          title="Get started"
           description={
             <>
               <FormControl component="fieldset" variant="standard">
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 21e2ec01..e44f8b2b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -105,7 +105,7 @@ export default function HomePage() {
     return <AccessDenied />;
 
   const createTableFab = (
-    <Tooltip title="Create Table">
+    <Tooltip title="Create table">
       <Zoom in>
         <Fab
           color="secondary"
@@ -146,7 +146,7 @@ export default function HomePage() {
 
     return (
       <EmptyState
-        message="No Tables"
+        message="No tables"
         description="There are no tables in this project. Sign in with an admin account to create tables."
         fullScreen
         style={{ marginTop: -APP_BAR_HEIGHT }}
@@ -206,7 +206,7 @@ export default function HomePage() {
   return (
     <Container component="main" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       <FloatingSearch
-        label="Search Tables"
+        label="Search tables"
         onChange={(e) => handleQuery(e.target.value)}
         paperSx={{
           maxWidth: (theme) => ({ md: theme.breakpoints.values.sm - 48 }),
@@ -227,7 +227,7 @@ export default function HomePage() {
             sx={{ pl: 2, cursor: "default" }}
           >
             {query ? `${results.length} of ${tables.length}` : tables.length}{" "}
-            Tables
+            tables
           </Typography>
 
           <ToggleButtonGroup
diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
index d7111e9f..3013aad1 100644
--- a/src/pages/PageNotFound.tsx
+++ b/src/pages/PageNotFound.tsx
@@ -18,7 +18,7 @@ export default function PageNotFound() {
 
   if (!currentUser)
     return (
-      <AuthLayout title="Page Not Found">
+      <AuthLayout title="Page not found">
         <Button
           variant="outlined"
           sx={{ mt: 3 }}
@@ -31,9 +31,9 @@ export default function PageNotFound() {
     );
 
   return (
-    <Navigation title="Page Not Found" titleComponent={() => <div />}>
+    <Navigation title="Page not found" titleComponent={() => <div />}>
       <EmptyState
-        message="Page Not Found"
+        message="Page not found"
         description={
           <Button
             variant="outlined"
diff --git a/src/pages/RowyRunTest.tsx b/src/pages/RowyRunTest.tsx
index cde72586..341f2ed1 100644
--- a/src/pages/RowyRunTest.tsx
+++ b/src/pages/RowyRunTest.tsx
@@ -85,7 +85,7 @@ export default function TestView() {
           label="Localhost?"
         />
         <TextField
-          label="Defined Route"
+          label="Defined route"
           select
           value={
             Object.values(runRoutes).find((r) => r.path === path)?.path ?? ""
diff --git a/src/pages/Settings/UserManagement.tsx b/src/pages/Settings/UserManagement.tsx
index 41a0b0e1..2b6bd073 100644
--- a/src/pages/Settings/UserManagement.tsx
+++ b/src/pages/Settings/UserManagement.tsx
@@ -46,7 +46,7 @@ export default function UserManagementPage() {
   return (
     <Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       <FloatingSearch
-        label="Search Users"
+        label="Search users"
         onChange={(e) => handleQuery(e.target.value)}
       />
 
@@ -62,7 +62,7 @@ export default function UserManagementPage() {
             {!loading && query
               ? `${results.length} of ${usersState.documents.length}`
               : usersState.documents.length}{" "}
-            Users
+            users
           </Typography>
 
           <InviteUser />
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index c37ce72d..4b11ae67 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -157,7 +157,7 @@ export default function SetupPage() {
           color="primary"
           type="submit"
         >
-          Get Started
+          Get started
         </LoadingButton>
       ) : (
         <Tooltip title="Please accept the terms and conditions">
@@ -168,7 +168,7 @@ export default function SetupPage() {
               color="primary"
               disabled
             >
-              Get Started
+              Get started
             </LoadingButton>
           </div>
         </Tooltip>
@@ -177,25 +177,25 @@ export default function SetupPage() {
     {
       id: "rowyRun",
       shortTitle: `${name} Run`,
-      title: `Set Up ${name} Run`,
+      title: `Set up ${name} Run`,
       body: <Step1RowyRun {...stepProps} />,
     },
     {
       id: "serviceAccount",
-      shortTitle: `Service Account`,
-      title: `Set Up Service Account`,
+      shortTitle: `Service account`,
+      title: `Set up service account`,
       body: <Step2ServiceAccount {...stepProps} />,
     },
     {
       id: "projectOwner",
-      shortTitle: `Project Owner`,
-      title: `Set Up Project Owner`,
+      shortTitle: `Project owner`,
+      title: `Set up project owner`,
       body: <Step3ProjectOwner {...stepProps} />,
     },
     {
       id: "rules",
       shortTitle: `Rules`,
-      title: `Set Up Firestore Rules`,
+      title: `Set up Firestore Rules`,
       body: <Step4Rules {...stepProps} />,
     },
     completion.migrate !== undefined
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 55442d2f..7f1ff186 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1,10 +1,13 @@
 import { Theme, ThemeOptions } from "@mui/material/styles";
 import type {} from "@mui/lab/themeAugmentation";
+import { MultiSelectProps } from "@rowy/multiselect";
 import { toRem } from "./typography";
 
 import RadioIcon from "theme/RadioIcon";
 import CheckboxIcon from "theme/CheckboxIcon";
 import CheckboxIndeterminateIcon from "theme/CheckboxIndeterminateIcon";
+import AddCircleIcon from "@mui/icons-material/AddCircleOutline";
+import { SvgIcon } from "@mui/material";
 
 import { colord, extend } from "colord";
 import mixPlugin from "colord/plugins/mix";
@@ -16,6 +19,17 @@ declare module "@mui/material/styles/createTransitions" {
   }
 }
 
+declare module "@mui/material/styles" {
+  interface Components {
+    RowyMultiSelect?: {
+      defaultProps?: Omit<
+        MultiSelectProps<any>,
+        "multiple" | "value" | "onChange" | "options"
+      >;
+    };
+  }
+}
+
 export const components = (theme: Theme): ThemeOptions => {
   const buttonPrimaryHover = colord(theme.palette.primary.main)
     .mix(theme.palette.primary.contrastText, 0.12)
@@ -901,6 +915,19 @@ export const components = (theme: Theme): ThemeOptions => {
           },
         },
       },
+
+      RowyMultiSelect: {
+        defaultProps: {
+          AddButtonProps: {
+            singleIcon: <AddCircleIcon />,
+            multipleIcon: (
+              <SvgIcon>
+                <path d="M17 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10Zm0 2H7a2 2 0 0 0-1.995 1.85L5 7v10a2 2 0 0 0 1.85 1.995L7 19h10a2 2 0 0 0 1.995-1.85L19 17V7a2 2 0 0 0-1.85-1.995L17 5Zm-6 12h2v-4h4v-2h-4V7h-2v4H7v2h4v4Z" />
+              </SvgIcon>
+            ),
+          },
+        },
+      },
     },
   };
 };
diff --git a/yarn.lock b/yarn.lock
index d995a16f..79cd48a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2153,6 +2153,11 @@
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.0.tgz#32e82b072ff71c71e62fb2901b129642a0c5897e"
   integrity sha512-ALlr0Bg6zDHdRsdqkwfWGPMnIxP4hqMRPvFDHp7lWXQeA7rKykto3cWqQQh1s0PzX043RHwMB6OHVPMwFJqwxg==
 
+"@hookform/resolvers@^2.8.1":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.1.tgz#0d4fdd25bdeb4b98bf4e177c63fc4efa173454dd"
+  integrity sha512-U5lgaCkvD+0e5X8iQmCHiF+jOqjTX6OHUA7zPdeIHI6xdAOoi3rH9MKNuwMwv5Hly2LL6XtDgDkS/k+YG9hOew==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -2652,10 +2657,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.1.2.tgz#eb19bfa329ad38f0fd9047c0a4f3259c12fac780"
-  integrity sha512-m92jbHUe81KCCr1PiuyC9kpNhRaZylMOunDp3/PMhzxb7Ng+Ua+RQkQYQuVxz59ucapvLDrGtraieeQdU8HChg==
+"@rowy/form-builder@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.2.0.tgz#407c1be0e8fa8e40f57546be4499f7f6b93285de"
+  integrity sha512-YO/kES8k4xj+1tteF+07gIpb/xrk0ZkyRE+2NxA9loSnkJ3XKDIj0/GadF8CMIdS9cEaRgCHLfswK3pkJjKGCg==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@mdi/js" "^5.9.55"
@@ -2672,10 +2677,10 @@
     use-debounce "^3.4.3"
     yup "^0.32.9"
 
-"@rowy/multiselect@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.12.tgz#03380ceaaed9f6847c59b6ccae6d216ce149d95a"
-  integrity sha512-1JmH5EDt0OSxcUWjQXfqGwp4w2xDJ5OjfS1uV9pXv7AcTw++RqwQKsF15llKYyatvpZohSyaVQIogPh7Zzpe/g==
+"@rowy/multiselect@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.2.0.tgz#b915d3cfcd5f7fc2947e97d242510894e454281e"
+  integrity sha512-PAQ6LCMkEbAS558krXq8UyI8/9rZ/jmNU9cxSyvtnjHF7GVS7ZIRFDU8InV+nzYHsJWF/QYtH7o3X64kRmDrgQ==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
@@ -13569,16 +13574,16 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6:
-  version "6.15.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
-
 react-hook-form@^7.10.0:
   version "7.15.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.15.2.tgz#c4d4fa44a5df755648ab19034062ae37087536b0"
   integrity sha512-tPcLlsTXaOtZkyc1IGGaJfQ6amo2sJiM6DDufE7WG+S4N8s5Wr60HGtnKS7gPnnZL93pFPQYrSj7WDB5An2VVw==
 
+react-hook-form@^7.16.1:
+  version "7.16.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.16.1.tgz#669046df378a71949e5cf8a2398cbe20d5cb27bc"
+  integrity sha512-kcLDmSmlyLUFx2UU5bG/o4+3NeK753fhKodJa8gkplXohGkpAq0/p+TR24OWjZmkEc3ES7ppC5v5d6KUk+fJTA==
+
 react-image@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"