diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index d4b3225e104..ca3b052c429 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -20,6 +20,10 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/combo-box.stories.ts',
+    '../src/**/combo-box.mdx',
+    '../src/**/dropdown.stories.ts',
+    '../src/**/dropdown.mdx',
     '../src/**/data-table-*.stories.ts',
     '../src/**/data-table.mdx',
     '../src/**/ordered-list.stories.ts',
@@ -35,6 +39,8 @@ const stories = glob.sync(
     '../src/**/button.stories.ts',
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
+    '../src/**/layer.stories.ts',
+    '../src/**/layer.mdx',
     '../src/**/file-uploader.mdx',
     '../src/**/modal.stories.ts',
     '../src/**/modal.mdx',
diff --git a/packages/carbon-web-components/.storybook/preview.js b/packages/carbon-web-components/.storybook/preview.js
index f2bca308240..71896f81aa2 100644
--- a/packages/carbon-web-components/.storybook/preview.js
+++ b/packages/carbon-web-components/.storybook/preview.js
@@ -4,6 +4,7 @@ import container from './container';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import { breakpoints } from '@carbon/layout';
 import theme from './theme';
+import './templates/with-layer';
 
 setCustomElementsManifest(customElements);
 
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
similarity index 92%
rename from packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
rename to packages/carbon-web-components/src/components/combo-box/combo-box.mdx
index e6f034ab047..a1f783dcf50 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ComboBoxStories from './combo-box.stories';
+
+<Meta of={ComboBoxStories} /> 
 
 # Combo box
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/combo-box/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['combo-box'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['combo-box'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -94,7 +97,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box open>`) and `false` means not setting the attribute (e.g.
 `<cds-combo-box>` without `open` attribute).
 
-<Props of="cds-combo-box" />
+<ArgsTable of="cds-combo-box" />
 
 ## `<cds-combo-box-item>` attributes and properties
 
@@ -102,4 +105,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-combo-box-item>` without `disabled` attribute).
 
-<Props of="cds-combo-box-item" />
+<ArgsTable of="cds-combo-box-item" />
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
similarity index 58%
rename from packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
rename to packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
index 9560e430d1b..8862273943c 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
@@ -9,12 +9,9 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean, select } from '@storybook/addon-knobs';
 import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box';
 import './combo-box-item';
-import storyDocs from './combo-box-story.mdx';
-import { prefix } from '../../globals/settings';
-import textNullable from '../../../.storybook/knob-text-nullable';
+import storyDocs from './combo-box.mdx';
 
 const items = [
   {
@@ -55,8 +52,79 @@ const sizes = {
   [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
 };
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  direction: DROPDOWN_DIRECTION.BOTTOM,
+  disabled: false,
+  hideLabel: false,
+  helperText: 'This is some helper text',
+  invalid: false,
+  invalidText: 'invalid selection',
+  label: 'This is an example label',
+  readOnly: false,
+  size: null,
+  titleText: 'This is an example title',
+  value: '',
+  warn: false,
+  warnText: 'please notice the warning',  
+}
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be disabled, or not.`,
+  },
+  direction: {
+    control: 'select', options: directionOptions,
+    description: `Dropdown direction`
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: `Specify if the title text should be hidden, or not.`,
+  },
+  helperText: {
+    control: 'text',
+    description: `The helper text for the dropdown.`,
+  },
+  invalid: {
+    control: 'boolean',
+    description: `Specify if the dropdown should display an invalid icon, or not.`,
+  },
+  invalidText: {
+    control: 'text',
+    description: `Message which is displayed if the value is invalid.`,
+  },
+  label: {
+    control: 'text',
+    description: `The default content of the trigger button.`,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be read only, or not.`,
+  },
+  size: {
+    control: 'select', options: sizes,
+    description: `Dropdown size.`
+  },
+  titleText: {
+    control: 'text',
+    description: `Text that will be read by a screen reader when visiting this control.`,
+  },
+  value: {
+    control: 'text',
+    description: `The value of the selected item.`,
+  },
+  warn: {
+    control: 'boolean',
+    description: `Specify whether the control is currently in warning state.`,
+  },
+  warnText: {
+    control: 'text',
+    description: `Text that is displayed when the control is in warning state.`,
+  },
+};
+
+export const Default = {
+  render: () => html`
     <cds-combo-box
       helper-text="Combobox helper text"
       title-text="ComboBox title">
@@ -68,11 +136,11 @@ export const Default = () => {
         `
       )}
     </cds-combo-box>
