diff --git a/stories/core/icons.stories.mdx b/stories/core/icons.stories.mdx
index 18b2aba9..d44e22f7 100644
--- a/stories/core/icons.stories.mdx
+++ b/stories/core/icons.stories.mdx
@@ -1,6 +1,6 @@
 import {
   Meta,
-  Preview,
+  Canvas,
   Story,
   ArgsTable,
   IconGallery,
@@ -58,7 +58,7 @@ export const Template = args => ({
   `
 });
 
-<Preview>
+<Canvas>
   <Story
     name="Playground"
     args={{
@@ -69,6 +69,6 @@ export const Template = args => ({
   >
     {Template.bind({})}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Playground" />
diff --git a/stories/plugins/QProgressIndicatior/QProgressIndicatior.stories.mdx b/stories/plugins/QProgressIndicatior/QProgressIndicatior.stories.mdx
index 3ed179c8..a752ed8e 100644
--- a/stories/plugins/QProgressIndicatior/QProgressIndicatior.stories.mdx
+++ b/stories/plugins/QProgressIndicatior/QProgressIndicatior.stories.mdx
@@ -1,13 +1,13 @@
-import { Meta, Preview, Story } from '@storybook/addon-docs';
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import { QProgressIndicatiorStory } from './Template';
 
 <Meta title="Plugins/QProgressIndicatior" />
 
 # QProgressIndicatior
 
-<Preview>
+<Canvas>
   <Story name="Default">{QProgressIndicatiorStory.bind({})}</Story>
-</Preview>
+</Canvas>
 
 ## Plugin options