diff --git a/.storybook/main.ts b/.storybook/main.ts
index 7fc65a2c201..77c9d745242 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -61,6 +61,11 @@ const config: StorybookConfig = {
     if (imageRule) {
       imageRule["exclude"] = /\.svg$/
     }
+    // Configure yaml files to be loaded with yaml-loader
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      use: "yaml-loader",
+    })
 
     // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
diff --git a/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
new file mode 100644
index 00000000000..236821ee33a
--- /dev/null
+++ b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+import DeveloperDocsLinksComponent from "."
+
+const meta = {
+  title: "Molecules / Navigation / DeveloperDocsLinks",
+  component: DeveloperDocsLinksComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <article className="max-w-3xl scroll-mt-24">
+        <Story />
+      </article>
+    ),
+  ],
+} satisfies Meta<typeof DeveloperDocsLinksComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const FoundationalTopics: Story = {
+  args: {
+    headerId: "foundational-topics",
+  },
+}
+
+export const EthereumStack: Story = {
+  args: {
+    headerId: "ethereum-stack",
+  },
+}
+
+export const Advanced: Story = {
+  args: {
+    headerId: "advanced",
+  },
+}
diff --git a/src/components/DeveloperDocsLinks.tsx b/src/components/DeveloperDocsLinks/index.tsx
similarity index 94%
rename from src/components/DeveloperDocsLinks.tsx
rename to src/components/DeveloperDocsLinks/index.tsx
index d614cac67df..f7b327fef30 100644
--- a/src/components/DeveloperDocsLinks.tsx
+++ b/src/components/DeveloperDocsLinks/index.tsx
@@ -4,8 +4,8 @@ import Translation from "@/components/Translation"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
-import InlineLink from "./ui/Link"
-import { ListItem, UnorderedList } from "./ui/list"
+import InlineLink from "../ui/Link"
+import { ListItem, UnorderedList } from "../ui/list"
 
 export type DeveloperDocsLinksProps = {
   headerId: string