-  `;
+  `
 };
 
-export const WithLayer = () => {
-  return html`
+export const WithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:300px">
         <cds-combo-box
@@ -91,11 +159,13 @@ export const WithLayer = () => {
         </cds-combo-box>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const Playground = (args) => {
-  const {
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({
     disabled,
     helperText,
     invalid,
@@ -110,8 +180,7 @@ export const Playground = (args) => {
     type,
     invalidText,
     value,
-  } = args?.[`${prefix}-combo-box`] ?? {};
-  return html`
+  }) => html`
     <cds-combo-box
       ?disabled="${disabled}"
       ?hide-label=${hideLabel}
@@ -135,51 +204,22 @@ export const Playground = (args) => {
         `
       )}
     </cds-combo-box>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-combo-box`]: () => ({
-      direction: select(
-        'Direction',
-        directionOptions,
-        DROPDOWN_DIRECTION.BOTTOM
-      ),
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'Optional helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable(
-        'Invalid text (invalid-text)',
-        'invalid selection'
-      ),
-      readOnly: boolean('Read only (read-only)', false),
-      titleText: textNullable('Title text (title-text)', 'ComboBox title'),
-      size: select('Size (size)', sizes, null),
-      value: textNullable('Selected value (value)', ''),
-      label: textNullable('Placeholder (label)', ''),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable(
-        'Warn text (warn-text)',
-        'please notice the warning'
-      ),
-    }),
-  },
-};
+  `
+}
 
