diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index ea2cc5a..238779e 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,4 +1,10 @@
+import { addons } from "@storybook/manager-api";
 import registerDarkModeAddon from "./addons/toggle-dark-mode/addon-setup";
+import customTheme from "./theme";
+
+addons.setConfig({
+  theme: customTheme,
+});
 
 // Register the addon
 registerDarkModeAddon();
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 5eb9c91..775fc7c 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -3,9 +3,13 @@ import "./preview.css";
 
 import type { Preview } from "@storybook/react";
 import * as darkModeConstants from "./addons/toggle-dark-mode/addon-constants";
+import customTheme from "./theme";
 
 const preview: Preview = {
   parameters: {
+    docs: {
+      theme: customTheme,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
new file mode 100644
index 0000000..8a8c4a4
--- /dev/null
+++ b/.storybook/theme.ts
@@ -0,0 +1,11 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "Glassy UI",
+  brandUrl: "https://itsjavi.com/glassy-ui",
+  brandTarget: "_self",
+  brandImage: undefined, //url
+});
+
+// @see https://storybook.js.org/docs/configure/user-interface/theming#create-a-theme-quickstart
diff --git a/package.json b/package.json
index 1afa00a..6f7587f 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@types/node": "^22.5.1",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fc01c1..8ff0807 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,6 +165,9 @@ importers:
       '@storybook/test':
         specifier: ^8.2.9
         version: 8.2.9(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))
+      '@storybook/theming':
+        specifier: ^8.2.9
+        version: 8.2.9(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))
       '@types/node':
         specifier: ^22.5.1
         version: 22.5.1
diff --git a/src/stories/breadcrumb.stories.tsx b/src/stories/breadcrumb.stories.tsx
index 6b2b9b0..78b5fd4 100644
--- a/src/stories/breadcrumb.stories.tsx
+++ b/src/stories/breadcrumb.stories.tsx
@@ -1,10 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../components/ui/breadcrumb';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../components/ui/breadcrumb";
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI/Breadcrumb',
+  title: "UI/Breadcrumb",
   component: Breadcrumb,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 };
 
 export default meta;
@@ -13,19 +27,33 @@ type Story = StoryObj<typeof Breadcrumb>;
 export const Default: Story = {
   render: () => (
     <Breadcrumb>
-      <Breadcrumb>
+      <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          <BreadcrumbLink href="#/">Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/docs/components">Components</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
         </BreadcrumbItem>
-      </Breadcrumb>
+      </BreadcrumbList>
     </Breadcrumb>
   ),
 };