diff --git a/packages/react/src/components/Metrics/Aggregate/AggregateBarChart.tsx b/packages/react/src/components/Metrics/Aggregate/AggregateBarChart.tsx
index f200ed6c..86749828 100644
--- a/packages/react/src/components/Metrics/Aggregate/AggregateBarChart.tsx
+++ b/packages/react/src/components/Metrics/Aggregate/AggregateBarChart.tsx
@@ -61,8 +61,8 @@ export default function AggregateBarChart(
         datasets: [
           {
             data,
-            backgroundColor: 'rgb(111 226 255)',
-            borderColor: 'rgb(77, 158, 178)',
+            borderColor: '#ffb96a',
+            backgroundColor: '#ff9c3f',
             borderSkipped: true,
             barPercentage: 0.9,
             ...dataset,
diff --git a/packages/react/src/components/Metrics/Aggregate/AggregateLineChart.tsx b/packages/react/src/components/Metrics/Aggregate/AggregateLineChart.tsx
index 1a65ab02..3c2d92dd 100644
--- a/packages/react/src/components/Metrics/Aggregate/AggregateLineChart.tsx
+++ b/packages/react/src/components/Metrics/Aggregate/AggregateLineChart.tsx
@@ -55,8 +55,8 @@ export default function AggregateLineChart(
         datasets: [
           {
             data,
-            backgroundColor: 'rgb(111 226 255)',
-            borderColor: 'rgb(77, 158, 178)',
+            borderColor: '#ffb96a',
+            backgroundColor: '#ff9c3f',
             pointRadius: 0,
             borderWidth: 6,
             cubicInterpolationMode: 'monotone',
diff --git a/packages/react/src/components/Metrics/Filter/FilterBarChart.tsx b/packages/react/src/components/Metrics/Filter/FilterBarChart.tsx
index 7e049064..3d798230 100644
--- a/packages/react/src/components/Metrics/Filter/FilterBarChart.tsx
+++ b/packages/react/src/components/Metrics/Filter/FilterBarChart.tsx
@@ -41,8 +41,8 @@ export default function FilterBarChart(
       return {
         label: metricName,
         data: [datum],
-        backgroundColor: 'rgb(111 226 255)',
-        borderColor: 'rgb(77, 158, 178)',
+        borderColor: '#ffb96a',
+        backgroundColor: '#ff9c3f',
         borderSkipped: true,
         barPercentage: 0.9,
         grouped: true,
diff --git a/packages/react/src/components/Metrics/Filter/FilterLineChart.tsx b/packages/react/src/components/Metrics/Filter/FilterLineChart.tsx
index 63695b36..10d3d11e 100644
--- a/packages/react/src/components/Metrics/Filter/FilterLineChart.tsx
+++ b/packages/react/src/components/Metrics/Filter/FilterLineChart.tsx
@@ -46,8 +46,8 @@ export default function FilterLineChart(
         datasets: [
           {
             data,
-            borderColor: 'rgb(111 226 255)',
-            backgroundColor: 'rgb(77, 158, 178)',
+            borderColor: '#ffb96a',
+            backgroundColor: '#ff9c3f',
             pointRadius: 0,
             borderWidth: 6,
             cubicInterpolationMode: 'monotone',
diff --git a/packages/react/src/context/themeJoiner.ts b/packages/react/src/context/themeJoiner.ts
index 322b5410..b7857234 100644
--- a/packages/react/src/context/themeJoiner.ts
+++ b/packages/react/src/context/themeJoiner.ts
@@ -26,7 +26,6 @@ import {
   Shadows,
   ZIndex,
 } from '@mui/material/styles';
-import colors from '@mui/joy/colors';
 import {
   extendTheme as extendJoyTheme,
   Theme as JoyTheme,
@@ -71,81 +70,82 @@ declare module '@mui/material/styles' {
   }
 }
 
+const palette = {
+  primary: { main: '#6fe2ff' },
+  secondary: {
+    main: '#ffb96a',
+  },
+  neutral: {
+    main: '#d8d3ff',
+    dark: '#aea4fe',
+    contrastText: '#fff',
+  },
+  background: {
+    paper: '#383742',
+    default: '#0f0f0e',
+  },
+};
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 export const muiTheme = extendMuiTheme({
+  cssVarPrefix: 'joy',
+  colorSchemes: {
+    light: {
+      palette,
+    },
+    dark: {
+      palette,
+    },
+  },
+});
+
+// remove things that break
+// if the theme is being overridden, these need added to the custom theme
+const joyTheme = extendJoyTheme({
   cssVarPrefix: 'joy',
   colorSchemes: {
     light: {
       palette: {
         primary: {
-          main: colors.blue[500],
-        },
-        grey: colors.grey,
-        error: {
-          main: colors.red[500],
+          '50': '#fff3e4',
+          '100': '#ffe1bc',
+          '200': '#ffcd92',
+          '300': '#ffb96a',
+          '400': '#feaa51',
+          '500': '#ff9c3f',
+          '600': '#f9913d',
+          '700': '#f28239',
+          '800': '#eb7435',
+          '900': '#e05c2e',
         },
-        info: {
-          main: colors.purple[500],
-        },
-        success: {
-          main: colors.green[500],
-        },
-        warning: {
-          main: colors.yellow[200],
-        },
-        common: {
-          white: '#FFF',
-          black: '#09090D',
-        },
-        divider: colors.grey[800],
         text: {
-          primary: colors.grey[800],
-          secondary: colors.grey[600],
+          tertiary: 'rgba(0 0 0 / 0.56)',
         },
       },
     },
     dark: {
       palette: {
         primary: {
-          main: colors.blue[600],
-        },
-        grey: colors.grey,
-        error: {
-          main: colors.red[600],
-        },
-        info: {
-          main: colors.purple[600],
-        },
-        success: {
-          main: colors.green[600],
-        },
-        warning: {
-          main: colors.yellow[300],
+          '50': '#fff3e4',
+          '100': '#ffe1bc',
+          '200': '#ffcd92',
+          '300': '#ffb96a',
+          '400': '#feaa51',
+          '500': '#ff9c3f',
+          '600': '#f9913d',
+          '700': '#f28239',
+          '800': '#eb7435',
+          '900': '#e05c2e',
         },
-        common: {
-          white: '#FFF',
-          black: '#09090D',
-        },
-        divider: colors.grey[200],
         text: {
-          primary: colors.grey[100],
-          secondary: colors.grey[300],
+          tertiary: 'rgba(255 255 255 / 0.5)',
         },
       },
     },
   },
 });
 
-// remove things that break
-// if the theme is being overridden, these need added to the custom theme
-const fixer = extendJoyTheme({
-  colorSchemes: {
-    dark: { palette: { divider: colors.grey[200], Skeleton: {} } },
-    light: { palette: { divider: colors.grey[800], Skeleton: {} } },
-  },
-});
-
-const theme = deepmerge(muiTheme, fixer);
+const theme = deepmerge(joyTheme, muiTheme);
 
 export default theme;