From 340ef69e2a23270d9fe31c51e7004865e102c061 Mon Sep 17 00:00:00 2001
From: Edward Louth <edward@louths.com>
Date: Fri, 29 Sep 2023 11:41:43 +0100
Subject: [PATCH] Settings page redesign (#669)

* Start on settings page redesign

* add icons and fix tests

* Final fixes

* Fix code style issues with ESLint

* lint fix

---------

Co-authored-by: Lint Action <github-actions[bot]@users.noreply.github.com>
---
 grai-frontend/src/components/icons/Alerts.tsx |  28 +++
 .../src/components/icons/ApiKeys.tsx          |  21 ++
 .../src/components/icons/Installations.tsx    |  28 +++
 .../src/components/icons/PersonalInfo.tsx     |  28 +++
 .../src/components/icons/TwoFactor.tsx        |  28 +++
 grai-frontend/src/components/icons/Users.tsx  |  42 ++++
 .../src/components/icons/Workspace.tsx        |  35 +++
 .../components/settings/SettingsAppBar.tsx    |  59 +++--
 .../components/settings/SettingsContent.tsx   |  13 ++
 .../components/settings/SettingsDrawer.tsx    | 210 +++++++-----------
 .../settings/SettingsDrawerSection.tsx        |  70 ++++++
 .../components/settings/SettingsLayout.tsx    |  22 +-
 .../settings/alerts/AlertsHeader.tsx          |  35 +--
 .../settings/apiKeys/ApiKeysHeader.tsx        |  49 ++--
 .../memberships/MembershipsHeader.tsx         |  35 +--
 .../settings/profile/ProfileForm.tsx          | 134 +++++------
 .../settings/twoFactor/TwoFactorHeader.tsx    |  32 ++-
 .../settings/workspace/WorkspaceForm.tsx      |  51 ++---
 grai-frontend/src/index.css                   |   1 +
 .../src/pages/settings/Alert.test.tsx         |   8 +-
 .../src/pages/settings/Alerts.test.tsx        |   6 +-
 grai-frontend/src/pages/settings/Alerts.tsx   |  10 +-
 .../src/pages/settings/ApiKeys.test.tsx       |   8 +-
 grai-frontend/src/pages/settings/ApiKeys.tsx  |  10 +-
 .../src/pages/settings/Installations.test.tsx |   8 +-
 .../src/pages/settings/Installations.tsx      |   9 +-
 .../src/pages/settings/Memberships.tsx        |   8 +-
 .../pages/settings/ProfileSettings.test.tsx   |   2 +-
 .../src/pages/settings/ProfileSettings.tsx    |   2 +
 .../src/pages/settings/TwoFactor.test.tsx     |   4 +-
 .../src/pages/settings/TwoFactor.tsx          |   8 +-
 .../pages/settings/WorkspaceSettings.test.tsx |  28 ++-
 .../src/pages/settings/WorkspaceSettings.tsx  |   2 +
 33 files changed, 650 insertions(+), 384 deletions(-)
 create mode 100644 grai-frontend/src/components/icons/Alerts.tsx
 create mode 100644 grai-frontend/src/components/icons/ApiKeys.tsx
 create mode 100644 grai-frontend/src/components/icons/Installations.tsx
 create mode 100644 grai-frontend/src/components/icons/PersonalInfo.tsx
 create mode 100644 grai-frontend/src/components/icons/TwoFactor.tsx
 create mode 100644 grai-frontend/src/components/icons/Users.tsx
 create mode 100644 grai-frontend/src/components/icons/Workspace.tsx
 create mode 100644 grai-frontend/src/components/settings/SettingsContent.tsx
 create mode 100644 grai-frontend/src/components/settings/SettingsDrawerSection.tsx

diff --git a/grai-frontend/src/components/icons/Alerts.tsx b/grai-frontend/src/components/icons/Alerts.tsx
new file mode 100644
index 000000000..f520b06b1
--- /dev/null
+++ b/grai-frontend/src/components/icons/Alerts.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Alerts: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Alerts
diff --git a/grai-frontend/src/components/icons/ApiKeys.tsx b/grai-frontend/src/components/icons/ApiKeys.tsx
new file mode 100644
index 000000000..7c6207129
--- /dev/null
+++ b/grai-frontend/src/components/icons/ApiKeys.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+
+const ApiKeys: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 2L19 4M19 4L22 7L18.5 10.5L15.5 7.5M19 4L15.5 7.5M11.39 11.61C11.9064 12.1195 12.3168 12.726 12.5978 13.3948C12.8787 14.0635 13.0246 14.7813 13.0271 15.5066C13.0295 16.232 12.8884 16.9507 12.6119 17.6213C12.3355 18.2919 11.9291 18.9012 11.4162 19.4141C10.9033 19.9271 10.294 20.3334 9.62333 20.6099C8.95271 20.8864 8.23403 21.0275 7.50866 21.025C6.7833 21.0226 6.06557 20.8767 5.39682 20.5958C4.72807 20.3148 4.1215 19.9043 3.61203 19.388C2.61016 18.3507 2.05579 16.9614 2.06832 15.5193C2.08085 14.0772 2.65928 12.6977 3.67903 11.678C4.69877 10.6583 6.07824 10.0798 7.52032 10.0673C8.96241 10.0548 10.3517 10.6091 11.389 11.611L11.39 11.61ZM11.39 11.61L15.5 7.5"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default ApiKeys
diff --git a/grai-frontend/src/components/icons/Installations.tsx b/grai-frontend/src/components/icons/Installations.tsx
new file mode 100644
index 000000000..dc1b46f78
--- /dev/null
+++ b/grai-frontend/src/components/icons/Installations.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Installations: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_371_34)">
+      <path
+        d="M18.0001 10H16.7401C16.366 8.551 15.5929 7.23599 14.5088 6.2044C13.4246 5.1728 12.0728 4.46599 10.607 4.16428C9.14124 3.86256 7.6202 3.97804 6.21676 4.49759C4.81332 5.01714 3.58375 5.91993 2.66776 7.10338C1.75177 8.28683 1.1861 9.70348 1.03502 11.1924C0.883935 12.6812 1.1535 14.1826 1.81309 15.526C2.47267 16.8693 3.49583 18.0007 4.76629 18.7916C6.03676 19.5824 7.50359 20.0011 9.00011 20H18.0001C19.3262 20 20.598 19.4732 21.5356 18.5355C22.4733 17.5979 23.0001 16.3261 23.0001 15C23.0001 13.6739 22.4733 12.4021 21.5356 11.4645C20.598 10.5268 19.3262 10 18.0001 10Z"
+        stroke="#747A82"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_371_34">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default Installations
diff --git a/grai-frontend/src/components/icons/PersonalInfo.tsx b/grai-frontend/src/components/icons/PersonalInfo.tsx
new file mode 100644
index 000000000..0f3e53c27
--- /dev/null
+++ b/grai-frontend/src/components/icons/PersonalInfo.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const PersonalInfo: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default PersonalInfo
diff --git a/grai-frontend/src/components/icons/TwoFactor.tsx b/grai-frontend/src/components/icons/TwoFactor.tsx
new file mode 100644
index 000000000..75e092cd7
--- /dev/null
+++ b/grai-frontend/src/components/icons/TwoFactor.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const TwoFactor: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default TwoFactor
diff --git a/grai-frontend/src/components/icons/Users.tsx b/grai-frontend/src/components/icons/Users.tsx
new file mode 100644
index 000000000..71e00e783
--- /dev/null
+++ b/grai-frontend/src/components/icons/Users.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+
+const Users: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Users
diff --git a/grai-frontend/src/components/icons/Workspace.tsx b/grai-frontend/src/components/icons/Workspace.tsx
new file mode 100644
index 000000000..8cc4b77a1
--- /dev/null
+++ b/grai-frontend/src/components/icons/Workspace.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+
+const Workspace: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 20V10"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 20V4"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6 20V14"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Workspace
diff --git a/grai-frontend/src/components/settings/SettingsAppBar.tsx b/grai-frontend/src/components/settings/SettingsAppBar.tsx
index c610a0ddc..13808c822 100644
--- a/grai-frontend/src/components/settings/SettingsAppBar.tsx
+++ b/grai-frontend/src/components/settings/SettingsAppBar.tsx
@@ -1,38 +1,37 @@
 import React from "react"
