diff --git a/packages/web/.storybook/main.js b/packages/web/.storybook/main.js
index 3f0acc27c..e5b11889f 100644
--- a/packages/web/.storybook/main.js
+++ b/packages/web/.storybook/main.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   stories: [
     "../stories/**/*.stories.mdx",
@@ -15,5 +17,14 @@ module.exports = {
   },
   typescript: {
     reactDocgen: false
-  }
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ];
+  
+    // Return the altered config
+    return config;
+  },
 }
diff --git a/packages/web/.storybook/preview.js b/packages/web/.storybook/preview.js
index 1765ff51d..d7478763b 100644
--- a/packages/web/.storybook/preview.js
+++ b/packages/web/.storybook/preview.js
@@ -1,5 +1,7 @@
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import * as NextImage from 'next/image';
+import { getCssText } from '../components/tokens/stitches.config';
+import "../styles/globals.css";
 
 const OriginalNextImage = NextImage.default;
 
@@ -20,3 +22,21 @@ export const parameters = {
     Provider: RouterContext.Provider
   }
 }
+
+export const decorators = [
+  (Story, context) => {
+    return (
+      <>
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{
+            __html: getCssText(),
+          }}
+        />
+        <div className='Gray'>
+          <Story {...context} />
+        </div>
+      </>
+    );
+  }
+]
diff --git a/packages/web/stories/Snackbar.stories.tsx b/packages/web/stories/Snackbar.stories.tsx
index 622f925f7..5a18a1595 100644
--- a/packages/web/stories/Snackbar.stories.tsx
+++ b/packages/web/stories/Snackbar.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { Toaster, ToastPosition } from 'react-hot-toast'
 import { showErrorToast, showSuccessToast } from '../lib/toastHelpers'
+import { Button } from '../components/elements/Button'
 
 export default {
   title: 'Components/Snackbar',
@@ -32,7 +33,9 @@ const Template = ({ showToast, position }: { showToast: () => void; position?: T
         justifyContent: 'center',
       }}
     >
-      <button onClick={showToast}>Show Toast</button>
+      <Button style='ctaGray' onClick={showToast}>
+        Show Toast
+      </Button>
     </div>
   </div>
 )