diff --git a/packages/synapse-react-client/.storybook/manager.ts b/packages/synapse-react-client/.storybook/manager.ts
index 2e8bd9a50d..aeeda93d66 100644
--- a/packages/synapse-react-client/.storybook/manager.ts
+++ b/packages/synapse-react-client/.storybook/manager.ts
@@ -9,6 +9,12 @@ addons.setConfig({
     brandImage:
       'https://s3.amazonaws.com/static.synapse.org/images/synapse-logo-blue.svg',
   }),
-  colorPrimary: palette.primary[500],
-  colorSecondary: palette.secondary[500],
+  colorPrimary:
+    palette.primary && 'main' in palette.primary
+      ? palette.primary.main
+      : undefined,
+  colorSecondary:
+    palette.secondary && 'main' in palette.secondary
+      ? palette.secondary.main
+      : undefined,
 })
diff --git a/packages/synapse-react-client/.storybook/preview.tsx b/packages/synapse-react-client/.storybook/preview.tsx
index 7e167be318..2ca8d550f1 100644
--- a/packages/synapse-react-client/.storybook/preview.tsx
+++ b/packages/synapse-react-client/.storybook/preview.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Preview, ReactRenderer } from '@storybook/react'
 import '../demo/style/DemoStyle.scss'
 import whyDidYouRender from '@welldone-software/why-did-you-render'
 import { Buffer } from 'buffer'
