diff --git a/.gitignore b/.gitignore
index 7e50131..3c4de52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,7 @@ yarn-error.log*
 next-env.d.ts
 
 *storybook.log
+
+#lock
+yarn.lock
+package-lock.json
\ No newline at end of file
diff --git a/src/components/Navigation/Navigation.props.ts b/src/components/Navigation/Navigation.props.ts
new file mode 100644
index 0000000..9a22723
--- /dev/null
+++ b/src/components/Navigation/Navigation.props.ts
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export interface NavigationTab {
+    title: string;
+    path: string;
+}
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    activePath?: string;
+    navigationTabs: NavigationTab[];
+}
diff --git a/src/components/Navigation/Navigation.stories.tsx b/src/components/Navigation/Navigation.stories.tsx
new file mode 100644
index 0000000..a3caa85
--- /dev/null
+++ b/src/components/Navigation/Navigation.stories.tsx
@@ -0,0 +1,24 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {Props} from './Navigation.props';
+import Navigation from './';
+import {navigationUsecaseDefault} from '../../usecases/MainNavigation';
+const actionsData = {};
+
+const meta: Meta<Props> = {
+    component: Navigation,
+    args: {...actionsData},
+};
+
+export default meta;
+
+type Story = StoryObj<Props>;
+
+export const Deafult: Story = {
+    args: {},
+};
+
+export const SchemeSelected: Story = {
+    args: {
+        ...navigationUsecaseDefault,
+    },
+};
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
new file mode 100644
index 0000000..b563855
--- /dev/null
+++ b/src/components/Navigation/index.tsx
@@ -0,0 +1,45 @@
+import type {FC} from 'react';
+import {Props} from './Navigation.props';
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import React from 'react';
+
+
+const getTabTileClassNames = ({isActive}: {isActive: boolean}): string => {
+    return `
+        align-baseline
+        py-2
+        font-normal
+        text-2xl
+        hover:text-white hover:underline 
+        underline-offset-8 transition-all duration-200  decoration-2 decoration-color-white-underline
+        text-nowrap
+        ${isActive ? ' underline text-white' : 'text-color-white-unselected'} 
+    `;
+};
+
+const Navigation: FC<Props> = ({navigationTabs,activePath, className, ...props}) => {
+    const activeNextPathName = usePathname();
+    activePath = activePath === undefined ? activeNextPathName : activePath;
+    return (
+        <div className={`${className} w-full max-w-10`} {...props}>
+            <ul className='flex gap-4 '>
+                {navigationTabs.map((item, index) => {
+                    return (
+                        <li key={index}>
+                            <Link
+                                href={item.path}
+                                className={`${getTabTileClassNames({
+                                    isActive: item.path === activePath,
+                                })}`}>
+                                {item.title}{' '}
+                            </Link>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+export default Navigation;
diff --git a/src/shared/consts/navigationTabs.tsx b/src/shared/consts/navigationTabs.tsx
new file mode 100644
index 0000000..4b91e2e
--- /dev/null
+++ b/src/shared/consts/navigationTabs.tsx
@@ -0,0 +1,8 @@
+import type { NavigationTab } from '@/components/Navigation/Navigation.props';
+
+
+export const navigationTabs: NavigationTab[] = [
+    {title: 'Схема', path: '/scheme'},
+    {title: 'Рассылки', path: '/posts'},
+    {title: 'Настройки', path: '/settings'},
+];
diff --git a/src/usecases/MainNavigation.tsx b/src/usecases/MainNavigation.tsx
new file mode 100644
index 0000000..7a6ce3d
--- /dev/null
+++ b/src/usecases/MainNavigation.tsx
@@ -0,0 +1,6 @@
+import {navigationTabs} from '../shared/consts/navigationTabs';
+
+export const navigationUsecaseDefault = {
+    activePath: '/scheme',
+    navigationTabs: navigationTabs,
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84e9c5d..7e22dd2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,11 +1,11 @@
-import type { Config } from "tailwindcss";
-import defaultTheme from 'tailwindcss/defaultTheme'
+import type {Config} from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 const config: Config = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
@@ -14,7 +14,7 @@ const config: Config = {
       },
       colors: {
         'support-separator': '#33FFFFFF',
-        'support-overlay' : '#52000000',
+        'support-overlay': '#52000000',
         'label-primary': '#FFFFFF',
         'label-secondary': '#99FFFFFF',
         'label-tertiary': '#66FFFFFF',
@@ -25,10 +25,12 @@ const config: Config = {
         'color-grey': '#8E8E93',
         'color-gray-light': '#48484A',
         'color-white': '#FFFFFF',
+        'color-white-unselected': 'rgba(255, 255, 255, 0.6)',
+        'color-white-underline': 'rgba(255, 255, 255, 0.8)',
         'back-primary': '#161618',
         'back-secondary': '#252528',
         'back-elevated': '#3C3C3F',
-      }
+      },
     },
   },
   plugins: [],