diff --git a/stories/custom/docs-helpcard.stories.tsx b/stories/custom/docs-helpcard.stories.tsx
new file mode 100644
index 0000000..f850ece
--- /dev/null
+++ b/stories/custom/docs-helpcard.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LifeBuoyIcon, BookIcon } from 'lucide-react'
+import { DocsHelpCard } from 'src'
+
+const helpSectionConfig = {
+    columns: [{
+        title: "Get in touch for support",
+        icon_description: "Support Icon",
+        icon: LifeBuoyIcon,
+        link: "https://www.quantinuum.com/contact/docs",
+        description: "Need help? Fill out our support form here",
+        
+    },
+    {
+        title: "Publications",
+        icon_description: "Publications Icon",
+        icon: BookIcon,
+        link: "https://quantinuum.com/publications",
+        description: "Find our latest research publications here",
+    }],
+};
+
+
+export function DocsHelpCardDemo() {
+    return <DocsHelpCard {...helpSectionConfig} />
+}
+
+const meta: Meta<typeof DocsHelpCard> = {
+    component: DocsHelpCard,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof DocsHelpCard> = {
+    args: {},
+};