@@ -31,6 +32,7 @@ faker.seed(12345)
 
 globalThis.Buffer = Buffer
 globalThis.process = {
+  // @ts-expect-error
   browser: true,
   env: {
     NODE_ENV: 'development',
@@ -47,60 +49,17 @@ if (process.env.NODE_ENV === 'development') {
   })
 }
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    expanded: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  msw: {
-    handlers: [
-      // Only return mocked data when making requests to our mock stack
-      ...getHandlers(MOCK_REPO_ORIGIN),
-    ],
-  },
-}
-
-export const globalTypes = {
-  showReactQueryDevtools: {
-    name: 'React Query Devtools',
-    defaultValue: false,
-    toolbar: {
-      icon: 'wrench',
-      showName: true,
-      items: [
-        { value: false, title: 'Hide React Query Devtools' },
-        { value: true, title: 'Show React Query Devtools' },
-      ],
-    },
-  },
-  stack: {
-    name: 'Stack',
-    title: 'Stack Changer',
-    description:
-      'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
-    defaultValue: null,
-    toolbar: {
-      icon: 'database',
-      dynamicTitle: true,
-      showName: true,
-      items: [
-        { value: null, title: 'default (usually production)' },
-        { value: 'production', title: 'Production' },
-        { value: 'staging', title: 'Staging' },
-        { value: 'development', title: 'Development' },
-        { value: 'mock', title: 'Mocked Data' },
-      ],
-    },
-  },
-}
-
 // Initialize MSW
 initialize({
-  onUnhandledRequest: 'bypass',
+  onUnhandledRequest: (req, print) => {
+    // only show warning if we try to hit the mock-repo.sagebase.org endpoint. Otherwise, allow the request to pass
+    // check if the req.url.pathname contains excludedRoutes
+    if (req.url.pathname.startsWith(MOCK_REPO_ORIGIN)) {
+      print.warning()
+    }
+
+    return
+  },
   serviceWorker: {
     url: `${
       location.hostname.endsWith('.github.io') ? '/synapse-web-monorepo' : ''
@@ -112,67 +71,131 @@ const fontLoader = async () => ({
   fonts: await Promise.all([document.fonts.load('700 1em Lato')]),
 })
 
-export const loaders = [mswLoader]
+const loaders: Preview['loaders'] = [mswLoader]
 
 if (isChromatic() && document.fonts) {
   loaders.push(fontLoader)
 }
 
-export const decorators = [
-  (Story, context) => {
-    return (
-      <StorybookComponentWrapper storybookContext={context}>
-        <Story />
-      </StorybookComponentWrapper>
-    )
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    msw: {
+      handlers: [
+        // Only return mocked data when making requests to our mock stack
+        ...getHandlers(MOCK_REPO_ORIGIN),
+      ],
+    },
   },
-  // Adds global styles and theme switching support.
-  withThemeFromJSXProvider({
-    Provider: ThemeProvider,
-    themes: {
-      ['Synapse']: createTheme(defaultMuiThemeOptions),
-      ['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
-        palette: sageBionetworksPalette,
-      }),
-      ['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
-      ['ARK Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: arkPortalPalette,
-      }),
-      ['NF Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: nfPortalPalette,
-      }),
-      ['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: bsmnPortalPalette,
-      }),
-      ['PsychENCODE Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: psychEncodePortalPalette,
-      }),
-      ['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: stopAdPortalPalette,
-      }),
-      ['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: digitalHealthPortalPalette,
-      }),
-      ['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: crcResearcherPortalPalette,
-      }),
-      ['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: cancerComplexityPortalPalette,
-      }),
-
-      ['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: adKnowledgePortalPalette,
-      }),
-      ['EL Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: elPortalPalette,
-      }),
+  globalTypes: {
+    showReactQueryDevtools: {
+      name: 'React Query Devtools',
+      defaultValue: false,
+      toolbar: {
+        icon: 'wrench',
+        showName: true,
+        items: [
+          { value: false, title: 'Hide React Query Devtools' },
+          { value: true, title: 'Show React Query Devtools' },
+        ],
+      },
     },
-    defaultTheme: 'Synapse',
-  }),
-]
-
-export default {
-  parameters,
-  decorators,
+    stack: {
+      name: 'Stack',
+      title: 'Stack Changer',
+      description:
+        'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
+      defaultValue: null,
+      toolbar: {
+        icon: 'database',
+        dynamicTitle: true,
+        showName: true,
+        items: [
+          { value: null, title: 'default (usually production)' },
+          { value: 'production', title: 'Production' },
+          { value: 'staging', title: 'Staging' },
+          { value: 'development', title: 'Development' },
+          { value: 'mock', title: 'Mocked Data' },
+        ],
+      },
+    },
+    authenticatedForMockStack: {
+      name: 'Authenticated for Mocks?',
+      title: 'Authenticated? (Mock Stack Only)',
+      description:
+        'Whether to simulate being logged in when interacting with the mock stack',
+      defaultValue: true,
+      toolbar: {
+        icon: 'key',
+        dynamicTitle: true,
+        showName: true,
+        items: [
+          { value: true, title: 'Authenticated' },
+          { value: false, title: 'Unauthenticated' },
+        ],
+      },
+    },
+  },
   loaders,
+  decorators: [
+    (Story, context) => {
+      return (
+        <StorybookComponentWrapper storybookContext={context}>
+          <Story />
+        </StorybookComponentWrapper>
+      )
+    },
+    // Adds global styles and theme switching support.
+    withThemeFromJSXProvider<ReactRenderer>({
+      Provider: ThemeProvider,
+      themes: {
+        ['Synapse']: createTheme(defaultMuiThemeOptions),
+        ['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
+          palette: sageBionetworksPalette,
+        }),
+        ['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
+        ['ARK Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: arkPortalPalette,
+        }),
+        ['NF Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: nfPortalPalette,
+        }),
+        ['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: bsmnPortalPalette,
+        }),
+        ['PsychENCODE Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: psychEncodePortalPalette,
+        }),
+        ['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: stopAdPortalPalette,
+        }),
+        ['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: digitalHealthPortalPalette,
+        }),
+        ['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: crcResearcherPortalPalette,
+        }),
+        ['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: cancerComplexityPortalPalette,
+        }),
+
+        ['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: adKnowledgePortalPalette,
+        }),
+        ['EL Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: elPortalPalette,
+        }),
+      },
+      defaultTheme: 'Synapse',
+    }),
+  ],
 }
+
+export default preview
diff --git a/packages/synapse-react-client/tsconfig.json b/packages/synapse-react-client/tsconfig.json
index 441a91b75d..69a7d7d105 100644
--- a/packages/synapse-react-client/tsconfig.json
+++ b/packages/synapse-react-client/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../shared/tsconfig.base.json",
   "compilerOptions": {
-    "rootDir": "./src",
+    "rootDir": ".",
     "outDir": "./dist/types",
     "module": "esnext",
     "target": "esnext",
@@ -11,5 +11,5 @@
     "isolatedModules": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", ".storybook/**/*"]
 }