diff --git a/front/src/modules/ui/navbar/__stories__/MainNavbar.stories.tsx b/front/src/modules/ui/navbar/__stories__/MainNavbar.stories.tsx
new file mode 100644
index 000000000..4cb7f2ec5
--- /dev/null
+++ b/front/src/modules/ui/navbar/__stories__/MainNavbar.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Favorites } from '@/favorites/components/Favorites';
+import {
+  IconBell,
+  IconBuildingSkyscraper,
+  IconCheckbox,
+  IconSearch,
+  IconSettings,
+  IconTargetArrow,
+  IconUser,
+} from '@/ui/icon';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import MainNavbar from '../components/MainNavbar';
+import NavItem from '../components/NavItem';
+import NavTitle from '../components/NavTitle';
+
+const meta: Meta<typeof MainNavbar> = {
+  title: 'UI/Navbar/MainNavbar',
+  component: MainNavbar,
+};
+
+export default meta;
+type Story = StoryObj<typeof MainNavbar>;
+
+const navItems = (
+  <>
+    <NavItem label="Search" Icon={IconSearch} />
+    <NavItem label="Notifications" to="/inbox" Icon={IconBell} soon={true} />
+    <NavItem label="Settings" to="/settings/profile" Icon={IconSettings} />
+    <NavItem label="Tasks" to="/tasks" Icon={IconCheckbox} count={2} />
+    <Favorites />
+    <NavTitle label="Workspace" />
+    <NavItem label="Companies" to="/companies" Icon={IconBuildingSkyscraper} />
+    <NavItem label="People" to="/people" Icon={IconUser} />
+    <NavItem label="Opportunities" Icon={IconTargetArrow} />
+  </>
+);
+
+export const Default: Story = {
+  args: { children: navItems },
+  argTypes: { children: { control: false } },
+  decorators: [ComponentWithRouterDecorator],
+};
diff --git a/front/src/modules/ui/navbar/__stories__/NavCollapseButton.stories.tsx b/front/src/modules/ui/navbar/__stories__/NavCollapseButton.stories.tsx
new file mode 100644
index 000000000..edc307375
--- /dev/null
+++ b/front/src/modules/ui/navbar/__stories__/NavCollapseButton.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import NavCollapseButton from '../components/NavCollapseButton';
+
+const meta: Meta<typeof NavCollapseButton> = {
+  title: 'UI/Navbar/NavCollapseButton',
+  component: NavCollapseButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof NavCollapseButton>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const Hidden: Story = {
+  args: { show: false },
+  decorators: [ComponentDecorator],
+};
diff --git a/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx b/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx
new file mode 100644
index 000000000..53421a86a
--- /dev/null
+++ b/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx
@@ -0,0 +1,94 @@
+import styled from '@emotion/styled';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+
+import { IconSearch, IconSettings } from '@/ui/icon';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import NavItem from '../components/NavItem';
+
+const meta: Meta<typeof NavItem> = {
+  title: 'UI/Navbar/NavItem',
+  component: NavItem,
+};
+
+const StyledNavItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+`;
+
+const ComponentDecorator: Decorator = (Story) => (
+  <StyledNavItemContainer>
+    <Story />
+  </StyledNavItemContainer>
+);
+
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+
+export const Default: Story = {
+  args: {
+    label: 'Search',
+    Icon: IconSearch,
+    onClick: () => console.log('clicked'),
+    active: true,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};
+
+export const Catalog: Story = {
+  args: Default.args,
+  decorators: [
+    ComponentDecorator,
+    CatalogDecorator,
+    ComponentWithRouterDecorator,
+  ],
+  parameters: {
+    pseudo: { hover: ['button:has(svg.tabler-icon-settings)'] },
+    catalog: {
+      dimensions: [
+        {
+          name: 'active',
+          values: [true, false],
+          props: (active: boolean) => ({ active }),
+          labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
+        },
+        {
+          name: 'danger',
+          values: [true, false],
+          props: (danger: boolean) => ({ danger }),
+          labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
+        },
+        {
+          name: 'states',
+          values: ['Default', 'Hover'],
+          props: (state: string) =>
+            state === 'Default'
+              ? {}
+              : { label: 'Settings', Icon: IconSettings },
+        },
+      ],
+    },
+  },
+};
+
+export const Soon: Story = {
+  args: {
+    ...Default.args,
+    active: false,
+    soon: true,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};
+
+export const Count: Story = {
+  args: {
+    ...Default.args,
+    count: 3,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};
diff --git a/front/src/modules/ui/navbar/__stories__/SubMenuNavbar.stories.tsx b/front/src/modules/ui/navbar/__stories__/SubMenuNavbar.stories.tsx
new file mode 100644
index 000000000..083542f10
--- /dev/null
+++ b/front/src/modules/ui/navbar/__stories__/SubMenuNavbar.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  IconColorSwatch,
+  IconLogout,
+  IconSettings,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/icon';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import NavItem from '../components/NavItem';
+import NavTitle from '../components/NavTitle';
+import SubMenuNavbar from '../components/SubMenuNavbar';
+
+const meta: Meta<typeof SubMenuNavbar> = {
+  title: 'UI/Navbar/SubMenuNavbar',
+  component: SubMenuNavbar,
+};
+
+export default meta;
+type Story = StoryObj<typeof SubMenuNavbar>;
+
+const navItems = (
+  <>
+    <NavTitle label="User" />
+    <NavItem
+      label="Profile"
+      to="/settings/profile"
+      Icon={IconUserCircle}
+      active
+    />
+    <NavItem
+      label="Experience"
+      to="/settings/profile/experience"
+      Icon={IconColorSwatch}
+    />
+    <NavTitle label="Workspace" />
+    <NavItem label="General" to="/settings/workspace" Icon={IconSettings} />
+    <NavItem
+      label="Members"
+      to="/settings/workspace-members"
+      Icon={IconUsers}
+    />
+    <NavTitle label="Other" />
+
+    <NavItem label="Logout" Icon={IconLogout} />
+  </>
+);
+
+export const Default: Story = {
+  args: { children: navItems, backButtonTitle: 'Back' },
+  argTypes: { children: { control: false } },
+  decorators: [ComponentWithRouterDecorator],
+};