diff --git a/.storybook/main.ts b/.storybook/main.ts
index aa245ac..54b38d5 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
 
   framework: {
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 8acec31..91d90c8 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -11,6 +11,10 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    darkMode: {
+      // Set the initial theme
+      current: 'light',
+    },
   },
 
   tags: ["autodocs"]
diff --git a/package-lock.json b/package-lock.json
index fd0c7ab..2c4e819 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "postcss": "^8.5.1",
         "rollup-plugin-postcss": "^4.0.2",
         "storybook": "^8.5.3",
+        "storybook-dark-mode": "^4.0.2",
         "typescript": "^5.7.3",
         "vite": "^6.0.10",
         "vite-tsconfig-paths": "^5.1.4",
@@ -1852,6 +1853,20 @@
         }
       }
     },
+    "node_modules/@storybook/core-events": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.5.3.tgz",
+      "integrity": "sha512-os2ddayQjBFH8/yZOHdxHIWXIq8MwfhaaPa74ogRCuwCO7qe2E5WBWpt2vTrC0ZJR7RPVKH9zEFqviOzHvz+uA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
     "node_modules/@storybook/core/node_modules/semver": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
@@ -3990,6 +4005,13 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -6559,6 +6581,23 @@
         }
       }
     },
+    "node_modules/storybook-dark-mode": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-4.0.2.tgz",
+      "integrity": "sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/components": "^8.0.0",
+        "@storybook/core-events": "^8.0.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.2.5",
+        "@storybook/manager-api": "^8.0.0",
+        "@storybook/theming": "^8.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "memoizerific": "^1.11.3"
+      }
+    },
     "node_modules/string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
diff --git a/package.json b/package.json
index 180c29e..e25c40b 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "postcss": "^8.5.1",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.5.3",
+    "storybook-dark-mode": "^4.0.2",
     "typescript": "^5.7.3",
     "vite": "^6.0.10",
     "vite-tsconfig-paths": "^5.1.4",
