diff --git a/package-lock.json b/package-lock.json
index 97d163f..2cad5dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10478,16 +10478,16 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
-      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz",
+      "integrity": "sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -19721,16 +19721,16 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
-      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz",
+      "integrity": "sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==",
       "dev": true,
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       },
       "dependencies": {
         "schema-utils": {
diff --git a/public/css/styles.css b/public/css/styles.css
index 30ff88a..44d3d4d 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,6 +1,6 @@
 /* ------------------------------ */
 /* Wavelovers styles              */
-/* version:     dated 2022.08.08  */
+/* version:     dated 2022.08.12  */
 /* author:      Eugene Serb       */
 /* ------------------------------ */
 
@@ -408,152 +408,17 @@ table, th, td {
 /* COMPONENTS STYLES */
 /* ----------------- */
 
-/* ------ */
-/* HEADER */
-/* ------ */
+/* --- */
+/* APP */
+/* --- */
 
-.header {
-    border-bottom: 8px solid var(--color-header-borderline);
-    background: var(--color-header-background);
-}
-
-    .header ::selection {
-        background: var(--color-header-selection);
-    }
-
-    .header :focus {
-        border-bottom: 2px solid var(--color-header-navigation-link-hover);
-    }
-
-    .header :focus-visible {
-        outline: 2px solid var(--color-header-navigation-link-hover);
-        border-color: transparent;
-    }
-
-.header-wrapper {
-    padding-top: 32px;
-    padding-bottom: 16px;
-}
-
-.logo-wrapper {
-    text-align: center;
-}
-
-.logo-wrapper__logo {
-    font-size: 48px;
-    font-weight: 500;
-    color: var(--color-header-logo);
-    cursor: default;
-}
-
-.menu-wrapper {
-    margin-top: 16px;
-    align-self: center;
-}
-
-.navigation {
-    padding: 0;
-    list-style-type: none;
+.app {
+    min-height: 100vh;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-direction: column;
     justify-content: space-between;
-    gap: 8px;
 }
 
-.navigation__item {
-    font-size: 16px;
-    text-transform: uppercase;
-}
-
-    .navigation__item a {
-        border-color: transparent;
-        color: var(--color-header-navigation-link);
-    }
-
-        .navigation__item a:hover {
-            border-color: var(--color-header-navigation-link-hover);
-            color: var(--color-header-navigation-link-hover);
-        }
-
-@media only screen and (min-width: 540px) {
-    .header {
-        border-bottom: 32px solid var(--color-header-borderline);
-        background: var(--color-header-background);
-    }
-
-    .header-wrapper {
-        padding-top: 64px;
-        padding-bottom: 16px;
-    }
-
-    .menu-wrapper {
-        margin-top: 32px;
-        align-self: center;
-    }
-}
-
-@media only screen and (min-width: 720px) {
-    .header-wrapper {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-        gap: 64px;
-    }
-
-    .logo-wrapper {
-        width: 50%;
-        text-align: left;
-    }
-
-    .menu-wrapper {
-        width: 50%;
-        margin-top: 0px;
-        align-self: flex-end;
-    }
-}
-
-@media only screen and (min-width: 1024px) {
-    .logo-wrapper__logo {
-        font-size: 64px;
-    }
-}
-
-/* ------ */
-/* FOOTER */
-/* ------ */
-
-.footer {
-    border-top: 4px solid var(--color-footer-borderline);
-}
-
-    .footer span {
-        color: var(--color-footer-text);
-    }
-
-.footer-wrapper {
-    padding-top: 32px;
-    padding-bottom: 32px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 32px;
-}
-
-.created-by {
-    align-self: flex-end;
-}
-
-    .created-by > span {
-        padding-right: 8px;
-    }
-
-    .created-by > a {
-        font-size: 32px;
-    }
-
 /* ---- */
 /* PAGE */
 /* ---- */
@@ -625,10 +490,6 @@ table, th, td {
 /* PAGES */
 /* ----- */
 
-/* ----------- */
-/* WAVELOVERS */
-/* ----------- */
-
 .link_hash {
     word-break: break-all;
 }
diff --git a/public/index.html b/public/index.html
index 90ff82c..a8a6f36 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,7 +66,7 @@
     </style>
 </head>
 <body>
-    <div id="app" v-cloak></div>
+    <div id="app" class="app" v-cloak></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <noscript><div><img src="https://mc.yandex.ru/watch/89252711" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
 </body>
diff --git a/src/App.vue b/src/App.vue
index 8ce2225..c680d87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,11 +2,7 @@
     <HeaderItem />
     <main class="page container">
         <div class="wavelovers">
-            <NavigationList />
             <router-view />
-            <GamepadList v-if="gamepads.length > 0"
-                         :gamepads="gamepads" />
-            <MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
         </div>
     </main>
     <FooterItem />
@@ -17,24 +13,12 @@
     import store from '@/store/index';
     import HeaderItem from '@/components/HeaderItem.vue';
     import FooterItem from '@/components/FooterItem.vue';
-    import NavigationList from '@/components/NavigationList.vue';
-    import GamepadList from '@/components/GamepadList.vue';
-    import MessageItem from '@/components/MessageItem.vue';
-    import Vibrator from '@/models/Vibrator';
 
     export default defineComponent({
         name: 'App',
         components: {
             HeaderItem: HeaderItem,
             FooterItem: FooterItem,
-            NavigationList: NavigationList,
-            GamepadList: GamepadList,
-            MessageItem: MessageItem,
-        },
-        computed: {
-            gamepads: function (): Vibrator[] {
-                return store.getters.gamepads as Vibrator[];
-            },
         },
         methods: {
             addEventListeners(): void {
diff --git a/src/components/AppCustom.vue b/src/components/AppCustom.vue
index b2a81b9..da00b29 100644
--- a/src/components/AppCustom.vue
+++ b/src/components/AppCustom.vue
@@ -1,4 +1,5 @@
 <template>
+    <NavigationList />
     <div class="content-item app-custom">
         <fieldset class="custom-form">
             <label class="custom-form__input">
@@ -31,16 +32,28 @@
             </div>
         </fieldset>
     </div>
+    <GamepadList v-if="gamepads.length > 0"
+                 :gamepads="gamepads" />
+    <MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
+    import NavigationList from '@/components/NavigationList.vue';
+    import GamepadList from '@/components/GamepadList.vue';
+    import MessageItem from '@/components/MessageItem.vue';
+    import Vibrator from '@/models/Vibrator';
     import TPatternUnit from '@/models/TPatternUnit';
     import PatternUnit from '@/models/PatternUnit';
 
     export default defineComponent({
         name: 'AppCustom',
+        components: {
+            NavigationList: NavigationList,
+            GamepadList: GamepadList,
+            MessageItem: MessageItem,
+        },
         data: () => {
             return {
                 startDelay: 250 as number,
@@ -49,6 +62,11 @@
                 strongMagnitude: 1 as number,
             };
         },
+        computed: {
+            gamepads: function (): Vibrator[] {
+                return store.getters.gamepads as Vibrator[];
+            },
+        },
         methods: {
             start: function (): void {
                 const patterns: TPatternUnit[] = [new PatternUnit(
diff --git a/src/components/AppDiagnostic.vue b/src/components/AppDiagnostic.vue
index 6cf0cef..60bf84f 100644
--- a/src/components/AppDiagnostic.vue
+++ b/src/components/AppDiagnostic.vue
@@ -1,22 +1,32 @@
 <template>
+    <NavigationList />
     <div v-if="gamepads.length > 0" class="content-item">
         <DiagnosticItem v-for="gamepad in gamepads"
                         :key="gamepad.id"
                         :gamepad="gamepad"
                         :timestamp="timestamp" />
     </div>
+    <GamepadList v-if="gamepads.length > 0"
+                 :gamepads="gamepads" />
+    <MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
-    import Vibrator from '@/models/Vibrator';
+    import NavigationList from '@/components/NavigationList.vue';
+    import GamepadList from '@/components/GamepadList.vue';
+    import MessageItem from '@/components/MessageItem.vue';
     import DiagnosticItem from '@/components/DiagnosticItem.vue';
+    import Vibrator from '@/models/Vibrator';
 
     export default defineComponent({
         name: 'AppDiagnostic',
         components: {
             DiagnosticItem: DiagnosticItem,
+            NavigationList: NavigationList,
+            GamepadList: GamepadList,
+            MessageItem: MessageItem,
         },
         data: () => {
             return {
diff --git a/src/components/AppManual.vue b/src/components/AppManual.vue
index 073dfc3..467a0e9 100644
--- a/src/components/AppManual.vue
+++ b/src/components/AppManual.vue
@@ -1,4 +1,5 @@
 <template>
+    <NavigationList />
     <div class="content-item app-manual">
         <label class="manual-form__input">
             <span>Weak Magnitude</span>
@@ -35,17 +36,28 @@
             </div>
         </div>
     </div>
+    <GamepadList v-if="gamepads.length > 0"
+                 :gamepads="gamepads" />
+    <MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
+    import NavigationList from '@/components/NavigationList.vue';
+    import GamepadList from '@/components/GamepadList.vue';
+    import MessageItem from '@/components/MessageItem.vue';
     import Vibrator from '@/models/Vibrator';
     import TPatternUnit from '@/models/TPatternUnit';
     import PatternUnit from '@/models/PatternUnit';
 
     export default defineComponent({
         name: 'AppCustom',
+        components: {
+            NavigationList: NavigationList,
+            GamepadList: GamepadList,
+            MessageItem: MessageItem,
+        },
         data: () => {
             return {
                 timestamp: 0 as number,
diff --git a/src/components/AppPatterns.vue b/src/components/AppPatterns.vue
index 908b22e..d39a09f 100644
--- a/src/components/AppPatterns.vue
+++ b/src/components/AppPatterns.vue
@@ -1,4 +1,5 @@
 <template>
+    <NavigationList />
     <div class="app-patterns">
         <PatternList v-if="patterns.length > 0"
                      :patterns="patterns"
@@ -7,22 +8,33 @@
                      @change="change" />
         <MessageItem v-else>Loading...</MessageItem>
     </div>
+    <GamepadList v-if="gamepads.length > 0"
+                 :gamepads="gamepads" />
+    <MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
-    import PatternList from '@/components/PatternList.vue';
+    import NavigationList from '@/components/NavigationList.vue';
+    import GamepadList from '@/components/GamepadList.vue';
     import MessageItem from '@/components/MessageItem.vue';
+    import PatternList from '@/components/PatternList.vue';
+    import Vibrator from '@/models/Vibrator';
     import TPattern from '@/models/TPattern';
 
     export default defineComponent({
         name: 'AppPatterns',
         components: {
             PatternList: PatternList,
+            NavigationList: NavigationList,
+            GamepadList: GamepadList,
             MessageItem: MessageItem,
         },
         computed: {
+            gamepads: function (): Vibrator[] {
+                return store.getters.gamepads as Vibrator[];
+            },
             patterns: function (): TPattern[] {
                 return store.getters.patterns as TPattern[];
             },
diff --git a/src/components/FooterItem.vue b/src/components/FooterItem.vue
index 764bd22..415da09 100644
--- a/src/components/FooterItem.vue
+++ b/src/components/FooterItem.vue
@@ -20,5 +20,35 @@
     });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+    .footer {
+        border-top: 4px solid var(--color-footer-borderline);
+    }
+
+    .footer span {
+        color: var(--color-footer-text);
+    }
+
+    .footer-wrapper {
+        padding-top: 32px;
+        padding-bottom: 32px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 32px;
+    }
+
+    .created-by {
+        align-self: flex-end;
+    }
+
+    .created-by > span {
+        padding-right: 8px;
+    }
+
+    .created-by > a {
+        font-size: 32px;
+    }
+</style>
 
diff --git a/src/components/HeaderItem.vue b/src/components/HeaderItem.vue
index 872f578..22b8f26 100644
--- a/src/components/HeaderItem.vue
+++ b/src/components/HeaderItem.vue
@@ -32,5 +32,113 @@
     });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+    .header {
+        border-bottom: 8px solid var(--color-header-borderline);
+        background: var(--color-header-background);
+    }
+
+    .header ::selection {
+        background: var(--color-header-selection);
+    }
+
+    .header :focus {
+        border-bottom: 2px solid var(--color-header-navigation-link-hover);
+    }
+
+    .header :focus-visible {
+        outline: 2px solid var(--color-header-navigation-link-hover);
+        border-color: transparent;
+    }
+
+    .header-wrapper {
+        padding-top: 32px;
+        padding-bottom: 16px;
+    }
+
+    .logo-wrapper {
+        text-align: center;
+    }
+
+    .logo-wrapper__logo {
+        font-size: 48px;
+        font-weight: 500;
+        color: var(--color-header-logo);
+        cursor: default;
+    }
+
+    .menu-wrapper {
+        margin-top: 16px;
+        align-self: center;
+    }
+
+    .navigation {
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .navigation__item {
+        font-size: 16px;
+        text-transform: uppercase;
+    }
+
+    .navigation__item a {
+        border-color: transparent;
+        color: var(--color-header-navigation-link);
+    }
+
+    .navigation__item a:hover {
+        border-color: var(--color-header-navigation-link-hover);
+        color: var(--color-header-navigation-link-hover);
+    }
+
+    @media only screen and (min-width: 540px) {
+        .header {
+            border-bottom: 32px solid var(--color-header-borderline);
+            background: var(--color-header-background);
+        }
+
+        .header-wrapper {
+            padding-top: 64px;
+            padding-bottom: 16px;
+        }
+
+        .menu-wrapper {
+            margin-top: 32px;
+            align-self: center;
+        }
+    }
+
+    @media only screen and (min-width: 720px) {
+        .header-wrapper {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            gap: 64px;
+        }
+
+        .logo-wrapper {
+            width: 50%;
+            text-align: left;
+        }
+
+        .menu-wrapper {
+            width: 50%;
+            margin-top: 0px;
+            align-self: flex-end;
+        }
+    }
+
+    @media only screen and (min-width: 1024px) {
+        .logo-wrapper__logo {
+            font-size: 64px;
+        }
+    }
+</style>