-export default {
+const meta = {
   title: 'Components/Combo box',
-  parameters: {
-    ...storyDocs.parameters,
-  },
   decorators: [
     (story, { name }) => {
       const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
 };
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
similarity index 88%
rename from packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
rename to packages/carbon-web-components/src/components/dropdown/dropdown.mdx
index 850bf26eb79..21b362ca8e2 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as DropdownStories from './dropdown.stories';
+
+<Meta of={DropdownStories} /> 
 
 # Dropdown
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/dropdown/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['dropdown'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['dropdown'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -75,7 +78,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown open>`) and `false` means not setting the attribute (e.g.
 `<cds-dropdown>` without `open` attribute).
 
-<Props of="cds-dropdown" />
+<ArgsTable of="cds-dropdown" />
 
 ## `<cds-dropdown-item>` attributes and properties
 
@@ -83,4 +86,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-dropdown-item>` without `disabled` attribute).
 
-<Props of="cds-dropdown-item" />
+<ArgsTable of="cds-dropdown-item" />
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
similarity index 61%
rename from packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
rename to packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
index b02a7dbb52d..049ce8e9d0b 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
@@ -8,14 +8,11 @@
  */
 
 import { html } from 'lit';
-import { boolean, select } from '@storybook/addon-knobs';
-import { prefix } from '../../globals/settings';
-import textNullable from '../../../.storybook/knob-text-nullable';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE } from './dropdown';
 import './dropdown-item';
 import './dropdown-skeleton';
-import storyDocs from './dropdown-story.mdx';
+import storyDocs from './dropdown.mdx';
 
 const directionOptions = {
   [`Top`]: DROPDOWN_DIRECTION.TOP,
@@ -61,8 +58,89 @@ const items = [
   },
 ];
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  direction: DROPDOWN_DIRECTION.BOTTOM,
+  disabled: false,
+  hideLabel: false,
+  helperText: 'This is some helper text',
+  invalid: false,
+  invalidText: 'invalid selection',
+  label: 'This is an example label',
+  open: false,
+  readOnly: false,
+  size: null,
+  titleText: 'This is an example title',
+  type: null,
+  value: '',
+  warn: false,
+  warnText: 'please notice the warning',  
+}
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be disabled, or not.`,
+  },
+  direction: {
+    control: 'select', options: directionOptions,
+    description: `Dropdown direction.`
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: `Specify if the title text should be hidden, or not.`,
+  },
+  helperText: {
+    control: 'text',
+    description: `The helper text for the dropdown.`,
+  },
+  invalid: {
+    control: 'boolean',
+    description: `Specify if the dropdown should display an invalid icon, or not.`,
+  },
+  invalidText: {
+    control: 'text',
+    description: `Message which is displayed if the value is invalid.`,
+  },
+  label: {
+    control: 'text',
+    description: `The default content of the trigger button.`,
+  },
+  open: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be open, or not.`,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be read only, or not.`,
+  },
+  size: {
+    control: 'select', options: sizes,
+    description: `Dropdown size.`
+  },
+  titleText: {
+    control: 'text',
+    description: `Text that will be read by a screen reader when visiting this control.`,
+  },
+  type: {
+    control: 'select', options: types,
+    description: `Dropdown size.`
+  },
+  value: {
+    control: 'text',
+    description: `The value of the selected item.`,
+  },
+  warn: {
+    control: 'boolean',
+    description: `Specify whether the control is currently in warning state.`,
+  },
+  warnText: {
+    control: 'text',
+    description: `Text that is displayed when the control is in warning state.`,
+  },
+};
+
+export const Default = {
+  render: () => html`
     <cds-dropdown
       helper-text="This is some helper text"
       title-text="Dropdown label"
@@ -75,11 +153,11 @@ export const Default = () => {
         `
       )}
     </cds-dropdown>
-  `;
+  `
 };
 
-export const Inline = () => {
-  return html`
+export const Inline = {
+  render: () => html`
     <cds-dropdown
       type="inline"
       title-text="Inline dropdown label"
@@ -92,11 +170,11 @@ export const Inline = () => {
         `
       )}
     </cds-dropdown>
-  `;
+  `
 };
 
-export const InlineWithLayer = () => {
-  return html`
+export const InlineWithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:400px">
         <cds-dropdown
@@ -115,11 +193,11 @@ export const InlineWithLayer = () => {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const WithLayer = () => {
-  return html`
+export const WithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:400px">
         <cds-dropdown
@@ -138,11 +216,13 @@ export const WithLayer = () => {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const Playground = (args) => {
-  const {
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({
     open,
     direction,
     disabled,
@@ -158,9 +238,8 @@ export const Playground = (args) => {
     label,
     warn,
     warnText,
-  } = args?.[`${prefix}-dropdown`] ?? {};
-
-  return html`
+  }) =>
+   html`
     <cds-dropdown
       ?open=${open}
       ?disabled="${disabled}"
@@ -185,64 +264,31 @@ export const Playground = (args) => {
         `
       )}
     </cds-dropdown>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-dropdown`]: () => ({
-      open: boolean('Open (open)', false),
-      direction: select('Direction', directionOptions, null),
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'This is some helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable(
-        'Invalid text (invalid-text)',
-        'invalid selection'
-      ),
-      readOnly: boolean('Read only (read-only)', false),
-      label: textNullable(
-        'The default content of the trigger button (label)',
-        'This is an example label'
-      ),
-      titleText: textNullable(
-        'Title text (title-text)',
-        'This is an example title'
-      ),
-      size: select('Dropdown size (size)', sizes, null),
-      type: select('Dropdown type (type)', types, null),
-      value: textNullable('Selected value (value)', ''),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable(
-        'Warn text (warn-text)',
-        'please notice the warning'
-      ),
-    }),
-  },
+  `
 };
 
-export const skeleton = () =>
-  html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
+export const Skeleton = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
   },
-};
+  render: () => html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `
+}
 
-export default {
+const meta = {
   title: 'Components/Dropdown',
-  parameters: {
-    ...storyDocs.parameters,
-  },
   decorators: [
     (story, { name }) => {
       const width = !name.toLowerCase().includes('layer') ? `width:400px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
 };
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.mdx b/packages/carbon-web-components/src/components/layer/layer.mdx
similarity index 92%
rename from packages/carbon-web-components/src/components/layer/layer-story.mdx
rename to packages/carbon-web-components/src/components/layer/layer.mdx
index 0a70d3e16e6..1c4bd90815a 100644
--- a/packages/carbon-web-components/src/components/layer/layer-story.mdx
+++ b/packages/carbon-web-components/src/components/layer/layer.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as LayerStories from './layer.stories';
+
+<Meta of={LayerStories} /> 
 
 # Layer
 
@@ -28,8 +31,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/layer/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['layer'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['layer'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -108,4 +111,4 @@ like the Layer component to be seen as a section you could write the following:
 
 ## `<cds-layer>` attributes, properties and events
 
-<Props of="cds-layer" />
+<ArgsTable of="cds-layer" />
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts
similarity index 59%
rename from packages/carbon-web-components/src/components/layer/layer-story.ts
rename to packages/carbon-web-components/src/components/layer/layer.stories.ts
index 7bd115c39b1..79ff1580ff1 100644
--- a/packages/carbon-web-components/src/components/layer/layer-story.ts
+++ b/packages/carbon-web-components/src/components/layer/layer.stories.ts
@@ -8,11 +8,10 @@
  */
 
 import { html } from 'lit';
-import { radios } from '@storybook/addon-knobs';
 import { prefix } from '../../globals/settings';
-import storyDocs from './layer-story.mdx';
 import styles from './layer-story.scss?lit';
-import './index.ts';
+import storyDocs from './layer.mdx';
+import './index';
 
 const levels = {
   'First layer': '0',
@@ -20,8 +19,19 @@ const levels = {
   'Third layer': '2',
 };
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  level: '0'
+}
+
+const controls = {
+  level: {
+    control: 'radio', options: levels,
+    description: `Specify the layer level.`
+  },
+}
+
+export const Default = {
+  render: () => html`
     <cds-layer>
       <div class="example-layer-test-component">Test component</div>
       <cds-layer>
@@ -34,33 +44,32 @@ export const Default = () => {
     <style>
       ${styles}
     </style>
-  `;
+  `
 };
 
-Default.storyName = 'Default';
-
-export const CustomLevel = () => {
-  return html`
+export const CustomLevel = {
+  name: 'Custom level',
+  render: () => html`
     <cds-layer level="0">
       <div class="example-layer-test-component">Test component</div>
     </cds-layer>
     <style>
       ${styles}
     </style>
-  `;
+  `
 };
 
-CustomLevel.storyName = 'Custom level';
+export const UseLayer = {
+  name: 'useLayer',
+  render: () => {
+    document.addEventListener(`${prefix}-use-layer`, (e) => {
+      const { layer, level } = (e as any).detail;
+      layer.querySelector(
+        '.example-layer-test-component.use-layer'
+      ).innerText = `The current layer level is: ${level + 1}`;
+    });
 
-export const UseLayer = () => {
-  document.addEventListener(`${prefix}-use-layer`, (e) => {
-    const { layer, level } = (e as any).detail;
-    layer.querySelector(
-      '.example-layer-test-component.use-layer'
-    ).innerText = `The current layer level is: ${level + 1}`;
-  });
-
-  return html`
+    return html`
     <cds-layer>
       <div class="example-layer-test-component use-layer"></div>
       <cds-layer>
@@ -70,37 +79,35 @@ export const UseLayer = () => {
     <style>
       ${styles}
     </style>
-  `;
+  `
+  }
 };
 
-UseLayer.storyName = 'useLayer';
-
-export const Playground = (args) => {
-  const { level } = args?.[`${prefix}-layer-playground`] ?? {};
-  return html`
+export const Playground = {
+  args: defaultArgs,
+  argTypes: controls,
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: ({level}) => html`
     <cds-layer level="${level}">
       <div class="example-layer-test-component">Test component</div>
     </cds-layer>
     <style>
       ${styles}
     </style>
-  `;
-};
-
-Playground.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    [`${prefix}-layer-playground`]: () => ({
-      level: radios('Specify the layer level', levels, '0'),
-    }),
-  },
+  `,
 };
 
-export default {
+const meta = {
   title: 'Components/Layer',
   parameters: {
-    ...storyDocs.parameters,
+    docs: {
+      page: storyDocs,
+    },
   },
 };
+
+export default meta;
diff --git a/packages/carbon-web-components/tests/spec/combo-box_spec.ts b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
index 553f9d5f9ba..cc460ecc2fd 100644
--- a/packages/carbon-web-components/tests/spec/combo-box_spec.ts
+++ b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
@@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager';
 
 import CDSComboBox from '../../src/components/combo-box/combo-box';
 import CDSComboBoxItem from '../../src/components/combo-box/combo-box-item';
-import { Playground } from '../../src/components/combo-box/combo-box-story';
+import { Playground } from '../../src/components/combo-box/combo-box.stories';
 
 const template = (props?) =>
   Playground({
diff --git a/packages/carbon-web-components/tests/spec/dropdown_spec.ts b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
index 96f81421bf8..5279f252e7b 100644
--- a/packages/carbon-web-components/tests/spec/dropdown_spec.ts
+++ b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
@@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager';
 
 import CDSDropdown from '../../src/components/dropdown/dropdown';
 import CDSDropdownItem from '../../src/components/dropdown/dropdown-item';
-import { Playground } from '../../src/components/dropdown/dropdown-story';
+import { Playground } from '../../src/components/dropdown/dropdown.stories';
 
 const template = (props?) =>
   Playground({