diff --git a/src/components/atoms/AnimatedHamburgerIconButton.stories.tsx b/src/components/atoms/AnimatedHamburgerIconButton.stories.tsx
new file mode 100644
index 0000000..cfc5955
--- /dev/null
+++ b/src/components/atoms/AnimatedHamburgerIconButton.stories.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import AnimatedHamburgerIconButton from "./AnimatedHamburgerIconButton";
+
+export default {
+  title: "Atoms/AnimatedHamburgerIconButton",
+  component: AnimatedHamburgerIconButton,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <AnimatedHamburgerIconButton
+      isExpanded={isExpanded}
+      onClick={() => setIsExpanded(!isExpanded)}
+    />
+  );
+};
diff --git a/src/components/atoms/Button.stories.tsx b/src/components/atoms/Button.stories.tsx
new file mode 100644
index 0000000..6838a9b
--- /dev/null
+++ b/src/components/atoms/Button.stories.tsx
@@ -0,0 +1,15 @@
+import { action } from "@storybook/addon-actions";
+import Button from "./Button";
+
+export default {
+  title: "Atoms/Button",
+  component: Button,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    children: "Button",
+    onClick: action("onClick"),
+  },
+};
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index dbca60b..183b3ae 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -10,7 +10,7 @@ function Button({
 }) {
   return (
     <button
-      className={`mx-2 rounded bg-gray-300 px-4 py-2 dark:bg-gray-400 ${className}`}
+      className={`mx-2 rounded bg-gray-300 px-4 py-2 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white ${className}`}
       {...props}
     >
       {children}
diff --git a/src/components/atoms/Heading.stories.tsx b/src/components/atoms/Heading.stories.tsx
new file mode 100644
index 0000000..42c5bd6
--- /dev/null
+++ b/src/components/atoms/Heading.stories.tsx
@@ -0,0 +1,14 @@
+import Heading from "./Heading";
+
+export default {
+  title: "Atoms/Heading",
+  component: Heading,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    level: 1,
+    children: "Heading",
+  },
+};
diff --git a/src/components/atoms/HeadingLink.stories.tsx b/src/components/atoms/HeadingLink.stories.tsx
new file mode 100644
index 0000000..101133c
--- /dev/null
+++ b/src/components/atoms/HeadingLink.stories.tsx
@@ -0,0 +1,14 @@
+import HeadingLink from "./HeadingLink";
+
+export default {
+  title: "Atoms/HeadingLink",
+  component: HeadingLink,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    href: "#",
+    children: "Heading Link",
+  },
+};
diff --git a/src/components/atoms/Search.stories.tsx b/src/components/atoms/Search.stories.tsx
new file mode 100644
index 0000000..766d421
--- /dev/null
+++ b/src/components/atoms/Search.stories.tsx
@@ -0,0 +1,13 @@
+import { useState } from "react";
+import Search from "./Search";
+
+export default {
+  title: "Atoms/Search",
+  component: Search,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [text, setText] = useState("");
+  return <Search label="Search..." text={text} setText={setText} />;
+};
diff --git a/src/components/atoms/Tab.stories.tsx b/src/components/atoms/Tab.stories.tsx
new file mode 100644
index 0000000..c944ea2
--- /dev/null
+++ b/src/components/atoms/Tab.stories.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Tab, { TabContainer } from "./Tab";
+
+export default {
+  title: "Atoms/Tab",
+  component: Tab,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  return (
+    <TabContainer
+      tabs={[
+        <Tab
+          key={0}
+          title="Tab 1"
+          active={activeTab === 0}
+          onClick={() => setActiveTab(0)}
+        />,
+        <Tab
+          key={1}
+          title="Tab 2"
+          active={activeTab === 1}
+          onClick={() => setActiveTab(1)}
+        />,
+      ]}
+    >
+      {activeTab === 0 ? (
+        <div>Content for Tab 1</div>
+      ) : (
+        <div>Content for Tab 2</div>
+      )}
+    </TabContainer>
+  );
+};
diff --git a/src/components/atoms/TimeDotMarker.stories.tsx b/src/components/atoms/TimeDotMarker.stories.tsx
new file mode 100644
index 0000000..2270c1b
--- /dev/null
+++ b/src/components/atoms/TimeDotMarker.stories.tsx
@@ -0,0 +1,22 @@
+import { TimelineProvider } from "context/TimelineContext";
+import { TimeDotMarker } from "./TimeDotMarker";
+
+export default {
+  title: "Atoms/TimeDotMarker",
+  component: TimeDotMarker,
+  tags: ["atoms"],
+  decorators: [
+    (story: () => React.ReactNode) => (
+      <TimelineProvider contentLength={1000 * 60 * 60}>
+        {story()}
+      </TimelineProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    timestampMilliseconds: 60000,
+    className: "bg-red-500",
+  },
+};
diff --git a/src/components/atoms/TimeLink.stories.tsx b/src/components/atoms/TimeLink.stories.tsx
new file mode 100644
index 0000000..24a024d
--- /dev/null
+++ b/src/components/atoms/TimeLink.stories.tsx
@@ -0,0 +1,16 @@
+import { action } from "@storybook/addon-actions";
+import TimeLink from "./TimeLink";
+
+export default {
+  title: "Atoms/TimeLink",
+  component: TimeLink,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    milliseconds: 60000,
+    onClick: action("onClick"),
+    children: "Click me",
+  },
+};
diff --git a/src/components/atoms/TimeLink.tsx b/src/components/atoms/TimeLink.tsx
index 50a5194..a1efe3f 100644
--- a/src/components/atoms/TimeLink.tsx
+++ b/src/components/atoms/TimeLink.tsx
@@ -38,14 +38,14 @@ export default function TimeLink({
         }}
       >
         <time dateTime={msToIso(milliseconds)}>{formatMs(milliseconds)}</time>
-
+        &nbsp;
         {children}
       </a>
     );
   }
   return (
     <>
-      {formatMs(milliseconds)}
+      {formatMs(milliseconds)}&nbsp;
       {children}
     </>
   );
diff --git a/src/components/atoms/TimelineLegend.stories.tsx b/src/components/atoms/TimelineLegend.stories.tsx
new file mode 100644
index 0000000..bc8cbe6
--- /dev/null
+++ b/src/components/atoms/TimelineLegend.stories.tsx
@@ -0,0 +1,9 @@
+import TimelineLegend from "./TimelineLegend";
+
+export default {
+  title: "Atoms/TimelineLegend",
+  component: TimelineLegend,
+  tags: ["atoms"],
+};
+
+export const Default = {};