diff --git a/src/themes/DiamondDSTheme.ts b/src/themes/DiamondDSTheme.ts
index 9baa228c..705ae443 100644
--- a/src/themes/DiamondDSTheme.ts
+++ b/src/themes/DiamondDSTheme.ts
@@ -27,6 +27,7 @@ import type { CSSObject, Theme } from "@mui/material/styles";
  */
 import type { AlertProps } from "@mui/material/Alert";
 import type { ButtonProps } from "@mui/material/Button";
+import type { ToggleButtonProps } from "@mui/material/ToggleButton";
 import type { CheckboxProps } from "@mui/material/Checkbox";
 import type { ChipProps } from "@mui/material/Chip";
 import type { CircularProgressProps } from "@mui/material/CircularProgress";
@@ -544,7 +545,7 @@ const createDiamondPalette = (mode: DSMode) => {
     dividerChannel: "var(--ds-border-subtle-channel)",
 
     border: {
-      subtle: "var(--ds-border)",
+      subtle: "var(--ds-border-subtle)",
       emphasis: "var(--ds-border-emphasis)",
       strong: "var(--ds-border-strong)",
     },
@@ -649,6 +650,7 @@ const DiamondDSTheme = extendTheme({
      *   MuiButton           → contained, outlined and text variants
      *   MuiIconButton       → intent-aware icon actions
      *   MuiToggleButton     → selection, border and hover states
+     *   MuiButtonGroup      → selection, border and hover states
      *
      * Inputs and forms:
      *   MuiInputBase        → placeholder behaviour
@@ -714,16 +716,56 @@ const DiamondDSTheme = extendTheme({
           const variant = ownerState.variant ?? "text";
           const rawColour = ownerState.color ?? "primary";
 
+          const colour = getIntentFromColourProp(rawColour);
+          const p = getIntentPalette(theme, colour);
+
           if (rawColour === "inherit") {
+            if (variant === "outlined") {
+              return {
+                ...base,
+                ...getFocusOutline(),
+
+                color: "inherit",
+                backgroundColor: "transparent",
+                border: "1px solid var(--ds-border-emphasis)",
+
+                "&:hover": {
+                  backgroundColor: "var(--ds-overlay-hover)",
+                  borderColor: "var(--ds-border-strong)",
+                  boxShadow: getOverlayInset(),
+                },
+
+                "&:active": {
+                  borderColor: "var(--ds-border-strong)",
+                  boxShadow: getOverlayInset("var(--ds-overlay-selected)"),
+                },
+
+                "&.Mui-disabled": {
+                  ...getDisabledControlStyles(),
+                  borderColor: "var(--ds-border-subtle)",
+                },
+              };
+            }
+
+            if (variant === "contained") {
+              return {
+                ...base,
+                ...getFocusOutline(),
+              };
+            }
+
             return {
               ...base,
               ...getFocusOutline(),
+
+              color: "inherit",
+
+              "&.Mui-disabled": {
+                color: "var(--ds-on-surface-disabled)",
+              },
             };
           }
 
-          const colour = getIntentFromColourProp(rawColour);
-          const p = getIntentPalette(theme, colour);
-
           if (variant === "contained") {
             return {
               ...base,
@@ -774,7 +816,7 @@ const DiamondDSTheme = extendTheme({
 
               "&.Mui-disabled": {
                 ...getDisabledControlStyles(),
-                borderColor: "var(--ds-border)",
+                borderColor: "var(--ds-border-subtle)",
               },
             };
           }
@@ -861,31 +903,91 @@ const DiamondDSTheme = extendTheme({
 
     MuiToggleButton: {
       styleOverrides: {
-        root: ({ theme }: ThemeOnlyArgs): CSSObject => ({
-          textTransform: "none",
-          border: `1px solid ${theme.palette.border.emphasis}`,
+        root: ({
+          ownerState,
+          theme,
+        }: OverrideArgs<ToggleButtonProps>): CSSObject => {
+          const colour = ownerState.color ?? "standard";
+          const isPrimary = colour === "primary";
 
-          "&:hover": {
-            borderColor: theme.palette.border.strong,
+          return {
+            textTransform: "none",
+            border: `1px solid ${theme.palette.border.emphasis}`,
+
+            color: "inherit",
+
+            "&:hover": {
+              borderColor: theme.palette.border.strong,
+              boxShadow: getOverlayInset(),
+            },
+
+            "&.Mui-selected": {
+              backgroundColor: isPrimary
+                ? "var(--ds-primary-container)"
+                : "var(--ds-overlay-selected)",
+
+              color: isPrimary ? "var(--ds-on-primary-container)" : "inherit",
+
+              borderColor: isPrimary
+                ? "var(--ds-primary-accent)"
+                : "var(--ds-border-strong)",
+            },
+
+            "&.Mui-selected:hover": {
+              backgroundColor: isPrimary
+                ? "var(--ds-primary-container)"
+                : "var(--ds-overlay-selected)",
+
+              borderColor: isPrimary
+                ? "var(--ds-primary)"
+                : "var(--ds-border-strong)",
+
+              boxShadow: getOverlayInset(),
+            },
+
+            "&.Mui-disabled": {
+              color: "var(--ds-on-surface-disabled)",
+              borderColor: "var(--ds-border-subtle)",
+              boxShadow: "none",
+            },
+          };
+        },
+      },
+    },
+
+    MuiButtonGroup: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none",
+        },
+
+        contained: {
+          boxShadow: "none",
+        },
+
+        grouped: {
+          boxShadow: "none",
+
+          "&.Mui-disabled": {
+            boxShadow: "none",
           },
+        },
 
-          "&.Mui-selected": {
-            backgroundColor: "var(--ds-primary-container)",
-            color: "var(--ds-on-primary-container)",
-            borderColor: "var(--ds-primary-accent)",
+        groupedContained: {
+          boxShadow: "none",
+
+          "&:hover": {
+            boxShadow: getOverlayInset("var(--ds-overlay-hover-solid)"),
           },
 
-          "&.Mui-selected:hover": {
-            backgroundColor: "var(--ds-primary-container)",
-            borderColor: "var(--ds-primary)",
-            boxShadow: getOverlayInset(),
+          "&:active": {
+            boxShadow: getOverlayInset("var(--ds-overlay-selected)"),
           },
 
           "&.Mui-disabled": {
-            color: "var(--ds-on-surface-disabled)",
-            borderColor: "var(--ds-border)",
+            boxShadow: "none",
           },
-        }),
+        },
       },
     },
 
@@ -1267,7 +1369,7 @@ const DiamondDSTheme = extendTheme({
             ...common,
             backgroundColor: p.container,
             color: p.onContainer,
-            border: "1px solid var(--ds-border)",
+            border: "1px solid var(--ds-border-subtle)",
           };
         },
       },
@@ -1355,7 +1457,7 @@ const DiamondDSTheme = extendTheme({
         root: {
           backgroundColor: "var(--ds-surface-container)",
           color: "var(--ds-on-surface)",
-          border: "1px solid var(--ds-border)",
+          border: "1px solid var(--ds-border-subtle)",
           borderRadius: 8,
         },