diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
index 752fcb6b406..ac5a52b3e58 100644
--- a/packages/web-components/.storybook/main.ts
+++ b/packages/web-components/.storybook/main.ts
@@ -30,7 +30,8 @@ const stories = glob.sync(
     '../src/**/carousel.stories.ts',
     '../src/**/card-in-card.mdx',
     '../src/**/card-in-card.stories.ts',
-
+    '../src/**/horizontal-rule.mdx',
+    '../src/**/horizontal-rule.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.mdx
similarity index 86%
rename from packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
rename to packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.mdx
index 1f5d764a5da..fa5afb4e206 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.mdx
@@ -1,12 +1,9 @@
-import {
-  Preview,
-  Props,
-  Description,
-  Story,
-} from '@storybook/addon-docs/blocks';
-import '../horizontal-rule';
-import contributing from '../../../../../../docs/contributing-license.md?raw';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import contributing from '../../../../../../docs/contributing-license.md?raw';
+import * as HorizontalRuleStories from './horizontal-rule.stories';
+
+<Meta of={HorizontalRuleStories} />
 
 # Horizontal Rule
 
@@ -38,7 +35,7 @@ import '@carbon/ibmdotcom-web-components/es/components/horizontal-rule/index.js'
 
 ## Props
 
-<Props of="c4d-hr" />
+<ArgTypes of="c4d-hr" />
 
 ## Stable selectors
 
@@ -50,4 +47,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | ----------------------- | ----------------------- | ----------- |
 | `<c4d-hr>`              | `data-autoid="c4d--hr"` | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
index 26ed2a88a0f..6e26decc889 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
@@ -1,30 +1,16 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { select } from '@storybook/addon-knobs';
 import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import '../horizontal-rule';
 import readme from './README.stories.mdx';
 
-export const Default = (args) => {
-  const { type, size, contrast, weight } = args?.HorizontalRule ?? {};
-  return html`
-    <c4d-hr
-      type="${ifDefined(type)}"
-      size="${ifDefined(size)}"
-      contrast="${ifDefined(contrast)}"
-      weight="${ifDefined(weight)}">
-    </c4d-hr>
-  `;
-};
-
 const types = {
   solid: undefined,
   dashed: 'dashed',
@@ -47,44 +33,53 @@ const weights = {
   thick: 'thick',
 };
 
-export default {
-  title: 'Components/Horizontal rule',
-  decorators: [
-    (story) => html`
-      <div class="cds--grid">
-        <div class="cds--row">
-          <div class="cds--col-lg-12">
-            <h2>Horizontal Rule</h2>
-            ${story()}
-          </div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      HorizontalRule: () => ({
-        type: select('Type (type):', types, types.solid),
-        size: select('Size (size):', sizes, sizes.fluid),
-        contrast: select(
-          'Contrast (contrast):',
-          contrasts,
-          contrasts['strong']
-        ),
-        weight: select('Weight (weight):', weights, weights.thin),
-      }),
-    },
-    propsSet: {
-      default: {
-        HorizontalRule: {
-          type: types.solid,
-          size: sizes.fluid,
-          contrast: contrasts['strong'],
-          weight: weights.thin,
-        },
-      },
-    },
+const controls = {
+  type: {
+    control: 'select',
+    description: 'Type (type)',
+    options: types,
+  },
+  size: {
+    control: 'select',
+    description: 'Size (size)',
+    options: sizes,
   },
+  contrast: {
+    control: 'select',
+    description: 'Contrast (contrast)',
+    options: contrasts,
+  },
+  weight: {
+    control: 'select',
+    description: 'Weight (weight)',
+    options: weights,
+  },
+};
+
+const defaultArgs = {
+  type: types.solid,
+  size: sizes.fluid,
+  contrast: contrasts.strong,
+  weight: weights.thin,
 };
+
+export const Default = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({ type, size, contrast, weight }) => {
+    return html`
+      <c4d-hr
+        type="${type}"
+        size="${size}"
+        contrast="${contrast}"
+        weight="${weight}">
+      </c4d-hr>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Horizontal rule',
+};
+
+export default meta;