diff --git a/packages/react-keytips/.storybook/main.ts b/packages/react-keytips/.storybook/main.ts
index 52bf5e00..8e412acb 100644
--- a/packages/react-keytips/.storybook/main.ts
+++ b/packages/react-keytips/.storybook/main.ts
@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@nx/react/plugins/storybook',
+    '@storybook/addon-themes',
     {
       name: '@storybook/addon-storysource',
       options: {
diff --git a/packages/react-keytips/.storybook/preview.tsx b/packages/react-keytips/.storybook/preview.tsx
index 5f63e651..3a3ae45a 100644
--- a/packages/react-keytips/.storybook/preview.tsx
+++ b/packages/react-keytips/.storybook/preview.tsx
@@ -1,16 +1,28 @@
-import * as React from 'react';
-
 import { Preview } from '@storybook/react';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import {
+  FluentProvider,
+  webLightTheme,
+  webDarkTheme,
+  teamsLightTheme,
+  teamsDarkTheme,
+  teamsHighContrastTheme,
+} from '@fluentui/react-components';
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <FluentProvider theme={webLightTheme}>
-        <Story />
-      </FluentProvider>
-    ),
+    withThemeFromJSXProvider({
+      themes: {
+        webLightTheme: webLightTheme,
+        webDarkTheme: webDarkTheme,
+        teamsLightTheme: teamsLightTheme,
+        teamsDarkTheme: teamsDarkTheme,
+        teamsHighContrastTheme: teamsHighContrastTheme,
+      },
+      defaultTheme: 'webLightTheme',
+      Provider: FluentProvider,
+    }),
   ],
 };