-import { Close } from "@mui/icons-material"
-import { AppBar, IconButton, Toolbar, Typography } from "@mui/material"
-import { useNavigate } from "react-router-dom"
-import useWorkspace from "helpers/useWorkspace"
+import { Box, Typography } from "@mui/material"
 
-const SettingsAppBar: React.FC = () => {
-  const { routePrefix } = useWorkspace()
-  const navigate = useNavigate()
-
-  const handleClose = () => navigate(routePrefix)
+type SettingsAppBarProps = {
+  title: string
+  buttons?: React.ReactNode
+}
 
-  return (
-    <AppBar
-      position="fixed"
-      color="transparent"
-      elevation={0}
+const SettingsAppBar: React.FC<SettingsAppBarProps> = ({ title, buttons }) => (
+  <Box
+    sx={{
+      px: "48px",
+      py: "16px",
+      borderBottomStyle: "solid",
+      borderBottomWidth: 1,
+      borderBottomColor: "divider",
+      display: "flex",
+    }}
+  >
+    <Typography
+      variant="h6"
       sx={{
-        borderBottomStyle: "solid",
-        borderBottomWidth: 1,
-        borderBottomColor: "divider",
-        zIndex: theme => theme.zIndex.drawer + 1,
-        backgroundColor: "white",
+        color: "rgba(0, 0, 0, 0.80)",
+        fontSize: "24px",
+        fontWeight: 400,
+        lineHeight: "32px",
+        my: "8px",
       }}
     >
-      <Toolbar>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          Settings
-        </Typography>
-        <IconButton onClick={handleClose}>
-          <Close />
-        </IconButton>
-      </Toolbar>
-    </AppBar>
-  )
-}
+      {title}
+    </Typography>
+    <Box sx={{ flexGrow: 1 }} />
+    {buttons}
+  </Box>
+)
 
 export default SettingsAppBar
diff --git a/grai-frontend/src/components/settings/SettingsContent.tsx b/grai-frontend/src/components/settings/SettingsContent.tsx
new file mode 100644
index 000000000..acd1956c5
--- /dev/null
+++ b/grai-frontend/src/components/settings/SettingsContent.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { Box, SxProps } from "@mui/material"
+
+type SettingsContentProps = {
+  children: React.ReactNode
+  sx?: SxProps
+}
+
+const SettingsContent: React.FC<SettingsContentProps> = ({ children, sx }) => (
+  <Box sx={{ ...sx, p: 3 }}>{children}</Box>
+)
+
+export default SettingsContent
diff --git a/grai-frontend/src/components/settings/SettingsDrawer.tsx b/grai-frontend/src/components/settings/SettingsDrawer.tsx
index df2f4d97a..befad6e44 100644
--- a/grai-frontend/src/components/settings/SettingsDrawer.tsx
+++ b/grai-frontend/src/components/settings/SettingsDrawer.tsx
@@ -1,140 +1,88 @@
-import React, { useState } from "react"
-import {
-  AccountCircle,
-  Business,
-  CloudQueue,
-  KeyboardArrowLeft,
-  Lock,
-  Notifications,
-  People,
-  VpnKey,
-} from "@mui/icons-material"
-import {
-  Box,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-} from "@mui/material"
-import { Link } from "react-router-dom"
-import useWorkspace from "helpers/useWorkspace"
+import React from "react"
+import { Box, Typography } from "@mui/material"
+import Alerts from "components/icons/Alerts"
+import ApiKeys from "components/icons/ApiKeys"
+import Installations from "components/icons/Installations"
+import PersonalInfo from "components/icons/PersonalInfo"
+import TwoFactor from "components/icons/TwoFactor"
+import Users from "components/icons/Users"
+import Workspace from "components/icons/Workspace"
+import SettingsDrawerSection, { Page } from "./SettingsDrawerSection"
 
