diff --git a/.gitignore b/.gitignore
index 8296128..e3b81cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,3 +90,4 @@ typings/
 
 # Electron-Forge
 out/
+.idea
\ No newline at end of file
diff --git a/index.html b/index.html
index e20cd7a..151627a 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>Hello World!</title>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
index 868187e..ad05892 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "electron-squirrel-startup": "^1.0.1"
+        "electron-squirrel-startup": "^1.0.1",
+        "izitoast": "^1.4.0"
       },
       "devDependencies": {
         "@electron-forge/cli": "^7.11.1",
@@ -5404,6 +5405,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w==",
+      "license": "Apache-2.0"
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
diff --git a/package.json b/package.json
index e847b43..a26b84c 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "vite": "^5.4.21"
   },
   "dependencies": {
-    "electron-squirrel-startup": "^1.0.1"
+    "electron-squirrel-startup": "^1.0.1",
+    "izitoast": "^1.4.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index f07fbb1..dd54d52 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,98 @@
+<script setup>
+import { ref, onMounted  } from 'vue';
+import izitoast from "./izitoast";
+
+// const numbers = ref(Array(100).fill('')); // Инициализируем массив с пустыми строками
+const numbers = ref([]); // Инициализируем массив с пустыми строками
+const clickCount = ref(1); // Счетчик нажатий
+const listOfTrips = ref([])
+
+onMounted(()=>{
+  for (let i = 0; i < 100; i++) {
+    numbers.value.push({
+      variable: '',
+      x: (i + 1) % 10 === 0 ? 10: (i + 1) % 10,
+      y: 10 - Math.floor(i / 10),
+      index: i
+    })
+  }
+})
+
+function setNumber(item) {
+  let valueOfMarker = numbers.value[item.index].variable
+  // Если строка пустая, то ставим счётчик
+  if (valueOfMarker === '') {
+    numbers.value[item.index].variable = clickCount.value;
+    clickCount.value++;
+  }
+  // Если нажали на последнее число, то удаляем его
+  else if (valueOfMarker === clickCount.value - 1) {
+    numbers.value[item.index].variable = '';
+    clickCount.value--;
+  }
+  // Если нажали на уже заполненную клетку, то выводим сообщение
+  else {
+    izitoast.info({
+      title: 'Информация',
+      message: "Удалять можно только последний пункт маршрута"
+    })
+  }
+}
+
+function saveResult() {
+  let finallyText = ''
+  const timeArr = numbers.value.reduce((acc, curr) => [curr, ...acc], [])
+  timeArr.map((item)=>{
+    if (item.variable) {
+      listOfTrips.value.push(item)
+      finallyText += `navigate_wait(${item.x}, ${item.y})\n`
+    }
+  })
+  console.log(finallyText)
+  // console.log(listOfTrips)
+  izitoast.info({
+    title: 'Информация',
+    message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
+  })
+}
+</script>
+
 <template>
-  <h1>💖 Hello World!</h1>
-  <p>Welcome to your Electron application.</p>
+  <div class="grid">
+    <div
+        class="square"
+        v-for="(item, index) in numbers"
+        :data-key="index"
+        :key="index"
+        @click="setNumber(item)"
+    >
+      {{ item.variable }}
+    </div>
+  </div>
+  <button
+    @click="saveResult"
+  >Сохранить</button>
 </template>
 
-<script setup>
-console.log('👋 This message is being logged by "App.vue", included via Vite');
-</script>
\ No newline at end of file
+<style>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(10, 50px);
+  gap: 10px;
+}
+
+.square {
+  width: 50px;  /* Ширина квадрата */
+  height: 50px; /* Высота квадрата */
+  background-color: #e0e0e0;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.square:hover {
+  background-color: #d0d0d0;
+}
+.square[data-key='90'] {
+  background-color: red;
+}
+</style>
diff --git a/src/izitoast.js b/src/izitoast.js
new file mode 100644
index 0000000..084e978
--- /dev/null
+++ b/src/izitoast.js
@@ -0,0 +1,15 @@
+import iziToast from "izitoast"
+
+iziToast.settings({
+    timeout: 3000,
+    closeOnEscape: true,
+    closeOnClick : true,
+    resetOnHover: false,
+    maxWidth: "400px",
+    displayMode: "replace",
+    position: 'topRight',
+    transitionIn: 'flipInX',
+    transitionOut: 'flipOutX',
+});
+
+export default iziToast
\ No newline at end of file
