diff --git a/package.json b/package.json
index 94a0153..e86b5ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/checkbox/__test__/Checkbox.test.tsx b/src/components/checkbox/__test__/Checkbox.test.tsx
deleted file mode 100644
index 456a68a..0000000
--- a/src/components/checkbox/__test__/Checkbox.test.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { Checkbox } from '../';
-import { render, fireEvent } from '@testing-library/react';
-
-describe('Checkbox component', () => {
-  it('Checkbox disabled and not checked should render correctly', () => {
-    const button = render(<Checkbox disabled={true} checked={false} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Checkbox enabled and not checked should render correctly', () => {
-    const button = render(<Checkbox checked={false} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Checkbox checked should render correctly', () => {
-    const button = render(<Checkbox checked={true} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Checkbox disabled and checked should render correctly', () => {
-    const button = render(<Checkbox disabled={true} checked={true} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Checkbox enabled and indetermiante should render correctly', () => {
-    const button = render(<Checkbox checked={true} indeterminate={true} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Checkbox disabled and indetermiante should render correctly', () => {
-    const button = render(<Checkbox disabled={true} checked={true} indeterminate={true} />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('calls onClick when label is clicked and not disabled', () => {
-    const handleClick = vi.fn();
-    const { container } = render(<Checkbox onClick={handleClick as any} />);
-    const label = container.querySelector('label');
-    fireEvent.click(label!);
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it('does not call onClick when disabled', () => {
-    const handleClick = vi.fn();
-    const { container } = render(<Checkbox disabled={true} onClick={handleClick as any} />);
-    const label = container.querySelector('label');
-    fireEvent.click(label!);
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('prevents default on inner div click', () => {
-    const { container } = render(<Checkbox />);
-    const div = container.querySelector('div');
-    
-    const event = new MouseEvent('click', { bubbles: true, cancelable: true });
-    event.preventDefault = vi.fn();
-    fireEvent(div!, event);
-    expect(event.preventDefault).toHaveBeenCalled();
-  });
-
-  it('triggers onKeyDown handlers without errors', () => {
-    const { container } = render(<Checkbox />);
-    const label = container.querySelector('label');
-    const div = container.querySelector('div');
-    fireEvent.keyDown(label!, { key: 'Enter' });
-    fireEvent.keyDown(div!, { key: 'Enter' });
-  });
-});
diff --git a/src/components/avatar/Avatar.tsx b/src/components/data-display/avatar/Avatar.tsx
similarity index 100%
rename from src/components/avatar/Avatar.tsx
rename to src/components/data-display/avatar/Avatar.tsx
diff --git a/src/components/avatar/__test__/Avatar.test.tsx b/src/components/data-display/avatar/__test__/Avatar.test.tsx
similarity index 50%
rename from src/components/avatar/__test__/Avatar.test.tsx
rename to src/components/data-display/avatar/__test__/Avatar.test.tsx
index f0accdb..1bd8722 100644
--- a/src/components/avatar/__test__/Avatar.test.tsx
+++ b/src/components/data-display/avatar/__test__/Avatar.test.tsx
@@ -1,72 +1,50 @@
 import { render } from '@testing-library/react';
-import { describe, expect, it, test } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { Avatar } from '../';
-import DefaultAvatar from '../components/DefaultAvatar';
-import PictureAvatar from '../components/PictureAvatar';
 
 const FULL_NAME = 'My Internxt';
 const IMAGE_SRC = 'https://internxt.com/favicon.ico';
 
 describe('Avatar component', () => {
-  test('Avatar with full name (first letters) should render correctly', () => {
+  it('Avatar with full name (first letters) should render correctly', () => {
     const avatarComponent = render(<Avatar diameter={80} fullName={FULL_NAME} />);
     expect(avatarComponent).toMatchSnapshot();
   });
 
-  test('Avatar with single word name should render correctly', () => {
-    const avatarComponent = render(<Avatar diameter={80} fullName="Javi" />);
-    expect(avatarComponent).toMatchSnapshot();
-  });
-
-  test('Avatar with empty spaces name should return empty content', () => {
-    const avatarComponent = render(<Avatar diameter={80} fullName="   " />);
-    expect(avatarComponent).toMatchSnapshot();
-  });
-
-  test('Avatar with fullname as null should render correctly with empty letters', () => {
+  it('Avatar with fullname as null should render correctly with empty letters', () => {
     const avatarComponent = render(<Avatar diameter={80} fullName={null as any} />);
     expect(avatarComponent).toMatchSnapshot();
   });
 
-  test('Avatar with avatar (user image profile) should render correctly', () => {
+  it('Avatar with avatar (user image profile) should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} diameter={80} src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
 
-  test('XXS Avatar should render correctly', () => {
+  it('XXS Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="xxs" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
-  test('XS Avatar should render correctly', () => {
+  it('XS Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="xs" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
 
-  test('SM Avatar should render correctly', () => {
+  it('SM Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="sm" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
 
-  test('Base Avatar should render correctly', () => {
+  it('Base Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="base" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
-  test('LG Avatar should render correctly', () => {
+  it('LG Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="lg" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
-  test('XL Avatar should render correctly', () => {
+  it('XL Avatar should render correctly', () => {
     const avatarComponent = render(<Avatar fullName={FULL_NAME} size="xl" src={IMAGE_SRC} />);
     expect(avatarComponent).toMatchSnapshot();
   });
-
-  test('DefaultAvatar handles default parameters', () => {
-    const avatarComponent = render(<DefaultAvatar fullName="John Doe" diameter={80} />);
-    expect(avatarComponent).toMatchSnapshot();
-  });
-
-  test('PictureAvatar handles default parameters', () => {
-    const avatarComponent = render(<PictureAvatar src={IMAGE_SRC} diameter={80} />);
-    expect(avatarComponent).toMatchSnapshot();
-  });
 });
diff --git a/src/components/avatar/__test__/__snapshots__/Avatar.test.tsx.snap b/src/components/data-display/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
similarity index 68%
rename from src/components/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
rename to src/components/data-display/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
index ede2e30..876ffa2 100644
--- a/src/components/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
+++ b/src/components/data-display/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
@@ -75,81 +75,6 @@ exports[`Avatar component > Avatar with avatar (user image profile) should rende
 }
 `;
 
-exports[`Avatar component > Avatar with empty spaces name should return empty content 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-        style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-      >
-        <p />
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-      style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-    >
-      <p />
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Avatar component > Avatar with full name (first letters) should render correctly 1`] = `
 {
   "asFragment": [Function],
@@ -304,85 +229,6 @@ exports[`Avatar component > Avatar with fullname as null should render correctly
 }
 `;
 
-exports[`Avatar component > Avatar with single word name should render correctly 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-        style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-      >
-        <p>
-          J
-        </p>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-      style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-    >
-      <p>
-        J
-      </p>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Avatar component > Base Avatar should render correctly 1`] = `
 {
   "asFragment": [Function],
@@ -458,85 +304,6 @@ exports[`Avatar component > Base Avatar should render correctly 1`] = `
 }
 `;
 
-exports[`Avatar component > DefaultAvatar handles default parameters 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-        style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-      >
-        <p>
-          JD
-        </p>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
-      style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
-    >
-      <p>
-        JD
-      </p>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Avatar component > LG Avatar should render correctly 1`] = `
 {
   "asFragment": [Function],
@@ -612,81 +379,6 @@ exports[`Avatar component > LG Avatar should render correctly 1`] = `
 }
 `;
 
-exports[`Avatar component > PictureAvatar handles default parameters 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <img
-        class=" shrink-0 select-none rounded-full object-cover"
-        draggable="false"
-        src="https://internxt.com/favicon.ico"
-        style="width: 80px; height: 80px;"
-      />
-    </div>
-  </body>,
-  "container": <div>
-    <img
-      class=" shrink-0 select-none rounded-full object-cover"
-      draggable="false"
-      src="https://internxt.com/favicon.ico"
-      style="width: 80px; height: 80px;"
-    />
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Avatar component > SM Avatar should render correctly 1`] = `
 {
   "asFragment": [Function],
diff --git a/src/components/avatar/components/DefaultAvatar.tsx b/src/components/data-display/avatar/components/DefaultAvatar.tsx
similarity index 100%
rename from src/components/avatar/components/DefaultAvatar.tsx
rename to src/components/data-display/avatar/components/DefaultAvatar.tsx
diff --git a/src/components/avatar/components/PictureAvatar.tsx b/src/components/data-display/avatar/components/PictureAvatar.tsx
similarity index 100%
rename from src/components/avatar/components/PictureAvatar.tsx
rename to src/components/data-display/avatar/components/PictureAvatar.tsx
diff --git a/src/components/avatar/index.ts b/src/components/data-display/avatar/index.ts
similarity index 100%
rename from src/components/avatar/index.ts
rename to src/components/data-display/avatar/index.ts
diff --git a/src/components/card/Card.tsx b/src/components/data-display/card/Card.tsx
similarity index 100%
rename from src/components/card/Card.tsx
rename to src/components/data-display/card/Card.tsx
diff --git a/src/components/card/__test__/Card.test.tsx b/src/components/data-display/card/__test__/Card.test.tsx
similarity index 100%
rename from src/components/card/__test__/Card.test.tsx
rename to src/components/data-display/card/__test__/Card.test.tsx
diff --git a/src/components/card/__test__/__snapshots__/Card.test.tsx.snap b/src/components/data-display/card/__test__/__snapshots__/Card.test.tsx.snap
similarity index 100%
rename from src/components/card/__test__/__snapshots__/Card.test.tsx.snap
rename to src/components/data-display/card/__test__/__snapshots__/Card.test.tsx.snap
diff --git a/src/components/card/index.ts b/src/components/data-display/card/index.ts
similarity index 100%
rename from src/components/card/index.ts
rename to src/components/data-display/card/index.ts
diff --git a/src/components/list/List.tsx b/src/components/data-display/list/List.tsx
similarity index 98%
rename from src/components/list/List.tsx
rename to src/components/data-display/list/List.tsx
index 8f4d15d..d6c70e4 100644
--- a/src/components/list/List.tsx
+++ b/src/components/data-display/list/List.tsx
@@ -2,10 +2,10 @@ import _ from 'lodash';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import ListItem from './ListItem';
 import ListHeader, { HeaderProps } from './ListHeader';
-import useHotkeys from '../../hooks/useHotKeys';
-import { SkeletonLoader } from '../skeletonLoader';
-import { InfiniteScroll } from '../infiniteScroll';
-import { MenuItemsType } from '../menu/Menu';
+import useHotkeys from '../../../hooks/useHotKeys';
+import { SkeletonLoader } from '../../feedback/skeletonLoader';
+import { InfiniteScroll } from '../../layout/infiniteScroll';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 export interface ListProps<T, F> {
   header: HeaderProps<T, F>[];
diff --git a/src/components/list/ListHeader.tsx b/src/components/data-display/list/ListHeader.tsx
similarity index 96%
rename from src/components/list/ListHeader.tsx
rename to src/components/data-display/list/ListHeader.tsx
index 8a5680b..446536b 100644
--- a/src/components/list/ListHeader.tsx
+++ b/src/components/data-display/list/ListHeader.tsx
@@ -1,6 +1,6 @@
 import { ArrowDown, ArrowUp } from '@phosphor-icons/react';
-import Checkbox from '../checkbox/Checkbox';
-import { MenuItemsType } from '../menu/Menu';
+import Checkbox from '../../input/checkbox/Checkbox';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 export type HeaderProps<T, F> = {
   label: string;
diff --git a/src/components/list/ListItem.tsx b/src/components/data-display/list/ListItem.tsx
similarity index 96%
rename from src/components/list/ListItem.tsx
rename to src/components/data-display/list/ListItem.tsx
index fd86c07..17257bc 100644
--- a/src/components/list/ListItem.tsx
+++ b/src/components/data-display/list/ListItem.tsx
@@ -1,9 +1,9 @@
 import { LegacyRef, useEffect, useRef, useState } from 'react';
 import { DotsThree } from '@phosphor-icons/react';
-import ContextMenu from '../contextMenu/ContextMenu';
-import useHotkeys from '../../hooks/useHotKeys';
-import Checkbox from '../checkbox/Checkbox';
-import { MenuItemsType } from '../menu/Menu';
+import ContextMenu from '../../overlay/contextMenu/ContextMenu';
+import useHotkeys from '../../../hooks/useHotKeys';
+import Checkbox from '../../input/checkbox/Checkbox';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 interface ListItemProps<T> {
   item: T;
diff --git a/src/components/list/__test__/List.test.tsx b/src/components/data-display/list/__test__/List.test.tsx
similarity index 97%
rename from src/components/list/__test__/List.test.tsx
rename to src/components/data-display/list/__test__/List.test.tsx
index d155910..c1f4f61 100644
--- a/src/components/list/__test__/List.test.tsx
+++ b/src/components/data-display/list/__test__/List.test.tsx
@@ -306,15 +306,6 @@ describe('List component', () => {
     expect(mockOnSelectedItemsChanged).toHaveBeenCalled();
   });
 
-  it('closes the item context menu when clicking outside the list container', () => {
-    const { getByText } = renderList();
-    
-    const itemElement = getByText('Item 2');
-    fireEvent.contextMenu(itemElement);
-
-    fireEvent.mouseDown(document.body);
-  });
-
   it('should toggle selection when Ctrl or Meta key is pressed', () => {
     const { getByText } = renderList();
 
diff --git a/src/components/list/__test__/ListHeader.test.tsx b/src/components/data-display/list/__test__/ListHeader.test.tsx
similarity index 64%
rename from src/components/list/__test__/ListHeader.test.tsx
rename to src/components/data-display/list/__test__/ListHeader.test.tsx
index 2a6c3c1..9162b26 100644
--- a/src/components/list/__test__/ListHeader.test.tsx
+++ b/src/components/data-display/list/__test__/ListHeader.test.tsx
@@ -85,43 +85,4 @@ describe('ListHeader', () => {
 
     expect(mockOnOrderableColumnClicked).not.toHaveBeenCalled();
   });
-
-  it('renders ArrowDown when orderBy direction is DESC', () => {
-    const { container } = renderListHeader({
-      orderBy: { field: 'id', direction: 'DESC' },
-    });
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('renders ArrowUp when orderBy direction is ASC', () => {
-    const { container } = renderListHeader({
-      orderBy: { field: 'id', direction: 'ASC' },
-    });
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('renders columns with buttonDataCy and textDataCy attributes', () => {
-    const { container } = render(
-      <ListHeader
-        selectedItems={[]}
-        items={[{ id: 1, name: 'name1' }]}
-        header={[
-          {
-            label: 'With Data Cy',
-            width: '100px',
-            name: 'id',
-            orderable: true,
-            defaultDirection: 'ASC',
-            buttonDataCy: 'btn-data-cy',
-            textDataCy: 'text-data-cy',
-          },
-        ]}
-        isVerticalScrollbarVisible={false}
-        onTopSelectionCheckboxClick={mockOnTopSelectionCheckboxClick}
-        onOrderableColumnClicked={mockOnOrderableColumnClicked}
-      />,
-    );
-    expect(container.querySelector('[data-cy="btn-data-cy"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-cy="text-data-cy"]')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/list/__test__/ListItem.test.tsx b/src/components/data-display/list/__test__/ListItem.test.tsx
similarity index 75%
rename from src/components/list/__test__/ListItem.test.tsx
rename to src/components/data-display/list/__test__/ListItem.test.tsx
index aa37cfa..6b7a425 100644
--- a/src/components/list/__test__/ListItem.test.tsx
+++ b/src/components/data-display/list/__test__/ListItem.test.tsx
@@ -66,31 +66,6 @@ describe('ListItem', () => {
     expect(mockOnClickContextMenu).toHaveBeenCalled();
   });
 
-  it('updates dimensions when menuItemsRef size changes', () => {
-    const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
-    const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
-
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, value: 100 });
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, value: 100 });
-
-    renderListItem({ isOpen: true, selected: true });
-
-    if (originalOffsetWidth) Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
-    if (originalOffsetHeight) Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
-  });
-
-  it('handles contextMenu positioning near screen edges', () => {
-    renderListItem({ isOpen: true, selected: true });
-    const listItem = screen.getByText('1').closest('div');
-    
-    fireEvent.contextMenu(listItem!, { 
-      clientX: window.innerWidth + 300, 
-      clientY: Math.max(window.innerHeight, 500) + 300 
-    });
-    
-    expect(mockOnClickContextMenu).toHaveBeenCalled();
-  });
-
   it('closes the context menu when onClose is called', () => {
     renderListItem({ isOpen: true });
     mockOnClose();
diff --git a/src/components/list/__test__/__snapshots__/List.test.tsx.snap b/src/components/data-display/list/__test__/__snapshots__/List.test.tsx.snap
similarity index 100%
rename from src/components/list/__test__/__snapshots__/List.test.tsx.snap
rename to src/components/data-display/list/__test__/__snapshots__/List.test.tsx.snap
diff --git a/src/components/list/__test__/__snapshots__/ListHeader.test.tsx.snap b/src/components/data-display/list/__test__/__snapshots__/ListHeader.test.tsx.snap
similarity index 100%
rename from src/components/list/__test__/__snapshots__/ListHeader.test.tsx.snap
rename to src/components/data-display/list/__test__/__snapshots__/ListHeader.test.tsx.snap
diff --git a/src/components/list/__test__/__snapshots__/ListItem.test.tsx.snap b/src/components/data-display/list/__test__/__snapshots__/ListItem.test.tsx.snap
similarity index 100%
rename from src/components/list/__test__/__snapshots__/ListItem.test.tsx.snap
rename to src/components/data-display/list/__test__/__snapshots__/ListItem.test.tsx.snap
diff --git a/src/components/list/index.ts b/src/components/data-display/list/index.ts
similarity index 100%
rename from src/components/list/index.ts
rename to src/components/data-display/list/index.ts
diff --git a/src/components/table/Table.tsx b/src/components/data-display/table/Table.tsx
similarity index 100%
rename from src/components/table/Table.tsx
rename to src/components/data-display/table/Table.tsx
diff --git a/src/components/table/__test__/Table.test.tsx b/src/components/data-display/table/__test__/Table.test.tsx
similarity index 100%
rename from src/components/table/__test__/Table.test.tsx
rename to src/components/data-display/table/__test__/Table.test.tsx
diff --git a/src/components/table/__test__/__snapshots__/Table.test.tsx.snap b/src/components/data-display/table/__test__/__snapshots__/Table.test.tsx.snap
similarity index 100%
rename from src/components/table/__test__/__snapshots__/Table.test.tsx.snap
rename to src/components/data-display/table/__test__/__snapshots__/Table.test.tsx.snap
diff --git a/src/components/table/index.ts b/src/components/data-display/table/index.ts
similarity index 100%
rename from src/components/table/index.ts
rename to src/components/data-display/table/index.ts
diff --git a/src/components/empty/Empty.tsx b/src/components/feedback/empty/Empty.tsx
similarity index 97%
rename from src/components/empty/Empty.tsx
rename to src/components/feedback/empty/Empty.tsx
index e526ca6..d7c25f0 100644
--- a/src/components/empty/Empty.tsx
+++ b/src/components/feedback/empty/Empty.tsx
@@ -1,6 +1,6 @@
 import { Upload } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
-import { Button } from '../button';
+import { Button } from '../../input/button';
 
 export interface EmptyProps {
   icon: JSX.Element;
diff --git a/src/components/empty/__test__/Empty.test.tsx b/src/components/feedback/empty/__test__/Empty.test.tsx
similarity index 100%
rename from src/components/empty/__test__/Empty.test.tsx
rename to src/components/feedback/empty/__test__/Empty.test.tsx
diff --git a/src/components/empty/__test__/__snapshots__/Empty.test.tsx.snap b/src/components/feedback/empty/__test__/__snapshots__/Empty.test.tsx.snap
similarity index 100%
rename from src/components/empty/__test__/__snapshots__/Empty.test.tsx.snap
rename to src/components/feedback/empty/__test__/__snapshots__/Empty.test.tsx.snap
diff --git a/src/components/empty/index.ts b/src/components/feedback/empty/index.ts
similarity index 100%
rename from src/components/empty/index.ts
rename to src/components/feedback/empty/index.ts
diff --git a/src/components/loader/Loader.tsx b/src/components/feedback/loader/Loader.tsx
similarity index 98%
rename from src/components/loader/Loader.tsx
rename to src/components/feedback/loader/Loader.tsx
index daf1930..e844c86 100644
--- a/src/components/loader/Loader.tsx
+++ b/src/components/feedback/loader/Loader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../styles/Loader.css';
+import '../../../styles/Loader.css';
 
 export interface LoaderProps {
   classNameContainer?: string;
diff --git a/src/components/loader/__test__/Loader.test.tsx b/src/components/feedback/loader/__test__/Loader.test.tsx
similarity index 100%
rename from src/components/loader/__test__/Loader.test.tsx
rename to src/components/feedback/loader/__test__/Loader.test.tsx
diff --git a/src/components/loader/__test__/__snapshots__/Loader.test.tsx.snap b/src/components/feedback/loader/__test__/__snapshots__/Loader.test.tsx.snap
similarity index 100%
rename from src/components/loader/__test__/__snapshots__/Loader.test.tsx.snap
rename to src/components/feedback/loader/__test__/__snapshots__/Loader.test.tsx.snap
diff --git a/src/components/loader/index.ts b/src/components/feedback/loader/index.ts
similarity index 100%
rename from src/components/loader/index.ts
rename to src/components/feedback/loader/index.ts
diff --git a/src/components/skeletonLoader/SkeletonLoader.tsx b/src/components/feedback/skeletonLoader/SkeletonLoader.tsx
similarity index 100%
rename from src/components/skeletonLoader/SkeletonLoader.tsx
rename to src/components/feedback/skeletonLoader/SkeletonLoader.tsx
diff --git a/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx b/src/components/feedback/skeletonLoader/__test__/SkeletonLoader.test.tsx
similarity index 96%
rename from src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx
rename to src/components/feedback/skeletonLoader/__test__/SkeletonLoader.test.tsx
index a9fc467..a52d8b9 100644
--- a/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx
+++ b/src/components/feedback/skeletonLoader/__test__/SkeletonLoader.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { SkeletonLoader } from '../../../components/skeletonLoader/';
+import { SkeletonLoader } from '../';
 import { expect, describe, it } from 'vitest';
 
 describe('SkeletonLoader', () => {
diff --git a/src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap b/src/components/feedback/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
similarity index 100%
rename from src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
rename to src/components/feedback/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
diff --git a/src/components/skeletonLoader/index.ts b/src/components/feedback/skeletonLoader/index.ts
similarity index 100%
rename from src/components/skeletonLoader/index.ts
rename to src/components/feedback/skeletonLoader/index.ts
diff --git a/src/components/grid/Grid.tsx b/src/components/grid/Grid.tsx
deleted file mode 100644
index 14c6c6d..0000000
--- a/src/components/grid/Grid.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface GridProps {
-  children?: ReactNode;
-  className?: string;
-  id?: string;
-  dataCy?: string;
-}
-
-/**
- * Grid component
- * 
- * A responsive grid container that automatically adjusts columns from 2 (mobile) up to 6 (extra large screens).
- *
- * @param {GridProps} props - The properties of the component.
- *
- * @property {ReactNode} [children]
- * - The child components or elements to be rendered inside the grid container.
- *
- * @property {string} [className]
- * - Optional custom CSS classes for additional styling or layout adjustments overriding default tailwind classes.
- *
- * @property {string} [id]
- * - Optional ID for the grid container element.
- *
- * @property {string} [dataCy]
- * - Custom data attribute used for e2e Cypress test targeting.
- *
- * @returns {JSX.Element}
- * - A JSX element containing the children formatted inside a grid.
- */
-const Grid = ({ children, className = '', id, dataCy }: Readonly<GridProps>): JSX.Element => {
-  return (
-    <div
-      id={id}
-      data-cy={dataCy}
-      className={`grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 ${className}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default Grid;
diff --git a/src/components/grid/__test__/Grid.test.tsx b/src/components/grid/__test__/Grid.test.tsx
deleted file mode 100644
index bea26fb..0000000
--- a/src/components/grid/__test__/Grid.test.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { Grid } from '../';
-
-describe('Grid component', () => {
-  it('should match snapshot', () => {
-    const { container } = render(<Grid>Snapshot Test</Grid>);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render children correctly', () => {
-    const { getByText } = render(
-      <Grid>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Grid>
-    );
-
-    expect(getByText('Item 1')).toBeInTheDocument();
-    expect(getByText('Item 2')).toBeInTheDocument();
-  });
-
-  it('should apply the default grid classes', () => {
-    const { container } = render(<Grid>Test</Grid>);
-    const gridDiv = container.firstChild as HTMLElement;
-    
-    expect(gridDiv).toHaveClass('grid');
-    expect(gridDiv).toHaveClass('min-w-full');
-    expect(gridDiv).toHaveClass('auto-rows-min');
-    expect(gridDiv).toHaveClass('grid-cols-2');
-  });
-
-  it('should append custom className to the wrapper', () => {
-    const { container } = render(<Grid className="custom-class">Test</Grid>);
-    const gridDiv = container.firstChild as HTMLElement;
-    
-    expect(gridDiv).toHaveClass('custom-class');
-    expect(gridDiv).toHaveClass('grid');
-  });
-
-  it('should assign id and data-cy correctly', () => {
-    const { container } = render(<Grid id="grid-id" dataCy="grid-data-cy">Test</Grid>);
-    const gridDiv = container.firstChild as HTMLElement;
-    
-    expect(gridDiv).toHaveAttribute('id', 'grid-id');
-    expect(gridDiv).toHaveAttribute('data-cy', 'grid-data-cy');
-  });
-});
diff --git a/src/components/grid/__test__/__snapshots__/Grid.test.tsx.snap b/src/components/grid/__test__/__snapshots__/Grid.test.tsx.snap
deleted file mode 100644
index b5603e4..0000000
--- a/src/components/grid/__test__/__snapshots__/Grid.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Grid component > should match snapshot 1`] = `
-<div>
-  <div
-    class="grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 "
-  >
-    Snapshot Test
-  </div>
-</div>
-`;
diff --git a/src/components/grid/index.ts b/src/components/grid/index.ts
deleted file mode 100644
index 81203f7..0000000
--- a/src/components/grid/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Grid } from './Grid';
-export * from './Grid';
diff --git a/src/components/index.ts b/src/components/index.ts
index d4df12e..f59d5b1 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,32 +1,44 @@
-export * from './avatar';
-export * from './baseDialog';
-export * from './breadcrumbs';
-export * from './button';
-export * from './buttonCircle';
-export * from './card';
-export * from './checkbox';
-export * from './contextMenu';
-export * from './copyable';
-export * from './dialog';
-export * from './dropdown';
-export * from './empty';
-export * from './header';
-export * from './infiniteScroll';
-export * from './input';
-export * from './list';
-export * from './loader';
-export * from './menu';
-export * from './modal';
-export * from './modalTransparent';
-export * from './popover';
-export * from './radioButton';
-export * from './skeletonLoader';
-export * from './slider';
-export * from './suiteLauncher';
-export * from './switch';
-export * from './table/Table';
-export * from './textArea';
-export * from './tooltip';
-export * from './sidenav';
+// data-display
+export * from './data-display/avatar';
+export * from './data-display/card';
+export * from './data-display/list';
+export * from './data-display/table/Table';
+
+// feedback
+export * from './feedback/empty';
+export * from './feedback/loader';
+export * from './feedback/skeletonLoader';
+
+// input
+export * from './input/button';
+export * from './input/buttonCircle';
+export * from './input/checkbox';
+export * from './input/copyable';
+export * from './input/input';
+export * from './input/radioButton';
+export * from './input/slider';
+export * from './input/switch';
+export * from './input/textArea';
+
+// layout
+export * from './layout/header';
+export * from './layout/infiniteScroll';
+
+// navigation
+export * from './navigation/breadcrumbs';
+export * from './navigation/dropdown';
+export * from './navigation/menu';
+export * from './navigation/sidenav';
+export * from './navigation/suiteLauncher';
+
+// overlay
+export * from './overlay/baseDialog';
+export * from './overlay/contextMenu';
+export * from './overlay/dialog';
+export * from './overlay/modal';
+export * from './overlay/modalTransparent';
+export * from './overlay/popover';
+export * from './overlay/tooltip';
+
+// mail
 export * from './mail';
-export * from './grid';
diff --git a/src/components/button/Button.tsx b/src/components/input/button/Button.tsx
similarity index 99%
rename from src/components/button/Button.tsx
rename to src/components/input/button/Button.tsx
index ff5e77d..725df47 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/input/button/Button.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import Loader from '../loader/Loader';
+import Loader from '../../feedback/loader/Loader';
 
 export interface ButtonProps {
   id?: string;
diff --git a/src/components/button/__test__/Button.test.tsx b/src/components/input/button/__test__/Button.test.tsx
similarity index 75%
rename from src/components/button/__test__/Button.test.tsx
rename to src/components/input/button/__test__/Button.test.tsx
index 2675a40..cf4b8e7 100644
--- a/src/components/button/__test__/Button.test.tsx
+++ b/src/components/input/button/__test__/Button.test.tsx
@@ -20,13 +20,6 @@ describe('Button component', () => {
     expect(keydown).toHaveBeenCalledOnce();
   });
 
-  it('Button should handle default onClick and onKeyDown without crashing', () => {
-    const { getByRole } = render(<Button />);
-    const button = getByRole('button');
-    fireEvent.click(button);
-    fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
-  });
-
   it('Primary button should render correctly', () => {
     const button = render(<Button variant="primary">Primary</Button>);
     expect(button).toMatchSnapshot();
@@ -101,31 +94,4 @@ describe('Button component', () => {
     const button = render(<Button variant="tertiary" size="medium" />);
     expect(button).toMatchSnapshot();
   });
-
-  it('Destructive loading button should render correctly', () => {
-    const button = render(<Button variant="destructive" loading />);
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Button with id, dataTest, autofocus, buttonDataCy and buttonChildrenDataCy renders correctly', () => {
-    const button = render(
-      <Button
-        variant="primary"
-        id="btn-id"
-        dataTest="btn-test"
-        autofocus
-        buttonDataCy="btn-cy"
-        buttonChildrenDataCy="btn-children-cy"
-      >
-        With Props
-      </Button>,
-    );
-    expect(button).toMatchSnapshot();
-  });
-
-  it('Button with unknown variant should render default styles', () => {
-    // @ts-expect-error testing invalid variant
-    const button = render(<Button variant="unknown">Unknown</Button>);
-    expect(button).toMatchSnapshot();
-  });
 });
diff --git a/src/components/button/__test__/__snapshots__/Button.test.tsx.snap b/src/components/input/button/__test__/__snapshots__/Button.test.tsx.snap
similarity index 82%
rename from src/components/button/__test__/__snapshots__/Button.test.tsx.snap
rename to src/components/input/button/__test__/__snapshots__/Button.test.tsx.snap
index 1550901..2e7bfc0 100644
--- a/src/components/button/__test__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/input/button/__test__/__snapshots__/Button.test.tsx.snap
@@ -1,191 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Button component > Button with id, dataTest, autofocus, buttonDataCy and buttonChildrenDataCy renders correctly 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <button
-        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
-        data-cy="btn-cy"
-        data-test="btn-test"
-        id="btn-id"
-        type="button"
-      >
-        <div
-          class="flex items-center justify-center space-x-2"
-          data-cy="btn-children-cy"
-        >
-          With Props
-        </div>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
-      data-cy="btn-cy"
-      data-test="btn-test"
-      id="btn-id"
-      type="button"
-    >
-      <div
-        class="flex items-center justify-center space-x-2"
-        data-cy="btn-children-cy"
-      >
-        With Props
-      </div>
-    </button>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`Button component > Button with unknown variant should render default styles 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <button
-        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50  "
-        type="button"
-      >
-        <div
-          class="flex items-center justify-center space-x-2"
-        >
-          Unknown
-        </div>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50  "
-      type="button"
-    >
-      <div
-        class="flex items-center justify-center space-x-2"
-      >
-        Unknown
-      </div>
-    </button>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Button component > Destructive button should render correctly 1`] = `
 {
   "asFragment": [Function],
@@ -362,145 +176,6 @@ exports[`Button component > Destructive disabled button should render correctly
 }
 `;
 
-exports[`Button component > Destructive loading button should render correctly 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <button
-        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50 bg-red-dark active:bg-red-dark text-white shadow-sm "
-        disabled=""
-        type="button"
-      >
-        <div>
-          <svg
-            class="animate-spin undefined"
-            fill="none"
-            height="18"
-            role="img"
-            viewBox="0 0 24 24"
-            width="18"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            />
-            <path
-              class="opacity-75"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
-                3 7.938l3-2.647z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <div
-          class="flex items-center justify-center space-x-2"
-        />
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50 bg-red-dark active:bg-red-dark text-white shadow-sm "
-      disabled=""
-      type="button"
-    >
-      <div>
-        <svg
-          class="animate-spin undefined"
-          fill="none"
-          height="18"
-          role="img"
-          viewBox="0 0 24 24"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
-                3 7.938l3-2.647z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="flex items-center justify-center space-x-2"
-      />
-    </button>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`Button component > Ghost button should render correctly 1`] = `
 {
   "asFragment": [Function],
diff --git a/src/components/button/index.ts b/src/components/input/button/index.ts
similarity index 100%
rename from src/components/button/index.ts
rename to src/components/input/button/index.ts
diff --git a/src/components/buttonCircle/CircleButton.tsx b/src/components/input/buttonCircle/CircleButton.tsx
similarity index 100%
rename from src/components/buttonCircle/CircleButton.tsx
rename to src/components/input/buttonCircle/CircleButton.tsx
diff --git a/src/components/buttonCircle/__test__/CircleButton.test.tsx b/src/components/input/buttonCircle/__test__/CircleButton.test.tsx
similarity index 73%
rename from src/components/buttonCircle/__test__/CircleButton.test.tsx
rename to src/components/input/buttonCircle/__test__/CircleButton.test.tsx
index a30ecc5..998b205 100644
--- a/src/components/buttonCircle/__test__/CircleButton.test.tsx
+++ b/src/components/input/buttonCircle/__test__/CircleButton.test.tsx
@@ -134,54 +134,4 @@ describe('CircleButton component', () => {
     const button = render(<CircleButton variant="warning" dropdown={dropdown} />);
     expect(button).toMatchSnapshot();
   });
-
-  it('should close dropdown when toggle is clicked while open', () => {
-    const TestComponent = () => {
-      const [isOpen, setIsOpen] = useState(false);
-      return (
-        <CircleButton
-          dropdown={<div>Dropdown Content</div>}
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          handleOpen={() => setIsOpen(true)}
-        />
-      );
-    };
-    render(<TestComponent />);
-    const toggleButton = screen.getAllByRole('button')[1];
-
-    fireEvent.click(toggleButton);
-    expect(screen.getByText('Dropdown Content')).toBeInTheDocument();
-
-    fireEvent.click(toggleButton);
-    expect(screen.queryByText('Dropdown Content')).not.toBeInTheDocument();
-  });
-
-  it('should render indicator without className correctly', () => {
-    const indicator = { icon: <span data-testid="indicator-icon" /> };
-    render(<CircleButton indicator={indicator} />);
-    expect(screen.getByTestId('indicator-icon')).toBeInTheDocument();
-  });
-
-  it('should not close dropdown when clicking inside the circle button while open', () => {
-    const TestComponent = () => {
-      const [isOpen, setIsOpen] = useState(false);
-      return (
-        <CircleButton
-          dropdown={<div>Dropdown Content</div>}
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          handleOpen={() => setIsOpen(true)}
-        />
-      );
-    };
-    render(<TestComponent />);
-    const [mainButton, toggleButton] = screen.getAllByRole('button');
-
-    fireEvent.click(toggleButton);
-    expect(screen.getByText('Dropdown Content')).toBeInTheDocument();
-
-    fireEvent.click(mainButton);
-    expect(screen.getByText('Dropdown Content')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/buttonCircle/__test__/__snapshots__/CircleButton.test.tsx.snap b/src/components/input/buttonCircle/__test__/__snapshots__/CircleButton.test.tsx.snap
similarity index 100%
rename from src/components/buttonCircle/__test__/__snapshots__/CircleButton.test.tsx.snap
rename to src/components/input/buttonCircle/__test__/__snapshots__/CircleButton.test.tsx.snap
diff --git a/src/components/buttonCircle/index.ts b/src/components/input/buttonCircle/index.ts
similarity index 100%
rename from src/components/buttonCircle/index.ts
rename to src/components/input/buttonCircle/index.ts
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/input/checkbox/Checkbox.tsx
similarity index 96%
rename from src/components/checkbox/Checkbox.tsx
rename to src/components/input/checkbox/Checkbox.tsx
index 8edcbfa..19aab8e 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/input/checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 /// <reference types="vite-plugin-svgr/client" />
-import Check from '../../assets/icons/check.svg?react';
-import Minus from '../../assets/icons/minus.svg?react';
+import Check from '../../../assets/icons/check.svg?react';
+import Minus from '../../../assets/icons/minus.svg?react';
 
 export interface CheckboxProps {
   id?: string;
diff --git a/src/components/input/checkbox/__test__/Checkbox.test.tsx b/src/components/input/checkbox/__test__/Checkbox.test.tsx
new file mode 100644
index 0000000..fa908c4
--- /dev/null
+++ b/src/components/input/checkbox/__test__/Checkbox.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { Checkbox } from '../';
+import { render } from '@testing-library/react';
+
+describe('Checkbox component', () => {
+  it('Checkbox disabled and not checked should render correctly', () => {
+    const button = render(<Checkbox disabled={true} checked={false} />);
+    expect(button).toMatchSnapshot();
+  });
+
+  it('Checkbox enabled and not checked should render correctly', () => {
+    const button = render(<Checkbox checked={false} />);
+    expect(button).toMatchSnapshot();
+  });
+
+  it('Checkbox checked should render correctly', () => {
+    const button = render(<Checkbox checked={true} />);
+    expect(button).toMatchSnapshot();
+  });
+
+  it('Checkbox disabled and checked should render correctly', () => {
+    const button = render(<Checkbox disabled={true} checked={true} />);
+    expect(button).toMatchSnapshot();
+  });
+
+  it('Checkbox enabled and indetermiante should render correctly', () => {
+    const button = render(<Checkbox checked={true} indeterminate={true} />);
+    expect(button).toMatchSnapshot();
+  });
+
+  it('Checkbox disabled and indetermiante should render correctly', () => {
+    const button = render(<Checkbox disabled={true} checked={true} indeterminate={true} />);
+    expect(button).toMatchSnapshot();
+  });
+});
diff --git a/src/components/checkbox/__test__/__snapshots__/Checkbox.test.tsx.snap b/src/components/input/checkbox/__test__/__snapshots__/Checkbox.test.tsx.snap
similarity index 100%
rename from src/components/checkbox/__test__/__snapshots__/Checkbox.test.tsx.snap
rename to src/components/input/checkbox/__test__/__snapshots__/Checkbox.test.tsx.snap
diff --git a/src/components/checkbox/index.ts b/src/components/input/checkbox/index.ts
similarity index 100%
rename from src/components/checkbox/index.ts
rename to src/components/input/checkbox/index.ts
diff --git a/src/components/copyable/Copyable.tsx b/src/components/input/copyable/Copyable.tsx
similarity index 97%
rename from src/components/copyable/Copyable.tsx
rename to src/components/input/copyable/Copyable.tsx
index 578c55b..70289db 100644
--- a/src/components/copyable/Copyable.tsx
+++ b/src/components/input/copyable/Copyable.tsx
@@ -1,6 +1,6 @@
 import { Copy } from '@phosphor-icons/react';
 import { useState } from 'react';
-import Tooltip from '../tooltip/Tooltip';
+import Tooltip from '../../overlay/tooltip/Tooltip';
 
 export interface CopyableProps {
   className?: string;
diff --git a/src/components/copyable/__test__/Copyable.test.tsx b/src/components/input/copyable/__test__/Copyable.test.tsx
similarity index 100%
rename from src/components/copyable/__test__/Copyable.test.tsx
rename to src/components/input/copyable/__test__/Copyable.test.tsx
diff --git a/src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap b/src/components/input/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
similarity index 100%
rename from src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
rename to src/components/input/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
diff --git a/src/components/copyable/index.ts b/src/components/input/copyable/index.ts
similarity index 100%
rename from src/components/copyable/index.ts
rename to src/components/input/copyable/index.ts
diff --git a/src/components/input/Input.tsx b/src/components/input/input/Input.tsx
similarity index 100%
rename from src/components/input/Input.tsx
rename to src/components/input/input/Input.tsx
diff --git a/src/components/input/__test__/Input.test.tsx b/src/components/input/input/__test__/Input.test.tsx
similarity index 95%
rename from src/components/input/__test__/Input.test.tsx
rename to src/components/input/input/__test__/Input.test.tsx
index b1a4877..b459a81 100644
--- a/src/components/input/__test__/Input.test.tsx
+++ b/src/components/input/input/__test__/Input.test.tsx
@@ -209,14 +209,4 @@ describe('Input component', () => {
     const { getByText } = renderInput({ disabled: true });
     expect(getByText('Test Label')).toHaveClass('text-gray-40');
   });
-
-  it('should focus email input without setting selectionStart/End', () => {
-    const { getByRole } = renderInput({ variant: 'email', autofocus: true });
-    expect(getByRole('textbox')).toHaveFocus();
-  });
-
-  it('should show 0 count when maxLength is set and value is undefined', () => {
-    const { getByText } = renderInput({ maxLength: 20, value: undefined });
-    expect(getByText('0/20')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/input/__test__/__snapshots__/Input.test.tsx.snap b/src/components/input/input/__test__/__snapshots__/Input.test.tsx.snap
similarity index 100%
rename from src/components/input/__test__/__snapshots__/Input.test.tsx.snap
rename to src/components/input/input/__test__/__snapshots__/Input.test.tsx.snap
diff --git a/src/components/input/index.ts b/src/components/input/input/index.ts
similarity index 100%
rename from src/components/input/index.ts
rename to src/components/input/input/index.ts
diff --git a/src/components/radioButton/RadioButton.tsx b/src/components/input/radioButton/RadioButton.tsx
similarity index 100%
rename from src/components/radioButton/RadioButton.tsx
rename to src/components/input/radioButton/RadioButton.tsx
diff --git a/src/components/radioButton/__test__/RadioButton.test.tsx b/src/components/input/radioButton/__test__/RadioButton.test.tsx
similarity index 100%
rename from src/components/radioButton/__test__/RadioButton.test.tsx
rename to src/components/input/radioButton/__test__/RadioButton.test.tsx
diff --git a/src/components/radioButton/__test__/__snapshots__/RadioButton.test.tsx.snap b/src/components/input/radioButton/__test__/__snapshots__/RadioButton.test.tsx.snap
similarity index 100%
rename from src/components/radioButton/__test__/__snapshots__/RadioButton.test.tsx.snap
rename to src/components/input/radioButton/__test__/__snapshots__/RadioButton.test.tsx.snap
diff --git a/src/components/radioButton/index.ts b/src/components/input/radioButton/index.ts
similarity index 100%
rename from src/components/radioButton/index.ts
rename to src/components/input/radioButton/index.ts
diff --git a/src/components/slider/RangeSlider.tsx b/src/components/input/slider/RangeSlider.tsx
similarity index 98%
rename from src/components/slider/RangeSlider.tsx
rename to src/components/input/slider/RangeSlider.tsx
index b294713..c05ca41 100644
--- a/src/components/slider/RangeSlider.tsx
+++ b/src/components/input/slider/RangeSlider.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import '../../styles/RangeSlider.css';
+import '../../../styles/RangeSlider.css';
 
 export interface RangeSliderProps {
   value: number;
diff --git a/src/components/slider/__test__/RangeSlider.test.tsx b/src/components/input/slider/__test__/RangeSlider.test.tsx
similarity index 100%
rename from src/components/slider/__test__/RangeSlider.test.tsx
rename to src/components/input/slider/__test__/RangeSlider.test.tsx
diff --git a/src/components/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap b/src/components/input/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap
similarity index 100%
rename from src/components/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap
rename to src/components/input/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap
diff --git a/src/components/slider/index.ts b/src/components/input/slider/index.ts
similarity index 100%
rename from src/components/slider/index.ts
rename to src/components/input/slider/index.ts
diff --git a/src/components/switch/Switch.tsx b/src/components/input/switch/Switch.tsx
similarity index 100%
rename from src/components/switch/Switch.tsx
rename to src/components/input/switch/Switch.tsx
diff --git a/src/components/switch/__test__/Switch.test.tsx b/src/components/input/switch/__test__/Switch.test.tsx
similarity index 100%
rename from src/components/switch/__test__/Switch.test.tsx
rename to src/components/input/switch/__test__/Switch.test.tsx
diff --git a/src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap b/src/components/input/switch/__test__/__snapshots__/Switch.test.tsx.snap
similarity index 100%
rename from src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap
rename to src/components/input/switch/__test__/__snapshots__/Switch.test.tsx.snap
diff --git a/src/components/switch/index.ts b/src/components/input/switch/index.ts
similarity index 100%
rename from src/components/switch/index.ts
rename to src/components/input/switch/index.ts
diff --git a/src/components/textArea/TextArea.tsx b/src/components/input/textArea/TextArea.tsx
similarity index 100%
rename from src/components/textArea/TextArea.tsx
rename to src/components/input/textArea/TextArea.tsx
diff --git a/src/components/textArea/__test__/TextArea.test.tsx b/src/components/input/textArea/__test__/TextArea.test.tsx
similarity index 100%
rename from src/components/textArea/__test__/TextArea.test.tsx
rename to src/components/input/textArea/__test__/TextArea.test.tsx
diff --git a/src/components/textArea/__test__/__snapshots__/TextArea.test.tsx.snap b/src/components/input/textArea/__test__/__snapshots__/TextArea.test.tsx.snap
similarity index 100%
rename from src/components/textArea/__test__/__snapshots__/TextArea.test.tsx.snap
rename to src/components/input/textArea/__test__/__snapshots__/TextArea.test.tsx.snap
diff --git a/src/components/textArea/index.ts b/src/components/input/textArea/index.ts
similarity index 100%
rename from src/components/textArea/index.ts
rename to src/components/input/textArea/index.ts
diff --git a/src/components/header/Header.tsx b/src/components/layout/header/Header.tsx
similarity index 100%
rename from src/components/header/Header.tsx
rename to src/components/layout/header/Header.tsx
diff --git a/src/components/header/__test__/Header.test.tsx b/src/components/layout/header/__test__/Header.test.tsx
similarity index 100%
rename from src/components/header/__test__/Header.test.tsx
rename to src/components/layout/header/__test__/Header.test.tsx
diff --git a/src/components/header/__test__/__snapshots__/Header.test.tsx.snap b/src/components/layout/header/__test__/__snapshots__/Header.test.tsx.snap
similarity index 100%
rename from src/components/header/__test__/__snapshots__/Header.test.tsx.snap
rename to src/components/layout/header/__test__/__snapshots__/Header.test.tsx.snap
diff --git a/src/components/header/index.ts b/src/components/layout/header/index.ts
similarity index 100%
rename from src/components/header/index.ts
rename to src/components/layout/header/index.ts
diff --git a/src/components/infiniteScroll/InfiniteScroll.tsx b/src/components/layout/infiniteScroll/InfiniteScroll.tsx
similarity index 98%
rename from src/components/infiniteScroll/InfiniteScroll.tsx
rename to src/components/layout/infiniteScroll/InfiniteScroll.tsx
index 6c75f6f..b474a92 100644
--- a/src/components/infiniteScroll/InfiniteScroll.tsx
+++ b/src/components/layout/infiniteScroll/InfiniteScroll.tsx
@@ -66,6 +66,8 @@ const InfiniteScroll = ({
           if (hasMoreItems) {
             handleNextPage();
             setShowLoader(true);
+          } else {
+            setShowLoader(false);
           }
         }
       },
diff --git a/src/components/infiniteScroll/__test__/InfiniteScroll.test.tsx b/src/components/layout/infiniteScroll/__test__/InfiniteScroll.test.tsx
similarity index 83%
rename from src/components/infiniteScroll/__test__/InfiniteScroll.test.tsx
rename to src/components/layout/infiniteScroll/__test__/InfiniteScroll.test.tsx
index 8389998..601982e 100644
--- a/src/components/infiniteScroll/__test__/InfiniteScroll.test.tsx
+++ b/src/components/layout/infiniteScroll/__test__/InfiniteScroll.test.tsx
@@ -76,27 +76,6 @@ describe('InfiniteScroll Component', () => {
     await waitFor(() => expect(screen.queryByTestId('loader')).not.toBeInTheDocument());
   });
 
-  it('does not show loader when isIntersecting is true but hasMoreItems is false', async () => {
-    vi.stubGlobal(
-      'IntersectionObserver',
-      vi.fn((callback) => ({
-        observe: () => {
-          callback([{ isIntersecting: true }]);
-        },
-        unobserve: vi.fn(),
-        disconnect: vi.fn(),
-      })),
-    );
-
-    render(
-      <InfiniteScroll handleNextPage={handleNextPage} hasMoreItems={false} loader={loader}>
-        <div>Item 1</div>
-      </InfiniteScroll>
-    );
-
-    await waitFor(() => expect(screen.queryByTestId('loader')).not.toBeInTheDocument());
-  });
-
   it('should call handleNextPage when scrolled to the bottom', async () => {
     renderInfiniteScroll();
 
diff --git a/src/components/infiniteScroll/__test__/__snapshots__/InfiniteScroll.test.tsx.snap b/src/components/layout/infiniteScroll/__test__/__snapshots__/InfiniteScroll.test.tsx.snap
similarity index 100%
rename from src/components/infiniteScroll/__test__/__snapshots__/InfiniteScroll.test.tsx.snap
rename to src/components/layout/infiniteScroll/__test__/__snapshots__/InfiniteScroll.test.tsx.snap
diff --git a/src/components/infiniteScroll/index.ts b/src/components/layout/infiniteScroll/index.ts
similarity index 100%
rename from src/components/infiniteScroll/index.ts
rename to src/components/layout/infiniteScroll/index.ts
diff --git a/src/components/mail/tray/__test__/TrayList.test.tsx b/src/components/mail/tray/__test__/TrayList.test.tsx
index 439fc3c..5396a82 100644
--- a/src/components/mail/tray/__test__/TrayList.test.tsx
+++ b/src/components/mail/tray/__test__/TrayList.test.tsx
@@ -182,18 +182,4 @@ describe('TrayList', () => {
 
     expect(screen.getByText('John Doe')).toBeInTheDocument();
   });
-
-  it('should render without onLoadMore and onMailSelected (using defaults)', () => {
-    render(<TrayList mails={mockMails} loading={false} />);
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-  });
-
-  it('calls default onMailSelected and onLoadMore functions safely', () => {
-    const { getAllByRole } = render(
-      <TrayList mails={mockMails} loading={false} />
-    );
-    
-    const emailButtons = getAllByRole('button');
-    expect(() => fireEvent.click(emailButtons[0])).not.toThrow();
-  });
 });
diff --git a/src/components/breadcrumbs/Breadcrumbs.tsx b/src/components/navigation/breadcrumbs/Breadcrumbs.tsx
similarity index 100%
rename from src/components/breadcrumbs/Breadcrumbs.tsx
rename to src/components/navigation/breadcrumbs/Breadcrumbs.tsx
diff --git a/src/components/breadcrumbs/BreadcrumbsItem.tsx b/src/components/navigation/breadcrumbs/BreadcrumbsItem.tsx
similarity index 100%
rename from src/components/breadcrumbs/BreadcrumbsItem.tsx
rename to src/components/navigation/breadcrumbs/BreadcrumbsItem.tsx
diff --git a/src/components/breadcrumbs/__test__/Breadcrumbs.test.tsx b/src/components/navigation/breadcrumbs/__test__/Breadcrumbs.test.tsx
similarity index 78%
rename from src/components/breadcrumbs/__test__/Breadcrumbs.test.tsx
rename to src/components/navigation/breadcrumbs/__test__/Breadcrumbs.test.tsx
index fb40cca..8963d9c 100644
--- a/src/components/breadcrumbs/__test__/Breadcrumbs.test.tsx
+++ b/src/components/navigation/breadcrumbs/__test__/Breadcrumbs.test.tsx
@@ -85,29 +85,13 @@ describe('Breadcrumbs Component', () => {
     expect(separators).toHaveLength(3);
   });
 
-  it('renders a dropdown menu with functionally hidden items for lists larger than 3 components', async () => {
-    const fiveItemsProps = {
-      ...mockProps,
-      items: [
-        ...mockProps.items,
-        { uuid: '5', label: 'Details', icon: null, active: true },
-      ],
-    };
-
-    const { getByRole, getByText } = render(
-      <DndProvider backend={HTML5Backend}>
-        <Breadcrumbs {...fiveItemsProps} />
-      </DndProvider>
-    );
-
+  it('opens the dropdown menu when clicked', async () => {
+    const { getByRole, getByText } = renderBreadcrumbs();
     const dropdownButton = getByRole('button');
     await act(async () => {
       userEvent.click(dropdownButton);
     });
-
-    const hiddenItemCategory = getByText('Category');
-    const hiddenItemSubcategory = getByText('Subcategory');
-    expect(hiddenItemCategory).toBeInTheDocument();
-    expect(hiddenItemSubcategory).toBeInTheDocument();
+    const hiddenItem = getByText('Subcategory');
+    expect(hiddenItem).toBeInTheDocument();
   });
 });
diff --git a/src/components/breadcrumbs/__test__/BreadcrumbsItem.test.tsx b/src/components/navigation/breadcrumbs/__test__/BreadcrumbsItem.test.tsx
similarity index 89%
rename from src/components/breadcrumbs/__test__/BreadcrumbsItem.test.tsx
rename to src/components/navigation/breadcrumbs/__test__/BreadcrumbsItem.test.tsx
index eff10dc..ea3fc5c 100644
--- a/src/components/breadcrumbs/__test__/BreadcrumbsItem.test.tsx
+++ b/src/components/navigation/breadcrumbs/__test__/BreadcrumbsItem.test.tsx
@@ -129,16 +129,4 @@ describe('BreadcrumbsItem Component', () => {
     const { getByTestId } = renderBreadcrumbsItem({ itemComponent: ItemComponentMock });
     expect(getByTestId('custom-icon')).toBeInTheDocument();
   });
-
-  it('applies first path styling when isFirstPath is true', () => {
-    const firstPathItem = { ...breadcrumbItem, isFirstPath: true };
-    const { getByText } = renderBreadcrumbsItem({ item: firstPathItem, totalBreadcrumbsLength: 1 });
-    expect(getByText('Item 1').parentElement).toHaveClass('shrink-0 pr-1');
-  });
-
-  it('renders gracefully when label is not provided', () => {
-    const noLabelItem = { ...breadcrumbItem, label: '' };
-    const { container } = renderBreadcrumbsItem({ item: noLabelItem });
-    expect(container).toBeInTheDocument();
-  });
 });
diff --git a/src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap b/src/components/navigation/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
similarity index 100%
rename from src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
rename to src/components/navigation/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
diff --git a/src/components/breadcrumbs/__test__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/src/components/navigation/breadcrumbs/__test__/__snapshots__/BreadcrumbsItem.test.tsx.snap
similarity index 100%
rename from src/components/breadcrumbs/__test__/__snapshots__/BreadcrumbsItem.test.tsx.snap
rename to src/components/navigation/breadcrumbs/__test__/__snapshots__/BreadcrumbsItem.test.tsx.snap
diff --git a/src/components/breadcrumbs/index.ts b/src/components/navigation/breadcrumbs/index.ts
similarity index 100%
rename from src/components/breadcrumbs/index.ts
rename to src/components/navigation/breadcrumbs/index.ts
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/navigation/dropdown/Dropdown.tsx
similarity index 98%
rename from src/components/dropdown/Dropdown.tsx
rename to src/components/navigation/dropdown/Dropdown.tsx
index 9e45483..250d910 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/navigation/dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import { useState, ReactNode, useEffect, useRef } from 'react';
-import { Menu, MenuItemType } from '../';
+import { Menu, MenuItemType } from '../menu';
 
 export type DropdownProps<T> = {
   children: ReactNode | ((obj: { open: boolean }) => JSX.Element);
diff --git a/src/components/dropdown/__test__/Dropdown.test.tsx b/src/components/navigation/dropdown/__test__/Dropdown.test.tsx
similarity index 64%
rename from src/components/dropdown/__test__/Dropdown.test.tsx
rename to src/components/navigation/dropdown/__test__/Dropdown.test.tsx
index f8ad83c..bfb64ad 100644
--- a/src/components/dropdown/__test__/Dropdown.test.tsx
+++ b/src/components/navigation/dropdown/__test__/Dropdown.test.tsx
@@ -155,85 +155,4 @@ describe('Dropdown component', () => {
     const menu = getByTestId('menu-dropdown');
     expect(menu).toHaveClass('scale-95 opacity-0');
   });
-
-  it('should extract padding values and open to the right', () => {
-    const { getByTestId } = render(
-      <Dropdown openDirection="right" classMenuItems="px-4 py-2">
-        Dropdown
-      </Dropdown>,
-    );
-    const menu = getByTestId('menu-dropdown');
-    expect(menu).toHaveClass('right-0');
-  });
-
-  it('should handle undefined options and dropdownActionsContext, and render menuItems', () => {
-    const { getByRole, getByText } = render(
-      <Dropdown openDirection="left" classMenuItems="menu" menuItems={[<div key="item-1">Custom Item</div>]}>
-        Dropdown
-      </Dropdown>,
-    );
-
-    fireEvent.click(getByRole('button'));
-    expect(getByText('Custom Item')).toBeInTheDocument();
-  });
-
-  it('should handle children as a function', () => {
-    const { getByRole, getByText } = render(
-      <Dropdown openDirection="left" classMenuItems="">
-        {({ open }) => <span>{open ? 'Close' : 'Open'}</span>}
-      </Dropdown>,
-    );
-
-    expect(getByText('Open')).toBeInTheDocument();
-    fireEvent.click(getByRole('button'));
-    expect(getByText('Close')).toBeInTheDocument();
-  });
-
-  it('should close when clicking outside', () => {
-    const { getByRole, getByTestId } = renderDropdown();
-    const button = getByRole('button');
-    const menu = getByTestId('menu-dropdown');
-
-    fireEvent.click(button);
-    expect(menu).toHaveClass('opacity-100');
-
-    fireEvent.mouseDown(document.body);
-    expect(menu).toHaveClass('opacity-0');
-  });
-
-  it('should not close when mousedown fires inside the dropdown container', () => {
-    const { getByRole, getByTestId } = renderDropdown();
-    const button = getByRole('button');
-    const menu = getByTestId('menu-dropdown');
-
-    fireEvent.click(button);
-    expect(menu).toHaveClass('opacity-100');
-
-    fireEvent.mouseDown(button);
-    expect(menu).toHaveClass('opacity-100');
-  });
-
-  it('should close when right-clicking outside the dropdown', async () => {
-    const { getByRole, getByTestId } = renderDropdown();
-    const button = getByRole('button');
-    const menu = getByTestId('menu-dropdown');
-
-    fireEvent.click(button);
-    expect(menu).toHaveClass('opacity-100');
-
-    fireEvent.contextMenu(document.body);
-    await waitFor(() => expect(menu).toHaveClass('opacity-0'));
-  });
-
-  it('should render correctly when options, menuItems, and dropdownActionsContext are all undefined', () => {
-    const { getByRole, getByTestId } = render(
-      <Dropdown openDirection="left" classMenuItems="menu" classButton="button">
-        Dropdown
-      </Dropdown>,
-    );
-
-    fireEvent.click(getByRole('button'));
-    const menu = getByTestId('menu-dropdown');
-    expect(menu).toHaveClass('scale-100');
-  });
 });
diff --git a/src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap b/src/components/navigation/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
similarity index 100%
rename from src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
rename to src/components/navigation/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
diff --git a/src/components/dropdown/index.ts b/src/components/navigation/dropdown/index.ts
similarity index 100%
rename from src/components/dropdown/index.ts
rename to src/components/navigation/dropdown/index.ts
diff --git a/src/components/menu/Menu.tsx b/src/components/navigation/menu/Menu.tsx
similarity index 99%
rename from src/components/menu/Menu.tsx
rename to src/components/navigation/menu/Menu.tsx
index 7444507..97f0e67 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/navigation/menu/Menu.tsx
@@ -1,5 +1,5 @@
 import { isValidElement, ReactNode, useEffect, useState } from 'react';
-import useHotkeys from '../../hooks/useHotKeys';
+import useHotkeys from '../../../hooks/useHotKeys';
 
 export type MenuItemType<T> =
   | { separator: true }
diff --git a/src/components/menu/__test__/Menu.test.tsx b/src/components/navigation/menu/__test__/Menu.test.tsx
similarity index 54%
rename from src/components/menu/__test__/Menu.test.tsx
rename to src/components/navigation/menu/__test__/Menu.test.tsx
index 8c62fc3..3297be0 100644
--- a/src/components/menu/__test__/Menu.test.tsx
+++ b/src/components/navigation/menu/__test__/Menu.test.tsx
@@ -126,99 +126,4 @@ describe('Menu Component', () => {
 
     expect(option1).toHaveClass('bg-gray-5');
   });
-
-  it('triggers onClick on node item when Enter is pressed', () => {
-    const nodeClick = vi.fn();
-    const menuWithNode: Array<MenuItemType<{ id: number; name: string }>> = [
-      { node: <button onClick={nodeClick}>Node Item</button> },
-    ];
-    render(<Menu {...defaultProps} menu={menuWithNode} />);
-    fireEvent.keyDown(document, { key: 'ArrowDown' });
-    fireEvent.keyDown(document, { key: 'Enter' });
-    expect(nodeClick).toHaveBeenCalled();
-  });
-
-  it('handles node item without onClick on Enter press without errors', () => {
-    const menuWithNode: Array<MenuItemType<{ id: number; name: string }>> = [
-      { node: <span>No Click Node</span> },
-    ];
-    render(<Menu {...defaultProps} menu={menuWithNode} />);
-    fireEvent.keyDown(document, { key: 'ArrowDown' });
-    fireEvent.keyDown(document, { key: 'Enter' });
-    expect(handleMenuClose).toHaveBeenCalled();
-  });
-
-  it('calls onClick handler on item click when defined', () => {
-    const onClickHandler = vi.fn();
-    const menuWithOnClick: Array<MenuItemType<{ id: number; name: string }>> = [
-      { name: 'Clickable', onClick: onClickHandler },
-    ];
-    const { getByText } = render(<Menu {...defaultProps} menu={menuWithOnClick} />);
-    fireEvent.click(getByText('Clickable'));
-    expect(onClickHandler).toHaveBeenCalled();
-  });
-
-  it('renders keyboard shortcut icon when provided', () => {
-    const menuWithShortcutIcon: Array<MenuItemType<{ id: number; name: string }>> = [
-      {
-        name: 'With Icon Shortcut',
-        action: vi.fn(),
-        keyboardShortcutOptions: {
-          keyboardShortcutIcon: MockIcon,
-          keyboardShortcutText: 'Ctrl+S',
-        },
-      },
-    ];
-    const { getByText, getAllByTestId } = render(<Menu {...defaultProps} menu={menuWithShortcutIcon} />);
-    expect(getByText('Ctrl+S')).toBeInTheDocument();
-    expect(getAllByTestId('mock-icon').length).toBeGreaterThan(0);
-  });
-
-  it('renders keyboard shortcut options without text', () => {
-    const menuWithIconOnly: Array<MenuItemType<{ id: number; name: string }>> = [
-      {
-        name: 'Icon Only Shortcut',
-        action: vi.fn(),
-        keyboardShortcutOptions: {
-          keyboardShortcutIcon: MockIcon,
-        },
-      },
-    ];
-    const { getByText } = render(<Menu {...defaultProps} menu={menuWithIconOnly} />);
-    expect(getByText('Icon Only Shortcut')).toBeInTheDocument();
-  });
-
-  it('handles Enter with no selection and no genericEnterKey without errors', () => {
-    const menuWithItem: Array<MenuItemType<{ id: number; name: string }>> = [
-      { name: 'Item', action: vi.fn() },
-    ];
-    render(
-      <Menu
-        item={{ id: 1, name: 'Sample' }}
-        menu={menuWithItem}
-        isOpen={true}
-        handleMenuClose={handleMenuClose}
-      />,
-    );
-    fireEvent.keyDown(document, { key: 'Enter' });
-    expect(handleMenuClose).toHaveBeenCalled();
-  });
-
-  it('returns null from ArrowUp when all items are unclickable', () => {
-    const allDisabledMenu: Array<MenuItemType<{ id: number; name: string }>> = [
-      { separator: true },
-      { name: 'Disabled', disabled: () => true },
-    ];
-    render(<Menu {...defaultProps} menu={allDisabledMenu} />);
-    fireEvent.keyDown(document, { key: 'ArrowUp' });
-  });
-
-  it('returns null from ArrowDown when all items are unclickable', () => {
-    const allDisabledMenu: Array<MenuItemType<{ id: number; name: string }>> = [
-      { separator: true },
-      { name: 'Disabled', disabled: () => true },
-    ];
-    render(<Menu {...defaultProps} menu={allDisabledMenu} />);
-    fireEvent.keyDown(document, { key: 'ArrowDown' });
-  });
 });
diff --git a/src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap b/src/components/navigation/menu/__test__/__snapshots__/Menu.test.tsx.snap
similarity index 100%
rename from src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap
rename to src/components/navigation/menu/__test__/__snapshots__/Menu.test.tsx.snap
diff --git a/src/components/menu/index.ts b/src/components/navigation/menu/index.ts
similarity index 100%
rename from src/components/menu/index.ts
rename to src/components/navigation/menu/index.ts
diff --git a/src/components/sidenav/Sidenav.tsx b/src/components/navigation/sidenav/Sidenav.tsx
similarity index 100%
rename from src/components/sidenav/Sidenav.tsx
rename to src/components/navigation/sidenav/Sidenav.tsx
diff --git a/src/components/sidenav/SidenavHeader.tsx b/src/components/navigation/sidenav/SidenavHeader.tsx
similarity index 100%
rename from src/components/sidenav/SidenavHeader.tsx
rename to src/components/navigation/sidenav/SidenavHeader.tsx
diff --git a/src/components/sidenav/SidenavItem.tsx b/src/components/navigation/sidenav/SidenavItem.tsx
similarity index 100%
rename from src/components/sidenav/SidenavItem.tsx
rename to src/components/navigation/sidenav/SidenavItem.tsx
diff --git a/src/components/sidenav/SidenavOptions.tsx b/src/components/navigation/sidenav/SidenavOptions.tsx
similarity index 100%
rename from src/components/sidenav/SidenavOptions.tsx
rename to src/components/navigation/sidenav/SidenavOptions.tsx
diff --git a/src/components/sidenav/SidenavStorage.tsx b/src/components/navigation/sidenav/SidenavStorage.tsx
similarity index 100%
rename from src/components/sidenav/SidenavStorage.tsx
rename to src/components/navigation/sidenav/SidenavStorage.tsx
diff --git a/src/components/sidenav/__test__/Sidenav.test.tsx b/src/components/navigation/sidenav/__test__/Sidenav.test.tsx
similarity index 88%
rename from src/components/sidenav/__test__/Sidenav.test.tsx
rename to src/components/navigation/sidenav/__test__/Sidenav.test.tsx
index f7c759e..0c6e7e4 100644
--- a/src/components/sidenav/__test__/Sidenav.test.tsx
+++ b/src/components/navigation/sidenav/__test__/Sidenav.test.tsx
@@ -287,45 +287,4 @@ describe('Sidenav Component', () => {
       expect(onToggleCollapse).toHaveBeenCalled();
     });
   });
-
-  it('renders storage without upgradeLabel', () => {
-    const { queryByText } = renderSidenav({
-      storage: {
-        usage: '1 GB',
-        limit: '5 GB',
-        percentage: 20,
-        onUpgradeClick: vi.fn(),
-        isLoading: false,
-      },
-    });
-    expect(queryByText('1 GB')).toBeInTheDocument();
-    expect(queryByText('Upgrade')).not.toBeInTheDocument();
-  });
-
-  it('renders storage with default isLoading (shows skeleton)', () => {
-    const { container, queryByText } = renderSidenav({
-      storage: {
-        usage: '1 GB',
-        limit: '5 GB',
-        percentage: 20,
-        onUpgradeClick: vi.fn(),
-      },
-    });
-    expect(queryByText('1 GB')).not.toBeInTheDocument();
-    const skeletons = container.querySelectorAll('.animate-pulse');
-    expect(skeletons.length).toBeGreaterThan(0);
-  });
-
-  it('renders header with suiteLauncher', () => {
-    const MockIcon = React.forwardRef<SVGSVGElement, { size?: number | string }>(({ size = 20 }, ref) => (
-      <svg ref={ref} width={size} height={size} />
-    ));
-    const { getByTestId } = renderSidenav({
-      suiteLauncher: {
-        suiteArray: [{ icon: <MockIcon />, title: 'Drive', onClick: vi.fn() }],
-        soonText: 'Soon',
-      },
-    });
-    expect(getByTestId('popover-button')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap b/src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
similarity index 100%
rename from src/components/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
rename to src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
diff --git a/src/components/sidenav/index.ts b/src/components/navigation/sidenav/index.ts
similarity index 100%
rename from src/components/sidenav/index.ts
rename to src/components/navigation/sidenav/index.ts
diff --git a/src/components/suiteLauncher/SuiteLauncher.tsx b/src/components/navigation/suiteLauncher/SuiteLauncher.tsx
similarity index 98%
rename from src/components/suiteLauncher/SuiteLauncher.tsx
rename to src/components/navigation/suiteLauncher/SuiteLauncher.tsx
index 22e84aa..fbf5888 100644
--- a/src/components/suiteLauncher/SuiteLauncher.tsx
+++ b/src/components/navigation/suiteLauncher/SuiteLauncher.tsx
@@ -1,6 +1,6 @@
 import { DotsNineIcon, LockIcon } from '@phosphor-icons/react';
 import { cloneElement, isValidElement } from 'react';
-import { Popover } from '../popover';
+import { Popover } from '../../overlay/popover';
 
 export interface SuiteLauncherProps {
   className?: string;
diff --git a/src/components/suiteLauncher/__test__/SuiteLauncher.test.tsx b/src/components/navigation/suiteLauncher/__test__/SuiteLauncher.test.tsx
similarity index 72%
rename from src/components/suiteLauncher/__test__/SuiteLauncher.test.tsx
rename to src/components/navigation/suiteLauncher/__test__/SuiteLauncher.test.tsx
index 433d62c..1c4d986 100644
--- a/src/components/suiteLauncher/__test__/SuiteLauncher.test.tsx
+++ b/src/components/navigation/suiteLauncher/__test__/SuiteLauncher.test.tsx
@@ -59,27 +59,4 @@ describe('SuiteLauncher', () => {
     fireEvent.click(screen.getByText('App 3'));
     expect(onClick3).toHaveBeenCalled();
   });
-
-  it('shows default "Soon" text when soonText is not provided', () => {
-    const suiteArray = [
-      { icon: <span />, title: 'App Soon', onClick: vi.fn(), availableSoon: true },
-    ];
-    render(<SuiteLauncher suiteArray={suiteArray} />);
-    fireEvent.click(screen.getByTestId('popover-button'));
-    expect(screen.getByText('Soon')).toBeInTheDocument();
-  });
-
-  it('renders non-JSX icon as-is when it is not a valid React element', () => {
-    const suiteArray = [
-      { icon: 'not-an-element' as any, title: 'App Raw', onClick: vi.fn() },
-    ];
-    render(<SuiteLauncher suiteArray={suiteArray} />);
-    fireEvent.click(screen.getByTestId('popover-button'));
-    expect(screen.getByText('App Raw')).toBeInTheDocument();
-  });
-
-  it('renders with align left', () => {
-    render(<SuiteLauncher suiteArray={[]} align="left" />);
-    expect(screen.getByTestId('popover-button')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/suiteLauncher/__test__/__snapshots__/SuiteLauncher.test.tsx.snap b/src/components/navigation/suiteLauncher/__test__/__snapshots__/SuiteLauncher.test.tsx.snap
similarity index 100%
rename from src/components/suiteLauncher/__test__/__snapshots__/SuiteLauncher.test.tsx.snap
rename to src/components/navigation/suiteLauncher/__test__/__snapshots__/SuiteLauncher.test.tsx.snap
diff --git a/src/components/suiteLauncher/index.ts b/src/components/navigation/suiteLauncher/index.ts
similarity index 100%
rename from src/components/suiteLauncher/index.ts
rename to src/components/navigation/suiteLauncher/index.ts
diff --git a/src/components/baseDialog/BaseDialog.tsx b/src/components/overlay/baseDialog/BaseDialog.tsx
similarity index 92%
rename from src/components/baseDialog/BaseDialog.tsx
rename to src/components/overlay/baseDialog/BaseDialog.tsx
index 0b44855..c75349f 100644
--- a/src/components/baseDialog/BaseDialog.tsx
+++ b/src/components/overlay/baseDialog/BaseDialog.tsx
@@ -79,15 +79,17 @@ const BaseDialog = ({
   return (
     <div
       data-test={dataTest}
-      className={`${isOpen ? 'flex' : 'hidden'} ${classes || ''
-        } absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`}
+      className={`${isOpen ? 'flex' : 'hidden'} ${
+        classes || ''
+      } absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`}
     >
       <div
         className={`${panelClasses || ''} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
-        -translate-y-1/2 flex-col overflow-hidden  ${dialogRounded ? 'rounded-2xl' : 'rounded-lg pt-8'} text-gray-100 ${bgColor || 'bg-surface'
-          }`}
+        -translate-y-1/2 flex-col overflow-hidden  ${dialogRounded ? 'rounded-2xl' : 'rounded-lg pt-8'} text-gray-100 ${
+          bgColor || 'bg-surface'
+        }`}
       >
-        <div className={`${subTitle ? 'justify-between bg-gray-1' : ''} p-5 flex flex-row items-start`}>
+        <div className={`${subTitle ? 'justify-between bg-gray-1 p-5' : ''} flex flex-row items-start`}>
           {title ? (
             <div className="relative flex max-w-full flex-1 flex-col truncate">
               <span className={`${titleClasses || ''} truncate text-xl`} title={title}>
diff --git a/src/components/baseDialog/__test__/BaseDialog.test.tsx b/src/components/overlay/baseDialog/__test__/BaseDialog.test.tsx
similarity index 100%
rename from src/components/baseDialog/__test__/BaseDialog.test.tsx
rename to src/components/overlay/baseDialog/__test__/BaseDialog.test.tsx
diff --git a/src/components/baseDialog/__test__/__snapshots__/BaseDialog.test.tsx.snap b/src/components/overlay/baseDialog/__test__/__snapshots__/BaseDialog.test.tsx.snap
similarity index 100%
rename from src/components/baseDialog/__test__/__snapshots__/BaseDialog.test.tsx.snap
rename to src/components/overlay/baseDialog/__test__/__snapshots__/BaseDialog.test.tsx.snap
diff --git a/src/components/baseDialog/index.ts b/src/components/overlay/baseDialog/index.ts
similarity index 100%
rename from src/components/baseDialog/index.ts
rename to src/components/overlay/baseDialog/index.ts
diff --git a/src/components/contextMenu/ContextMenu.tsx b/src/components/overlay/contextMenu/ContextMenu.tsx
similarity index 97%
rename from src/components/contextMenu/ContextMenu.tsx
rename to src/components/overlay/contextMenu/ContextMenu.tsx
index 774474f..9fa8ead 100644
--- a/src/components/contextMenu/ContextMenu.tsx
+++ b/src/components/overlay/contextMenu/ContextMenu.tsx
@@ -1,4 +1,4 @@
-import Menu, { MenuItemsType } from '../menu/Menu';
+import Menu, { MenuItemsType } from '../../navigation/menu/Menu';
 
 const MENU_BUTTON_HEIGHT = 40;
 
diff --git a/src/components/contextMenu/__test__/ContextMenu.test.tsx b/src/components/overlay/contextMenu/__test__/ContextMenu.test.tsx
similarity index 82%
rename from src/components/contextMenu/__test__/ContextMenu.test.tsx
rename to src/components/overlay/contextMenu/__test__/ContextMenu.test.tsx
index b485503..03f0524 100644
--- a/src/components/contextMenu/__test__/ContextMenu.test.tsx
+++ b/src/components/overlay/contextMenu/__test__/ContextMenu.test.tsx
@@ -96,22 +96,4 @@ describe('ContextMenu Component', () => {
     if (menuItem && 'action' in menuItem) expect(menuItem?.action).toHaveBeenCalledWith(props.item);
     expect(props.handleMenuClose).toHaveBeenCalled();
   });
-
-  it('positions menu at bottom when isContextMenuCutOff is true and not from right click', () => {
-    const { container } = render(
-      <ContextMenu {...props} openedFromRightClick={false} isContextMenuCutOff={true} />,
-    );
-    const outerDiv = container.firstChild as HTMLElement;
-    expect(outerDiv.style.bottom).toBe('40px');
-    expect(outerDiv.style.top).toBe('');
-  });
-
-  it('positions menu at top when isContextMenuCutOff is false and not from right click', () => {
-    const { container } = render(
-      <ContextMenu {...props} openedFromRightClick={false} isContextMenuCutOff={false} />,
-    );
-    const outerDiv = container.firstChild as HTMLElement;
-    expect(outerDiv.style.top).toBe('40px');
-    expect(outerDiv.style.bottom).toBe('');
-  });
 });
diff --git a/src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap b/src/components/overlay/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
similarity index 100%
rename from src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
rename to src/components/overlay/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
diff --git a/src/components/contextMenu/index.ts b/src/components/overlay/contextMenu/index.ts
similarity index 100%
rename from src/components/contextMenu/index.ts
rename to src/components/overlay/contextMenu/index.ts
diff --git a/src/components/dialog/Dialog.tsx b/src/components/overlay/dialog/Dialog.tsx
similarity index 99%
rename from src/components/dialog/Dialog.tsx
rename to src/components/overlay/dialog/Dialog.tsx
index 658f499..0847619 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/src/components/overlay/dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { Button } from '../';
+import { Button } from '../../input/button';
 
 export interface DialogProps {
   isOpen: boolean;
diff --git a/src/components/dialog/__test__/Dialog.test.tsx b/src/components/overlay/dialog/__test__/Dialog.test.tsx
similarity index 82%
rename from src/components/dialog/__test__/Dialog.test.tsx
rename to src/components/overlay/dialog/__test__/Dialog.test.tsx
index 0901048..29a017c 100644
--- a/src/components/dialog/__test__/Dialog.test.tsx
+++ b/src/components/overlay/dialog/__test__/Dialog.test.tsx
@@ -51,27 +51,6 @@ describe('Dialog', () => {
     expect(defaultProps.onClose).toHaveBeenCalled();
   });
 
-  it('does not call onClose when pressing other keys', () => {
-    renderDialog();
-    fireEvent.keyDown(window, { key: 'Enter' });
-    expect(defaultProps.onClose).not.toHaveBeenCalled();
-  });
-
-  it('handles timeouts correctly on active transition states', () => {
-    vi.useFakeTimers();
-    const { rerender } = renderDialog({ isOpen: false });
-
-    vi.runAllTimers();
-
-    rerender(<Dialog {...defaultProps} isOpen={true} />);
-    vi.runAllTimers();
-
-    rerender(<Dialog {...defaultProps} isOpen={false} />);
-    vi.runAllTimers();
-
-    vi.useRealTimers();
-  });
-
   it('calls onPrimaryAction when clicking the primary button', () => {
     const { getByText } = renderDialog();
     fireEvent.click(getByText(defaultProps.primaryAction));
diff --git a/src/components/dialog/__test__/__snapshots__/Dialog.test.tsx.snap b/src/components/overlay/dialog/__test__/__snapshots__/Dialog.test.tsx.snap
similarity index 100%
rename from src/components/dialog/__test__/__snapshots__/Dialog.test.tsx.snap
rename to src/components/overlay/dialog/__test__/__snapshots__/Dialog.test.tsx.snap
diff --git a/src/components/dialog/index.ts b/src/components/overlay/dialog/index.ts
similarity index 100%
rename from src/components/dialog/index.ts
rename to src/components/overlay/dialog/index.ts
diff --git a/src/components/modal/Modal.tsx b/src/components/overlay/modal/Modal.tsx
similarity index 100%
rename from src/components/modal/Modal.tsx
rename to src/components/overlay/modal/Modal.tsx
diff --git a/src/components/modal/__test__/Modal.test.tsx b/src/components/overlay/modal/__test__/Modal.test.tsx
similarity index 100%
rename from src/components/modal/__test__/Modal.test.tsx
rename to src/components/overlay/modal/__test__/Modal.test.tsx
diff --git a/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap b/src/components/overlay/modal/__test__/__snapshots__/Modal.test.tsx.snap
similarity index 100%
rename from src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
rename to src/components/overlay/modal/__test__/__snapshots__/Modal.test.tsx.snap
diff --git a/src/components/modal/index.ts b/src/components/overlay/modal/index.ts
similarity index 100%
rename from src/components/modal/index.ts
rename to src/components/overlay/modal/index.ts
diff --git a/src/components/modalTransparent/TransparentModal.tsx b/src/components/overlay/modalTransparent/TransparentModal.tsx
similarity index 100%
rename from src/components/modalTransparent/TransparentModal.tsx
rename to src/components/overlay/modalTransparent/TransparentModal.tsx
diff --git a/src/components/modalTransparent/__test__/TransparentModal.test.tsx b/src/components/overlay/modalTransparent/__test__/TransparentModal.test.tsx
similarity index 94%
rename from src/components/modalTransparent/__test__/TransparentModal.test.tsx
rename to src/components/overlay/modalTransparent/__test__/TransparentModal.test.tsx
index 1d277f3..246e801 100644
--- a/src/components/modalTransparent/__test__/TransparentModal.test.tsx
+++ b/src/components/overlay/modalTransparent/__test__/TransparentModal.test.tsx
@@ -130,11 +130,4 @@ describe('TransparentModal Component', () => {
     const container = document.querySelector('.fixed.inset-0.z-50');
     expect(container).toHaveClass('pointer-events-none');
   });
-
-  it('should not call onClose when clicking inside the modal content', () => {
-    renderTransparentModal();
-    const modalContent = screen.getByText('Modal Content');
-    fireEvent.mouseDown(modalContent);
-    expect(onCloseMock).not.toHaveBeenCalled();
-  });
 });
diff --git a/src/components/modalTransparent/__test__/__snapshots__/TransparentModal.test.tsx.snap b/src/components/overlay/modalTransparent/__test__/__snapshots__/TransparentModal.test.tsx.snap
similarity index 100%
rename from src/components/modalTransparent/__test__/__snapshots__/TransparentModal.test.tsx.snap
rename to src/components/overlay/modalTransparent/__test__/__snapshots__/TransparentModal.test.tsx.snap
diff --git a/src/components/modalTransparent/index.ts b/src/components/overlay/modalTransparent/index.ts
similarity index 100%
rename from src/components/modalTransparent/index.ts
rename to src/components/overlay/modalTransparent/index.ts
diff --git a/src/components/popover/Popover.tsx b/src/components/overlay/popover/Popover.tsx
similarity index 78%
rename from src/components/popover/Popover.tsx
rename to src/components/overlay/popover/Popover.tsx
index ff95e2c..c9879a8 100644
--- a/src/components/popover/Popover.tsx
+++ b/src/components/overlay/popover/Popover.tsx
@@ -7,13 +7,8 @@ export interface PopoverProps {
   className?: string;
   classButton?: string;
   align?: 'left' | 'right';
-  direction?: 'up' | 'down';
 }
 
-const originMap: Record<'up' | 'down', Record<'left' | 'right', string>> = {
-  up: { left: 'origin-bottom-right', right: 'origin-bottom-left' },
-  down: { left: 'origin-top-right', right: 'origin-top-left' },
-};
 /**
  * Popover component
  *
@@ -30,19 +25,12 @@ const originMap: Record<'up' | 'down', Record<'left' | 'right', string>> = {
  *
  * @property {string} [classButton]
  * - Custom classes for the trigger button.
- * 
- * @property {'left' | 'right'} [align='right']
- * - The alignment of the popover panel relative to the trigger button.
- * 
- * @property {'up' | 'down'} [direction='down']
- * - The direction of the popover panel relative to the trigger button.
- * 
+ *
  * @returns {JSX.Element}
  * - The rendered Popover component.
- * 
  */
 
-const Popover = ({ childrenButton, panel, className, classButton, align = 'right', direction = 'down' }: PopoverProps): JSX.Element => {
+const Popover = ({ childrenButton, panel, className, classButton, align = 'right' }: PopoverProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [showContent, setShowContent] = useState(isOpen);
@@ -100,10 +88,8 @@ const Popover = ({ childrenButton, panel, className, classButton, align = 'right
         <div
           ref={panelRef}
           className={
-            'absolute z-50 transform rounded-md border border-gray-10 ' +
-            `${direction === 'up' ? 'bottom-full mb-1' : 'mt-1'} ` +
-            `${align === 'left' ? 'right-0' : 'left-0'} ` +
-            `${originMap[direction][align]} ` +
+            'absolute z-50 mt-1 transform rounded-md border border-gray-10 ' +
+            `${align === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right'} ` +
             `bg-surface py-1.5 shadow-subtle duration-100 ease-out dark:bg-gray-5 ${transitionOpacity} ${transitionScale}`
           }
         >
diff --git a/src/components/popover/__test__/Popover.test.tsx b/src/components/overlay/popover/__test__/Popover.test.tsx
similarity index 80%
rename from src/components/popover/__test__/Popover.test.tsx
rename to src/components/overlay/popover/__test__/Popover.test.tsx
index eecf5c0..09d1dad 100644
--- a/src/components/popover/__test__/Popover.test.tsx
+++ b/src/components/overlay/popover/__test__/Popover.test.tsx
@@ -123,22 +123,6 @@ describe('Popover', () => {
     await waitFor(() => expect(getByText('Popover Content')).toBeInTheDocument());
   });
 
-  it('applies the correct classes for left alignment', () => {
-    const { getByText, queryByText } = renderPopover({ align: 'left' });
-    fireEvent.click(getByText('Open Popover'));
-    const leftPanel = queryByText('Popover Content')?.parentElement?.parentElement;
-    expect(leftPanel).toHaveClass('right-0');
-    expect(leftPanel).toHaveClass('origin-top-right');
-  });
-
-  it('applies the correct classes for right alignment', () => {
-    const { getByText, queryByText } = renderPopover({ align: 'right' });
-    fireEvent.click(getByText('Open Popover'));
-    const rightPanel = queryByText('Popover Content')?.parentElement?.parentElement;
-    expect(rightPanel).toHaveClass('left-0');
-    expect(rightPanel).toHaveClass('origin-top-left');
-  });
-
   it('should call onMouseDown stopPropagation when the button is clicked', () => {
     const stopPropagationSpy = vi.fn();
     const { getByText } = renderPopover();
@@ -151,12 +135,4 @@ describe('Popover', () => {
     fireEvent.mouseDown(button);
     expect(stopPropagationSpy).toHaveBeenCalled();
   });
-
-  it('aligns panel to the left when align is left', async () => {
-    const { getByText, container } = renderPopover({ align: 'left' });
-    fireEvent.click(getByText('Open Popover'));
-    await waitFor(() => expect(getByText('Popover Content')).toBeInTheDocument());
-    const panel = container.querySelector('.left-0.origin-top-left');
-    expect(panel).toBeInTheDocument();
-  });
 });
diff --git a/src/components/popover/__test__/__snapshots__/Popover.test.tsx.snap b/src/components/overlay/popover/__test__/__snapshots__/Popover.test.tsx.snap
similarity index 100%
rename from src/components/popover/__test__/__snapshots__/Popover.test.tsx.snap
rename to src/components/overlay/popover/__test__/__snapshots__/Popover.test.tsx.snap
diff --git a/src/components/popover/index.ts b/src/components/overlay/popover/index.ts
similarity index 100%
rename from src/components/popover/index.ts
rename to src/components/overlay/popover/index.ts
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/overlay/tooltip/Tooltip.tsx
similarity index 100%
rename from src/components/tooltip/Tooltip.tsx
rename to src/components/overlay/tooltip/Tooltip.tsx
diff --git a/src/components/tooltip/__test__/Tooltip.test.tsx b/src/components/overlay/tooltip/__test__/Tooltip.test.tsx
similarity index 100%
rename from src/components/tooltip/__test__/Tooltip.test.tsx
rename to src/components/overlay/tooltip/__test__/Tooltip.test.tsx
diff --git a/src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap b/src/components/overlay/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
similarity index 100%
rename from src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
rename to src/components/overlay/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
diff --git a/src/components/tooltip/index.ts b/src/components/overlay/tooltip/index.ts
similarity index 100%
rename from src/components/tooltip/index.ts
rename to src/components/overlay/tooltip/index.ts
diff --git a/src/components/sidenav/__test__/SidenavItem.test.tsx b/src/components/sidenav/__test__/SidenavItem.test.tsx
deleted file mode 100644
index 70919ad..0000000
--- a/src/components/sidenav/__test__/SidenavItem.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import SidenavItem from '../SidenavItem';
-
-const MockIcon = React.forwardRef<SVGSVGElement, { size?: number | string; weight?: string }>(({ size = 20 }, ref) => (
-  <svg ref={ref} data-testid="mock-icon" width={size} height={size} />
-));
-MockIcon.displayName = 'MockIcon';
-
-describe('SidenavItem Component', () => {
-  it('renders correctly with default optional props', () => {
-    const { getByText, getByTestId } = render(<SidenavItem label="Dashboard" Icon={MockIcon} />);
-    
-    expect(getByText('Dashboard')).toBeInTheDocument();
-    expect(getByTestId('mock-icon')).toBeInTheDocument();
-    
-    // Default inactive state includes text-gray-80
-    expect(getByText('Dashboard').parentElement).toHaveClass('text-gray-80');
-  });
-
-  it('renders subsection with correct styling', () => {
-    const { getByRole } = render(<SidenavItem label="Settings" Icon={MockIcon} subsection={true} />);
-    const button = getByRole('button');
-    expect(button).toHaveClass('pl-5');
-  });
-});
diff --git a/src/hooks/__test__/useHotKeys.test.ts b/src/hooks/__test__/useHotKeys.test.ts
index aa30149..f7e977e 100644
--- a/src/hooks/__test__/useHotKeys.test.ts
+++ b/src/hooks/__test__/useHotKeys.test.ts
@@ -69,58 +69,4 @@ describe('useHotkeys', () => {
     unmount();
     expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
   });
-
-  it('should not call handler when key is pressed in an input element', () => {
-    const callback = vi.fn();
-    renderHook(() => useHotkeys({ a: callback }));
-
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-    input.focus();
-
-    fireKeyDown('a');
-    expect(callback).not.toHaveBeenCalled();
-
-    document.body.removeChild(input);
-  });
-
-  it('should call handler for Escape even when focus is in an input element', () => {
-    const escapeCallback = vi.fn();
-    renderHook(() => useHotkeys({ escape: escapeCallback }));
-
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-    input.focus();
-
-    fireKeyDown('Escape');
-    expect(escapeCallback).toHaveBeenCalledOnce();
-
-    document.body.removeChild(input);
-  });
-
-  it('should not call handler when key is pressed in a textarea element', () => {
-    const callback = vi.fn();
-    renderHook(() => useHotkeys({ r: callback }));
-
-    const textarea = document.createElement('textarea');
-    document.body.appendChild(textarea);
-    textarea.focus();
-
-    fireKeyDown('r');
-    expect(callback).not.toHaveBeenCalled();
-
-    document.body.removeChild(textarea);
-  });
-
-  it('should handle null activeElement gracefully and still trigger handler', () => {
-    const callback = vi.fn();
-    renderHook(() => useHotkeys({ a: callback }));
-
-    const activeElementSpy = vi.spyOn(document, 'activeElement', 'get').mockReturnValue(null);
-
-    fireKeyDown('a');
-    expect(callback).toHaveBeenCalledOnce();
-
-    activeElementSpy.mockRestore();
-  });
 });
diff --git a/src/stories/components/avatar/Avatar.stories.ts b/src/stories/components/avatar/Avatar.stories.ts
index b385e8e..6b771df 100644
--- a/src/stories/components/avatar/Avatar.stories.ts
+++ b/src/stories/components/avatar/Avatar.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar } from '@/components/avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Components/Avatar',
+  title: 'Data Display/Avatar',
   component: Avatar,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/baseDialog/BaseDialog.stories.tsx b/src/stories/components/baseDialog/BaseDialog.stories.tsx
index 0e966e7..2fab33f 100644
--- a/src/stories/components/baseDialog/BaseDialog.stories.tsx
+++ b/src/stories/components/baseDialog/BaseDialog.stories.tsx
@@ -9,7 +9,7 @@ const overlay: Decorator = (Story) => (
 );
 
 const meta: Meta<typeof BaseDialog> = {
-  title: 'Components/BaseDialog',
+  title: 'Overlay/BaseDialog',
   component: BaseDialog,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/breadcrumbs/breadcrumbs.stories.tsx b/src/stories/components/breadcrumbs/breadcrumbs.stories.tsx
index bbe2bf2..6f54c6a 100644
--- a/src/stories/components/breadcrumbs/breadcrumbs.stories.tsx
+++ b/src/stories/components/breadcrumbs/breadcrumbs.stories.tsx
@@ -101,7 +101,7 @@ const defaultBreadcrumbsProps: BreadcrumbsProps<Dispatch, unknown> = {
 };
 
 const meta: Meta<typeof Breadcrumbs> = {
-  title: 'Components/Breadcrumbs',
+  title: 'Navigation/Breadcrumbs',
   component: Breadcrumbs,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/button/Button.stories.tsx b/src/stories/components/button/Button.stories.tsx
index 5f19da2..20d1ede 100644
--- a/src/stories/components/button/Button.stories.tsx
+++ b/src/stories/components/button/Button.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: 'Input/Button',
   component: Button,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/buttonCircle/ButtonCircle.stories.tsx b/src/stories/components/buttonCircle/ButtonCircle.stories.tsx
index d0b4412..c17c9f0 100644
--- a/src/stories/components/buttonCircle/ButtonCircle.stories.tsx
+++ b/src/stories/components/buttonCircle/ButtonCircle.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta = {
-  title: 'Components/CircleButton',
+  title: 'Input/CircleButton',
   component: CircleButton,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/card/Card.stories.tsx b/src/stories/components/card/Card.stories.tsx
index 3303f94..aeccdb2 100644
--- a/src/stories/components/card/Card.stories.tsx
+++ b/src/stories/components/card/Card.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Card } from '@/components/card';
 
 const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
+  title: 'Data Display/Card',
   component: Card,
   tags: ['autodocs'],
   parameters: {
diff --git a/src/stories/components/checkbox/Checkbox.stories.tsx b/src/stories/components/checkbox/Checkbox.stories.tsx
index 042d4a8..8fef1d7 100644
--- a/src/stories/components/checkbox/Checkbox.stories.tsx
+++ b/src/stories/components/checkbox/Checkbox.stories.tsx
@@ -15,7 +15,7 @@ const onClick: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
+  title: 'Input/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/contextMenu/ContextMenu.stories.tsx b/src/stories/components/contextMenu/ContextMenu.stories.tsx
index c0bbeb9..e373e74 100644
--- a/src/stories/components/contextMenu/ContextMenu.stories.tsx
+++ b/src/stories/components/contextMenu/ContextMenu.stories.tsx
@@ -89,7 +89,7 @@ const onOpenDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof ContextMenuWithNotifications> = {
-  title: 'Components/ContextMenu',
+  title: 'Overlay/ContextMenu',
   component: ContextMenuWithNotifications,
   decorators: [onOpenDecorator],
   tags: ['autodocs'],
diff --git a/src/stories/components/copyable/Copyable.stories.tsx b/src/stories/components/copyable/Copyable.stories.tsx
index 2645792..819ca03 100644
--- a/src/stories/components/copyable/Copyable.stories.tsx
+++ b/src/stories/components/copyable/Copyable.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { Copyable } from '@/components/copyable';
 
 const meta: Meta<typeof Copyable> = {
-  title: 'Components/Copyable',
+  title: 'Input/Copyable',
   component: Copyable,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/dialog/Dialog.stories.tsx b/src/stories/components/dialog/Dialog.stories.tsx
index b54be30..6d92a4f 100644
--- a/src/stories/components/dialog/Dialog.stories.tsx
+++ b/src/stories/components/dialog/Dialog.stories.tsx
@@ -24,7 +24,7 @@ const onCloseDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Dialog> = {
-  title: 'Components/Dialog',
+  title: 'Overlay/Dialog',
   component: Dialog,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],
diff --git a/src/stories/components/dropdown/Dropdown.stories.tsx b/src/stories/components/dropdown/Dropdown.stories.tsx
index 6ac853c..45cda39 100644
--- a/src/stories/components/dropdown/Dropdown.stories.tsx
+++ b/src/stories/components/dropdown/Dropdown.stories.tsx
@@ -3,7 +3,7 @@ import { Dropdown, DropdownProps } from '@/components/dropdown';
 import { DotsThree } from '@phosphor-icons/react';
 
 const meta: Meta<typeof Dropdown> = {
-  title: 'Components/Dropdown',
+  title: 'Navigation/Dropdown',
   component: Dropdown,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/empty/Empty.stories.tsx b/src/stories/components/empty/Empty.stories.tsx
index 66ae76c..db74ec2 100644
--- a/src/stories/components/empty/Empty.stories.tsx
+++ b/src/stories/components/empty/Empty.stories.tsx
@@ -3,7 +3,7 @@ import { Upload } from '@phosphor-icons/react';
 import { Empty } from '@/components/empty';
 
 const meta: Meta<typeof Empty> = {
-  title: 'Components/Empty',
+  title: 'Feedback/Empty',
   component: Empty,
   argTypes: {
     action: {
diff --git a/src/stories/components/grid/Grid.stories.tsx b/src/stories/components/grid/Grid.stories.tsx
deleted file mode 100644
index 8d0a089..0000000
--- a/src/stories/components/grid/Grid.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Grid } from '@/components/grid';
-
-const meta: Meta<typeof Grid> = {
-  title: 'Components/Grid',
-  component: Grid,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Custom CSS classes for the Grid container',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Grid>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Grid {...args}>
-      {Array.from({ length: 12 }).map((_, index) => (
-        <div
-          key={index}
-          className="flex items-center justify-center rounded-lg bg-gray-10 p-6 text-sm font-medium text-gray-80 shadow-sm"
-        >
-          Grid Item {index + 1}
-        </div>
-      ))}
-    </Grid>
-  ),
-};
diff --git a/src/stories/components/header/Header.stories.tsx b/src/stories/components/header/Header.stories.tsx
index b2713ee..161977f 100644
--- a/src/stories/components/header/Header.stories.tsx
+++ b/src/stories/components/header/Header.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 const IMAGE_SRC = 'https://internxt.com/favicon.ico';
 
 const meta: Meta<typeof Header> = {
-  title: 'Components/Header',
+  title: 'Layout/Header',
   component: Header,
   tags: ['autodocs'],
   parameters: {
diff --git a/src/stories/components/infiniteScroll/InfiniteScroll.stories.tsx b/src/stories/components/infiniteScroll/InfiniteScroll.stories.tsx
index e0ae014..7f0eeb9 100644
--- a/src/stories/components/infiniteScroll/InfiniteScroll.stories.tsx
+++ b/src/stories/components/infiniteScroll/InfiniteScroll.stories.tsx
@@ -3,7 +3,7 @@ import { InfiniteScroll } from '@/components/infiniteScroll';
 import { useState } from 'react';
 
 const meta: Meta<typeof InfiniteScroll> = {
-  title: 'Components/InfiniteScroll',
+  title: 'Layout/InfiniteScroll',
   component: InfiniteScroll,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/input/Input.stories.ts b/src/stories/components/input/Input.stories.ts
index 908624b..fff0472 100644
--- a/src/stories/components/input/Input.stories.ts
+++ b/src/stories/components/input/Input.stories.ts
@@ -23,7 +23,7 @@ const onChange: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: 'Input/Input',
   component: Input,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/list/List.stories.tsx b/src/stories/components/list/List.stories.tsx
index d0b50bf..2660c54 100644
--- a/src/stories/components/list/List.stories.tsx
+++ b/src/stories/components/list/List.stories.tsx
@@ -65,7 +65,7 @@ const ListWrapper = (props: ListWrapperProps) => {
 };
 
 const meta: Meta<typeof List<DriveItemData, 'name' | 'power' | 'type'>> = {
-  title: 'Components/List',
+  title: 'Data Display/List',
   component: List,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/stories/components/loader/Loader.stories.tsx b/src/stories/components/loader/Loader.stories.tsx
index d747ab4..ced1a7a 100644
--- a/src/stories/components/loader/Loader.stories.tsx
+++ b/src/stories/components/loader/Loader.stories.tsx
@@ -8,7 +8,7 @@ const overlay: Decorator = (Story) => (
 );
 
 const meta: Meta<typeof Loader> = {
-  title: 'Components/Loader',
+  title: 'Feedback/Loader',
   component: Loader,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/stories/components/menu/Menu.stories.tsx b/src/stories/components/menu/Menu.stories.tsx
index 15271c7..a8b83f3 100644
--- a/src/stories/components/menu/Menu.stories.tsx
+++ b/src/stories/components/menu/Menu.stories.tsx
@@ -16,7 +16,7 @@ const withCloseHandler: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: 'Navigation/Menu',
   component: Menu,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/modal/Modal.stories.tsx b/src/stories/components/modal/Modal.stories.tsx
index a20ae6e..d89a75f 100644
--- a/src/stories/components/modal/Modal.stories.tsx
+++ b/src/stories/components/modal/Modal.stories.tsx
@@ -24,7 +24,7 @@ const onCloseDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: 'Overlay/Modal',
   component: Modal,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],
diff --git a/src/stories/components/modalTransparent/TransparentModal.stories.tsx b/src/stories/components/modalTransparent/TransparentModal.stories.tsx
index e8d312a..a4dfcb4 100644
--- a/src/stories/components/modalTransparent/TransparentModal.stories.tsx
+++ b/src/stories/components/modalTransparent/TransparentModal.stories.tsx
@@ -26,7 +26,7 @@ const baseModalStyles = {
 };
 
 const meta: Meta<typeof TransparentModal> = {
-  title: 'Components/TransparentModal',
+  title: 'Overlay/TransparentModal',
   component: TransparentModal,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],
diff --git a/src/stories/components/popover/Popover.stories.tsx b/src/stories/components/popover/Popover.stories.tsx
index da5b384..0150ce3 100644
--- a/src/stories/components/popover/Popover.stories.tsx
+++ b/src/stories/components/popover/Popover.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/components/button';
 import { UserCircle } from '@phosphor-icons/react';
 
 const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
+  title: 'Overlay/Popover',
   component: Popover,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/radioButton/RadioButton.stories.ts b/src/stories/components/radioButton/RadioButton.stories.ts
index 7914373..411fdb6 100644
--- a/src/stories/components/radioButton/RadioButton.stories.ts
+++ b/src/stories/components/radioButton/RadioButton.stories.ts
@@ -16,7 +16,7 @@ const onClick: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof RadioButton> = {
-  title: 'Components/Radio Button',
+  title: 'Input/Radio Button',
   component: RadioButton,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/sidenav/Sidenav.stories.tsx b/src/stories/components/sidenav/Sidenav.stories.tsx
index 2899ce1..643002b 100644
--- a/src/stories/components/sidenav/Sidenav.stories.tsx
+++ b/src/stories/components/sidenav/Sidenav.stories.tsx
@@ -44,7 +44,7 @@ const SUITE_ARRAY = [
 ];
 
 const meta: Meta<typeof Sidenav> = {
-  title: 'Components/Sidenav',
+  title: 'Navigation/Sidenav',
   component: Sidenav,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/stories/components/skeletonLoader/SkeletonLoader.stories.tsx b/src/stories/components/skeletonLoader/SkeletonLoader.stories.tsx
index 7d07f02..d11d108 100644
--- a/src/stories/components/skeletonLoader/SkeletonLoader.stories.tsx
+++ b/src/stories/components/skeletonLoader/SkeletonLoader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { SkeletonLoader } from '@/components/skeletonLoader';
 
 const meta: Meta<typeof SkeletonLoader> = {
-  title: 'Components/SkeletonLoader',
+  title: 'Feedback/SkeletonLoader',
   component: SkeletonLoader,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/slider/RangeSlider.stories.ts b/src/stories/components/slider/RangeSlider.stories.ts
index 71d8513..3a193a7 100644
--- a/src/stories/components/slider/RangeSlider.stories.ts
+++ b/src/stories/components/slider/RangeSlider.stories.ts
@@ -15,7 +15,7 @@ const onChangeDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof RangeSlider> = {
-  title: 'Components/RangeSlider',
+  title: 'Input/RangeSlider',
   component: RangeSlider,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/switch/Switch.stories.ts b/src/stories/components/switch/Switch.stories.ts
index d995e19..ab0e191 100644
--- a/src/stories/components/switch/Switch.stories.ts
+++ b/src/stories/components/switch/Switch.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { SwitchComponent } from '@/components/switch';
 
 const meta: Meta<typeof SwitchComponent> = {
-  title: 'Components/Switch',
+  title: 'Input/Switch',
   component: SwitchComponent,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/table/Table.stories.tsx b/src/stories/components/table/Table.stories.tsx
index 6d846fc..9c94441 100644
--- a/src/stories/components/table/Table.stories.tsx
+++ b/src/stories/components/table/Table.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Table, TableHeader, TableRow, TableCell, TableBody } from '../../../components/table/Table';
+import { Table, TableHeader, TableRow, TableCell, TableBody } from '../../../components/data-display/table/Table';
 
 interface ActivityRow {
   date: string;
@@ -38,7 +38,7 @@ const mockData: ActivityRow[] = [
 ];
 
 const meta: Meta = {
-  title: 'Components/Table',
+  title: 'Data Display/Table',
   component: Table,
 };
 
diff --git a/src/stories/components/textArea/TextArea.stories.tsx b/src/stories/components/textArea/TextArea.stories.tsx
index 853bd4e..314ebcc 100644
--- a/src/stories/components/textArea/TextArea.stories.tsx
+++ b/src/stories/components/textArea/TextArea.stories.tsx
@@ -15,7 +15,7 @@ const onChange: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof TextArea> = {
-  title: 'Components/TextArea',
+  title: 'Input/TextArea',
   component: TextArea,
   parameters: {
     layout: 'centered',
diff --git a/src/stories/components/tooltip/Tooltip.stories.tsx b/src/stories/components/tooltip/Tooltip.stories.tsx
index df0bc8d..cf18fb9 100644
--- a/src/stories/components/tooltip/Tooltip.stories.tsx
+++ b/src/stories/components/tooltip/Tooltip.stories.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@/components/tooltip';
 import { Button } from '@/components/button';
 
 const meta: Meta<typeof Tooltip> = {
-  title: 'Components/Tooltip',
+  title: 'Overlay/Tooltip',
   component: Tooltip,
   parameters: {
     layout: 'centered',
diff --git a/tsconfig.json b/tsconfig.json
index cfeda16..759f90d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,38 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/components/avatar": ["./src/components/data-display/avatar"],
+      "@/components/card": ["./src/components/data-display/card"],
+      "@/components/list": ["./src/components/data-display/list"],
+      "@/components/table/Table": ["./src/components/data-display/table/Table"],
+      "@/components/table": ["./src/components/data-display/table"],
+      "@/components/empty": ["./src/components/feedback/empty"],
+      "@/components/loader": ["./src/components/feedback/loader"],
+      "@/components/skeletonLoader": ["./src/components/feedback/skeletonLoader"],
+      "@/components/button": ["./src/components/input/button"],
+      "@/components/buttonCircle": ["./src/components/input/buttonCircle"],
+      "@/components/checkbox": ["./src/components/input/checkbox"],
+      "@/components/copyable": ["./src/components/input/copyable"],
+      "@/components/input": ["./src/components/input/input"],
+      "@/components/radioButton": ["./src/components/input/radioButton"],
+      "@/components/slider": ["./src/components/input/slider"],
+      "@/components/switch": ["./src/components/input/switch"],
+      "@/components/textArea": ["./src/components/input/textArea"],
+      "@/components/header": ["./src/components/layout/header"],
+      "@/components/infiniteScroll": ["./src/components/layout/infiniteScroll"],
+      "@/components/breadcrumbs/BreadcrumbsItem": ["./src/components/navigation/breadcrumbs/BreadcrumbsItem"],
+      "@/components/breadcrumbs": ["./src/components/navigation/breadcrumbs"],
+      "@/components/dropdown": ["./src/components/navigation/dropdown"],
+      "@/components/menu": ["./src/components/navigation/menu"],
+      "@/components/sidenav": ["./src/components/navigation/sidenav"],
+      "@/components/suiteLauncher": ["./src/components/navigation/suiteLauncher"],
+      "@/components/baseDialog": ["./src/components/overlay/baseDialog"],
+      "@/components/contextMenu": ["./src/components/overlay/contextMenu"],
+      "@/components/dialog": ["./src/components/overlay/dialog"],
+      "@/components/modal": ["./src/components/overlay/modal"],
+      "@/components/modalTransparent": ["./src/components/overlay/modalTransparent"],
+      "@/components/popover": ["./src/components/overlay/popover"],
+      "@/components/tooltip": ["./src/components/overlay/tooltip"],
       "@/components/*": ["./src/components/*"]
     },
     "target": "ES5",