-const drawerWidth = 300
+const drawerWidth = 230
 
-const SettingsDrawer: React.FC = () => {
-  const { routePrefix } = useWorkspace()
-  const [open, setOpen] = useState(true)
+const profilePages: Page[] = [
+  {
+    name: "Personal info",
+    icon: <PersonalInfo />,
+    path: "/settings/profile",
+  },
+  {
+    name: "2 Factor",
+    icon: <TwoFactor />,
+    path: "/settings/2fa",
+  },
+  {
+    name: "API Keys",
+    icon: <ApiKeys />,
+    path: "/settings/api-keys",
+  },
+]
 
-  const handleClose = () => setOpen(false)
+const workspacePages: Page[] = [
+  {
+    name: "Settings",
+    icon: <Workspace />,
+    path: "/settings/workspace",
+  },
+  {
+    name: "Users",
+    icon: <Users />,
+    path: "/settings/memberships",
+  },
+  {
+    name: "Alerts",
+    icon: <Alerts />,
+    path: "/settings/alerts",
+  },
+  {
+    name: "Installations",
+    icon: <Installations />,
+    path: "/settings/installations",
+  },
+]
 
-  return (
-    <Drawer
-      variant="permanent"
-      open={open}
+const SettingsDrawer: React.FC = () => (
+  <Box
+    sx={{
+      width: drawerWidth,
+      boxSizing: "border-box",
+      backgroundColor: "#F8F8F8",
+    }}
+  >
+    <Typography
+      variant="h1"
       sx={{
-        width: drawerWidth,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
-          width: drawerWidth,
-          boxSizing: "border-box",
-        },
+        pl: "24px",
+        pt: "32px",
+        color: "rgba(0, 0, 0, 0.80)",
+        fontSize: "18px",
+        fontWeight: 700,
       }}
     >
-      <Toolbar />
-      <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-        <List sx={{ pt: 2 }}>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/profile`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <AccountCircle />
-              </ListItemIcon>
-              <ListItemText primary="Profile" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton component={Link} to={`${routePrefix}/settings/2fa`}>
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <Lock />
-              </ListItemIcon>
-              <ListItemText primary="2 Factor" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/api-keys`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <VpnKey />
-              </ListItemIcon>
-              <ListItemText primary="API Keys" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/workspace`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <Business />
-              </ListItemIcon>
-              <ListItemText primary="Workspace Settings" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/memberships`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <People />
-              </ListItemIcon>
-              <ListItemText primary="Users" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/alerts`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <Notifications />
-              </ListItemIcon>
-              <ListItemText primary="Alerts" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem sx={{ py: 0 }}>
-            <ListItemButton
-              component={Link}
-              to={`${routePrefix}/settings/installations`}
-            >
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <CloudQueue />
-              </ListItemIcon>
-              <ListItemText primary="Installations" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-        <Box sx={{ flexGrow: 1 }} />
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton onClick={handleClose}>
-              <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
-                <KeyboardArrowLeft />
-              </ListItemIcon>
-              <ListItemText primary="Collapse" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </Box>
-    </Drawer>
-  )
-}
+      Settings
+    </Typography>
+    <SettingsDrawerSection
+      title="Profile"
+      pages={profilePages}
+      sx={{ pt: 2 }}
+    />
+    <SettingsDrawerSection
+      title="Workspace"
+      pages={workspacePages}
+      sx={{ pt: "36px" }}
+    />
+  </Box>
+)
 
 export default SettingsDrawer
diff --git a/grai-frontend/src/components/settings/SettingsDrawerSection.tsx b/grai-frontend/src/components/settings/SettingsDrawerSection.tsx
new file mode 100644
index 000000000..f08835492
--- /dev/null
+++ b/grai-frontend/src/components/settings/SettingsDrawerSection.tsx
@@ -0,0 +1,70 @@
+import React from "react"
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  SxProps,
+} from "@mui/material"
+import { Link, useLocation } from "react-router-dom"
+import useWorkspace from "helpers/useWorkspace"
+
+const Subheader = ({ children }: { children: React.ReactNode }) => (
+  <ListSubheader
+    sx={{
+      color: "#79797D",
+      fontSize: "14px",
+      fontWeight: 500,
+      textTransform: "uppercase",
+      backgroundColor: "#F8F8F8",
+      fontFamily: "Inter",
+      pl: "24px",
+    }}
+  >
+    {children}
+  </ListSubheader>
+)
+
+export interface Page {
+  name: string
+  icon: React.ReactNode
+  path: string
+}
+
+type SettingsDrawerSectionProps = {
+  title: string
+  pages: Page[]
+  sx?: SxProps
+}
+
+const SettingsDrawerSection: React.FC<SettingsDrawerSectionProps> = ({
+  title,
+  pages,
+  sx,
+}) => {
+  const { routePrefix } = useWorkspace()
+  const location = useLocation()
+
+  return (
+    <List sx={sx}>
+      <Subheader>{title}</Subheader>
+      {pages.map(({ name, icon, path }) => (
+        <ListItem sx={{ py: 0 }} key={name} disableGutters>
+          <ListItemButton
+            component={Link}
+            to={routePrefix + path}
+            selected={location.pathname === routePrefix + path}
+            sx={{ pl: "24px" }}
+          >
+            <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>{icon}</ListItemIcon>
+            <ListItemText primary={name} />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default SettingsDrawerSection
diff --git a/grai-frontend/src/components/settings/SettingsLayout.tsx b/grai-frontend/src/components/settings/SettingsLayout.tsx
index 5cd9f6e01..37becfc39 100644
--- a/grai-frontend/src/components/settings/SettingsLayout.tsx
+++ b/grai-frontend/src/components/settings/SettingsLayout.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react"
-import { Box, Toolbar } from "@mui/material"
+import { Box } from "@mui/material"
 import Loading from "components/layout/Loading"
-import SettingsAppBar from "./SettingsAppBar"
+import PageLayout from "components/layout/PageLayout"
 import SettingsDrawer from "./SettingsDrawer"
 
 type SettingsLayoutProps = {
@@ -14,15 +14,17 @@ const SettingsLayout: React.FC<SettingsLayoutProps> = ({
   loading,
 }) => {
   return (
-    <Box sx={{ display: "flex" }}>
-      <SettingsAppBar />
-      <SettingsDrawer />
-      <Box component="main" sx={{ flexGrow: 1 }}>
-        <Toolbar />
-        {loading && <Loading />}
-        {children}
+    <PageLayout>
+      <Box
+        sx={{ display: "flex", backgroundColor: "white", minHeight: "100%" }}
+      >
+        <SettingsDrawer />
+        <Box component="main" sx={{ flexGrow: 1 }}>
+          {loading && <Loading />}
+          {children}
+        </Box>
       </Box>
-    </Box>
+    </PageLayout>
   )
 }
 
diff --git a/grai-frontend/src/components/settings/alerts/AlertsHeader.tsx b/grai-frontend/src/components/settings/alerts/AlertsHeader.tsx
index 80b1dcd8a..cfabc1afc 100644
--- a/grai-frontend/src/components/settings/alerts/AlertsHeader.tsx
+++ b/grai-frontend/src/components/settings/alerts/AlertsHeader.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import { Add } from "@mui/icons-material"
-import { Box, Button, Typography } from "@mui/material"
+import { Box, Button } from "@mui/material"
 import CreateAlertDialog from "./CreateAlertDialog"
+import SettingsAppBar from "../SettingsAppBar"
 
 type AlertsHeaderProps = {
   workspaceId: string
@@ -14,21 +15,23 @@ const AlertsHeader: React.FC<AlertsHeaderProps> = ({ workspaceId }) => {
   const handleClose = () => setOpen(false)
 
   return (
-    <Box sx={{ display: "flex", mb: 3 }}>
-      <Typography variant="h5" sx={{ flexGrow: 1 }}>
-        Alerts
-      </Typography>
-      <Box>
-        <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
-          Add alert
-        </Button>
-      </Box>
-      <CreateAlertDialog
-        workspaceId={workspaceId}
-        open={open}
-        onClose={handleClose}
-      />
-    </Box>
+    <SettingsAppBar
+      title="Alerts"
+      buttons={
+        <>
+          <Box>
+            <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
+              Add alert
+            </Button>
+          </Box>
+          <CreateAlertDialog
+            workspaceId={workspaceId}
+            open={open}
+            onClose={handleClose}
+          />
+        </>
+      }
+    />
   )
 }
 export default AlertsHeader
diff --git a/grai-frontend/src/components/settings/apiKeys/ApiKeysHeader.tsx b/grai-frontend/src/components/settings/apiKeys/ApiKeysHeader.tsx
index 548fdf4fc..0dc22178f 100644
--- a/grai-frontend/src/components/settings/apiKeys/ApiKeysHeader.tsx
+++ b/grai-frontend/src/components/settings/apiKeys/ApiKeysHeader.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react"
 import { Add } from "@mui/icons-material"
 import { Box, Button, Card, Typography } from "@mui/material"
 import CreateKeyDialog from "./CreateKeyDialog"
+import SettingsAppBar from "../SettingsAppBar"
 
 type ApiKeysHeaderProps = {
   workspaceId: string
@@ -15,27 +16,35 @@ const ApiKeysHeader: React.FC<ApiKeysHeaderProps> = ({ workspaceId }) => {
 
   return (
     <>
-      <Box sx={{ display: "flex", mb: 3 }}>
-        <Typography variant="h5" sx={{ flexGrow: 1 }}>
-          API Keys
-        </Typography>
-        <Box>
-          <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
-            Add API Key
-          </Button>
-        </Box>
-        <CreateKeyDialog
-          workspaceId={workspaceId}
-          open={open}
-          onClose={handleClose}
-        />
+      <SettingsAppBar
+        title="API Keys"
+        buttons={
+          <>
+            <Box>
+              <Button
+                variant="outlined"
+                startIcon={<Add />}
+                onClick={handleOpen}
+              >
+                Add API Key
+              </Button>
+            </Box>
+            <CreateKeyDialog
+              workspaceId={workspaceId}
+              open={open}
+              onClose={handleClose}
+            />
+          </>
+        }
+      />
+      <Box sx={{ p: 3, pb: 0 }}>
+        <Card variant="outlined" sx={{ mt: 3, mb: 3, p: 2, display: "flex" }}>
+          <Typography variant="body2" sx={{ mr: 2, mt: 0.25 }}>
+            WorkspaceId
+          </Typography>
+          <Typography>{workspaceId}</Typography>
+        </Card>
       </Box>
-      <Card variant="outlined" sx={{ mb: 3, p: 2, display: "flex" }}>
-        <Typography variant="body2" sx={{ mr: 2, mt: 0.25 }}>
-          WorkspaceId
-        </Typography>
-        <Typography>{workspaceId}</Typography>
-      </Card>
     </>
   )
 }
diff --git a/grai-frontend/src/components/settings/memberships/MembershipsHeader.tsx b/grai-frontend/src/components/settings/memberships/MembershipsHeader.tsx
index 1e3bc6c14..a71779cff 100644
--- a/grai-frontend/src/components/settings/memberships/MembershipsHeader.tsx
+++ b/grai-frontend/src/components/settings/memberships/MembershipsHeader.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import { Add } from "@mui/icons-material"
-import { Box, Button, Typography } from "@mui/material"
+import { Box, Button } from "@mui/material"
 import CreateMembershipDialog from "./CreateMembershipDialog"
+import SettingsAppBar from "../SettingsAppBar"
 
 type MembershipsHeaderProps = {
   workspaceId: string
@@ -16,21 +17,23 @@ const MembershipsHeader: React.FC<MembershipsHeaderProps> = ({
   const handleClose = () => setOpen(false)
 
   return (
-    <Box sx={{ display: "flex", mb: 3 }}>
-      <Typography variant="h5" sx={{ flexGrow: 1 }}>
-        Memberships
-      </Typography>
-      <Box>
-        <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
-          Invite users
-        </Button>
-      </Box>
-      <CreateMembershipDialog
-        workspaceId={workspaceId}
-        open={open}
-        onClose={handleClose}
-      />
-    </Box>
+    <SettingsAppBar
+      title="Memberships"
+      buttons={
+        <>
+          <Box>
+            <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
+              Invite users
+            </Button>
+          </Box>
+          <CreateMembershipDialog
+            workspaceId={workspaceId}
+            open={open}
+            onClose={handleClose}
+          />
+        </>
+      }
+    />
   )
 }
 export default MembershipsHeader
diff --git a/grai-frontend/src/components/settings/profile/ProfileForm.tsx b/grai-frontend/src/components/settings/profile/ProfileForm.tsx
index c34ec88d3..e4fc85a8f 100644
--- a/grai-frontend/src/components/settings/profile/ProfileForm.tsx
+++ b/grai-frontend/src/components/settings/profile/ProfileForm.tsx
@@ -1,14 +1,7 @@
 import React, { useState } from "react"
 import { gql, useMutation } from "@apollo/client"
 import { LoadingButton } from "@mui/lab"
-import {
-  Box,
-  Button,
-  Grid,
-  InputAdornment,
-  TextField,
-  Typography,
-} from "@mui/material"
+import { Box, Button, InputAdornment, TextField } from "@mui/material"
 import { useSnackbar } from "notistack"
 import { Link } from "react-router-dom"
 import useWorkspace from "helpers/useWorkspace"
@@ -65,72 +58,65 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ profile }) => {
       .catch(err => {})
 
   return (
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h5" sx={{ mb: 3 }}>
-        Profile Settings
-      </Typography>
-      <Grid container>
-        <Grid item md={6}>
-          <Form onSubmit={handleSubmit}>
-            {error && <GraphError error={error} />}
-            <TextField
-              label="Email"
-              value={profile.username}
-              margin="normal"
-              fullWidth
-              disabled
-            />
-            <TextField
-              label="First Name"
-              value={values.first_name}
-              onChange={event =>
-                setValues({ ...values, first_name: event.target.value })
-              }
-              margin="normal"
-              fullWidth
-              required
-            />
-            <TextField
-              label="Last Name"
-              value={values.last_name}
-              onChange={event =>
-                setValues({ ...values, last_name: event.target.value })
-              }
-              margin="normal"
-              fullWidth
-              required
-            />
-            <TextField
-              label="Password"
-              value="password"
-              type="password"
-              margin="normal"
-              fullWidth
-              disabled
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <Button
-                      component={Link}
-                      to={`${routePrefix}/settings/password`}
-                    >
-                      Change password
-                    </Button>
-                  </InputAdornment>
-                ),
-              }}
-            />
-            <LoadingButton
-              type="submit"
-              variant="contained"
-              sx={{ mt: 2 }}
-              loading={loading}
-            >
-              Save
-            </LoadingButton>
-          </Form>
-        </Grid>
-      </Grid>
+    <Box sx={{ m: 3, ml: "48px", maxWidth: "475px" }}>
+      <Form onSubmit={handleSubmit}>
+        {error && <GraphError error={error} />}
+        <TextField
+          label="Email"
+          value={profile.username}
+          margin="normal"
+          fullWidth
+          disabled
+        />
+        <TextField
+          label="First Name"
+          value={values.first_name}
+          onChange={event =>
+            setValues({ ...values, first_name: event.target.value })
+          }
+          margin="normal"
+          fullWidth
+          required
+        />
+        <TextField
+          label="Last Name"
+          value={values.last_name}
+          onChange={event =>
+            setValues({ ...values, last_name: event.target.value })
+          }
+          margin="normal"
+          fullWidth
+          required
+        />
+        <TextField
+          label="Password"
+          value="password"
+          type="password"
+          margin="normal"
+          fullWidth
+          disabled
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <Button
+                  component={Link}
+                  to={`${routePrefix}/settings/password`}
+                >
+                  Change password
+                </Button>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <LoadingButton
+          type="submit"
+          variant="contained"
+          sx={{ mt: 2 }}
+          loading={loading}
+        >
+          Save
+        </LoadingButton>
+      </Form>
     </Box>
   )
 }
diff --git a/grai-frontend/src/components/settings/twoFactor/TwoFactorHeader.tsx b/grai-frontend/src/components/settings/twoFactor/TwoFactorHeader.tsx
index ed7a9762c..76dcdd9e3 100644
--- a/grai-frontend/src/components/settings/twoFactor/TwoFactorHeader.tsx
+++ b/grai-frontend/src/components/settings/twoFactor/TwoFactorHeader.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import { Add } from "@mui/icons-material"
-import { Box, Button, Typography } from "@mui/material"
+import { Box, Button } from "@mui/material"
 import CreateDeviceDialog from "./CreateDeviceDialog"
+import SettingsAppBar from "../SettingsAppBar"
 
 const TwoFactorHeader: React.FC = () => {
   const [open, setOpen] = useState(false)
@@ -10,17 +11,24 @@ const TwoFactorHeader: React.FC = () => {
   const handleClose = () => setOpen(false)
 
   return (
-    <Box sx={{ display: "flex", mb: 3 }}>
-      <Typography variant="h5" sx={{ flexGrow: 1 }}>
-        2FA Keys
-      </Typography>
-      <Box>
-        <Button variant="outlined" startIcon={<Add />} onClick={handleOpen}>
-          Add 2FA Key
-        </Button>
-      </Box>
-      <CreateDeviceDialog open={open} onClose={handleClose} />
-    </Box>
+    <SettingsAppBar
+      title="2FA Keys"
+      buttons={
+        <>
+          <Box>
+            <Button
+              variant="outlined"
+              startIcon={<Add />}
+              onClick={handleOpen}
+              sx={{ height: "48px" }}
+            >
+              Add 2FA Key
+            </Button>
+          </Box>
+          <CreateDeviceDialog open={open} onClose={handleClose} />
+        </>
+      }
+    />
   )
 }
 export default TwoFactorHeader
diff --git a/grai-frontend/src/components/settings/workspace/WorkspaceForm.tsx b/grai-frontend/src/components/settings/workspace/WorkspaceForm.tsx
index 50880f410..e973954b0 100644
--- a/grai-frontend/src/components/settings/workspace/WorkspaceForm.tsx
+++ b/grai-frontend/src/components/settings/workspace/WorkspaceForm.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { gql, useMutation } from "@apollo/client"
 import { LoadingButton } from "@mui/lab"
-import { Box, Grid, TextField, Typography } from "@mui/material"
+import { Box, TextField } from "@mui/material"
 import { useSnackbar } from "notistack"
 import Form from "components/form/Form"
 import GraphError from "components/utils/GraphError"
@@ -52,35 +52,26 @@ const WorkspaceForm: React.FC<WorkspaceFormProps> = ({ workspace }) => {
       .catch(err => {})
 
   return (
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h5" sx={{ mb: 3 }}>
-        Workspace Settings
-      </Typography>
-      <Grid container>
-        <Grid item md={6}>
-          <Form onSubmit={handleSubmit}>
-            {error && <GraphError error={error} />}
-            <TextField
-              label="Name"
-              value={values.name}
-              onChange={event =>
-                setValues({ ...values, name: event.target.value })
-              }
-              margin="normal"
-              fullWidth
-              required
-            />
-            <LoadingButton
-              type="submit"
-              variant="contained"
-              sx={{ mt: 2 }}
-              loading={loading}
-            >
-              Save
-            </LoadingButton>
-          </Form>
-        </Grid>
-      </Grid>
+    <Box sx={{ maxWidth: "475px", pl: "48px" }}>
+      <Form onSubmit={handleSubmit}>
+        {error && <GraphError error={error} />}
+        <TextField
+          label="Name"
+          value={values.name}
+          onChange={event => setValues({ ...values, name: event.target.value })}
+          margin="normal"
+          fullWidth
+          required
+        />
+        <LoadingButton
+          type="submit"
+          variant="contained"
+          sx={{ mt: 2 }}
+          loading={loading}
+        >
+          Save
+        </LoadingButton>
+      </Form>
     </Box>
   )
 }
diff --git a/grai-frontend/src/index.css b/grai-frontend/src/index.css
index 9f8dbfe70..2c78b87ca 100644
--- a/grai-frontend/src/index.css
+++ b/grai-frontend/src/index.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Sora:regular,semibold,bold,extrabold,italic&subset=latin,latin-ext");
+@import url("https://fonts.googleapis.com/css?family=Inter:regular,semibold,bold,extrabold,italic&subset=latin,latin-ext");
 @import url("shepherd.js/dist/css/shepherd.css");
 
 body {
diff --git a/grai-frontend/src/pages/settings/Alert.test.tsx b/grai-frontend/src/pages/settings/Alert.test.tsx
index 150d6bacd..5ec5a53e3 100644
--- a/grai-frontend/src/pages/settings/Alert.test.tsx
+++ b/grai-frontend/src/pages/settings/Alert.test.tsx
@@ -9,12 +9,14 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
     expect(
-      screen.getByRole("heading", { name: /Hello World/i })
+      screen.getByRole("heading", { name: /Hello World/i }),
     ).toBeInTheDocument()
   })
 })
@@ -69,7 +71,7 @@ test("no workspace", async () => {
 
   await waitFor(() => {
     expect(
-      screen.getByText("Sorry something has gone wrong")
+      screen.getByText("Sorry something has gone wrong"),
     ).toBeInTheDocument()
   })
 })
diff --git a/grai-frontend/src/pages/settings/Alerts.test.tsx b/grai-frontend/src/pages/settings/Alerts.test.tsx
index 64e28d759..eb56b251b 100644
--- a/grai-frontend/src/pages/settings/Alerts.test.tsx
+++ b/grai-frontend/src/pages/settings/Alerts.test.tsx
@@ -9,7 +9,9 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -62,7 +64,7 @@ test("no workspace", async () => {
 
   await waitFor(() => {
     expect(
-      screen.getByText("Sorry something has gone wrong")
+      screen.getByText("Sorry something has gone wrong"),
     ).toBeInTheDocument()
   })
 })
diff --git a/grai-frontend/src/pages/settings/Alerts.tsx b/grai-frontend/src/pages/settings/Alerts.tsx
index 21c82c37a..59c75bd50 100644
--- a/grai-frontend/src/pages/settings/Alerts.tsx
+++ b/grai-frontend/src/pages/settings/Alerts.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import { gql, useQuery } from "@apollo/client"
-import { Box } from "@mui/material"
 import NotFound from "pages/NotFound"
 import useWorkspace from "helpers/useWorkspace"
 import AlertsHeader from "components/settings/alerts/AlertsHeader"
 import AlertsTable from "components/settings/alerts/AlertsTable"
+import SettingsContent from "components/settings/SettingsContent"
 import SettingsLayout from "components/settings/SettingsLayout"
 import GraphError from "components/utils/GraphError"
 import { GetAlerts, GetAlertsVariables } from "./__generated__/GetAlerts"
@@ -38,7 +38,7 @@ const Alerts: React.FC = () => {
         organisationName,
         workspaceName,
       },
-    }
+    },
   )
 
   if (error) return <GraphError error={error} />
@@ -49,14 +49,14 @@ const Alerts: React.FC = () => {
 
   return (
     <SettingsLayout>
-      <Box sx={{ p: 3 }}>
-        <AlertsHeader workspaceId={workspace?.id} />
+      <AlertsHeader workspaceId={workspace?.id} />
+      <SettingsContent>
         <AlertsTable
           alerts={data?.workspace?.alerts.data ?? []}
           loading={loading}
           workspaceId={workspace?.id}
         />
-      </Box>
+      </SettingsContent>
     </SettingsLayout>
   )
 }
diff --git a/grai-frontend/src/pages/settings/ApiKeys.test.tsx b/grai-frontend/src/pages/settings/ApiKeys.test.tsx
index 739108946..0412bc348 100644
--- a/grai-frontend/src/pages/settings/ApiKeys.test.tsx
+++ b/grai-frontend/src/pages/settings/ApiKeys.test.tsx
@@ -9,12 +9,14 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
     expect(
-      screen.getByRole("heading", { name: /Api Keys/i })
+      screen.getByRole("heading", { name: /Api Keys/i }),
     ).toBeInTheDocument()
   })
 })
@@ -64,7 +66,7 @@ test("no workspace", async () => {
 
   await waitFor(() => {
     expect(
-      screen.getByText("Sorry something has gone wrong")
+      screen.getByText("Sorry something has gone wrong"),
     ).toBeInTheDocument()
   })
 })
diff --git a/grai-frontend/src/pages/settings/ApiKeys.tsx b/grai-frontend/src/pages/settings/ApiKeys.tsx
index f63745bf4..d4cd658fe 100644
--- a/grai-frontend/src/pages/settings/ApiKeys.tsx
+++ b/grai-frontend/src/pages/settings/ApiKeys.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import { gql, useQuery } from "@apollo/client"
-import { Box } from "@mui/material"
 import NotFound from "pages/NotFound"
 import useWorkspace from "helpers/useWorkspace"
 import ApiKeysHeader from "components/settings/apiKeys/ApiKeysHeader"
 import ApiKeysTable from "components/settings/apiKeys/ApiKeysTable"
+import SettingsContent from "components/settings/SettingsContent"
 import SettingsLayout from "components/settings/SettingsLayout"
 import GraphError from "components/utils/GraphError"
 import { GetApiKeys, GetApiKeysVariables } from "./__generated__/GetApiKeys"
@@ -43,7 +43,7 @@ const ApiKeys: React.FC = () => {
         organisationName,
         workspaceName,
       },
-    }
+    },
   )
 
   if (error) return <GraphError error={error} />
@@ -54,14 +54,14 @@ const ApiKeys: React.FC = () => {
 
   return (
     <SettingsLayout>
-      <Box sx={{ p: 3 }}>
-        <ApiKeysHeader workspaceId={workspace?.id} />
+      <ApiKeysHeader workspaceId={workspace?.id} />
+      <SettingsContent>
         <ApiKeysTable
           keys={workspace?.api_keys.data ?? []}
           loading={loading}
           workspaceId={workspace?.id}
         />
-      </Box>
+      </SettingsContent>
     </SettingsLayout>
   )
 }
diff --git a/grai-frontend/src/pages/settings/Installations.test.tsx b/grai-frontend/src/pages/settings/Installations.test.tsx
index 503b6cca3..86a26bc8b 100644
--- a/grai-frontend/src/pages/settings/Installations.test.tsx
+++ b/grai-frontend/src/pages/settings/Installations.test.tsx
@@ -10,12 +10,14 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
     expect(
-      screen.getByRole("heading", { name: /Installations/i })
+      screen.getByRole("heading", { name: /Installations/i }),
     ).toBeInTheDocument()
   })
 
@@ -69,7 +71,7 @@ test("no workspace", async () => {
 
   await waitFor(() => {
     expect(
-      screen.getByText("Sorry something has gone wrong")
+      screen.getByText("Sorry something has gone wrong"),
     ).toBeInTheDocument()
   })
 })
diff --git a/grai-frontend/src/pages/settings/Installations.tsx b/grai-frontend/src/pages/settings/Installations.tsx
index 3bbe38d40..ed20f0a8d 100644
--- a/grai-frontend/src/pages/settings/Installations.tsx
+++ b/grai-frontend/src/pages/settings/Installations.tsx
@@ -1,14 +1,13 @@
 import React from "react"
-import { Box, Typography } from "@mui/material"
+import { Box } from "@mui/material"
 import GitHubInstallation from "components/settings/installations/GitHubInstallation"
+import SettingsAppBar from "components/settings/SettingsAppBar"
 import SettingsLayout from "components/settings/SettingsLayout"
 
 const Installations: React.FC = () => (
   <SettingsLayout>
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h5" sx={{ mb: 3 }}>
-        Installations
-      </Typography>
+    <SettingsAppBar title="Installations" />
+    <Box sx={{ p: 3, pl: "48px" }}>
       <GitHubInstallation />
     </Box>
   </SettingsLayout>
diff --git a/grai-frontend/src/pages/settings/Memberships.tsx b/grai-frontend/src/pages/settings/Memberships.tsx
index 462f0a734..c10e93540 100644
--- a/grai-frontend/src/pages/settings/Memberships.tsx
+++ b/grai-frontend/src/pages/settings/Memberships.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import { gql, useQuery } from "@apollo/client"
-import { Box } from "@mui/material"
 import NotFound from "pages/NotFound"
 import useWorkspace from "helpers/useWorkspace"
 import MembershipsHeader from "components/settings/memberships/MembershipsHeader"
 import MembershipsTable from "components/settings/memberships/MembershipsTable"
+import SettingsContent from "components/settings/SettingsContent"
 import SettingsLayout from "components/settings/SettingsLayout"
 import GraphError from "components/utils/GraphError"
 import {
@@ -58,15 +58,15 @@ const Memberships: React.FC = () => {
 
   return (
     <SettingsLayout>
-      <Box sx={{ p: 3 }}>
-        <MembershipsHeader workspaceId={workspace?.id} />
+      <MembershipsHeader workspaceId={workspace?.id} />
+      <SettingsContent>
         <MembershipsTable
           memberships={data?.workspace?.memberships.data ?? []}
           loading={loading}
           workspaceId={workspace?.id}
           total={data?.workspace?.memberships.meta.total ?? 0}
         />
-      </Box>
+      </SettingsContent>
     </SettingsLayout>
   )
 }
diff --git a/grai-frontend/src/pages/settings/ProfileSettings.test.tsx b/grai-frontend/src/pages/settings/ProfileSettings.test.tsx
index 2431f6fbf..3c8f39258 100644
--- a/grai-frontend/src/pages/settings/ProfileSettings.test.tsx
+++ b/grai-frontend/src/pages/settings/ProfileSettings.test.tsx
@@ -9,7 +9,7 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Profile Settings")).toBeInTheDocument()
+    expect(screen.getByText("Personal info")).toBeInTheDocument()
   })
 })
 
diff --git a/grai-frontend/src/pages/settings/ProfileSettings.tsx b/grai-frontend/src/pages/settings/ProfileSettings.tsx
index 74c9dbec6..4f1f5da6a 100644
--- a/grai-frontend/src/pages/settings/ProfileSettings.tsx
+++ b/grai-frontend/src/pages/settings/ProfileSettings.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { gql, useQuery } from "@apollo/client"
 import NotFound from "pages/NotFound"
 import ProfileForm from "components/settings/profile/ProfileForm"
+import SettingsAppBar from "components/settings/SettingsAppBar"
 import SettingsLayout from "components/settings/SettingsLayout"
 import GraphError from "components/utils/GraphError"
 import { GetProfile } from "./__generated__/GetProfile"
@@ -29,6 +30,7 @@ const ProfileSettings: React.FC = () => {
 
   return (
     <SettingsLayout>
+      <SettingsAppBar title="Personal info" />
       <ProfileForm profile={profile} />
     </SettingsLayout>
   )
diff --git a/grai-frontend/src/pages/settings/TwoFactor.test.tsx b/grai-frontend/src/pages/settings/TwoFactor.test.tsx
index 5e3516634..b93b49ed8 100644
--- a/grai-frontend/src/pages/settings/TwoFactor.test.tsx
+++ b/grai-frontend/src/pages/settings/TwoFactor.test.tsx
@@ -9,7 +9,9 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
diff --git a/grai-frontend/src/pages/settings/TwoFactor.tsx b/grai-frontend/src/pages/settings/TwoFactor.tsx
index 269c64df7..21e862309 100644
--- a/grai-frontend/src/pages/settings/TwoFactor.tsx
+++ b/grai-frontend/src/pages/settings/TwoFactor.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { gql, useQuery } from "@apollo/client"
-import { Box } from "@mui/material"
 import NotFound from "pages/NotFound"
+import SettingsContent from "components/settings/SettingsContent"
 import SettingsLayout from "components/settings/SettingsLayout"
 import TwoFactorHeader from "components/settings/twoFactor/TwoFactorHeader"
 import TwoFactorTable from "components/settings/twoFactor/TwoFactorTable"
@@ -37,10 +37,10 @@ const ProfileSettings: React.FC = () => {
 
   return (
     <SettingsLayout>
-      <Box sx={{ p: 3 }}>
-        <TwoFactorHeader />
+      <TwoFactorHeader />
+      <SettingsContent>
         <TwoFactorTable keys={profile.devices.data} loading={loading} />
-      </Box>
+      </SettingsContent>
     </SettingsLayout>
   )
 }
diff --git a/grai-frontend/src/pages/settings/WorkspaceSettings.test.tsx b/grai-frontend/src/pages/settings/WorkspaceSettings.test.tsx
index d30ebeb23..95848120f 100644
--- a/grai-frontend/src/pages/settings/WorkspaceSettings.test.tsx
+++ b/grai-frontend/src/pages/settings/WorkspaceSettings.test.tsx
@@ -11,7 +11,9 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Workspace Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -38,7 +40,9 @@ test("error", async () => {
   render(<WorkspaceSettings />, { mocks, withRouter: true })
 
   await waitFor(() => {
-    expect(screen.getByText("Workspace Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -67,7 +71,9 @@ test("not found", async () => {
   render(<WorkspaceSettings />, { mocks, withRouter: true })
 
   await waitFor(() => {
-    expect(screen.getByText("Workspace Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -83,7 +89,9 @@ test("submit", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getAllByText("Workspace Settings")).toBeTruthy()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -94,12 +102,12 @@ test("submit", async () => {
     async () =>
       await user.type(
         screen.getByRole("textbox", { name: /name/i }),
-        "Workspace 1"
-      )
+        "Workspace 1",
+      ),
   )
 
   await act(
-    async () => await user.click(screen.getByRole("button", { name: /save/i }))
+    async () => await user.click(screen.getByRole("button", { name: /save/i })),
   )
 
   // eslint-disable-next-line testing-library/no-wait-for-empty-callback
@@ -144,7 +152,9 @@ test("submit error", async () => {
   render(<WorkspaceSettings />, { mocks, withRouter: true })
 
   await waitFor(() => {
-    expect(screen.getByText("Workspace Settings")).toBeInTheDocument()
+    expect(
+      screen.getByRole("heading", { name: "Settings" }),
+    ).toBeInTheDocument()
   })
 
   await waitFor(() => {
@@ -152,7 +162,7 @@ test("submit error", async () => {
   })
 
   await act(
-    async () => await user.click(screen.getByRole("button", { name: /save/i }))
+    async () => await user.click(screen.getByRole("button", { name: /save/i })),
   )
 
   await waitFor(() => {
diff --git a/grai-frontend/src/pages/settings/WorkspaceSettings.tsx b/grai-frontend/src/pages/settings/WorkspaceSettings.tsx
index 76bb0e81a..7eeffa735 100644
--- a/grai-frontend/src/pages/settings/WorkspaceSettings.tsx
+++ b/grai-frontend/src/pages/settings/WorkspaceSettings.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { gql, useQuery } from "@apollo/client"
 import NotFound from "pages/NotFound"
 import useWorkspace from "helpers/useWorkspace"
+import SettingsAppBar from "components/settings/SettingsAppBar"
 import SettingsLayout from "components/settings/SettingsLayout"
 import WorkspaceDanger from "components/settings/workspace/WorkspaceDanger"
 import WorkspaceForm from "components/settings/workspace/WorkspaceForm"
@@ -45,6 +46,7 @@ const WorkspaceSettings: React.FC = () => {
 
   return (
     <SettingsLayout>
+      <SettingsAppBar title="Workspace" />
       <WorkspaceForm workspace={workspaceModel} />
       <WorkspaceDanger workspace={workspaceModel} />
     </SettingsLayout>