diff --git a/package-lock.json b/package-lock.json
index 908337ed7..ef18eca47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,8 @@
         "@codemirror/lang-xml": "^6.0.2",
         "@electron-toolkit/preload": "^2.0.0",
         "@electron-toolkit/utils": "^1.0.2",
-        "@floating-ui/react": "^0.24.8",
-        "@floating-ui/react-dom": "^2.0.1",
+        "@floating-ui/react": "^0.26.9",
+        "@floating-ui/react-dom": "^2.0.8",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@types/ws": "^8.5.10",
         "@uiw/react-codemirror": "^4.21.21",
@@ -82,6 +82,9 @@
         "typescript": "^5.1.6",
         "vite": "^4.3.9",
         "vitest": "^0.34.6"
+      },
+      "optionalDependencies": {
+        "dmg-license": "^1.0.11"
       }
     },
     "node_modules/@75lb/deep-merge": {
@@ -1439,12 +1442,12 @@
       }
     },
     "node_modules/@floating-ui/react": {
-      "version": "0.24.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.24.8.tgz",
-      "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==",
+      "version": "0.26.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.9.tgz",
+      "integrity": "sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==",
       "dependencies": {
-        "@floating-ui/react-dom": "^2.0.1",
-        "aria-hidden": "^1.2.3",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@floating-ui/utils": "^0.2.1",
         "tabbable": "^6.0.1"
       },
       "peerDependencies": {
@@ -2566,7 +2569,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
       "integrity": "sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "@types/node": "*",
@@ -2643,7 +2645,6 @@
       "version": "1.10.9",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.9.tgz",
       "integrity": "sha512-MLx9Z+9lGzwEuW16ubGeNkpBDE84RpB/NyGgg6z2BTpWzKkGU451cAY3UkUzZEp72RHF585oJ3V8JVNqIplcAQ==",
-      "dev": true,
       "optional": true
     },
     "node_modules/@types/ws": {
@@ -3026,7 +3027,7 @@
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -3102,7 +3103,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3127,7 +3128,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -3261,17 +3262,6 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/array-back": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
@@ -3415,7 +3405,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=0.8"
@@ -3434,7 +3423,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=8"
@@ -4132,7 +4120,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
       "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "slice-ansi": "^3.0.0",
@@ -4376,7 +4363,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
       "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "buffer": "^5.1.0"
@@ -4386,7 +4372,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4720,7 +4705,6 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/dmg-license/-/dmg-license-1.0.11.tgz",
       "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -5101,7 +5085,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
@@ -5974,7 +5958,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
       "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
-      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -5984,7 +5967,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -6024,7 +6007,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -6764,7 +6747,6 @@
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
       "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -7022,7 +7004,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -7517,7 +7499,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -8020,7 +8002,6 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
       "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
-      "dev": true,
       "optional": true
     },
     "node_modules/node-fetch": {
@@ -8478,7 +8459,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
       "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@xmldom/xmldom": "^0.8.8",
         "base64-js": "^1.5.1",
@@ -8865,7 +8846,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -9865,7 +9846,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
       "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -9880,7 +9860,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -9896,7 +9875,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "color-name": "~1.1.4"
@@ -9909,14 +9887,12 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "optional": true
     },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">= 6.0.0",
@@ -10053,7 +10029,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10147,7 +10123,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11027,7 +11003,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -11090,7 +11066,6 @@
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
       "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
@@ -11105,7 +11080,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true,
       "optional": true
     },
     "node_modules/vite": {
@@ -11621,7 +11595,7 @@
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
       "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.0"
       }
diff --git a/package.json b/package.json
index 208baa306..ec5efb91e 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "@codemirror/lang-xml": "^6.0.2",
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^1.0.2",
-    "@floating-ui/react": "^0.24.8",
-    "@floating-ui/react-dom": "^2.0.1",
+    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react-dom": "^2.0.8",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@types/ws": "^8.5.10",
     "@uiw/react-codemirror": "^4.21.21",
