diff --git a/packages/storybook8/stories/Concepts/Theming/Docs.mdx b/packages/storybook8/stories/Concepts/Theming/Docs.mdx
index 33afc16e21c..a207adb0ff1 100644
--- a/packages/storybook8/stories/Concepts/Theming/Docs.mdx
+++ b/packages/storybook8/stories/Concepts/Theming/Docs.mdx
@@ -1,13 +1,11 @@
-import { Meta, Controls, Primary, Source } from '@storybook/addon-docs';
-import { DarkControlBar } from './DarkControlBar.story';
-import { DefaultTheme } from './DefaultTheme.story';
-import { ThemedButton } from './ThemedButton.story';
+import { Meta, Controls, Primary, Source, Canvas } from '@storybook/addon-docs';
+import * as ThemingStories from './index.stories';
 
 import DarkControlBarText from '!!raw-loader!./snippets/DarkControlBar.snippet.tsx';
 import DefaultThemeSnippetText from '!!raw-loader!./snippets/DefaultTheme.snippet.tsx';
 import ThemedButtonText from '!!raw-loader!./snippets/ThemedButton.snippet.tsx';
 
-<Meta title="Concepts/Theming" />
+<Meta of={ThemingStories} />
 
 # Theming
 
@@ -20,14 +18,14 @@ is a wrapping component that allows you to theme all ACS UI Library components c
 ACS UI Library components are themed with a light theme by default as shown by the `ControlBar` and buttons below.
 
 <Source code={DefaultThemeSnippetText} />
-<DefaultTheme />
+<Canvas of={ThemingStories.DefaultThemeDocsOnly} sourceState={'none'} layout={'padded'} />
 
 To theme this ControlBar, import `FluentThemeProvider` from `@azure/communication-react` and wrap it around the `ControlBar`.
 Then import `darkTheme` from `@azure/communication-react` and assign it to the `fluentTheme` property of `FluentThemeProvider`.
 `darkTheme` is a [Theme](https://aka.ms/fluentui#/controls/web/references/theme) object from Fluent UI.
 
 <Source code={DarkControlBarText} />
-<DarkControlBar />
+<Canvas of={ThemingStories.DarkControlBarDocsOnly} sourceState={'none'} layout={'padded'} />
 
 ## FluentThemeProvider Props
 
@@ -78,7 +76,7 @@ But if you wish to override the mapping, we recommend that you use the `useTheme
 use the component's `styles` prop like in the example below.
 
 <Source code={ThemedButtonText} />
-<ThemedButton />
+<Canvas of={ThemingStories.ThemedButtonDocsOnly} sourceState={'none'} layout={'padded'} />
 
 Should you override the palette mapping, please note that ACS UI Library components abide by the general Fluent UI
 mappings. Foreground colors are used for text, icons, and outlines while background colors for component
diff --git a/packages/storybook8/stories/Concepts/Theming/index.stories.tsx b/packages/storybook8/stories/Concepts/Theming/index.stories.tsx
new file mode 100644
index 00000000000..810659c4751
--- /dev/null
+++ b/packages/storybook8/stories/Concepts/Theming/index.stories.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Meta } from '@storybook/react';
+import { DarkControlBar as DarkControlBarSnippet } from './DarkControlBar.story';
+import { DefaultTheme as DefaultThemeSnippet } from './DefaultTheme.story';
+import { ThemedButton as ThemedButtonSnippet } from './ThemedButton.story';
+
+export const DarkControlBarDocsOnly = {
+  render: DarkControlBarSnippet
+};
+
+export const DefaultThemeDocsOnly = {
+  render: DefaultThemeSnippet
+};
+
+export const ThemedButtonDocsOnly = {
+  render: ThemedButtonSnippet
+};
+
+const meta: Meta = {
+  title: 'Concepts/Theming',
+  component: DefaultThemeSnippet,
+  argTypes: {}
+};
+
+export default meta;
diff --git a/packages/storybook8/stories/Examples/IncomingCallAlerts/IncomingCallModal/index.stories.tsx b/packages/storybook8/stories/Examples/IncomingCallAlerts/IncomingCallModal/index.stories.tsx
index fa3a6e63d4a..3d74c5b53b1 100644
--- a/packages/storybook8/stories/Examples/IncomingCallAlerts/IncomingCallModal/index.stories.tsx
+++ b/packages/storybook8/stories/Examples/IncomingCallAlerts/IncomingCallModal/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react/*';
 import { controlsToAdd, hiddenControl } from '../../../controlsUtils';
-import { IncomingCallModal as IncomingCallModalStory } from './snippets/exampleIncomingCallModal.snippet';
+import { IncomingCallModal as IncomingCallModalStory } from './IncomingCallModal.story';
 
 export const IncomingCallModal = {
   render: IncomingCallModalStory