diff --git a/.storybook/main.ts b/.storybook/main.ts
index 290946945a..472f128627 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,10 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
-  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../components/**/*.stories.@(js|jsx|ts|tsx)",
+    "../layouts/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: ["@storybook/addon-interactions", "@storybook/addon-viewport"],
   framework: {
     name: "@storybook/nextjs",
diff --git a/layouts/DocsPage/Navigation.stories.tsx b/layouts/DocsPage/Navigation.stories.tsx
new file mode 100644
index 0000000000..dc0c05487b
--- /dev/null
+++ b/layouts/DocsPage/Navigation.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
+import { default as DocNavigation } from "layouts/DocsPage/Navigation";
+
+import { TabItem } from "./TabItem";
+import { Tabs } from "./Tabs";
+
+export const NavigationFourLevels = () => {
+  const data = [
+    {
+      icon: "wrench",
+      title: "Enroll Resources",
+      entries: [
+        {
+          title: "Machine ID",
+          slug: "/enroll-resources/machine-id/",
+          entries: [
+            {
+              title: "Deploy Machine ID",
+              slug: "/enroll-resources/machine-id/deployment/",
+              entries: [
+                {
+                  title: "Deploy Machine ID on AWs",
+                  slug: "/enroll-resources/machine-id/deployment/",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <DocNavigation
+      data={data}
+      section={true}
+      currentVersion="16.x"
+    ></DocNavigation>
+  );
+};
+
+const meta: Meta<typeof Tabs> = {
+  title: "layouts/DocNavigation",
+  component: NavigationFourLevels,
+};
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+// export const InitialStateTab: Story = {
+//   play: async ({ canvasElement, step }) => {
+//     const canvas = within(canvasElement);
+//     await step("Should be the text for the selected option", async () => {
+//       expect(
+//         await canvas.findByText(
+//           "Instructions for installing release using shell commands."
+//         )
+//       ).toBeTruthy();
+//     });
+//     await step(
+//       "Selected option should be disabled for re-selection",
+//       async () => {
+//         expect(canvas.getByText("Shell")).toBeDisabled();
+//       }
+//     );
+//   },
+// };