diff --git a/change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json b/change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json
new file mode 100644
index 0000000000000..7d21e67dd3a91
--- /dev/null
+++ b/change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Updated storybook docs",
+  "packageName": "@fluentui/react-theme",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-theme/stories/Theme/motion-size/ThemeBorderRadii.stories.tsx b/packages/react-components/react-theme/stories/Theme/borderRadii/ThemeBorderRadii.stories.tsx
similarity index 100%
rename from packages/react-components/react-theme/stories/Theme/motion-size/ThemeBorderRadii.stories.tsx
rename to packages/react-components/react-theme/stories/Theme/borderRadii/ThemeBorderRadii.stories.tsx
diff --git a/packages/react-components/react-theme/stories/Theme/borderRadii/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/borderRadii/index.stories.mdx
new file mode 100644
index 0000000000000..846fddef55a18
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/borderRadii/index.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { BorderRadii } from './ThemeBorderRadii.stories';
+
+<Meta title="Theme/Border Radii" />
+
+<h1 class="sbdocs-title">Border Radii</h1>
+
+<Canvas withSource="none">
+  <BorderRadii />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/colors/ColorRamp.stories.tsx b/packages/react-components/react-theme/stories/Theme/colors/ColorRamp.stories.tsx
index 75d8446d8d6a7..63eec9ab6dde0 100644
--- a/packages/react-components/react-theme/stories/Theme/colors/ColorRamp.stories.tsx
+++ b/packages/react-components/react-theme/stories/Theme/colors/ColorRamp.stories.tsx
@@ -60,7 +60,7 @@ export const ColorRampItem: React.FunctionComponent<ColorRampItemProps> = props
           justifyContent: 'space-between',
           padding: '1.5vh',
           background: props.value,
-          width: '300px',
+          width: '200px',
           boxSizing: 'border-box',
           alignItems: 'center',
           height: '100%',
diff --git a/packages/react-components/react-theme/stories/Theme/colors/ThemeColors.stories.tsx b/packages/react-components/react-theme/stories/Theme/colors/ThemeColors.stories.tsx
index 39c2edec63041..3b75204108a2b 100644
--- a/packages/react-components/react-theme/stories/Theme/colors/ThemeColors.stories.tsx
+++ b/packages/react-components/react-theme/stories/Theme/colors/ThemeColors.stories.tsx
@@ -12,11 +12,11 @@ import { ColorRampItem } from './ColorRamp.stories';
 
 // FIXME: hardcoded theme
 const theme = {
-  light: webLightTheme,
-  dark: webDarkTheme,
+  webLight: webLightTheme,
+  webDark: webDarkTheme,
   teamsLight: teamsLightTheme,
   teamsDark: teamsDarkTheme,
-  highContrast: teamsHighContrastTheme,
+  teamsHighContrast: teamsHighContrastTheme,
 };
 
 const colorPalette = {
@@ -97,7 +97,7 @@ const ColorButton: React.FunctionComponent<
   />
 );
 
