diff --git a/package-lock.json b/package-lock.json
index 537de52..b3c89bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4039,9 +4039,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==",
+      "version": "1.0.30001375",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz",
+      "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
       "dev": true,
       "funding": [
         {
@@ -5186,9 +5186,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.212",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.212.tgz",
-      "integrity": "sha512-LjQUg1SpLj2GfyaPDVBUHdhmlDU1vDB4f0mJWSGkISoXQrn5/lH3ECPCuo2Bkvf6Y30wO+b69te+rZK/llZmjg==",
+      "version": "1.4.213",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.213.tgz",
+      "integrity": "sha512-+3DbGHGOCHTVB/Ms63bGqbyC1b8y7Fk86+7ltssB8NQrZtSCvZG6eooSl9U2Q0yw++fL2DpHKOdTU0NVEkFObg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -9708,9 +9708,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.54.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
-      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "version": "1.54.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -14973,9 +14973,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==",
+      "version": "1.0.30001375",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz",
+      "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -15802,9 +15802,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.212",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.212.tgz",
-      "integrity": "sha512-LjQUg1SpLj2GfyaPDVBUHdhmlDU1vDB4f0mJWSGkISoXQrn5/lH3ECPCuo2Bkvf6Y30wO+b69te+rZK/llZmjg==",
+      "version": "1.4.213",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.213.tgz",
+      "integrity": "sha512-+3DbGHGOCHTVB/Ms63bGqbyC1b8y7Fk86+7ltssB8NQrZtSCvZG6eooSl9U2Q0yw++fL2DpHKOdTU0NVEkFObg==",
       "dev": true
     },
     "emoji-regex": {
@@ -19121,9 +19121,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.54.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
-      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "version": "1.54.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
diff --git a/public/about.html b/public/about.html
index cb68e05..9e0b169 100644
--- a/public/about.html
+++ b/public/about.html
@@ -16,7 +16,7 @@
     <meta name="publisher-email" content="eugene.serb@gmail.com" />
     <meta name="publisher-url" content="https://eugene-serb.github.io/" />
     <meta name="description" content="Wavelovers. Page with information about the project and data on donations." />
-    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, advertise, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, реклама" />
+    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Gamepad Massager, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, advertise, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, реклама" />
 
     <meta name="og:title" content="Wavelovers – About" />
     <meta name="og:description" content="Wavelovers. Page with information about the project and data on donations." />
diff --git a/public/custom.html b/public/custom.html
new file mode 100644
index 0000000..b601ca6
--- /dev/null
+++ b/public/custom.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Wavelovers – Redirect</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; URL=https://wavelovers.ru/?custom" />
+</head>
+<body>
+</body>
+</html>
+
diff --git a/public/donate.html b/public/donate.html
index 9618af9..bea60b1 100644
--- a/public/donate.html
+++ b/public/donate.html
@@ -16,7 +16,7 @@
     <meta name="publisher-email" content="eugene.serb@gmail.com" />
     <meta name="publisher-url" content="https://eugene-serb.github.io/" />
     <meta name="description" content="Wavelovers. Donate to the author." />
-    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, Donate, Support, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, задонатить, пожертвовать, помочь, поблагодарить" />
+    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Gamepad Massager, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, Donate, Support, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, задонатить, пожертвовать, помочь, поблагодарить" />
 
     <meta name="og:title" content="Wavelovers – Donate" />
     <meta name="og:description" content="Wavelovers. Donate to the author." />
diff --git a/public/faq.html b/public/faq.html
index 7f00e39..a9d98b2 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -16,7 +16,7 @@
     <meta name="publisher-email" content="eugene.serb@gmail.com" />
     <meta name="publisher-url" content="https://eugene-serb.github.io/" />
     <meta name="description" content="Wavelovers. Frequently asked questions page." />
-    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, FAQ, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, часто задаваемые вопросы" />
+    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Gamepad Massager, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, FAQ, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона, часто задаваемые вопросы" />
 
     <meta name="og:title" content="Wavelovers – FAQ" />
     <meta name="og:description" content="Wavelovers. Frequently asked questions page." />
diff --git a/public/index.html b/public/index.html
index 31e074b..d114a2e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <meta name="publisher-email" content="eugene.serb@gmail.com" />
     <meta name="publisher-url" content="https://eugene-serb.github.io/" />
     <meta name="description" content="Wavelovers. Use your device vibration correctly. Make a massager out of a gamepad." />
-    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона" />
+    <meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Gamepad, Gamepad Vibration, Gamepad Massager, Vibrate Gamepad, Phone Vibration, Gamepad Tester, Phone Vibration Tester, Vibration Tester, Massager, Vibrator, Satisfyer, Womanizer, Relax, геймпад, джойстик, вибратор, вибромассажер, вибро, вибромассажёр из геймпада, тестер вибрации геймпада, тестер вибрации телефона" />
 
     <meta name="og:title" content="Wavelovers" />
     <meta name="og:description" content="Wavelovers. Use your device vibration correctly. Make a massager out of a gamepad." />
diff --git a/public/sitemap-internal.xml b/public/sitemap-internal.xml
index 1ed3c3d..04b623e 100644
--- a/public/sitemap-internal.xml
+++ b/public/sitemap-internal.xml
@@ -2,25 +2,25 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://wavelovers.ru/</loc>
-    <lastmod>2022-08-09</lastmod>
+    <lastmod>2022-08-10</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/faq.html</loc>
-    <lastmod>2022-08-09</lastmod>
+    <lastmod>2022-08-10</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/about.html</loc>
-    <lastmod>2022-08-09</lastmod>
+    <lastmod>2022-08-10</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/donate.html</loc>
-    <lastmod>2022-08-09</lastmod>
+    <lastmod>2022-08-10</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 2659deb..5fdf0aa 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -2,7 +2,7 @@
 <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
     <loc>https://wavelovers.ru/sitemap-internal.xml</loc>
-    <lastmod>2022-08-09</lastmod>
+    <lastmod>2022-08-10</lastmod>
   </sitemap>
 </sitemapindex>
 
diff --git a/src/components/AppCustom.vue b/src/components/AppCustom.vue
new file mode 100644
index 0000000..aaafb73
--- /dev/null
+++ b/src/components/AppCustom.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="content-item app-custom">
+        <fieldset class="custom-form">
+            <label class="custom-form__input">
+                <span>Start Delay (ms)</span>
+                <input v-model="startDelay"
+                       type="number" placeholder="Start Delay"
+                       min="0" max="1000" step="25" required />
+            </label>
+            <label class="custom-form__input">
+                <span>Duration (ms)</span>
+                <input v-model="duration"
+                       type="number" placeholder="Duration"
+                       min="0" max="1000" step="25" required />
+            </label>
+            <label class="custom-form__input">
+                <span>Weak Magnitude</span>
+                <input v-model="weakMagnitude"
+                       type="range" required
+                       min="0.0" max="1.0" step="0.01" />
+            </label>
+            <label class="custom-form__input">
+                <span>Strong Magnitude</span>
+                <input v-model="strongMagnitude"
+                       type="range" required
+                       min="0.0" max="1.0" step="0.01" />
+            </label>
+            <div class="custom-form__buttons">
+                <button @click="start" class="custom-form__button">Start</button>
+                <button @click="stop" class="custom-form__button">Stop</button>
+            </div>
+        </fieldset>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import store from '@/store/index';
+    import TPatternUnit from '@/models/TPatternUnit';
+
+    export default defineComponent({
+        name: 'AppCustom',
+        data: () => {
+            return {
+                startDelay: 250 as number,
+                duration: 250 as number,
+                weakMagnitude: 1 as number,
+                strongMagnitude: 1 as number,
+            };
+        },
+        methods: {
+            createPatternUnit: function (): TPatternUnit[] {
+                const patternUnit: TPatternUnit[] = [{
+                    startDelay: this.startDelay,
+                    duration: this.duration,
+                    weakMagnitude: this.weakMagnitude,
+                    strongMagnitude: this.strongMagnitude,
+                }];
+                return patternUnit as TPatternUnit[];
+            },
+            start: function (): void {
+                store.dispatch('startCustom', this.createPatternUnit());
+            },
+            stop: function (): void {
+                store.dispatch('reset');
+            },
+        },
+    });
+</script>
+
+<style lang="scss">
+    .custom-form {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: space-between;
+        gap: 16px;
+    }
+
+    .custom-form__input {
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: center;
+    }
+
+    .custom-form__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 32px;
+    }
+
+    .custom-form__button {
+        width: 100%;
+    }
+
+    @media only screen and (min-width: 540px) {
+        .custom-form {
+            display: flex;
+            flex-direction: column;
+            gap: 32px;
+        }
+
+        .custom-form__input {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+</style>
+
diff --git a/src/components/AppDiagnostic.vue b/src/components/AppDiagnostic.vue
index b54408a..6cf0cef 100644
--- a/src/components/AppDiagnostic.vue
+++ b/src/components/AppDiagnostic.vue
@@ -30,17 +30,17 @@
                 const result: Vibrator[] = store.getters.gamepads as Vibrator[];
                 result.forEach((item) => {
                     item.interval = timestamp;
-                })
+                });
                 return result;
             },
         },
         methods: {
-            updateTimestamp: function (): void {
+            updateComputed: function (): void {
                 this.timestamp = Date.now();
             },
         },
         mounted() {
-            this.interval = setInterval(this.updateTimestamp, 1);
+            this.interval = setInterval(this.updateComputed, 1);
         },
         unmounted() {
             clearInterval(this.interval);
diff --git a/src/components/AppManual.vue b/src/components/AppManual.vue
index c422105..74ad772 100644
--- a/src/components/AppManual.vue
+++ b/src/components/AppManual.vue
@@ -1,79 +1,167 @@
 <template>
     <div class="content-item app-manual">
-        <fieldset class="manual-form">
-            <label class="manual-form__input">
-                <span>Start Delay (ms)</span>
-                <input v-model="startDelay"
-                       type="number" placeholder="Start Delay"
-                       min="0" max="1000" step="25" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Duration (ms)</span>
-                <input v-model="duration"
-                       type="number" placeholder="Duration"
-                       min="0" max="1000" step="25" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Weak Magnitude</span>
-                <input v-model="weakMagnitude"
-                       type="range" placeholder="Weak Magnitude"
-                       min="0.0" max="1.0" step="0.01" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Strong Magnitude</span>
-                <input v-model="strongMagnitude"
-                       type="range" placeholder="Strong Magnitude"
-                       min="0.0" max="1.0" step="0.01" required />
-            </label>
-            <div class="manual-form__buttons">
-                <button @click="start" class="manual-form__button">Start</button>
-                <button @click="stop" class="manual-form__button">Stop</button>
+        <label class="manual-form__input">
+            <span>Weak Magnitude</span>
+            <input v-model="weakMagnitude"
+                   type="range" required disabled
+                   min="0.0" max="1.0" step="0.01" />
+        </label>
+        <label class="manual-form__input">
+            <span>Strong Magnitude</span>
+            <input v-model="strongMagnitude"
+                   type="range" required disabled
+                   min="0.0" max="1.0" step="0.01" />
+        </label>
+        <div class="manual-controls">
+            <div>
+                <kbd>RT</kbd>
+                <span> – Vibrate</span>
             </div>
-        </fieldset>
+            <div>
+                <kbd>A</kbd>
+                <span> – Light Mode</span>
+            </div>
+            <div>
+                <kbd>X</kbd>
+                <span> – Heavy Mode</span>
+            </div>
+            <div>
+                <kbd>Y</kbd>
+                <span> – Combined Mode</span>
+            </div>
+            <div>
+                <kbd>B</kbd>
+                <span> – Lock</span>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
+    import Vibrator from '@/models/Vibrator';
     import TPatternUnit from '@/models/TPatternUnit';
 
     export default defineComponent({
-        name: 'AppManual',
+        name: 'AppCustom',
         data: () => {
             return {
-                startDelay: 250 as number,
-                duration: 250 as number,
-                weakMagnitude: 1 as number,
-                strongMagnitude: 1 as number,
+                startDelay: 0 as number,
+                duration: 260 as number,
+                weakMagnitude: 0 as number,
+                strongMagnitude: 0 as number,
+                timestamp: 0 as number,
+                interval: 0 as number,
+                mode: 0 as number,
+                lock: false as boolean,
             };
         },
+        computed: {
+            gamepads: function (): Vibrator[] {
+                const timestamp: number = this.timestamp;
+                const result: Vibrator[] = store.getters.gamepads as Vibrator[];
+                result.forEach((item) => {
+                    item.interval = timestamp;
+                })
+                return result;
+            },
+        },
         methods: {
-            createPatternUnit: function (): TPatternUnit[] {
-                const patternUnit: TPatternUnit[] = [{
+            createPatternUnit: function (): TPatternUnit {
+                const patternUnit: TPatternUnit = {
                     startDelay: this.startDelay,
                     duration: this.duration,
                     weakMagnitude: this.weakMagnitude,
                     strongMagnitude: this.strongMagnitude,
-                }];
-                return patternUnit as TPatternUnit[];
+                };
+                return patternUnit as TPatternUnit;
             },
             start: function (): void {
                 store.dispatch('startCustom', this.createPatternUnit());
             },
             stop: function (): void {
+                store.dispatch('setIsActive', false);
+                store.dispatch('setMode', 0);
                 store.dispatch('reset');
             },
+            eventLoop: function (): void {
+                this.updateComputed();
+                this.updateMode();
+                this.updatePattern();
+                this.handle();
+            },
+            updateComputed: function (): void {
+                this.timestamp = Date.now();
+            },
+            updateMode: function (): void {
+                if (this.gamepads.length > 0) {
+                    if (this.gamepads[0].unit.buttons[1].pressed === true) {
+                        this.lock = !this.lock;
+                        console.log('B', this.lock);
+                    }
+                    if (this.lock === false) {
+                        if (this.gamepads[0].unit.buttons[0].pressed === true) {
+                            this.mode = 0;
+                            console.log('A', this.mode);
+                        }
+                        if (this.gamepads[0].unit.buttons[2].pressed === true) {
+                            this.mode = 1;
+                            console.log('X', this.mode);
+                        }
+                        if (this.gamepads[0].unit.buttons[3].pressed === true) {
+                            this.mode = 2;
+                            console.log('Y', this.mode);
+                        }
+                    }
+                }
+            },
+            updatePattern: function (): void {
+                if (this.gamepads.length > 0) {
+                    if (this.lock === false) {
+                        if (this.mode === 0) {
+                            this.weakMagnitude = this.gamepads[0].unit.buttons[7].value;
+                            this.strongMagnitude = this.gamepads[0].unit.buttons[7].value;
+                        }
+                        if (this.mode === 1) {
+                            this.weakMagnitude = 0;
+                            this.strongMagnitude = this.gamepads[0].unit.buttons[7].value;
+                        }
+                        if (this.mode === 2) {
+                            this.weakMagnitude = this.gamepads[0].unit.buttons[7].value;
+                            this.strongMagnitude = 0;
+                        }
+                    }
+                }
+            },
+            handle: function (): void {
+                if (this.gamepads.length > 0) {
+                    this.gamepads.forEach((gamepad) => {
+                        if (gamepad.unit.buttons[7].value > 0
+                            || this.lock === true) {
+                            gamepad.unit.vibrationActuator.playEffect('dual-rumble', this.createPatternUnit());
+                        } else {
+                            this.stop();
+                        }
+                    });
+                }
+            },
+        },
+        mounted() {
+            this.interval = setInterval(this.eventLoop, 250);
+        },
+        unmounted() {
+            clearInterval(this.interval);
         },
     });
 </script>
 
 <style lang="scss">
-    .manual-form {
+    .app-manual {
         display: flex;
-        flex-direction: column-reverse;
+        flex-direction: column;
         justify-content: space-between;
-        gap: 16px;
+        gap: 32px;
     }
 
     .manual-form__input {
@@ -82,28 +170,24 @@
         align-items: center;
     }
 
-    .manual-form__buttons {
+    .manual-controls {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: space-between;
-        gap: 32px;
-    }
-
-    .manual-form__button {
-        width: 100%;
+        align-self: center;
     }
 
     @media only screen and (min-width: 540px) {
-        .manual-form {
-            display: flex;
-            flex-direction: column;
-            gap: 32px;
-        }
-
         .manual-form__input {
             display: grid;
             grid-template-columns: 1fr 1fr;
         }
+
+        .manual-controls {
+            display: flex;
+            flex-direction: row;
+            align-self: stretch;
+        }
     }
 </style>
 
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index 1e7220a..238a365 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="content-item navigation-list">
-        <router-link to="/manual" class="navigation-item">Manual</router-link>
         <router-link to="/" class="navigation-item">Patterns</router-link>
+        <router-link to="/custom" class="navigation-item">Custom</router-link>
+        <router-link to="/manual" class="navigation-item">Manual</router-link>
         <router-link to="/diagnostic" class="navigation-item">Diagnostic</router-link>
     </div>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 26cf6a2..b25b1b4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'patterns-view',
         component: PatternsView,
     },
+    {
+        path: '/custom',
+        name: 'custom-view',
+        component: () => import('@/views/CustomView.vue'),
+    },
     {
         path: '/manual',
         name: 'manual-view',
diff --git a/src/views/CustomView.vue b/src/views/CustomView.vue
new file mode 100644
index 0000000..8e918b9
--- /dev/null
+++ b/src/views/CustomView.vue
@@ -0,0 +1,16 @@
+<template>
+    <AppCustom />
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import AppCustom from '@/components/AppCustom.vue';
+
+    export default defineComponent({
+        name: 'CustomView',
+        components: {
+            AppCustom: AppCustom,
+        },
+    });
+</script>
+