diff --git a/examples/stories/src/pages/home-page.mdx b/examples/stories/src/pages/home-page.mdx
index d3284fd06..ae9586f8f 100644
--- a/examples/stories/src/pages/home-page.mdx
+++ b/examples/stories/src/pages/home-page.mdx
@@ -23,11 +23,11 @@ export const BoxItem = ({ children, title, action, ...rest }) => (
   </Card>  
 );
 
-<Flex sx={{ py: 4, flexDirection: 'column',  minHeight: '350px', alignItems: 'center', justifyContent: 'space-between', bg: 'primary', color: 'white' }}>
+<Flex sx={{ py: 4, flexDirection: 'column',  minHeight: '350px', alignItems: 'center', justifyContent: 'space-between', bg: 'primary', color: 'background' }}>
   <Flex sx={{ flexDirection: 'column', alignItems: 'center',  maxWidth: '600px' }}>
     <Heading as="h1">component-controls</Heading>
     <Heading sx={{ py: 3 }} as="h3">
-      Start documenting your components with <Link sx={{ color: 'white' }} aria-label="create mdx stories" href="/tutorial/mdx-stories">MDX</Link> and <Link sx={{ color: 'white' }} aria-label="create esm stories" href="/tutorial/esmodules-stories">ESM</Link>.
+      Start documenting your components with <Link sx={{ color: 'background' }} aria-label="create mdx stories" href="/tutorial/mdx-stories">MDX</Link> and <Link sx={{ color: 'background' }} aria-label="create esm stories" href="/tutorial/esmodules-stories">ESM</Link>.
     </Heading>  
     <Text sx={{ py: 1, textAlign: 'center' }}>
       From auto-generated documentation for your react components, all the way to a full-featured CMS with blogs, tutorials, tags, authors and full-text search: component-controls compbines the best of breed from all pre-existing tools in the industry into a flexible platform.
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
index b7829d811..188c8932e 100644
--- a/ui/components/src/ThemeContext/theme.ts
+++ b/ui/components/src/ThemeContext/theme.ts
@@ -94,10 +94,11 @@ export const theme: ControlsTheme = {
     palette5: '#1976d2',
     modes: {
       dark: {
-        primary: '#d5c0f1',
+        primary: '#efefef',
         secondary: '#b4e1fa',
         highlight: '#b7ecec',
         muted: '#c9cacf',
+        gray: '#4d5866',
         background: '#38404a',
         sidebar: '#000',
         text: '#d3d4db',