-const neutralTokens = (Object.keys(theme.light) as Array<keyof Theme>).filter(tokenName =>
+const neutralTokens = (Object.keys(theme.webLight) as Array<keyof Theme>).filter(tokenName =>
   tokenName.match(/^color(?!Palette).*/),
 );
 
@@ -109,7 +109,7 @@ export const Colors = () => {
   const tokens: Array<keyof Theme> =
     activeColor === 'neutral'
       ? neutralTokens
-      : (Object.keys(theme.light) as Array<keyof Theme>).filter(tokenName =>
+      : (Object.keys(theme.webLight) as Array<keyof Theme>).filter(tokenName =>
           tokenName.startsWith(`colorPalette${activeColor}`),
         );
 
@@ -123,7 +123,7 @@ export const Colors = () => {
           setColor={setColor}
           setPreviewColor={setPreviewColor}
           style={{
-            background: theme.light.colorNeutralForeground1,
+            background: theme.webLight.colorNeutralForeground1,
           }}
         />
         {(Object.keys(colorPalette) as GlobalSharedColors[]).map(colorName => (
@@ -134,7 +134,7 @@ export const Colors = () => {
             setColor={setColor}
             setPreviewColor={setPreviewColor}
             style={{
-              background: theme.light[`colorPalette${colorName}BorderActive` as keyof Theme],
+              background: theme.webLight[`colorPalette${colorName}BorderActive` as keyof Theme],
             }}
           />
         ))}
@@ -164,7 +164,7 @@ export const Colors = () => {
           Teams Dark
         </h3>
         <h3 key="hrHC" style={{ padding: '1em', margin: 0 }}>
-          High Contrast
+          Teams High Contrast
         </h3>
         {tokens.map(name => [
           <div
@@ -173,11 +173,11 @@ export const Colors = () => {
           >
             {name}
           </div>,
-          <ColorRampItem key={`${name}Light`} value={theme.light[name]} />,
-          <ColorRampItem key={`${name}Dark`} value={theme.dark[name]} />,
+          <ColorRampItem key={`${name}Light`} value={theme.webLight[name]} />,
+          <ColorRampItem key={`${name}Dark`} value={theme.webDark[name]} />,
           <ColorRampItem key={`${name}TeamsLight`} value={theme.teamsLight[name]} />,
           <ColorRampItem key={`${name}TeamsDark`} value={theme.teamsDark[name]} />,
-          <ColorRampItem key={`${name}HC`} value={theme.highContrast[name]} />,
+          <ColorRampItem key={`${name}HC`} value={theme.teamsHighContrast[name]} />,
         ])}
       </div>
     </>
diff --git a/packages/react-components/react-theme/stories/Theme/colors/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/colors/index.stories.mdx
index 6ffd7c5fda24d..d907080c5547d 100644
--- a/packages/react-components/react-theme/stories/Theme/colors/index.stories.mdx
+++ b/packages/react-components/react-theme/stories/Theme/colors/index.stories.mdx
@@ -1,17 +1,10 @@
 import { Meta, Canvas } from '@storybook/addon-docs';
 import { Colors } from './ThemeColors.stories.tsx';
-import { Shadows } from './ThemeShadows.stories';
 
-<Meta title="Theme/Color" />
+<Meta title="Theme/Colors" />
 
 <h1 class="sbdocs-title"> Colors </h1>
 
 <Canvas withSource="none">
   <Colors />
 </Canvas>
-
-## Shadows
-
-<Canvas withSource="none">
-  <Shadows />
-</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/fonts/ThemeFonts.stories.tsx b/packages/react-components/react-theme/stories/Theme/fonts/ThemeFonts.stories.tsx
new file mode 100644
index 0000000000000..b4dacf20496d0
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/fonts/ThemeFonts.stories.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { makeStyles, teamsLightTheme } from '@fluentui/react-components';
+import type { FontFamilyTokens, FontSizeTokens, FontWeightTokens, LineHeightTokens } from '@fluentui/react-components';
+
+const theme = teamsLightTheme;
+
+const useStyles = makeStyles({
+  propGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gridTemplateRows: '1fr',
+    rowGap: '10px',
+    columnGap: '10px',
+    fontFamily: theme.fontFamilyBase,
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const FontFamily = () => {
+  const styles = useStyles();
+
+  const fontFamilies = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontFamily'),
+  ) as (keyof FontFamilyTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontFamilies.map(fontFamily => [
+        <div key={fontFamily}>{fontFamily}</div>,
+        <div key={`${fontFamily}-value`} style={{ fontFamily: `${theme[fontFamily]}` }}>
+          {theme[fontFamily]}Font family {fontFamily}
+        </div>,
+      ])}
+    </div>
+  );
+};
+
+export const FontSize = () => {
+  const styles = useStyles();
+
+  const fontSizes = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontSize'),
+  ) as (keyof FontSizeTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontSizes.map(fontSize => (
+        <>
+          <div key={fontSize}>{fontSize}</div>
+          <div key={`${fontSize}-value`} style={{ fontSize: theme[fontSize], lineHeight: theme[fontSize] }}>
+            {fontSize}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};
+
+export const LineHeight = () => {
+  const styles = useStyles();
+
+  const lineHeightKeys = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('lineHeight'),
+  ) as (keyof LineHeightTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {lineHeightKeys.map(lineHeight => [
+        <div key={lineHeight}>{lineHeight}</div>,
+        <div key={`${lineHeight}-value`} style={{ lineHeight: theme[lineHeight], backgroundColor: '#eee' }}>
+          {lineHeight}
+        </div>,
+      ])}
+    </div>
+  );
+};
+
+export const FontWeight = () => {
+  const styles = useStyles();
+
+  const fontWeights = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontWeight'),
+  ) as (keyof FontWeightTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontWeights.map(fontWeight => [
+        <div key={fontWeight}>{fontWeight}</div>,
+        <div key={`${fontWeight}-value`} style={{ fontWeight: theme[fontWeight] }}>
+          Font weight {fontWeight}
+        </div>,
+      ])}
+    </div>
+  );
+};
diff --git a/packages/react-components/react-theme/stories/Theme/fonts/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/fonts/index.stories.mdx
new file mode 100644
index 0000000000000..b89acf924f541
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/fonts/index.stories.mdx
@@ -0,0 +1,30 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { FontFamily, FontSize, FontWeight, LineHeight } from './ThemeFonts.stories';
+
+<Meta title="Theme/Fonts" />
+
+<h1 class="sbdocs-title">Fonts</h1>
+
+### Font family
+
+<Canvas withSource="none">
+  <FontFamily />
+</Canvas>
+
+### Font size
+
+<Canvas withSource="none">
+  <FontSize />
+</Canvas>
+
+### Font weight
+
+<Canvas withSource="none">
+  <FontWeight />
+</Canvas>
+
+### Line height
+
+<Canvas withSource="none">
+  <LineHeight />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/motion-size/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/motion-size/index.stories.mdx
deleted file mode 100644
index d6d06e460641d..0000000000000
--- a/packages/react-components/react-theme/stories/Theme/motion-size/index.stories.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Meta, Canvas } from '@storybook/addon-docs';
-import { MotionCurves, MotionDuration } from './ThemeMotion.stories';
-import { Spacing } from './ThemeSpacing.stories';
-import { StrokeWidths } from './ThemeStrokeWidths.stories';
-import { BorderRadii } from './ThemeBorderRadii.stories';
-
-<Meta title="Theme/Motion and Size" />
-
-<h1 class="sbdocs-title"> Motion and size </h1>
-
-### Motion curves
-
-<Canvas withSource="none">
-  <MotionCurves />
-</Canvas>
-
-### Motion duration
-
-<Canvas withSource="none">
-  <MotionDuration />
-</Canvas>
-
-### Spacing
-
-<Canvas withSource="none">
-  <Spacing />
-</Canvas>
-
-### Stroke widths
-
-<Canvas withSource="none">
-  <StrokeWidths />
-</Canvas>
-
-### Border radii
-
-<Canvas withSource="none">
-  <BorderRadii />
-</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/motion-size/ThemeMotion.stories.tsx b/packages/react-components/react-theme/stories/Theme/motion/ThemeMotion.stories.tsx
similarity index 100%
rename from packages/react-components/react-theme/stories/Theme/motion-size/ThemeMotion.stories.tsx
rename to packages/react-components/react-theme/stories/Theme/motion/ThemeMotion.stories.tsx
diff --git a/packages/react-components/react-theme/stories/Theme/motion/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/motion/index.stories.mdx
new file mode 100644
index 0000000000000..9e228f6b2536d
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/motion/index.stories.mdx
@@ -0,0 +1,18 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { MotionCurves, MotionDuration } from './ThemeMotion.stories';
+
+<Meta title="Theme/Motion" />
+
+<h1 class="sbdocs-title">Motion</h1>
+
+### Curves
+
+<Canvas withSource="none">
+  <MotionCurves />
+</Canvas>
+
+### Durations
+
+<Canvas withSource="none">
+  <MotionDuration />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/colors/ThemeShadows.stories.tsx b/packages/react-components/react-theme/stories/Theme/shadows/ThemeShadows.stories.tsx
similarity index 100%
rename from packages/react-components/react-theme/stories/Theme/colors/ThemeShadows.stories.tsx
rename to packages/react-components/react-theme/stories/Theme/shadows/ThemeShadows.stories.tsx
diff --git a/packages/react-components/react-theme/stories/Theme/shadows/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/shadows/index.stories.mdx
new file mode 100644
index 0000000000000..754bcc8a8ce4c
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/shadows/index.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Shadows } from './ThemeShadows.stories';
+
+<Meta title="Theme/Shadows" />
+
+<h1 class="sbdocs-title"> Shadow </h1>
+
+<Canvas withSource="none">
+  <Shadows />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/motion-size/ThemeSpacing.stories.tsx b/packages/react-components/react-theme/stories/Theme/spacing/ThemeSpacing.stories.tsx
similarity index 100%
rename from packages/react-components/react-theme/stories/Theme/motion-size/ThemeSpacing.stories.tsx
rename to packages/react-components/react-theme/stories/Theme/spacing/ThemeSpacing.stories.tsx
diff --git a/packages/react-components/react-theme/stories/Theme/spacing/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/spacing/index.stories.mdx
new file mode 100644
index 0000000000000..8facf8b8c4d67
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/spacing/index.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Spacing } from './ThemeSpacing.stories';
+
+<Meta title="Theme/Spacing" />
+
+<h1 class="sbdocs-title">Spacing</h1>
+
+<Canvas withSource="none">
+  <Spacing />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/motion-size/ThemeStrokeWidths.stories.tsx b/packages/react-components/react-theme/stories/Theme/strokeWidths/ThemeStrokeWidths.stories.tsx
similarity index 100%
rename from packages/react-components/react-theme/stories/Theme/motion-size/ThemeStrokeWidths.stories.tsx
rename to packages/react-components/react-theme/stories/Theme/strokeWidths/ThemeStrokeWidths.stories.tsx
diff --git a/packages/react-components/react-theme/stories/Theme/strokeWidths/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/strokeWidths/index.stories.mdx
new file mode 100644
index 0000000000000..5100897337957
--- /dev/null
+++ b/packages/react-components/react-theme/stories/Theme/strokeWidths/index.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { StrokeWidths } from './ThemeStrokeWidths.stories';
+
+<Meta title="Theme/Stroke Widths" />
+
+<h1 class="sbdocs-title">Stroke Widths</h1>
+
+<Canvas withSource="none">
+  <StrokeWidths />
+</Canvas>
diff --git a/packages/react-components/react-theme/stories/Theme/typography/ThemeTypography.stories.tsx b/packages/react-components/react-theme/stories/Theme/typography/ThemeTypography.stories.tsx
index 1039c618a33ea..33a3943cfade9 100644
--- a/packages/react-components/react-theme/stories/Theme/typography/ThemeTypography.stories.tsx
+++ b/packages/react-components/react-theme/stories/Theme/typography/ThemeTypography.stories.tsx
@@ -1,79 +1,9 @@
 import * as React from 'react';
 import { teamsLightTheme, typographyStyles } from '@fluentui/react-components';
-import type {
-  FontFamilyTokens,
-  FontSizeTokens,
-  FontWeightTokens,
-  LineHeightTokens,
-  TypographyStyle,
-} from '@fluentui/react-components';
+import type { TypographyStyle } from '@fluentui/react-components';
 
 const theme = teamsLightTheme;
 
-export const FontFamily = () => (
-  <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' }}>
-    {(Object.keys(theme).filter(tokenName => tokenName.startsWith('fontFamily')) as (keyof FontFamilyTokens)[]).map(
-      fontFamily => [
-        <div key={fontFamily}>{fontFamily}</div>,
-        <div key={`${fontFamily}-value`} style={{ fontFamily: `${theme[fontFamily]}` }}>
-          {theme[fontFamily]}Font family {fontFamily}
-        </div>,
-      ],
-    )}
-  </div>
-);
-
-export const FontSize = () => (
-  <div style={{ fontFamily: theme.fontFamilyBase }}>
-    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' }}>
-      {(Object.keys(theme).filter(tokenName => tokenName.startsWith('fontSize')) as (keyof FontSizeTokens)[]).map(
-        fontSize => [
-          <div key={fontSize}>{fontSize}</div>,
-          <div key={`${fontSize}-value`} style={{ fontSize: theme[fontSize] }}>
-            {fontSize}
-          </div>,
-        ],
-      )}
-    </div>
-  </div>
-);
-
-export const LineHeight = () => (
-  <div style={{ fontFamily: theme.fontFamilyBase }}>
-    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' }}>
-      {(Object.keys(theme).filter(tokenName => tokenName.startsWith('lineHeight')) as (keyof LineHeightTokens)[]).map(
-        lineHeight => [
-          <div key={lineHeight}>{lineHeight}</div>,
-          <div key={`${lineHeight}-value`} style={{ lineHeight: theme[lineHeight], backgroundColor: '#eee' }}>
-            {lineHeight}
-          </div>,
-        ],
-      )}
-    </div>
-  </div>
-);
-
-export const FontWeight = () => (
-  <div
-    style={{
-      fontFamily: theme.fontFamilyBase,
-      display: 'grid',
-      gridTemplateColumns: 'auto 1fr',
-      gap: '10px',
-      alignItems: 'center',
-    }}
-  >
-    {(Object.keys(theme).filter(tokenName => tokenName.startsWith('fontWeight')) as (keyof FontWeightTokens)[]).map(
-      fontWeight => [
-        <div key={fontWeight}>{fontWeight}</div>,
-        <div key={`${fontWeight}-value`} style={{ fontWeight: theme[fontWeight] }}>
-          Font weight {fontWeight}
-        </div>,
-      ],
-    )}
-  </div>
-);
-
 export const TypographyStyles = () => {
   // var(--tokenName) => tokenName
   function formatTypographyStyleValue(typographyStyleValue: TypographyStyle) {
diff --git a/packages/react-components/react-theme/stories/Theme/typography/index.stories.mdx b/packages/react-components/react-theme/stories/Theme/typography/index.stories.mdx
index f7d614196b081..e870bf147abab 100644
--- a/packages/react-components/react-theme/stories/Theme/typography/index.stories.mdx
+++ b/packages/react-components/react-theme/stories/Theme/typography/index.stories.mdx
@@ -1,35 +1,9 @@
 import { Meta, Canvas } from '@storybook/addon-docs';
-import { FontFamily, FontSize, FontWeight, LineHeight, TypographyStyles } from './ThemeTypography.stories';
+import { TypographyStyles } from './ThemeTypography.stories';
 
 <Meta title="Theme/Typography" />
 
-<h1 class="sbdocs-title"> Typography </h1>
-
-### Font family
-
-<Canvas withSource="none">
-  <FontFamily />
-</Canvas>
-
-### Font size
-
-<Canvas withSource="none">
-  <FontSize />
-</Canvas>
-
-### Font weight
-
-<Canvas withSource="none">
-  <FontWeight />
-</Canvas>
-
-### Line height
-
-<Canvas withSource="none">
-  <LineHeight />
-</Canvas>
-
-### Typography styles
+<h1 class="sbdocs-title">Typography</h1>
 
 <Canvas withSource="none">
   <TypographyStyles />