diff --git a/stories/ContextMenu.stories.js b/stories/ContextMenu/ContextMenu.stories.js
similarity index 91%
rename from stories/ContextMenu.stories.js
rename to stories/ContextMenu/ContextMenu.stories.js
index 9d81a1b..89adb19 100644
--- a/stories/ContextMenu.stories.js
+++ b/stories/ContextMenu/ContextMenu.stories.js
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import ContextMenu from "../app/components/ContextMenu/ContextMenu";
-import ContextMenuItem from "../app/components/ContextMenu/ContextMenuItem";
-import ContextMenuSection from "../app/components/ContextMenu/ContextMenuSection";
-import ContextMenuDivider from "../app/components/ContextMenu/ContextMenuDivider";
+import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
+import ContextMenuSection from "../../app/components/ContextMenu/ContextMenuSection";
+import ContextMenuDivider from "../../app/components/ContextMenu/ContextMenuDivider";
 
 export default {
-  title: "Forms/ContextMenu",
+  title: "Components/ContextMenu/ContextMenu",
   component: ContextMenu,
   argTypes: {
     className: {
diff --git a/stories/Button.stories.js b/stories/buttons/Button.stories.js
similarity index 99%
rename from stories/Button.stories.js
rename to stories/buttons/Button.stories.js
index efd0684..7aead4d 100644
--- a/stories/Button.stories.js
+++ b/stories/buttons/Button.stories.js
@@ -1,7 +1,7 @@
-import Button from "../app/components/Button";
+import Button from "../../app/components/buttons/Button";
 
 export default {
-  title: "Components/Button",
+  title: "Components/Buttons/Button",
   component: Button,
   parameters: {
     layout: "centered",
diff --git a/stories/Button.visual.stories.js b/stories/buttons/Button.visual.stories.js
similarity index 98%
rename from stories/Button.visual.stories.js
rename to stories/buttons/Button.visual.stories.js
index c64b5c8..2593846 100644
--- a/stories/Button.visual.stories.js
+++ b/stories/buttons/Button.visual.stories.js
@@ -1,8 +1,8 @@
-import Button from "../app/components/Button";
+import Button from "../../app/components/buttons/Button";
 import { within, userEvent } from "@storybook/test";
 
 export default {
-  title: "Components/Button/Visual Regression",
+  title: "Components/Buttons/Button/Visual Regression",
   component: Button,
   parameters: {
     // Chromatic configuration for visual testing
diff --git a/stories/IconCard.stories.js b/stories/cards/IconCard.stories.js
similarity index 92%
rename from stories/IconCard.stories.js
rename to stories/cards/IconCard.stories.js
index e6bab37..2c93784 100644
--- a/stories/IconCard.stories.js
+++ b/stories/cards/IconCard.stories.js
@@ -1,8 +1,8 @@
-import IconCard from "../app/components/IconCard";
-import { getAssetPath } from "../lib/assetUtils";
+import IconCard from "../../app/components/cards/IconCard";
+import { getAssetPath } from "../../lib/assetUtils";
 
 export default {
-  title: "Components/IconCard",
+  title: "Components/Cards/IconCard",
   component: IconCard,
   parameters: {
     layout: "centered",
diff --git a/stories/MiniCard.stories.js b/stories/cards/MiniCard.stories.js
similarity index 95%
rename from stories/MiniCard.stories.js
rename to stories/cards/MiniCard.stories.js
index 40064d7..aba9211 100644
--- a/stories/MiniCard.stories.js
+++ b/stories/cards/MiniCard.stories.js
@@ -1,7 +1,7 @@
-import MiniCard from "../app/components/cards/MiniCard";
+import MiniCard from "../../app/components/cards/MiniCard";
 
 export default {
-  title: "Components/MiniCard",
+  title: "Components/Cards/MiniCard",
   component: MiniCard,
   parameters: {
     layout: "centered",
diff --git a/stories/NumberCard.stories.js b/stories/cards/NumberCard.stories.js
similarity index 98%
rename from stories/NumberCard.stories.js
rename to stories/cards/NumberCard.stories.js
index d4ab88c..b03f9ff 100644
--- a/stories/NumberCard.stories.js
+++ b/stories/cards/NumberCard.stories.js
@@ -1,7 +1,7 @@
-import NumberCard from "../app/components/NumberCard";
+import NumberCard from "../../app/components/cards/NumberCard";
 
 export default {
-  title: "Components/NumberCard",
+  title: "Components/Cards/NumberCard",
   component: NumberCard,
   parameters: {
     layout: "centered",
diff --git a/stories/RuleCard.stories.js b/stories/cards/RuleCard.stories.js
similarity index 99%
rename from stories/RuleCard.stories.js
rename to stories/cards/RuleCard.stories.js
index 75f1dea..3dafa02 100644
--- a/stories/RuleCard.stories.js
+++ b/stories/cards/RuleCard.stories.js
@@ -1,8 +1,8 @@
-import RuleCard from "../app/components/cards/RuleCard";
+import RuleCard from "../../app/components/cards/RuleCard";
 import Image from "next/image";
 
 export default {
-  title: "Components/RuleCard",
+  title: "Components/Cards/RuleCard",
   component: RuleCard,
   parameters: {
     layout: "centered",
diff --git a/stories/ContentContainer.stories.js b/stories/content/ContentContainer.stories.js
similarity index 92%
rename from stories/ContentContainer.stories.js
rename to stories/content/ContentContainer.stories.js
index aa39e94..0604d9e 100644
--- a/stories/ContentContainer.stories.js
+++ b/stories/content/ContentContainer.stories.js
@@ -1,4 +1,4 @@
-import ContentContainer from "../app/components/content/ContentContainer";
+import ContentContainer from "../../app/components/content/ContentContainer";
 
 const mockPost = {
   slug: "sample-article",
@@ -12,7 +12,7 @@ const mockPost = {
 };
 
 export default {
-  title: "Components/ContentContainer",
+  title: "Components/Content/ContentContainer",
   component: ContentContainer,
   parameters: {
     docs: {
diff --git a/stories/ContentThumbnailTemplate.stories.js b/stories/content/ContentThumbnailTemplate.stories.js
similarity index 93%
rename from stories/ContentThumbnailTemplate.stories.js
rename to stories/content/ContentThumbnailTemplate.stories.js
index eaa57b7..8f56b27 100644
--- a/stories/ContentThumbnailTemplate.stories.js
+++ b/stories/content/ContentThumbnailTemplate.stories.js
@@ -1,4 +1,4 @@
-import ContentThumbnailTemplate from "../app/components/content/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
 
 const mockPost = {
   slug: "sample-article",
@@ -14,7 +14,7 @@ const mockPost = {
 const mockSlugOrder = ["sample-article", "another-article", "third-article"];
 
 export default {
-  title: "Components/ContentThumbnailTemplate",
+  title: "Components/Content/ContentThumbnailTemplate",
   component: ContentThumbnailTemplate,
   parameters: {
     docs: {
diff --git a/stories/Checkbox.stories.js b/stories/controls/Checkbox.stories.js
similarity index 98%
rename from stories/Checkbox.stories.js
rename to stories/controls/Checkbox.stories.js
index 79e72c8..b38afe7 100644
--- a/stories/Checkbox.stories.js
+++ b/stories/controls/Checkbox.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Checkbox from "../app/components/controls/Checkbox";
+import Checkbox from "../../app/components/controls/Checkbox";
 import { within, userEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
@@ -27,7 +27,7 @@ const CheckedInteraction = {
 };
 
 export default {
-  title: "Forms/Checkbox",
+  title: "Components/Controls/Checkbox",
   component: Checkbox,
   parameters: {
     layout: "centered",
diff --git a/stories/CheckboxGroup.stories.js b/stories/controls/CheckboxGroup.stories.js
similarity index 97%
rename from stories/CheckboxGroup.stories.js
rename to stories/controls/CheckboxGroup.stories.js
index 11f5c54..526e6e5 100644
--- a/stories/CheckboxGroup.stories.js
+++ b/stories/controls/CheckboxGroup.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import CheckboxGroup from "../app/components/CheckboxGroup";
+import CheckboxGroup from "../../app/components/controls/CheckboxGroup";
 
 export default {
-  title: "Forms/CheckboxGroup",
+  title: "Components/Controls/CheckboxGroup",
   component: CheckboxGroup,
   parameters: {
     layout: "centered",
diff --git a/stories/RadioButton.stories.js b/stories/controls/RadioButton.stories.js
similarity index 98%
rename from stories/RadioButton.stories.js
rename to stories/controls/RadioButton.stories.js
index 70c4cef..8a75c42 100644
--- a/stories/RadioButton.stories.js
+++ b/stories/controls/RadioButton.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import RadioButton from "../app/components/controls/RadioButton";
+import RadioButton from "../../app/components/controls/RadioButton";
 
 export default {
-  title: "Forms/RadioButton",
+  title: "Components/Controls/RadioButton",
   component: RadioButton,
   parameters: {
     layout: "centered",
diff --git a/stories/RadioGroup.stories.js b/stories/controls/RadioGroup.stories.js
similarity index 97%
rename from stories/RadioGroup.stories.js
rename to stories/controls/RadioGroup.stories.js
index aa06503..74f758f 100644
--- a/stories/RadioGroup.stories.js
+++ b/stories/controls/RadioGroup.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import RadioGroup from "../app/components/RadioGroup";
+import RadioGroup from "../../app/components/controls/RadioGroup";
 
 export default {
-  title: "Forms/RadioGroup",
+  title: "Components/Controls/RadioGroup",
   component: RadioGroup,
   parameters: {
     layout: "centered",
diff --git a/stories/SelectInput.stories.js b/stories/controls/SelectInput.stories.js
similarity index 97%
rename from stories/SelectInput.stories.js
rename to stories/controls/SelectInput.stories.js
index 69a9baf..ccd56da 100644
--- a/stories/SelectInput.stories.js
+++ b/stories/controls/SelectInput.stories.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import SelectInput from "../app/components/SelectInput";
+import SelectInput from "../../app/components/controls/SelectInput";
 
 export default {
-  title: "Forms/SelectInput",
+  title: "Components/Controls/SelectInput",
   component: SelectInput,
   parameters: {
     layout: "centered",
diff --git a/stories/Switch.stories.js b/stories/controls/Switch.stories.js
similarity index 97%
rename from stories/Switch.stories.js
rename to stories/controls/Switch.stories.js
index 8dd184c..1e0c9af 100644
--- a/stories/Switch.stories.js
+++ b/stories/controls/Switch.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import Switch from "../app/components/Switch";
+import Switch from "../../app/components/controls/Switch";
 
 export default {
-  title: "Forms/Switch",
+  title: "Components/Controls/Switch",
   component: Switch,
   parameters: {
     layout: "centered",
diff --git a/stories/TextArea.stories.js b/stories/controls/TextArea.stories.js
similarity index 98%
rename from stories/TextArea.stories.js
rename to stories/controls/TextArea.stories.js
index f4fc114..b16fa32 100644
--- a/stories/TextArea.stories.js
+++ b/stories/controls/TextArea.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import TextArea from "../app/components/TextArea";
+import TextArea from "../../app/components/controls/TextArea";
 
 export default {
-  title: "Forms/TextArea",
+  title: "Components/Controls/TextArea",
   component: TextArea,
   parameters: {
     layout: "centered",
diff --git a/stories/TextInput.stories.js b/stories/controls/TextInput.stories.js
similarity index 98%
rename from stories/TextInput.stories.js
rename to stories/controls/TextInput.stories.js
index 2f37e69..cc7ade0 100644
--- a/stories/TextInput.stories.js
+++ b/stories/controls/TextInput.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import TextInput from "../app/components/TextInput";
+import TextInput from "../../app/components/controls/TextInput";
 
 export default {
-  title: "Forms/TextInput",
+  title: "Components/Controls/TextInput",
   component: TextInput,
   parameters: {
     layout: "centered",
diff --git a/stories/Toggle.stories.js b/stories/controls/Toggle.stories.js
similarity index 97%
rename from stories/Toggle.stories.js
rename to stories/controls/Toggle.stories.js
index c31f15c..569122e 100644
--- a/stories/Toggle.stories.js
+++ b/stories/controls/Toggle.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import Toggle from "../app/components/Toggle";
+import Toggle from "../../app/components/controls/Toggle";
 
 export default {
-  title: "Forms/Toggle",
+  title: "Components/Controls/Toggle",
   component: Toggle,
   parameters: {
     layout: "centered",
diff --git a/stories/ToggleGroup.stories.js b/stories/controls/ToggleGroup.stories.js
similarity index 98%
rename from stories/ToggleGroup.stories.js
rename to stories/controls/ToggleGroup.stories.js
index b22af10..99f5597 100644
--- a/stories/ToggleGroup.stories.js
+++ b/stories/controls/ToggleGroup.stories.js
@@ -1,8 +1,8 @@
 import React from "react";
-import ToggleGroup from "../app/components/ToggleGroup";
+import ToggleGroup from "../../app/components/controls/ToggleGroup";
 
 export default {
-  title: "Forms/ToggleGroup",
+  title: "Components/Controls/ToggleGroup",
   component: ToggleGroup,
   parameters: {
     layout: "centered",
diff --git a/stories/Avatar.stories.js b/stories/icons/Avatar.stories.js
similarity index 97%
rename from stories/Avatar.stories.js
rename to stories/icons/Avatar.stories.js
index bf9d2ed..1016640 100644
--- a/stories/Avatar.stories.js
+++ b/stories/icons/Avatar.stories.js
@@ -1,7 +1,7 @@
-import Avatar from "../app/components/Avatar";
+import Avatar from "../../app/components/icons/Avatar";
 
 export default {
-  title: "Components/Avatar",
+  title: "Components/Icons/Avatar",
   component: Avatar,
   parameters: {
     layout: "centered",
diff --git a/stories/Logo.stories.js b/stories/icons/Logo.stories.js
similarity index 98%
rename from stories/Logo.stories.js
rename to stories/icons/Logo.stories.js
index 056866e..91762f6 100644
--- a/stories/Logo.stories.js
+++ b/stories/icons/Logo.stories.js
@@ -1,7 +1,7 @@
-import Logo from "../app/components/Logo";
+import Logo from "../../app/components/icons/Logo";
 
 export default {
-  title: "Components/Logo",
+  title: "Components/Icons/Logo",
   component: Logo,
   parameters: {
     layout: "centered",
diff --git a/stories/Alert.stories.js b/stories/modals/Alert.stories.js
similarity index 98%
rename from stories/Alert.stories.js
rename to stories/modals/Alert.stories.js
index f9b4861..f695218 100644
--- a/stories/Alert.stories.js
+++ b/stories/modals/Alert.stories.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import Alert from "../app/components/Alert";
+import Alert from "../../app/components/modals/Alert";
 
 export default {
-  title: "Components/Alert",
+  title: "Components/Modals/Alert",
   component: Alert,
   argTypes: {
     status: {
diff --git a/stories/Create.stories.js b/stories/modals/Create.stories.js
similarity index 96%
rename from stories/Create.stories.js
rename to stories/modals/Create.stories.js
index d6d989b..3777099 100644
--- a/stories/Create.stories.js
+++ b/stories/modals/Create.stories.js
@@ -1,8 +1,8 @@
-import Create from "../app/components/Create";
-import TextInput from "../app/components/TextInput";
+import Create from "../../app/components/modals/Create";
+import TextInput from "../../app/components/controls/TextInput";
 
 export default {
-  title: "Components/Create",
+  title: "Components/Modals/Create",
   component: Create,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/Tooltip.stories.js b/stories/modals/Tooltip.stories.js
similarity index 92%
rename from stories/Tooltip.stories.js
rename to stories/modals/Tooltip.stories.js
index 5fa8261..0a1ea08 100644
--- a/stories/Tooltip.stories.js
+++ b/stories/modals/Tooltip.stories.js
@@ -1,9 +1,9 @@
 import React from "react";
-import Tooltip from "../app/components/Tooltip";
-import Button from "../app/components/Button";
+import Tooltip from "../../app/components/modals/Tooltip";
+import Button from "../../app/components/buttons/Button";
 
 export default {
-  title: "Components/Tooltip",
+  title: "Components/Modals/Tooltip",
   component: Tooltip,
   argTypes: {
     position: {
diff --git a/stories/ConditionalHeader.stories.js b/stories/navigation/ConditionalHeader.stories.js
similarity index 84%
rename from stories/ConditionalHeader.stories.js
rename to stories/navigation/ConditionalHeader.stories.js
index 0e134f8..288c546 100644
--- a/stories/ConditionalHeader.stories.js
+++ b/stories/navigation/ConditionalHeader.stories.js
@@ -1,7 +1,7 @@
-import ConditionalHeader from "../app/components/navigation/ConditionalHeader";
+import ConditionalHeader from "../../app/components/navigation/ConditionalHeader";
 
 export default {
-  title: "Components/ConditionalHeader",
+  title: "Components/Navigation/ConditionalHeader",
   component: ConditionalHeader,
   parameters: {
     docs: {
diff --git a/stories/Footer.responsive.stories.js b/stories/navigation/Footer.responsive.stories.js
similarity index 98%
rename from stories/Footer.responsive.stories.js
rename to stories/navigation/Footer.responsive.stories.js
index 0c1817f..5780223 100644
--- a/stories/Footer.responsive.stories.js
+++ b/stories/navigation/Footer.responsive.stories.js
@@ -1,8 +1,8 @@
-import Footer from "../app/components/Footer";
+import Footer from "../../app/components/navigation/Footer";
 import { within, userEvent } from "@storybook/test";
 
 export default {
-  title: "Components/Footer/Responsive",
+  title: "Components/Navigation/Footer/Responsive",
   component: Footer,
   parameters: {
     // Chromatic configuration for responsive testing
diff --git a/stories/Footer.stories.js b/stories/navigation/Footer.stories.js
similarity index 95%
rename from stories/Footer.stories.js
rename to stories/navigation/Footer.stories.js
index aba2b34..8646117 100644
--- a/stories/Footer.stories.js
+++ b/stories/navigation/Footer.stories.js
@@ -1,7 +1,7 @@
-import Footer from "../app/components/Footer";
+import Footer from "../../app/components/navigation/Footer";
 
 export default {
-  title: "Components/Footer",
+  title: "Components/Navigation/Footer",
   component: Footer,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/Header.responsive.stories.js b/stories/navigation/Header.responsive.stories.js
similarity index 98%
rename from stories/Header.responsive.stories.js
rename to stories/navigation/Header.responsive.stories.js
index e1ff4c2..457c2f5 100644
--- a/stories/Header.responsive.stories.js
+++ b/stories/navigation/Header.responsive.stories.js
@@ -1,7 +1,7 @@
-import Header from "../app/components/Header";
+import Header from "../../app/components/navigation/Header";
 
 export default {
-  title: "Components/Header/Responsive",
+  title: "Components/Navigation/Header/Responsive",
   component: Header,
   parameters: {
     // Chromatic configuration for responsive testing
diff --git a/stories/Header.stories.js b/stories/navigation/Header.stories.js
similarity index 95%
rename from stories/Header.stories.js
rename to stories/navigation/Header.stories.js
index 66a7705..aa5afca 100644
--- a/stories/Header.stories.js
+++ b/stories/navigation/Header.stories.js
@@ -1,7 +1,7 @@
-import Header from "../app/components/Header";
+import Header from "../../app/components/navigation/Header";
 
 export default {
-  title: "Components/Header",
+  title: "Components/Navigation/Header",
   component: Header,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/HeaderTab.stories.js b/stories/navigation/HeaderTab.stories.js
similarity index 82%
rename from stories/HeaderTab.stories.js
rename to stories/navigation/HeaderTab.stories.js
index 1d6c806..708aa66 100644
--- a/stories/HeaderTab.stories.js
+++ b/stories/navigation/HeaderTab.stories.js
@@ -1,8 +1,8 @@
-import HeaderTab from "../app/components/HeaderTab";
-import Logo from "../app/components/Logo";
+import HeaderTab from "../../app/components/navigation/HeaderTab";
+import Logo from "../../app/components/icons/Logo";
 
 export default {
-  title: "Components/HeaderTab",
+  title: "Components/Navigation/HeaderTab",
   component: HeaderTab,
   parameters: {
     layout: "centered",
diff --git a/stories/HomeHeader.stories.js b/stories/navigation/HomeHeader.stories.js
similarity index 95%
rename from stories/HomeHeader.stories.js
rename to stories/navigation/HomeHeader.stories.js
index 0784021..99d12bf 100644
--- a/stories/HomeHeader.stories.js
+++ b/stories/navigation/HomeHeader.stories.js
@@ -1,7 +1,7 @@
-import HomeHeader from "../app/components/HomeHeader";
+import HomeHeader from "../../app/components/navigation/HomeHeader";
 
 export default {
-  title: "Components/HomeHeader",
+  title: "Components/Navigation/HomeHeader",
   component: HomeHeader,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/MenuBar.stories.js b/stories/navigation/MenuBar.stories.js
similarity index 93%
rename from stories/MenuBar.stories.js
rename to stories/navigation/MenuBar.stories.js
index 824232b..ad1f9e1 100644
--- a/stories/MenuBar.stories.js
+++ b/stories/navigation/MenuBar.stories.js
@@ -1,8 +1,8 @@
-import MenuBar from "../app/components/MenuBar";
-import MenuBarItem from "../app/components/MenuBarItem";
+import MenuBar from "../../app/components/navigation/MenuBar";
+import MenuBarItem from "../../app/components/navigation/MenuBarItem";
 
 export default {
-  title: "Components/MenuBar",
+  title: "Components/Navigation/MenuBar",
   component: MenuBar,
   parameters: {
     layout: "centered",
diff --git a/stories/MenuBarItem.stories.js b/stories/navigation/MenuBarItem.stories.js
similarity index 97%
rename from stories/MenuBarItem.stories.js
rename to stories/navigation/MenuBarItem.stories.js
index c6f3b61..4a44d67 100644
--- a/stories/MenuBarItem.stories.js
+++ b/stories/navigation/MenuBarItem.stories.js
@@ -1,7 +1,7 @@
-import MenuBarItem from "../app/components/MenuBarItem";
+import MenuBarItem from "../../app/components/navigation/MenuBarItem";
 
 export default {
-  title: "Components/MenuBarItem",
+  title: "Components/Navigation/MenuBarItem",
   component: MenuBarItem,
   parameters: {
     layout: "centered",
diff --git a/stories/Progress.stories.js b/stories/progress/Progress.stories.js
similarity index 97%
rename from stories/Progress.stories.js
rename to stories/progress/Progress.stories.js
index 2e3ce5c..077cf34 100644
--- a/stories/Progress.stories.js
+++ b/stories/progress/Progress.stories.js
@@ -1,4 +1,4 @@
-import Progress from "../app/components/Progress";
+import Progress from "../../app/components/progress/Progress";
 
 export default {
   title: "Components/Progress",
diff --git a/stories/Stepper.stories.js b/stories/progress/Stepper.stories.js
similarity index 95%
rename from stories/Stepper.stories.js
rename to stories/progress/Stepper.stories.js
index 71281a8..478c60e 100644
--- a/stories/Stepper.stories.js
+++ b/stories/progress/Stepper.stories.js
@@ -1,7 +1,7 @@
-import Stepper from "../app/components/Stepper";
+import Stepper from "../../app/components/progress/Stepper";
 
 export default {
-  title: "Components/Stepper",
+  title: "Components/Progress/Stepper",
   component: Stepper,
   parameters: {
     layout: "centered",
diff --git a/stories/AskOrganizer.stories.js b/stories/sections/AskOrganizer.stories.js
similarity index 95%
rename from stories/AskOrganizer.stories.js
rename to stories/sections/AskOrganizer.stories.js
index 3e47905..2e438ad 100644
--- a/stories/AskOrganizer.stories.js
+++ b/stories/sections/AskOrganizer.stories.js
@@ -1,7 +1,7 @@
-import AskOrganizer from "../app/components/AskOrganizer";
+import AskOrganizer from "../../app/components/sections/AskOrganizer";
 
 export default {
-  title: "Components/AskOrganizer",
+  title: "Components/Sections/AskOrganizer",
   component: AskOrganizer,
   parameters: {
     docs: {
diff --git a/stories/ContentBanner.stories.js b/stories/sections/ContentBanner.stories.js
similarity index 95%
rename from stories/ContentBanner.stories.js
rename to stories/sections/ContentBanner.stories.js
index 1ccd8ae..4b92b8d 100644
--- a/stories/ContentBanner.stories.js
+++ b/stories/sections/ContentBanner.stories.js
@@ -1,4 +1,4 @@
-import ContentBanner from "../app/components/ContentBanner";
+import ContentBanner from "../../app/components/sections/ContentBanner";
 
 const mockBlogPost = {
   slug: "sample-article",
@@ -21,7 +21,7 @@ const mockBlogPost = {
 };
 
 export default {
-  title: "Components/ContentBanner",
+  title: "Components/Sections/ContentBanner",
   component: ContentBanner,
   parameters: {
     docs: {
diff --git a/stories/FeatureGrid.stories.js b/stories/sections/FeatureGrid.stories.js
similarity index 95%
rename from stories/FeatureGrid.stories.js
rename to stories/sections/FeatureGrid.stories.js
index 28864ba..110a62a 100644
--- a/stories/FeatureGrid.stories.js
+++ b/stories/sections/FeatureGrid.stories.js
@@ -1,7 +1,7 @@
-import FeatureGrid from "../app/components/FeatureGrid";
+import FeatureGrid from "../../app/components/sections/FeatureGrid";
 
 export default {
-  title: "Components/FeatureGrid",
+  title: "Components/Sections/FeatureGrid",
   component: FeatureGrid,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/HeroBanner.stories.js b/stories/sections/HeroBanner.stories.js
similarity index 92%
rename from stories/HeroBanner.stories.js
rename to stories/sections/HeroBanner.stories.js
index c5926ea..d6362e5 100644
--- a/stories/HeroBanner.stories.js
+++ b/stories/sections/HeroBanner.stories.js
@@ -1,7 +1,7 @@
-import HeroBanner from "../app/components/HeroBanner";
+import HeroBanner from "../../app/components/sections/HeroBanner";
 
 export default {
-  title: "Components/HeroBanner",
+  title: "Components/Sections/HeroBanner",
   component: HeroBanner,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/HeroBannerSystem.stories.js b/stories/sections/HeroBannerSystem.stories.js
similarity index 97%
rename from stories/HeroBannerSystem.stories.js
rename to stories/sections/HeroBannerSystem.stories.js
index c8f7c93..04c4d1f 100644
--- a/stories/HeroBannerSystem.stories.js
+++ b/stories/sections/HeroBannerSystem.stories.js
@@ -1,6 +1,6 @@
-import HeroBanner from "../app/components/sections/HeroBanner";
-import ContentLockup from "../app/components/type/ContentLockup";
-import HeroDecor from "../app/components/sections/HeroBanner/HeroDecor";
+import HeroBanner from "../../app/components/sections/HeroBanner";
+import ContentLockup from "../../app/components/type/ContentLockup";
+import HeroDecor from "../../app/components/sections/HeroBanner/HeroDecor";
 
 export default {
   title: "Systems/HeroBanner System",
diff --git a/stories/HeroDecor.stories.js b/stories/sections/HeroDecor.stories.js
similarity index 92%
rename from stories/HeroDecor.stories.js
rename to stories/sections/HeroDecor.stories.js
index f3cea00..c76baf8 100644
--- a/stories/HeroDecor.stories.js
+++ b/stories/sections/HeroDecor.stories.js
@@ -1,7 +1,7 @@
-import HeroDecor from "../app/components/sections/HeroBanner/HeroDecor";
+import HeroDecor from "../../app/components/sections/HeroBanner/HeroDecor";
 
 export default {
-  title: "Components/HeroDecor",
+  title: "Components/Sections/HeroDecor",
   component: HeroDecor,
   parameters: {
     layout: "centered",
diff --git a/stories/LogoWall.stories.js b/stories/sections/LogoWall.stories.js
similarity index 95%
rename from stories/LogoWall.stories.js
rename to stories/sections/LogoWall.stories.js
index 4e58e6f..13fda43 100644
--- a/stories/LogoWall.stories.js
+++ b/stories/sections/LogoWall.stories.js
@@ -1,7 +1,7 @@
-import LogoWall from "../app/components/LogoWall";
+import LogoWall from "../../app/components/sections/LogoWall";
 
 export default {
-  title: "Components/LogoWall",
+  title: "Components/Sections/LogoWall",
   component: LogoWall,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/NumberedCards.stories.js b/stories/sections/NumberedCards.stories.js
similarity index 95%
rename from stories/NumberedCards.stories.js
rename to stories/sections/NumberedCards.stories.js
index 3d9f651..aad4794 100644
--- a/stories/NumberedCards.stories.js
+++ b/stories/sections/NumberedCards.stories.js
@@ -1,7 +1,7 @@
-import NumberedCards from "../app/components/NumberedCards";
+import NumberedCards from "../../app/components/sections/NumberedCards";
 
 export default {
-  title: "Components/NumberedCards",
+  title: "Components/Sections/NumberedCards",
   component: NumberedCards,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/QuoteBlock.stories.js b/stories/sections/QuoteBlock.stories.js
similarity index 97%
rename from stories/QuoteBlock.stories.js
rename to stories/sections/QuoteBlock.stories.js
index 3b4f0f6..3ae18bf 100644
--- a/stories/QuoteBlock.stories.js
+++ b/stories/sections/QuoteBlock.stories.js
@@ -1,7 +1,7 @@
-import QuoteBlock from "../app/components/QuoteBlock";
+import QuoteBlock from "../../app/components/sections/QuoteBlock";
 
 export default {
-  title: "Components/QuoteBlock",
+  title: "Components/Sections/QuoteBlock",
   component: QuoteBlock,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/RelatedArticles.stories.js b/stories/sections/RelatedArticles.stories.js
similarity index 95%
rename from stories/RelatedArticles.stories.js
rename to stories/sections/RelatedArticles.stories.js
index 869aa43..a6aaebf 100644
--- a/stories/RelatedArticles.stories.js
+++ b/stories/sections/RelatedArticles.stories.js
@@ -1,4 +1,4 @@
-import RelatedArticles from "../app/components/RelatedArticles";
+import RelatedArticles from "../../app/components/sections/RelatedArticles";
 
 const mockRelatedPosts = [
   {
@@ -31,7 +31,7 @@ const mockRelatedPosts = [
 ];
 
 export default {
-  title: "Components/RelatedArticles",
+  title: "Components/Sections/RelatedArticles",
   component: RelatedArticles,
   parameters: {
     docs: {
diff --git a/stories/RuleStack.stories.js b/stories/sections/RuleStack.stories.js
similarity index 93%
rename from stories/RuleStack.stories.js
rename to stories/sections/RuleStack.stories.js
index c5bca40..1da655d 100644
--- a/stories/RuleStack.stories.js
+++ b/stories/sections/RuleStack.stories.js
@@ -1,7 +1,7 @@
-import RuleStack from "../app/components/RuleStack";
+import RuleStack from "../../app/components/sections/RuleStack";
 
 export default {
-  title: "Components/RuleStack",
+  title: "Components/Sections/RuleStack",
   component: RuleStack,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/SectionHeader.stories.js b/stories/sections/SectionHeader.stories.js
similarity index 97%
rename from stories/SectionHeader.stories.js
rename to stories/sections/SectionHeader.stories.js
index a821b94..cbf77fb 100644
--- a/stories/SectionHeader.stories.js
+++ b/stories/sections/SectionHeader.stories.js
@@ -1,7 +1,7 @@
-import SectionHeader from "../app/components/SectionHeader";
+import SectionHeader from "../../app/components/sections/SectionHeader";
 
 export default {
-  title: "Components/SectionHeader",
+  title: "Components/Sections/SectionHeader",
   component: SectionHeader,
   parameters: {
     layout: "centered",
diff --git a/stories/SectionNumber.stories.js b/stories/sections/SectionNumber.stories.js
similarity index 93%
rename from stories/SectionNumber.stories.js
rename to stories/sections/SectionNumber.stories.js
index b0287c6..2fbb875 100644
--- a/stories/SectionNumber.stories.js
+++ b/stories/sections/SectionNumber.stories.js
@@ -1,7 +1,7 @@
-import SectionNumber from "../app/components/SectionNumber";
+import SectionNumber from "../../app/components/sections/SectionNumber";
 
 export default {
-  title: "Components/SectionNumber",
+  title: "Components/Sections/SectionNumber",
   component: SectionNumber,
   parameters: {
     layout: "centered",
diff --git a/stories/ContentLockup.stories.js b/stories/type/ContentLockup.stories.js
similarity index 93%
rename from stories/ContentLockup.stories.js
rename to stories/type/ContentLockup.stories.js
index 387d4ad..fd000a3 100644
--- a/stories/ContentLockup.stories.js
+++ b/stories/type/ContentLockup.stories.js
@@ -1,7 +1,7 @@
-import ContentLockup from "../app/components/ContentLockup";
+import ContentLockup from "../../app/components/type/ContentLockup";
 
 export default {
-  title: "Components/ContentLockup",
+  title: "Components/Type/ContentLockup",
   component: ContentLockup,
   parameters: {
     layout: "centered",
diff --git a/stories/AvatarContainer.stories.js b/stories/utility/AvatarContainer.stories.js
similarity index 97%
rename from stories/AvatarContainer.stories.js
rename to stories/utility/AvatarContainer.stories.js
index 3aa222d..2162ae1 100644
--- a/stories/AvatarContainer.stories.js
+++ b/stories/utility/AvatarContainer.stories.js
@@ -1,8 +1,8 @@
-import AvatarContainer from "../app/components/AvatarContainer";
-import Avatar from "../app/components/Avatar";
+import AvatarContainer from "../../app/components/utility/AvatarContainer";
+import Avatar from "../../app/components/icons/Avatar";
 
 export default {
-  title: "Components/AvatarContainer",
+  title: "Components/Utility/AvatarContainer",
   component: AvatarContainer,
   parameters: {
     layout: "centered",
diff --git a/stories/ErrorBoundary.stories.js b/stories/utility/ErrorBoundary.stories.js
similarity index 87%
rename from stories/ErrorBoundary.stories.js
rename to stories/utility/ErrorBoundary.stories.js
index bb445ca..a2eccf4 100644
--- a/stories/ErrorBoundary.stories.js
+++ b/stories/utility/ErrorBoundary.stories.js
@@ -1,7 +1,7 @@
-import ErrorBoundary from "../app/components/ErrorBoundary";
+import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
 
 export default {
-  title: "Components/ErrorBoundary",
+  title: "Components/Utility/ErrorBoundary",
   component: ErrorBoundary,
   parameters: {
     layout: "centered",