diff --git a/front/components.d.ts b/front/components.d.ts
index 164e025..3cb9f99 100644
--- a/front/components.d.ts
+++ b/front/components.d.ts
@@ -8,12 +8,18 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     copy: typeof import('./src/components/Floorplan copy.vue')['default']
-    Floorplan: typeof import('./src/components/Floorplan.vue')['default']
-    FloorplanItem: typeof import('./src/components/FloorplanItem.vue')['default']
+    Floorplan: typeof import('./src/components/Floorplan/index.vue')['default']
+    FloorplanItem: typeof import('./src/components/Floorplan/FloorplanItem.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
     IMdiFile: typeof import('~icons/mdi/file')['default']
+    IMdiHexagon: typeof import('~icons/mdi/hexagon')['default']
+    IMdiHexagonIpOutline: typeof import('~icons/mdi/hexagon-ip-outline')['default']
+    IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
+    IMdiHome: typeof import('~icons/mdi/home')['default']
+    IMdiShop: typeof import('~icons/mdi/shop')['default']
     IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
+    Item: typeof import('./src/components/Floorplan/item.vue')['default']
     Projects: typeof import('./src/components/Projects.vue')['default']
     RandomIcon: typeof import('./src/components/RandomIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/front/src/App.vue b/front/src/App.vue
index 8700889..5c46bde 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
 
 </script>
 
 <template>
+  <div class="nav">
+    <RouterLink to="/projects"><i-mdi-shop /></RouterLink>
+    <RouterLink to="/game"><i-mdi-hexagon-outline /></RouterLink>
+    <span style="flex-grow:1"></span>
+    <RouterLink to="/" style="align-self: flex-end;"><i-mdi-home /></RouterLink>
+  </div>
   <RouterView />
 </template>
\ No newline at end of file
diff --git a/front/src/assets/main.scss b/front/src/assets/main.scss
index 0a2fed2..ccb4a03 100644
--- a/front/src/assets/main.scss
+++ b/front/src/assets/main.scss
@@ -1 +1,33 @@
 @import 'grid.scss';
+
+// #06bcb3
+// #e6d787
+// #048280
+// #a47f62
+// #b1abd4
+// #304c5a
+
+.nav {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    padding: 1rem;
+    max-width: 2rem;
+    font-size: 2rem;
+    background-color: #fff;
+    box-shadow: 0 0 4px rgba(#000, 0.5);
+
+    z-index: 100;
+
+}
+
+a[href] {
+    color: #048280;
+
+    &.router-link-active {
+        color: #a47f62;
+    }
+}
\ No newline at end of file
diff --git a/front/src/components/Floorplan.vue b/front/src/components/Floorplan/index.vue
similarity index 88%
rename from front/src/components/Floorplan.vue
rename to front/src/components/Floorplan/index.vue
index 8f28e22..a28c29a 100644
--- a/front/src/components/Floorplan.vue
+++ b/front/src/components/Floorplan/index.vue
@@ -1,7 +1,7 @@
 <style lang="scss" scoped></style>
 <script setup lang="ts">
 import { onMounted, } from 'vue';
-import { useFloorplanStore } from '../stores/floorplan';
+import { useFloorplanStore } from '../../stores/floorplan';
 
 const floorplan = useFloorplanStore()
 
diff --git a/front/src/components/FloorplanItem.vue b/front/src/components/Floorplan/item.vue
similarity index 97%
rename from front/src/components/FloorplanItem.vue
rename to front/src/components/Floorplan/item.vue
index 735a91a..885da85 100644
--- a/front/src/components/FloorplanItem.vue
+++ b/front/src/components/Floorplan/item.vue
@@ -3,9 +3,9 @@
 import { onMounted, ref } from 'vue';
 import PF, { Grid } from 'pathfinding'
 
-import { useFloorplanStore } from '../stores/floorplan';
+import { useFloorplanStore } from '../../stores/floorplan';
 import { useRoute } from 'vue-router';
-import { random_сolor } from '../helpers';
+import { random_сolor } from '../../helpers';
 
 type PathItem = { path: string, unwalkable: boolean, x: number, y: number }
 const floorplan = useFloorplanStore()
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index ddc1727..ce8579d 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -15,9 +15,6 @@
                 <li>
                     <RouterLink to="game">Игра</RouterLink>
                 </li>
-                <li>
-                    <RouterLink to="floorplan">План помещения и маршрут</RouterLink>
-                </li>
                 <li>
                     <a href="https://timesheet.kustarshina.ru/">Табель рабочего времени</a>
                 </li>
diff --git a/front/src/main.ts b/front/src/main.ts
index fe8b826..146a2a3 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -8,8 +8,8 @@ import App from './App.vue'
 import Home from './components/Home.vue'
 import Projects from './components/Projects.vue'
 import Game from './components/Game.vue'
-import Floorplan from './components/Floorplan.vue'
-import FloorplanItem from './components/FloorplanItem.vue'
+import Floorplan from './components/Floorplan/index.vue'
+import FloorplanItem from './components/Floorplan/item.vue'
 
 const routes = [
     { path: '/', component: Home },
@@ -17,6 +17,9 @@ const routes = [
     { path: '/game', component: Game },
     { path: '/floorplan', component: Floorplan },
     { path: '/floorplan/:id', component: FloorplanItem },
+    { path: '/promo', component: Floorplan },
+    { path: '/promo/:page', component: FloorplanItem },
+    { path: '/promo/:page/:id', component: FloorplanItem },
 ]
 
 const router = createRouter({