diff --git a/components/SideBar/SideBar.tsx b/components/SideBar/SideBar.tsx
index 12d5055..0826864 100644
--- a/components/SideBar/SideBar.tsx
+++ b/components/SideBar/SideBar.tsx
@@ -1,29 +1,46 @@
-import { VscAdd, VscCircuitBoard, VscCode, VscSettingsGear, VscSourceControl, VscTerminal } from "react-icons/vsc";
+import {
+  VscCircuitBoard,
+  VscCode,
+  VscSettingsGear,
+  VscSourceControl,
+  VscTerminal,
+} from "react-icons/vsc";
 import { ReactElement, ReactNode } from "react";
+import ActiveLink from "../Navigation/ActiveLink";
 
 const SideBar = () => {
   return (
     <div className="sidebar">
-      <SideBarIcon
-        tooltipText="Настройка Платы"
-        icon={<VscCircuitBoard size={40} />}
-      />
-      <SideBarIcon
-        tooltipText="No Code"
-        icon={<VscSourceControl size={40} />}
-      />
-      <SideBarIcon
-        tooltipText="Advence"
-        icon={<VscCode size={40} />}
-      />
-      <SideBarIcon
-        tooltipText="Terminal"
-        icon={<VscTerminal size={40} />}
-      />
-      <SideBarIcon
-        tooltipText="Setting"
-        icon={<VscSettingsGear size={40} />}
-      />
+      <ActiveLink href="/board" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon
+          tooltipText="Настройка Платы"
+          icon={<VscCircuitBoard size={40} />}
+        />
+      </ActiveLink>
+      <ActiveLink href="/flow" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon
+          tooltipText="Визуальная среда"
+          icon={<VscSourceControl size={40} />}
+        />
+      </ActiveLink>
+      <ActiveLink href="/editor" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon tooltipText="Редактор кода" icon={<VscCode size={40} />} />
+      </ActiveLink>
+
+      <ActiveLink href="/console" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon tooltipText="Консоль" icon={<VscTerminal size={40} />} />
+      </ActiveLink>
+
+      <ActiveLink
+        href="/settings"
+        activeClassName="sidebar-icon-active"
+        shallow
+      >
+        <SideBarIcon
+          tooltipText="Настройки"
+          icon={<VscSettingsGear size={40} />}
+        />
+      </ActiveLink>
     </div>
   );
 };
@@ -36,7 +53,7 @@ type SideBarIconProps = {
 
 const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
   return (
-    <div className="sidebar-icon group">
+    <div className={`sidebar-icon group ${className}`}>
       {icon}
       <span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
     </div>
diff --git a/pages/board.tsx b/pages/board.tsx
new file mode 100644
index 0000000..f58c53c
--- /dev/null
+++ b/pages/board.tsx
@@ -0,0 +1,5 @@
+const Board = () => {
+  return "Настройки платы";
+};
+
+export default Board;
diff --git a/pages/console.tsx b/pages/console.tsx
new file mode 100644
index 0000000..6231818
--- /dev/null
+++ b/pages/console.tsx
@@ -0,0 +1,5 @@
+const Console = () => {
+  return "Консоль";
+};
+
+export default Console;
diff --git a/pages/editor.tsx b/pages/editor.tsx
new file mode 100644
index 0000000..80ddbb4
--- /dev/null
+++ b/pages/editor.tsx
@@ -0,0 +1,5 @@
+const Editor = () => {
+  return "Редактор кода";
+};
+
+export default Editor;
diff --git a/pages/flow.tsx b/pages/flow.tsx
new file mode 100644
index 0000000..021716e
--- /dev/null
+++ b/pages/flow.tsx
@@ -0,0 +1,5 @@
+const Flow = () => {
+  return "Визуальная среда";
+};
+
+export default Flow;
diff --git a/pages/settings.tsx b/pages/settings.tsx
new file mode 100644
index 0000000..f120409
--- /dev/null
+++ b/pages/settings.tsx
@@ -0,0 +1,5 @@
+const Settings = () => {
+  return "Настройки";
+};
+
+export default Settings;
diff --git a/styles/globals.css b/styles/globals.css
index 99cc8a9..8f30b33 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,15 +14,16 @@
   .sidebar-icon {
     @apply relative flex items-center justify-center
                     h-16 w-16 my-2 mx-auto
-                    shadow-lg bg-gray-800 text-secondary
+                    shadow-lg bg-gray-800 text-secondary rounded-3xl
+
                     hover:bg-green-900 hover:text-primary
-                    rounded-3xl hover:rounded-xl
+                    hover:rounded-xl
                     transition-all duration-300 ease-linear
                     cursor-pointer;
   }
 
   .sidebar-icon-active {
-    @apply bg-green-900 text-white rounded-xl;
+    @apply bg-green-900 text-primary rounded-xl;
   }
 
   .sidebar-tooltip {