diff --git a/resources/tutorial.json b/resources/tutorial.json
new file mode 100644
index 000000000..66a18b39c
--- /dev/null
+++ b/resources/tutorial.json
@@ -0,0 +1 @@
+{"items":{"1":{"title":"Пример","content":"Попробуй добавить новый компонент","showed":true},"2":{"title":"Иерархия состояний","content":"Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка","showed":true}}}
\ No newline at end of file
diff --git a/src/main/file-handlers/index.ts b/src/main/file-handlers/index.ts
index 829db8d23..b6e91a0ce 100644
--- a/src/main/file-handlers/index.ts
+++ b/src/main/file-handlers/index.ts
@@ -10,6 +10,8 @@ import {
   handleOpenPlatformFile,
   handleGetFileMetadata,
 } from './handlers';
+import { getAllTemplates, getTemplate } from './templates';
+import { getTutorial, markTutorialItemAsShowed } from './tutorial';
 
 /**
  * В этом файле происходит типизация IPC
@@ -26,6 +28,10 @@ const handlers = {
   getPlatforms: searchPlatforms,
   openPlatformFile: handleOpenPlatformFile,
   getMetadata: handleGetFileMetadata,
+  getAllTemplates,
+  getTemplate,
+  getTutorial,
+  markTutorialItemAsShowed,
 };
 
 /**
diff --git a/src/main/templates.ts b/src/main/file-handlers/templates.ts
similarity index 94%
rename from src/main/templates.ts
rename to src/main/file-handlers/templates.ts
index 1e70bdd70..10f922d8d 100644
--- a/src/main/templates.ts
+++ b/src/main/file-handlers/templates.ts
@@ -16,7 +16,7 @@ export const getAllTemplates = async () => {
     const dirs = (await readdir(templatesPath, { withFileTypes: true }))
       .filter((dirent) => dirent.isDirectory())
       .map((dir) => dir.name);
-    const result = {};
+    const result: Record<string, string[]> = {};
 
     for (const dirName of dirs) {
       result[dirName] = (await readdir(path.join(templatesPath, dirName))).map(removeExtension);
@@ -24,7 +24,7 @@ export const getAllTemplates = async () => {
 
     return result;
   } catch (error) {
-    return [];
+    return {};
   }
 };
 
diff --git a/src/main/file-handlers/tutorial.ts b/src/main/file-handlers/tutorial.ts
new file mode 100644
index 000000000..7e2c7a36e
--- /dev/null
+++ b/src/main/file-handlers/tutorial.ts
@@ -0,0 +1,34 @@
+import { readFile, writeFile } from 'fs/promises';
+import path from 'path';
+
+const basePath = path.join(__dirname, '../../resources').replace('app.asar', 'app.asar.unpacked');
+
+type TutorialItem = { title: string; content: string; showed: boolean };
+type TutorialItems = Record<string, TutorialItem>;
+export type Tutorial = { items: TutorialItems };
+
+export const getTutorial = async (): Promise<Tutorial> => {
+  try {
+    const text = await readFile(path.join(basePath + '/tutorial.json'), 'utf-8');
+    return JSON.parse(text);
+  } catch (error) {
+    console.error(error);
+    return { items: {} };
+  }
+};
+
+export const markTutorialItemAsShowed = async (itemId: string) => {
+  try {
+    const tutorial = await getTutorial();
+
+    if (!(itemId in tutorial.items)) {
+      return;
+    }
+
+    tutorial.items[itemId].showed = true;
+
+    writeFile(path.join(basePath + '/tutorial.json'), JSON.stringify(tutorial));
+  } catch (reason) {
+    console.error(reason);
+  }
+};
diff --git a/src/main/index.ts b/src/main/index.ts
index db72882d1..22898657a 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -9,7 +9,6 @@ import { initFileHandlersIPC } from './file-handlers';
 import { findFreePort } from './modules/freePortFinder';
 import { ModuleName, ModuleManager } from './modules/ModuleManager';
 import { initSettings } from './settings';
-import { getAllTemplates, getTemplate } from './templates';
 
 import icon from '../../resources/icon.png?asset';
 
@@ -112,10 +111,6 @@ app.whenReady().then(() => {
 
   ipcMain.handle('appVersion', app.getVersion);
 
-  ipcMain.handle('getAllTemplates', getAllTemplates);
-
-  ipcMain.handle('getTemplateData', (_, type: string, name: string) => getTemplate(type, name));
-
   ipcMain.handle('checkForUpdates', checkForUpdates(app.getVersion()));
 
   // Горячие клавиши для режима разрабочика:
diff --git a/src/preload/preload.d.ts b/src/preload/preload.d.ts
index 440795a7b..32ef77f21 100644
--- a/src/preload/preload.d.ts
+++ b/src/preload/preload.d.ts
@@ -1,5 +1,6 @@
 import { ElectronAPI } from '@electron-toolkit/preload';
 
+import { Tutorial } from '../main/file-handlers/tutorial';
 import { Settings } from '../main/settings';
 
 import type { API } from './index';
@@ -12,5 +13,6 @@ declare global {
   //! Это только тип, значения тут нет
   interface Main {
     settings: Settings;
+    tutorial: Tutorial;
   }
 }
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 8ffac3f9f..ec0da97e3 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -15,12 +15,16 @@
 
   <body>
     <div id="root"></div>
+
+    <div id="tutorial" style="z-index: 100; position: relative"></div>
+
     <div id="loading-overlay" class="loading-overlay">
       <div class="loading-spinner">
         <span>🐾</span>
         <div class="half-spinner"></div>
       </div>
     </div>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 59525fb52..17a053efc 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -4,14 +4,19 @@ import { MainContainer } from '@renderer/components';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 
 import { EditorContext } from './store/EditorContext';
+import { Tutorial } from './store/Tutorial';
+import { TutorialContext } from './store/TutorialContext';
 
 // TODO: а если у нас будет несколько редакторов?
 export const App: React.FC = () => {
   const { current: editor } = useRef(new CanvasEditor());
+  const { current: tutorial } = useRef(new Tutorial());
 
   return (
     <EditorContext.Provider value={editor}>
-      <MainContainer />
+      <TutorialContext.Provider value={tutorial}>
+        <MainContainer />
+      </TutorialContext.Provider>
     </EditorContext.Provider>
   );
 };
diff --git a/src/renderer/src/components/ComponentFormFieldLabel.tsx b/src/renderer/src/components/ComponentFormFieldLabel.tsx
index 051f1cb82..2b7e5db56 100644
--- a/src/renderer/src/components/ComponentFormFieldLabel.tsx
+++ b/src/renderer/src/components/ComponentFormFieldLabel.tsx
@@ -22,7 +22,7 @@ export const ComponentFormFieldLabel: React.FC<ComponentFormFieldLabelProps> = (
   return (
     <div>
       <label className="grid grid-cols-[max-content,1fr] items-center justify-start gap-2">
-        <div className="min-w-28 flex items-center gap-1">
+        <div className="flex min-w-28 items-center gap-1">
           <span>{label}</span>
           {hint && (
             <WithHint hint={hint}>
diff --git a/src/renderer/src/components/DiagramContextMenu.tsx b/src/renderer/src/components/DiagramContextMenu.tsx
index f193809ce..20b712ab9 100644
--- a/src/renderer/src/components/DiagramContextMenu.tsx
+++ b/src/renderer/src/components/DiagramContextMenu.tsx
@@ -29,7 +29,7 @@ export const DiagramContextMenu: React.FC = () => {
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
     elements: {
-      reference: getVirtualElement(position),
+      reference: getVirtualElement(position) as Element,
     },
     middleware: [offset(), flip(), shift({ padding: 5 })],
   });
diff --git a/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx b/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
index e4cbdaab7..4a25690a0 100644
--- a/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
+++ b/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
@@ -3,7 +3,12 @@ import React, { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as AddIcon } from '@renderer/assets/icons/new transition.svg';
-import { ComponentEditModal, ComponentAddModal, ComponentDeleteModal } from '@renderer/components';
+import {
+  ComponentEditModal,
+  ComponentAddModal,
+  ComponentDeleteModal,
+  TutorialItem,
+} from '@renderer/components';
 import { ScrollableList } from '@renderer/components/ScrollableList';
 import { WithHint } from '@renderer/components/UI';
 import { useComponents } from '@renderer/hooks';
@@ -82,15 +87,20 @@ export const ComponentsList: React.FC = () => {
 
   return (
     <>
-      <button
-        type="button"
-        className="btn-primary mb-2 flex w-full items-center justify-center gap-3"
-        disabled={!isInitialized}
-        onClick={onRequestAddComponent}
-      >
-        <AddIcon className="shrink-0" />
-        Добавить...
-      </button>
+      <TutorialItem id="1">
+        {(props) => (
+          <button
+            type="button"
+            className="btn-primary mb-2 flex w-full items-center justify-center gap-3"
+            disabled={!isInitialized}
+            onClick={onRequestAddComponent}
+            {...props}
+          >
+            <AddIcon className="shrink-0" />
+            Добавить...
+          </button>
+        )}
+      </TutorialItem>
 
       <ScrollableList
         containerProps={{ onClick: (e) => e.stopPropagation() }}
diff --git a/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx b/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
index da7026b2b..4e276f7e7 100644
--- a/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
+++ b/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
@@ -9,6 +9,7 @@ import {
 import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as ArrowIcon } from '@renderer/assets/icons/arrow-down.svg';
+import { TutorialItem } from '@renderer/components';
 import { Hierarchy } from '@renderer/components/Hierarchy';
 import { useEditorContext } from '@renderer/store/EditorContext';
 
@@ -79,15 +80,23 @@ export const Explorer: React.FC = () => {
           onExpand={forceUpdate}
           className="px-4"
         >
-          <button className="mb-3 flex items-center" onClick={() => togglePanel(hierarchyPanelRef)}>
-            <ArrowIcon
-              className={twMerge(
-                'rotate-0 transition-transform',
-                hierarchyPanelRef.current?.isCollapsed() && '-rotate-90'
-              )}
-            />
-            <h3 className="font-semibold">Иерархия состояний</h3>
-          </button>
+          <TutorialItem id="2">
+            {(props) => (
+              <button
+                className="mb-3 flex items-center"
+                onClick={() => togglePanel(hierarchyPanelRef)}
+                {...props}
+              >
+                <ArrowIcon
+                  className={twMerge(
+                    'rotate-0 transition-transform',
+                    hierarchyPanelRef.current?.isCollapsed() && '-rotate-90'
+                  )}
+                />
+                <h3 className="font-semibold">Иерархия состояний</h3>
+              </button>
+            )}
+          </TutorialItem>
 
           {isMounted ? <Hierarchy /> : 'Недоступно до открытия схемы'}
         </Panel>
diff --git a/src/renderer/src/components/Sidebar/Menus.tsx b/src/renderer/src/components/Sidebar/Menus.tsx
index 698f5d6e8..9e1d8e9fb 100644
--- a/src/renderer/src/components/Sidebar/Menus.tsx
+++ b/src/renderer/src/components/Sidebar/Menus.tsx
@@ -52,7 +52,7 @@ export const Menus: React.FC<MenusProps> = ({ items }) => {
       maxWidth={maxWidth}
       onResize={handleResize}
       onResizeStop={handleResizeStop}
-      className="z-50 overflow-hidden border-r border-border-primary bg-bg-secondary"
+      className="overflow-hidden border-r border-border-primary bg-bg-secondary"
     >
       <div
         className={twMerge(
diff --git a/src/renderer/src/components/TutorialItem/TutorialItem.tsx b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
new file mode 100644
index 000000000..4981f9386
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
@@ -0,0 +1,128 @@
+import React, { useRef, useState } from 'react';
+
+import {
+  useFloating,
+  FloatingPortal,
+  useInteractions,
+  offset as offsetMiddleware,
+  flip,
+  shift,
+  FloatingArrow,
+  arrow,
+  useTransitionStyles,
+} from '@floating-ui/react';
+
+import { ReactComponent as Close } from '@renderer/assets/icons/close.svg';
+import { Checkbox } from '@renderer/components/UI';
+import { Tutorial } from '@renderer/store/Tutorial';
+import { useTutorialContext } from '@renderer/store/TutorialContext';
+import { getColor } from '@renderer/theme';
+
+import { useIsVisibleFloating } from './useIsVisibleFloating';
+
+interface TutorialItemProps {
+  children: (props: Record<string, any>) => React.ReactNode;
+  id: string;
+}
+
+interface TutorialItemWithTutorialProps extends TutorialItemProps {
+  tutorial: Tutorial;
+  tutorialItem: Main['tutorial']['items'][string];
+}
+
+export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> = (props) => {
+  const { children, id, tutorial, tutorialItem } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const arrowRef = useRef<SVGSVGElement | null>(null);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'right',
+    middleware: [
+      offsetMiddleware(10),
+      flip(),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const isVisible = useIsVisibleFloating(context, { tutorial, id });
+  const { getReferenceProps, getFloatingProps } = useInteractions([isVisible]);
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      transform: 'translateX(2px)',
+      opacity: 0,
+    },
+  });
+
+  return (
+    <>
+      {children({
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
+
+      {isMounted && tutorialItem && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <div
+              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary py-2 shadow-xl"
+              style={styles}
+            >
+              <div className="flex justify-between pl-4 pr-2">
+                <h3 className="text-lg">{tutorialItem.title}</h3>
+
+                <button
+                  className="rounded-full p-2 transition-colors hover:bg-bg-hover active:bg-bg-active"
+                  onClick={() => context.onOpenChange(false)}
+                >
+                  <Close width="1rem" height="1rem" />
+                </button>
+              </div>
+
+              <div className="px-4">
+                <p className="mb-2 text-base">{tutorialItem.content}</p>
+
+                <button
+                  className="btn-primary mb-2 ml-auto block"
+                  onClick={() => context.onOpenChange(false)}
+                >
+                  Ок
+                </button>
+
+                <label className="flex cursor-pointer items-center justify-end gap-2 text-sm">
+                  Больше не показывать подсказки <Checkbox />
+                </label>
+              </div>
+
+              <FloatingArrow
+                className="fill-bg-secondary"
+                ref={arrowRef}
+                context={context}
+                stroke={getColor('border-primary')}
+                strokeWidth={0.5}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
+
+export const TutorialItem: React.FC<TutorialItemProps> = (props) => {
+  const tutorial = useTutorialContext();
+
+  const tutorialItem = tutorial.useGetItem(props.id);
+
+  if (tutorialItem && !tutorialItem.showed) {
+    return <TutorialItemWithTutorial {...props} tutorial={tutorial} tutorialItem={tutorialItem} />;
+  }
+
+  return props.children({});
+};
diff --git a/src/renderer/src/components/TutorialItem/index.ts b/src/renderer/src/components/TutorialItem/index.ts
new file mode 100644
index 000000000..2a4d5b033
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem/index.ts
@@ -0,0 +1 @@
+export * from './TutorialItem';
diff --git a/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
new file mode 100644
index 000000000..f4133b46d
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { FloatingContext, ElementProps } from '@floating-ui/react';
+
+import { Tutorial } from '@renderer/store/Tutorial';
+
+interface UseIsVisibleFloating {
+  tutorial: Tutorial;
+  id: string;
+
+  closeDelay?: number;
+  openDelay?: number;
+}
+
+export const useIsVisibleFloating = (
+  context: FloatingContext,
+  props: UseIsVisibleFloating
+): ElementProps => {
+  const {
+    elements: { domReference },
+    events,
+    onOpenChange,
+    open,
+  } = context;
+
+  const { tutorial, id, closeDelay = 3000, openDelay = 200 } = props;
+
+  const openTimeoutRef = useRef<NodeJS.Timeout>();
+  const closeTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const closeWithDelay = useCallback(() => {
+    closeTimeoutRef.current = setTimeout(() => {
+      onOpenChange(false);
+    }, closeDelay);
+  }, [closeDelay, onOpenChange]);
+
+  const observer = useMemo(() => {
+    return new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) {
+        if (open) {
+          onOpenChange(false);
+        }
+
+        return tutorial.cancelShow(id);
+      }
+
+      tutorial.requestShow(id);
+    });
+  }, [id, onOpenChange, open, tutorial]);
+
+  useEffect(() => {
+    const handleOpenChange = ({ open }: { open: boolean }) => {
+      if (!open) {
+        clearTimeout(openTimeoutRef.current);
+        clearTimeout(closeTimeoutRef.current);
+        tutorial.onClose(id);
+      }
+    };
+
+    events.on('openchange', handleOpenChange);
+    return () => {
+      events.off('openchange', handleOpenChange);
+    };
+  }, [events, id, tutorial]);
+
+  useEffect(() => {
+    if (!domReference) return;
+
+    observer.observe(domReference);
+    return () => observer.disconnect();
+  }, [domReference, observer]);
+
+  useEffect(() => {
+    const unsubscribe = tutorial.onAvailableToShow(id, () => {
+      openTimeoutRef.current = setTimeout(() => {
+        onOpenChange(true);
+
+        closeWithDelay();
+      }, openDelay);
+    });
+
+    return () => unsubscribe();
+  }, [closeWithDelay, id, onOpenChange, openDelay, tutorial]);
+
+  return {
+    floating: {
+      onMouseEnter() {
+        clearTimeout(closeTimeoutRef.current);
+      },
+      onMouseLeave() {
+        closeWithDelay();
+      },
+      onFocus() {
+        clearTimeout(closeTimeoutRef.current);
+      },
+      onBlur() {
+        closeWithDelay();
+      },
+    },
+  };
+};
diff --git a/src/renderer/src/components/UI/Checkbox.tsx b/src/renderer/src/components/UI/Checkbox.tsx
index 393fcd9e1..71fcc2880 100644
--- a/src/renderer/src/components/UI/Checkbox.tsx
+++ b/src/renderer/src/components/UI/Checkbox.tsx
@@ -9,7 +9,7 @@ export const Checkbox: React.FC<RCheckbox.CheckboxProps> = ({ className, ...prop
   return (
     <RCheckbox.Root
       className={twMerge(
-        'min-w-5 flex h-5 w-5 appearance-none items-center justify-center rounded border border-border-primary outline-none',
+        'flex h-5 w-5 min-w-5 appearance-none items-center justify-center rounded border border-border-primary outline-none',
         className
       )}
       {...props}
diff --git a/src/renderer/src/components/UI/WithHint.tsx b/src/renderer/src/components/UI/WithHint.tsx
index 2b5228614..31be612f1 100644
--- a/src/renderer/src/components/UI/WithHint.tsx
+++ b/src/renderer/src/components/UI/WithHint.tsx
@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react';
 import {
   useFloating,
   useHover,
+  FloatingPortal,
   useInteractions,
   offset as offsetMiddleware,
   flip,
@@ -11,8 +12,8 @@ import {
   arrow,
   Placement,
   OffsetOptions,
+  useTransitionStyles,
 } from '@floating-ui/react';
-import { createPortal } from 'react-dom';
 
 import { getColor } from '@renderer/theme';
 
@@ -52,6 +53,13 @@ export const WithHint: React.FC<WithHintProps> = ({
   });
   const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
 
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      transform: 'translateX(2px)',
+      opacity: 0,
+    },
+  });
+
   return (
     <>
       {children({
@@ -59,26 +67,26 @@ export const WithHint: React.FC<WithHintProps> = ({
         ...getReferenceProps(),
         'data-with-hint': true,
       })}
-      {isOpen &&
-        hint &&
-        createPortal(
-          <div
-            className="z-[100] max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-2 py-1 shadow-xl transition-opacity"
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            <FloatingArrow
-              className="fill-bg-secondary"
-              ref={arrowRef}
-              context={context}
-              stroke={getColor('border-primary')}
-              strokeWidth={0.5}
-            />
-            {hint}
-          </div>,
-          document.body
-        )}
+
+      {isMounted && hint && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <div
+              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-2 py-1 shadow-xl"
+              style={styles}
+            >
+              {hint}
+              <FloatingArrow
+                className="fill-bg-secondary"
+                ref={arrowRef}
+                context={context}
+                stroke={getColor('border-primary')}
+                strokeWidth={0.5}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
     </>
   );
 };
diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index 79708ef37..681756815 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -15,3 +15,4 @@ export * from './ComponentDeleteModal';
 export * from './Scale';
 export * from './UpdateModal';
 export * from './DiagramContextMenu';
+export * from './TutorialItem';
diff --git a/src/renderer/src/lib/data/EditorManager/FilesManager.ts b/src/renderer/src/lib/data/EditorManager/FilesManager.ts
index ea6446b9e..306a3a73d 100644
--- a/src/renderer/src/lib/data/EditorManager/FilesManager.ts
+++ b/src/renderer/src/lib/data/EditorManager/FilesManager.ts
@@ -171,15 +171,11 @@ export class FilesManager {
   }
 
   async getAllTemplates() {
-    return (await window.electron.ipcRenderer.invoke('getAllTemplates')) as TemplatesList;
+    return window.api.fileHandlers.getAllTemplates();
   }
 
   async createFromTemplate(type: string, name: string, openImportError: (error: string) => void) {
-    const templateData = await window.electron.ipcRenderer.invoke(
-      'getTemplateData',
-      type,
-      name + '.graphml'
-    );
+    const templateData = await window.api.fileHandlers.getTemplate(type, name + '.graphml');
 
     const data = importGraphml(templateData, openImportError);
 
diff --git a/src/renderer/src/store/ThemeContext.ts b/src/renderer/src/store/ThemeContext.ts
deleted file mode 100644
index 58559d103..000000000
--- a/src/renderer/src/store/ThemeContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import { ThemeContextValue } from '@renderer/types/theme';
-
-export const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-export const useThemeContext = () => {
-  const value = useContext(ThemeContext);
-
-  if (value === null) {
-    throw new Error('There must be a value!');
-  }
-
-  return value;
-};
diff --git a/src/renderer/src/store/Tutorial.ts b/src/renderer/src/store/Tutorial.ts
new file mode 100644
index 000000000..c56bc6203
--- /dev/null
+++ b/src/renderer/src/store/Tutorial.ts
@@ -0,0 +1,123 @@
+import { useSyncExternalStore } from 'react';
+
+type TutorialItems = Main['tutorial']['items'];
+
+/**
+ * (bryzZz)
+ * Класс отвечающий за показ контекстной справки к элементам
+ */
+export class Tutorial {
+  private items: TutorialItems = {};
+
+  private pendingQueue: string[] = [];
+  private subscribers = new Map<string, () => void>();
+
+  private reactDataListeners = new Map<string, Array<() => void>>(); //! Подписчиков обнулять нельзя, react сам разбирается
+
+  constructor() {
+    this.load();
+  }
+
+  /**
+   * (bryzZz)
+   * Загрузка туториала из файла
+   */
+  private load = async () => {
+    const data = await window.api.fileHandlers.getTutorial();
+
+    this.setItems(data.items);
+  };
+
+  setItems = (items: TutorialItems) => {
+    this.items = items;
+  };
+
+  private subscribe = (id: string) => (listener: () => void) => {
+    if (!this.reactDataListeners.has(id)) {
+      this.reactDataListeners.set(id, [listener]);
+    } else {
+      this.reactDataListeners.get(id)?.push(listener);
+    }
+
+    return () => {
+      const listeners = this.reactDataListeners.get(id) ?? [];
+
+      if (listeners?.length === 0) {
+        return this.reactDataListeners.delete(id);
+      }
+
+      return this.reactDataListeners.set(
+        id,
+        listeners.filter((l) => l !== listener)
+      );
+    };
+  };
+
+  /**
+   * (bryzZz)
+   * Подписка на отдельный эдемент в react.
+   * Нужно для того чтобы после просмотра части туториала react обновлял компонент и уже не вызывал кучу кода отвечающего за показ.
+   */
+  useGetItem = (id: string) => {
+    const getSnapshot = () => {
+      return this.items[id];
+    };
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useSyncExternalStore(this.subscribe(id), getSnapshot);
+  };
+
+  private emitShow = (itemId: string) => {
+    this.subscribers.get(itemId)?.();
+  };
+
+  /**
+   * (bryzZz)
+   * Запрос на показ части туториала (когда нужный эдемент попадает в поле видимости)
+   */
+  requestShow = (itemId: string) => {
+    this.pendingQueue.push(itemId);
+
+    if (this.pendingQueue.length === 1) {
+      this.emitShow(itemId);
+    }
+  };
+
+  /**
+   * (bryzZz)
+   * Отмена запроса на показ части туториала (если нужный элемент вышел из поля видимости не успев показать туториал)
+   */
+  cancelShow = (itemId: string) => {
+    this.pendingQueue = this.pendingQueue.filter((id) => id !== itemId);
+  };
+
+  /**
+   * (bryzZz)
+   * Подписка на показ части туториала.
+   * Нужна чтобы уведомить нужную часть что можно показывать
+   */
+  onAvailableToShow = (itemId: string, subscriber: () => void) => {
+    this.subscribers.set(itemId, subscriber);
+
+    return () => {
+      this.subscribers.delete(itemId);
+    };
+  };
+
+  /**
+   * (bryzZz)
+   * Эта функция вызывается когда часть туториала была показана
+   */
+  onClose = async (itemId: string) => {
+    this.pendingQueue = this.pendingQueue.filter((id) => id !== itemId);
+
+    await window.api.fileHandlers.markTutorialItemAsShowed(itemId);
+
+    this.items[itemId] = { ...this.items[itemId], showed: true };
+    this.reactDataListeners.get(itemId)?.forEach((l) => l());
+
+    if (this.pendingQueue.length > 0) {
+      this.emitShow(this.pendingQueue[0]);
+    }
+  };
+}
diff --git a/src/renderer/src/store/TutorialContext.ts b/src/renderer/src/store/TutorialContext.ts
new file mode 100644
index 000000000..d010afdc3
--- /dev/null
+++ b/src/renderer/src/store/TutorialContext.ts
@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+import { Tutorial } from '@renderer/store/Tutorial';
+
+export const TutorialContext = createContext<Tutorial | null>(null);
+
+export const useTutorialContext = () => {
+  const value = useContext(TutorialContext);
+
+  if (value === null) {
+    throw new Error('There must be a value!');
+  }
+
+  return value;
+};