diff --git a/src/themes/DiamondDSTheme.test.ts b/src/themes/DiamondDSTheme.test.ts
index 5ab59c8..be24245 100644
--- a/src/themes/DiamondDSTheme.test.ts
+++ b/src/themes/DiamondDSTheme.test.ts
@@ -499,6 +499,9 @@ describe("DiamondDS component overrides", () => {
       DiamondDSTheme.components?.MuiToggleButton?.styleOverrides?.root;
 
     const styles = getStyleOverride(root, {
+      ownerState: {
+        color: "primary", // Add this
+      },
       theme: DiamondDSTheme,
     });
 
diff --git a/src/themes/DiamondDSTheme.ts b/src/themes/DiamondDSTheme.ts
index 7264506..76f777e 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";
@@ -650,6 +651,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
@@ -715,16 +717,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,
@@ -862,31 +904,92 @@ 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-subtle)",
           },
-        }),
+        },
       },
     },