diff --git a/src/components/DocLink/DocLink.stories.tsx b/src/components/DocLink/DocLink.stories.tsx
new file mode 100644
index 00000000000..dc1a896136a
--- /dev/null
+++ b/src/components/DocLink/DocLink.stories.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import DocLink from "."
+
+const meta = {
+  title: "Atoms / DocLink",
+  component: DocLink,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DocLink>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    href: "/history/",
+    children: "History of Ethereum",
+  },
+  render: (args) => (
+    <VStack spacing={4} align="stretch">
+      <DocLink {...args} />
+    </VStack>
+  ),
+}
+
+export const ExternalLink: Story = {
+  args: {
+    href: "https://ethereum.org",
+    children: "Ethereum Website",
+    isExternal: true,
+  },
+  render: (args) => (
+    <VStack spacing={4} align="stretch">
+      <DocLink {...args} />
+    </VStack>
+  ),
+}
+
+export const MultipleLinks: Story = {
+  args: {
+    href: "#",
+  },
+  render: () => (
+    <VStack spacing={4} align="stretch">
+      <DocLink href="/history/">History of Ethereum</DocLink>
+      <DocLink href="https://ethereum.org" isExternal>
+        Ethereum Website
+      </DocLink>
+      <DocLink href="/developers/docs/intro-to-ethereum/">
+        Introduction to Ethereum
+      </DocLink>
+    </VStack>
+  ),
+}
diff --git a/src/components/DocLink.tsx b/src/components/DocLink/index.tsx
similarity index 91%
rename from src/components/DocLink.tsx
rename to src/components/DocLink/index.tsx
index f9543e058f8..b4d84471af3 100644
--- a/src/components/DocLink.tsx
+++ b/src/components/DocLink/index.tsx
@@ -2,9 +2,9 @@ import { AiOutlineArrowRight } from "react-icons/ai"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Center, Flex, Stack } from "./ui/flex"
-import { LinkBox, LinkOverlay } from "./ui/link-box"
-import Emoji from "./Emoji"
+import Emoji from "../Emoji"
+import { Center, Flex, Stack } from "../ui/flex"
+import { LinkBox, LinkOverlay } from "../ui/link-box"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"