diff --git a/src/components/SelectableFab.tsx b/src/components/SelectableFab.tsx
new file mode 100644
index 0000000..00ac908
--- /dev/null
+++ b/src/components/SelectableFab.tsx
@@ -0,0 +1,47 @@
+import { Fab, styled, type FabProps } from "@mui/material"
+
+const StyledSelectableFab = styled(Fab, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<CodeFabProps>(({ theme }) => ({
+  borderRadius: "20px",
+
+  "&:hover": {
+    background: theme.palette.backgroundPaperElevation?.[7],
+  },
+
+  variants: [
+    {
+      props: ({ selected }) => !selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[0],
+        color: theme.palette.action.disabled,
+        "> img": {
+          opacity: 0.4,
+        },
+      },
+    },
+    {
+      props: ({ selected }) => selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[11],
+        border: `1px solid ${theme.palette.divider}`,
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  ],
+}))
+
+type CodeFabProps = {
+  selected?: boolean
+} & Omit<FabProps, "variant" | "color">
+
+export function SelectableFab({ selected, ...props }: CodeFabProps) {
+  return (
+    <StyledSelectableFab
+      selected={selected}
+      {...props}
+      color={"secondary"}
+      variant="circular"
+    />
+  )
+}
diff --git a/src/components/VelocitySlider.tsx b/src/components/VelocitySlider.tsx
index ba4bc9f..b7507ff 100644
--- a/src/components/VelocitySlider.tsx
+++ b/src/components/VelocitySlider.tsx
@@ -40,6 +40,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
       </Typography>
       <Slider
         value={props.velocity}
+        color="secondary"
         onChange={onSliderChange}
         min={props.min}
         max={props.max}
diff --git a/src/components/jogging/JoggingActivationRequired.tsx b/src/components/jogging/JoggingActivationRequired.tsx
index d5ad4d5..627ffef 100644
--- a/src/components/jogging/JoggingActivationRequired.tsx
+++ b/src/components/jogging/JoggingActivationRequired.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material"
+import { Button, Stack, useTheme } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import type React from "react"
 import { useTranslation } from "react-i18next"
@@ -9,6 +9,7 @@ import type { JoggingStore } from "./JoggingStore"
 export const JoggingActivationRequired = observer(
   ({ store, children }: { store: JoggingStore; children: React.ReactNode }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function renderOverlay() {
       if (store.activationState === "inactive" && !store.activationError) {
@@ -16,7 +17,7 @@ export const JoggingActivationRequired = observer(
           <TransparentOverlay
             sx={{
               borderRadius: "6px",
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <Button
@@ -33,7 +34,7 @@ export const JoggingActivationRequired = observer(
         return (
           <TransparentOverlay
             sx={{
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <LoadingCover
diff --git a/src/components/jogging/JoggingCartesianAxisControl.tsx b/src/components/jogging/JoggingCartesianAxisControl.tsx
index da3e862..2b0c439 100644
--- a/src/components/jogging/JoggingCartesianAxisControl.tsx
+++ b/src/components/jogging/JoggingCartesianAxisControl.tsx
@@ -1,12 +1,14 @@
-import { Button, Typography } from "@mui/material"
+import { Add, Remove } from "@mui/icons-material"
+import { IconButton, Typography } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import { useRef, type ReactNode } from "react"
-import { useAnimationFrame } from "../utils/hooks"
 import { externalizeComponent } from "../../externalizeComponent"
+import type { AxisControlComponentColors } from "../../themes/themeTypes"
+import { useAnimationFrame } from "../utils/hooks"
 
 type JoggingCartesianAxisControlProps = {
-  color?: string
+  colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
   startJogging: (direction: "-" | "+") => void
@@ -17,7 +19,7 @@ type JoggingCartesianAxisControlProps = {
 export const JoggingCartesianAxisControl = externalizeComponent(
   observer(
     ({
-      color,
+      colors,
       label,
       getDisplayedValue,
       startJogging,
@@ -35,8 +37,6 @@ export const JoggingCartesianAxisControl = externalizeComponent(
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-      color = color || "#F14D42"
-
       function onPointerDownMinus(ev: React.PointerEvent) {
         // Stop right click from triggering jog
         if (ev.button === 0) startJogging("-")
@@ -46,35 +46,46 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         if (ev.button === 0) startJogging("+")
       }
 
+      if (!colors) {
+        colors = {
+          color: "#fff",
+          backgroundColor: "#000",
+          borderColor: "#000",
+          buttonBackgroundColor: "#000",
+        }
+      }
+
       return (
-        <Stack height="72px" direction="row" {...rest}>
-          <Button
+        <Stack height="72px" direction="row" justifyContent="center" {...rest}>
+          <IconButton
             onPointerDown={onPointerDownMinus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "16px 0px 0px 16px",
-
+              borderLeft: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"-"}
-          </Button>
+            <Remove />
+          </IconButton>
 
           <Stack
             spacing="6px"
             sx={{
-              width: "184px",
-              backgroundColor: color,
+              width: "150px",
+              backgroundColor: colors.backgroundColor,
               alignItems: "center",
               justifyContent: "center",
               opacity: "0.9",
@@ -94,7 +105,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               height="22px"
               sx={{
                 fontSize: "15px",
-                color: "white",
+                color: colors.color,
               }}
               ref={valueContainerRef}
             >
@@ -102,27 +113,29 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             </Typography>
           </Stack>
 
-          <Button
+          <IconButton
             onPointerDown={onPointerDownPlus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "0px 16px 16px 0px",
-
+              borderRight: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"+"}
-          </Button>
+            <Add />
+          </IconButton>
         </Stack>
       )
     },
diff --git a/src/components/jogging/JoggingCartesianTab.tsx b/src/components/jogging/JoggingCartesianTab.tsx
index 1f7ff41..175c499 100644
--- a/src/components/jogging/JoggingCartesianTab.tsx
+++ b/src/components/jogging/JoggingCartesianTab.tsx
@@ -3,10 +3,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useTheme,
 } from "@mui/material"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
-import type { ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
@@ -28,8 +28,15 @@ type JoggingCartesianOpts = {
 }
 
 export const JoggingCartesianTab = observer(
-  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+  }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function onMotionTypeChange(
       _event: React.MouseEvent<HTMLElement>,
@@ -119,17 +126,17 @@ export const JoggingCartesianTab = observer(
     const axisList = [
       {
         id: "x",
-        color: "#F14D42",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.X,
         icon: <XAxisIcon />,
       },
       {
         id: "y",
-        color: "#42A705",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Y,
         icon: <YAxisIcon />,
       },
       {
         id: "z",
-        color: "#0075FF",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Z,
         icon: <ZAxisIcon />,
       },
     ] as const
@@ -145,7 +152,7 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} justifyContent="space-between">
+      <Stack flexGrow={1} gap={4}>
         <Stack>
           {/* Show Wandelscript string for the current coords */}
           <JoggingCartesianValues store={store} />
@@ -169,6 +176,7 @@ export const JoggingCartesianTab = observer(
             onChange={onMotionTypeChange}
             exclusive
             aria-label={t("Jogging.Cartesian.MotionType.lb")}
+            sx={{ justifyContent: "center" }}
           >
             <ToggleButton value="translate">
               {t("Jogging.Cartesian.Translation.bt")}
@@ -194,7 +202,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>
@@ -231,7 +239,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>
diff --git a/src/components/jogging/JoggingOptions.tsx b/src/components/jogging/JoggingOptions.tsx
index 5ac7d25..2a63b8f 100644
--- a/src/components/jogging/JoggingOptions.tsx
+++ b/src/components/jogging/JoggingOptions.tsx
@@ -44,6 +44,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-coord-select"
             value={store.selectedCoordSystemId}
+            size="small"
+            variant="filled"
             displayEmpty={true}
             onChange={(event) => {
               store.setSelectedCoordSystemId(event.target.value as string)
@@ -64,6 +66,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-tcp-select"
             value={store.selectedTcpId}
+            size="small"
+            variant="filled"
             onChange={(event) => {
               store.setSelectedTcpId(event.target.value as string)
             }}
@@ -92,7 +96,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         }}
       >
         {/* Orientation */}
-        <Stack width="35%">
+        <Stack width="50%">
           <InputLabel id="orientation-select">
             {t("Jogging.Cartesian.Orientation.lb")}
           </InputLabel>
@@ -103,20 +107,22 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
             aria-labelledby="orientation-select"
             disabled={store.isLocked}
           >
-            <ToggleButton value="coordsys">
+            <ToggleButton value="coordsys" sx={{ flexGrow: 1 }}>
               <OrientationCoordSysIcon />
             </ToggleButton>
-            <ToggleButton value="tool">
+            <ToggleButton value="tool" sx={{ flexGrow: 1 }}>
               <OrientationToolIcon />
             </ToggleButton>
           </ToggleButtonGroup>
         </Stack>
 
         {/* Increment selection */}
-        <Stack width="65%">
+        <Stack width="50%">
           <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
           <Select
             labelId="jogging-increment-select"
+            size="small"
+            variant="filled"
             value={store.activeDiscreteIncrement?.id || "continuous"}
             onChange={(event) => {
               store.setSelectedIncrementId(
diff --git a/src/components/jogging/JoggingPanel.tsx b/src/components/jogging/JoggingPanel.tsx
index e18b87b..760ed2a 100644
--- a/src/components/jogging/JoggingPanel.tsx
+++ b/src/components/jogging/JoggingPanel.tsx
@@ -1,4 +1,4 @@
-import { Paper, Stack, Tab, Tabs } from "@mui/material"
+import { Paper, Stack, Tab, Tabs, useTheme } from "@mui/material"
 import { NovaClient } from "@wandelbots/wandelbots-js"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
@@ -29,6 +29,8 @@ export type JoggingPanelProps = {
  */
 export const JoggingPanel = externalizeComponent(
   observer((props: JoggingPanelProps) => {
+    const theme = useTheme()
+
     const nova = isString(props.nova)
       ? new NovaClient({ instanceUrl: props.nova })
       : props.nova
@@ -86,22 +88,13 @@ export const JoggingPanel = externalizeComponent(
           height: "100%",
         }}
       >
-        <Paper
-          sx={{
-            height: "100%",
-          }}
-        >
-          {state.joggingStore ? (
-            <JoggingPanelInner store={state.joggingStore}>
-              {props.children}
-            </JoggingPanelInner>
-          ) : (
-            <LoadingCover
-              message="Loading jogging"
-              error={state.loadingError}
-            />
-          )}
-        </Paper>
+        {state.joggingStore ? (
+          <JoggingPanelInner store={state.joggingStore}>
+            {props.children}
+          </JoggingPanelInner>
+        ) : (
+          <LoadingCover message="Loading jogging" error={state.loadingError} />
+        )}
       </Stack>
     )
   }),
@@ -166,7 +159,11 @@ const JoggingPanelInner = observer(
     return (
       <Stack flexGrow={1} height="100%">
         {/* Tab selection */}
-        <Tabs value={store.tabIndex} onChange={store.onTabChange}>
+        <Tabs
+          value={store.tabIndex}
+          onChange={store.onTabChange}
+          variant="fullWidth"
+        >
           {store.tabs.map((tab) => (
             <Tab
               key={tab.id}
diff --git a/src/index.ts b/src/index.ts
index e214fe0..5e68fcb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +1,17 @@
-export * from "./components/wandelscript-editor/WandelscriptEditor"
-export * from "./components/robots/SupportedRobot"
-export * from "./components/robots/Robot"
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
-export type { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/JoggingPanel"
-export * from "./components/VelocitySlider"
+export type { JoggingStore } from "./components/jogging/JoggingStore"
+export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
-export * from "./components/utils/hooks"
 export * from "./components/robots/AxisConfig"
-export * from "./components/LoadingCover"
+export * from "./components/robots/Robot"
+export * from "./components/robots/SupportedRobot"
+export * from "./components/SelectableFab"
+export * from "./components/utils/hooks"
+export * from "./components/VelocitySlider"
+export * from "./components/wandelscript-editor/WandelscriptEditor"
+export * from "./themes/themeTypes"
 export { createNovaMuiTheme } from "./themes/theming"
diff --git a/src/themes/createDarkTheme.ts b/src/themes/createDarkTheme.ts
new file mode 100644
index 0000000..2c7f43d
--- /dev/null
+++ b/src/themes/createDarkTheme.ts
@@ -0,0 +1,223 @@
+import { createTheme, type Theme } from "@mui/material"
+
+export function createDarkTheme(): Theme {
+  const baseTheme = createTheme({
+    palette: {
+      mode: "dark",
+      text: {
+        primary: "rgba(255, 255, 255, 1)",
+        secondary: "rgba(255, 255, 255, 0.7)",
+        disabled: "rgba(255, 255, 255, 0.38)",
+      },
+      primary: {
+        main: "rgba(142, 86, 252, 1)",
+        dark: "rgba(136, 58, 255, 1)",
+        light: "rgba(157, 131, 246, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      secondary: {
+        main: "rgba(255, 255, 255, 1)",
+
+        dark: "rgba(255, 255, 255, 0.06)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      tertiary: {
+        main: "rgba(100, 255, 218, 1)",
+        dark: "rgba(38, 166, 154, 1)",
+        light: "rgba(167, 255, 235, 1)",
+        contrastText: "rgba(0, 0, 0, 1)",
+      },
+      error: {
+        main: "rgba(239, 83, 80, 1)",
+        dark: "rgba(229, 57, 53, 1)",
+        light: "rgba(239, 154, 154, 1)",
+        contrastText: "rgba(255, 255, 255, 1)",
+      },
+      warning: {
+        main: "rgba(255, 255, 255, 1)",
+        dark: "rgba(255, 145, 0, 1)",
+        light: "rgba(255, 209, 128, 1)",
+        contrastText: "rgba(0, 0, 0, 0.87)",
+      },
+      success: {
+        main: "rgba(38, 166, 154, 1)",
+        dark: "rgba(0, 121, 107, 1)",
+        light: "rgba(128, 203, 196, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      background: {
+        default: "rgba(2, 6, 23, 1)",
+        paper: "rgba(17, 19, 31, 1)",
+      },
+      action: {
+        active: "rgba(255, 255, 255, 0.56)",
+        hover: "rgba(255, 255, 255, 0.08)",
+        selected: "rgba(255, 255, 255, 0.16)",
+        disabledBackground: "rgba(255, 255, 255, 0.12)",
+        focus: "rgba(255, 255, 255, 0.12)",
+        disabled: "rgba(255, 255, 255, 0.38)",
+      },
+      common: {
+        white: "rgba(255, 255, 255, 1)",
+        black: "rgba(0, 0, 0, 1)",
+      },
+      divider: "rgba(255, 255, 255, 0.12)",
+      backgroundPaperElevation: {
+        0: "rgba(17,19,31,1.0)",
+        1: "rgba(20,22,35,1.0)",
+        2: "rgba(23,25,39,1.0)",
+        3: "rgba(26,28,43,1.0)",
+        4: "rgba(29,31,47,1.0)",
+        5: "rgba(32,34,51,1.0)",
+        6: "rgba(35,37,55,1.0)",
+        7: "rgba(38,40,59,1.0)",
+        8: "rgba(41,43,63,1.0)",
+        9: "rgba(44,46,67,1.0)",
+        10: "rgba(47,49,71,1.0)",
+        11: "rgba(50,52,75,1.0)",
+        12: "rgba(53,55,79,1.0)",
+        13: "rgba(56,58,83,1.0)",
+        14: "rgba(59,61,87,1.0)",
+        15: "rgba(62,64,91,1.0)",
+        16: "rgba(57,63,87,1.0)",
+      },
+    },
+    paletteExt: {
+      primary: {
+        hover: "rgba(142, 86, 252, 0.08)",
+        selected: "rgba(142, 86, 252, 0.16)",
+        focus: "rgba(142, 86, 252, 0.12)",
+        focusVisible: "rgba(142, 86, 252, 0.3)",
+        outlineBorder: "rgba(142, 86, 252, 0.5)",
+      },
+      secondary: {
+        tonal: "rgba(255,255,255,0.1)",
+      },
+    },
+  })
+
+  return {
+    ...baseTheme,
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: "10px",
+          },
+        },
+        variants: [
+          {
+            props: { color: "secondary", variant: "contained" },
+            style: {
+              border: `1px solid ${baseTheme.palette.divider}`,
+              background: baseTheme.paletteExt?.secondary?.tonal?.toString(),
+            },
+          },
+        ],
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            border: "1px solid",
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            color: baseTheme.palette.text.secondary,
+            "&.Mui-selected": {
+              color: baseTheme.palette.text.primary,
+            },
+          },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            background: baseTheme.palette.backgroundPaperElevation?.[1],
+          },
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: {
+            ".MuiToggleButtonGroup-firstButton": {
+              borderRadius: "10px 0 0 10px",
+            },
+            ".MuiToggleButtonGroup-lastButton": {
+              borderRadius: "0 10px 10px 0",
+            },
+          },
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            padding: "6px 16px",
+          },
+        },
+      },
+      MuiSelect: {
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: {
+              borderRadius: "10px",
+              "::before, ::after": {
+                visibility: "collapse",
+              },
+              ".MuiInputBase-input": {
+                padding: "6px 16px",
+                borderRadius: "10px",
+              },
+            },
+          },
+        ],
+      },
+      MuiFab: {
+        styleOverrides: {
+          root: {
+            background: baseTheme.paletteExt?.secondary?.tonal,
+          },
+        },
+        variants: [
+          {
+            props: { color: "primary" },
+            style: {
+              background: baseTheme.palette.primary.main,
+            },
+          },
+        ],
+      },
+    },
+
+    componentsExt: {
+      JoggingCartesian: {
+        Axis: {
+          X: {
+            backgroundColor: "rgba(215, 66, 56, 1)",
+            borderColor: "rgba(215, 66, 56, 1)",
+            buttonBackgroundColor: "rgba(241, 77, 66, 1)",
+            color: "rgba(255, 255, 255, 1)",
+          },
+          Y: {
+            backgroundColor: "rgba(20, 151, 108, 1)",
+            borderColor: "rgba(20, 151, 108, 1)",
+            buttonBackgroundColor: "rgba(28, 188, 135, 1)",
+            color: "rgba(255, 255, 255, 1)",
+          },
+          Z: {
+            backgroundColor: "rgba(1, 87, 155, 1)",
+            borderColor: "rgba(1, 87, 155, 1)",
+            buttonBackgroundColor: "rgba(2, 136, 209, 1)",
+            color: "rgba(255, 255, 255, 1)",
+          },
+        },
+      },
+    },
+  }
+}
diff --git a/src/themes/createLightTheme.ts b/src/themes/createLightTheme.ts
new file mode 100644
index 0000000..d337416
--- /dev/null
+++ b/src/themes/createLightTheme.ts
@@ -0,0 +1,8 @@
+import { createDarkTheme } from "./createDarkTheme"
+
+export function createLightTheme() {
+  // Keep the dark theme until we support a light theme
+  const theme = createDarkTheme()
+  theme.palette.mode = "light"
+  return theme
+}
diff --git a/src/themes/themeTypes.d.ts b/src/themes/themeTypes.d.ts
deleted file mode 100644
index 668a68a..0000000
--- a/src/themes/themeTypes.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { NovaThemeSettings } from "./novaTheme"
-
-declare module "@mui/material/styles" {
-  interface Theme {
-    nova: NovaThemeSettings
-  }
-
-  interface ThemeOptions {
-    nova?: NovaThemeSettings
-  }
-}
diff --git a/src/themes/themeTypes.ts b/src/themes/themeTypes.ts
new file mode 100644
index 0000000..1e90805
--- /dev/null
+++ b/src/themes/themeTypes.ts
@@ -0,0 +1,79 @@
+type NovaColorPaletteExtension = {
+  paletteExt?: {
+    primary?: {
+      hover?: string
+      selected?: string
+      focus?: string
+      focusVisible?: string
+      outlineBorder?: string
+    }
+    secondary?: {
+      tonal?: string
+    }
+  }
+}
+
+export interface AxisControlComponentColors {
+  color?: string
+  borderColor?: string
+  backgroundColor?: string
+  buttonBackgroundColor?: string
+}
+
+interface NovaComponentsExtension {
+  componentsExt?: {
+    JoggingCartesian?: {
+      Axis?: {
+        X?: AxisControlComponentColors
+        Y?: AxisControlComponentColors
+        Z?: AxisControlComponentColors
+      }
+    }
+  }
+}
+
+interface BackgroundPaperElevation {
+  0?: string
+  1?: string
+  2?: string
+  3?: string
+  4?: string
+  5?: string
+  6?: string
+  7?: string
+  8?: string
+  9?: string
+  10?: string
+  11?: string
+  12?: string
+  13?: string
+  14?: string
+  15?: string
+  16?: string
+  17?: string
+  18?: string
+  19?: string
+  20?: string
+  21?: string
+  22?: string
+  23?: string
+  24?: string
+}
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    tertiary: Palette["primary"]
+    backgroundPaperElevation?: BackgroundPaperElevation
+  }
+
+  interface PaletteOptions {
+    tertiary?: PaletteOptions["primary"]
+    backgroundPaperElevation?: BackgroundPaperElevation
+  }
+
+  interface Theme extends NovaComponentsExtension, NovaColorPaletteExtension {}
+
+  interface ThemeOptions
+    extends NovaComponentsExtension,
+      NovaColorPaletteExtension {}
+}
diff --git a/src/themes/theming.ts b/src/themes/theming.ts
index 0beef71..e303b0e 100644
--- a/src/themes/theming.ts
+++ b/src/themes/theming.ts
@@ -1,61 +1,8 @@
 "use client"
 
 import type { Theme, ThemeOptions } from "@mui/material/styles"
-import { createTheme } from "@mui/material/styles"
-
-/**
- * The palette of named colors we pick from for
- * configuring the default nova themes.
- */
-const colors = {
-  white: "#FFFFFF",
-  midnightblue: "#001337",
-  lightbuttonblue: "#47D3FF",
-  midnightgray: "#DDE0E4",
-  midnightgray500: "#828B9B",
-  skyblue500: "#06B8F1",
-  skyblue600: "#0094CE",
-  darkishblue: "#262F42",
-  darkestblue: "#101629",
-  grayishblue: "#505968",
-  darkgrayishblue: "#363c4b",
-  scaryred: "#FF0E65",
-  tealGreen: "#1AC0B2",
-  magenta: "#EA3785",
-}
-
-/**
- * Settings used to construct the Nova default theme.
- * The dark theme is the default and defines the structure of the
- * settings.
- */
-export const novaDarkSettings = {
-  mode: "dark" as "dark" | "light",
-  colors: {
-    primary: colors.skyblue500,
-    textDefault: colors.white,
-    textSubtle: colors.midnightgray,
-    background: {
-      default: colors.darkishblue,
-      panel: colors.darkestblue,
-    },
-  },
-}
-
-export type NovaThemeSettings = typeof novaDarkSettings
-
-export const novaLightSettings = {
-  mode: "light",
-  colors: {
-    primary: colors.skyblue500,
-    textDefault: colors.darkishblue,
-    textSubtle: colors.midnightgray,
-    background: {
-      default: colors.skyblue500,
-      panel: colors.white,
-    },
-  },
-} satisfies NovaThemeSettings
+import { createDarkTheme } from "./createDarkTheme"
+import { createLightTheme } from "./createLightTheme"
 
 /**
  * Create the default Wandelbots Nova Material UI theme, overriding
@@ -71,102 +18,5 @@ export function createNovaMuiTheme(opts: ThemeOptions): Theme {
       window.matchMedia?.("(prefers-color-scheme: light)")?.matches
     isDark = !browserPrefersLight
   }
-
-  const nova = isDark ? novaDarkSettings : novaLightSettings
-
-  const theme = createTheme({
-    palette: {
-      mode: nova.mode,
-      primary: {
-        main: nova.colors.primary,
-      },
-      background: {
-        default: nova.colors.background.default,
-        paper: nova.colors.background.panel,
-      },
-    },
-    typography: {
-      allVariants: {
-        color: nova.colors.textDefault,
-      },
-    },
-    components: {
-      MuiSelect: {
-        styleOverrides: {
-          root: {
-            backgroundColor: isDark ? "#505968" : undefined,
-            borderRadius: "10px",
-            color: "currentColor",
-            "& > div": {
-              padding: "4px 16px",
-            },
-            "& fieldset": {
-              border: isDark ? "none" : undefined,
-            },
-          },
-        },
-      },
-      MuiChip: {
-        styleOverrides: {
-          root: {
-            backgroundColor: isDark ? "#505968" : undefined,
-            borderRadius: "10px",
-            color: "currentColor",
-          },
-        },
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: {
-            "& > button": {
-              borderRadius: "8px",
-              textTransform: "none",
-              paddingTop: "4px",
-              paddingBottom: "4px",
-              width: "100%",
-              borderWidth: 0,
-              backgroundColor: isDark ? "#3d4455" : undefined,
-              color: isDark ? "rgba(255, 255, 255, 0.8)" : undefined,
-
-              "&.Mui-selected": isDark
-                ? {
-                    color: "white",
-                    backgroundColor: "#505968",
-                  }
-                : undefined,
-            },
-          },
-        },
-      },
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            backgroundColor: isDark ? "#101629" : undefined,
-            minHeight: "42px",
-          },
-        },
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            minHeight: "42px",
-            textTransform: "none",
-            "&.Mui-selected": isDark
-              ? {
-                  color: "white",
-                  backgroundColor: "#404554",
-                }
-              : undefined,
-          },
-        },
-      },
-    },
-    nova,
-  })
-
-  if (opts) {
-    return createTheme(theme, opts)
-  } else {
-    return theme
-  }
+  return isDark ? createDarkTheme() : createLightTheme()
 }
diff --git a/stories/JoggingPanel.stories.tsx b/stories/JoggingPanel.stories.tsx
index 6778b7a..9a083e2 100644
--- a/stories/JoggingPanel.stories.tsx
+++ b/stories/JoggingPanel.stories.tsx
@@ -1,10 +1,25 @@
+import { Box, useTheme } from "@mui/material"
 import type { Meta, StoryObj } from "@storybook/react"
-import { JoggingPanel } from "../src/index"
+import { JoggingPanel, type JoggingPanelProps } from "../src/index"
+
+const JoggingPanelWrapper = (props: JoggingPanelProps) => {
+  const theme = useTheme()
+  return (
+    <Box
+      sx={{
+        backgroundColor: theme.palette.backgroundPaperElevation?.[5],
+        maxWidth: "min-content",
+      }}
+    >
+      <JoggingPanel {...props} />
+    </Box>
+  )
+}
 
 const meta: Meta<typeof JoggingPanel> = {
   title: "Jogging/JoggingPanel",
   tags: ["!dev"],
-  component: JoggingPanel,
+  component: JoggingPanelWrapper,
 }
 export default meta
 
diff --git a/stories/defaultTheme.stories.tsx b/stories/defaultTheme.stories.tsx
index fe4cbbd..80f5a84 100644
--- a/stories/defaultTheme.stories.tsx
+++ b/stories/defaultTheme.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react"
 import { Box, Button, Stack, Typography, useTheme } from "@mui/material"
+import type { Meta, StoryObj } from "@storybook/react"
 
-import componentSamples from "./MuiSamples"
 import { externalizeComponent } from "../src/externalizeComponent"
+import componentSamples from "./MuiSamples"
 
 const MUIComponents = externalizeComponent(() => {
   const theme = useTheme()
@@ -13,6 +13,7 @@ const MUIComponents = externalizeComponent(() => {
         "& .MuiStack-root:not(:first-of-type)": {
           marginTop: "2rem",
         },
+        color: `${theme.palette.text.primary}`,
       }}
     >
       {componentSamples.map(({ id, title, component, docs }) => (