diff --git a/.gitignore b/.gitignore
index 504afef..a450e56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 package-lock.json
+docs/DOCS.md
diff --git a/docs/README.md b/docs/README.md
index da2056b..9d5853a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,3 +1,8 @@
-# Headline
+# quizEngine [In Development] [В разработке]
+![Logo](logo.png)
 
-> An awesome project.
+Движок для викторин
+
+**Contact:**
+- [Discord](https://discord.gg/pqsu6FsHSe) room `#quiz-engine`
+- [Telegram](https://t.me/slexbc)
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
new file mode 100644
index 0000000..c97195c
--- /dev/null
+++ b/docs/_sidebar.md
@@ -0,0 +1 @@
+- [Documentation](DOCS.md)
diff --git a/docs/index.html b/docs/index.html
index 04dd4a7..b11a040 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,8 +12,17 @@
   <div id="app"></div>
   <script>
     window.$docsify = {
-      name: '',
-      repo: ''
+      name: 'quizEngine',
+      // basePath: 'https://lickass.club/quizengine/',
+      repo: 'https://github.com/emilecok/quizEngine',
+      coverpage: false,
+      onlyCover: false,
+      loadNavbar: false,
+      mergeNavbar: true,
+      loadSidebar: true,
+      // notFoundPage: true,
+      subMaxLevel: 3,
+      auto2top: true
     }
   </script>
   <!-- Docsify v4 -->
diff --git a/docs/logo.png b/docs/logo.png
new file mode 100644
index 0000000..cc14505
Binary files /dev/null and b/docs/logo.png differ
diff --git a/js/areas.js b/js/areas.js
index 08248d6..042f2c6 100644
--- a/js/areas.js
+++ b/js/areas.js
@@ -1,4 +1,4 @@
-import config from '../app/config.json';
+import config from './config.json';
 
 import * as Draw from './draw.js'
 
diff --git a/app/config.json b/js/config.json
similarity index 100%
rename from app/config.json
rename to js/config.json
diff --git a/js/engine.js b/js/engine.js
index f81653f..07572f1 100644
--- a/js/engine.js
+++ b/js/engine.js
@@ -1,4 +1,4 @@
-import config from '../app/config.json';
+import config from './config.json';
 
 export function imagePreloader(images, callback) {
 	let counter = 0;
@@ -16,12 +16,20 @@ export function imagePreloader(images, callback) {
 }
 
 export function shuffle(array) {
+	// ф
+
     for (let i = array.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
         [array[i], array[j]] = [array[j], array[i]];
     }
 }
 
+// 
+/**
+ * Функция возвращает ориентацию игры в зависимости от размера canvas
+ * @param {Object} canvas canvas object
+ * @return {Bool} landscape_orientation
+ */
 export function setOrientation(canvas) {
 	let landscape_orientation = null;
 
@@ -30,8 +38,8 @@ export function setOrientation(canvas) {
 	
 	if (config.debug)
 		console.log(landscape_orientation ?
-			'Canvas orientation set to landscape' :
-			'Canvas orientation set to portrait');
+			'Set game orientation to landscape' :
+			'Set game orientation to portrait');
 
 	return landscape_orientation;
 }
diff --git a/app/gameData.json b/js/gameData.json
similarity index 100%
rename from app/gameData.json
rename to js/gameData.json
diff --git a/js/index.bak.js b/js/index.bak.js
deleted file mode 100644
index e94410d..0000000
--- a/js/index.bak.js
+++ /dev/null
@@ -1,242 +0,0 @@
-'use strict';
-
-import config from '../config.json'; // game configuration
-import gameData from '../gameData.json'; // game data
-
-import { getMousePos, isInside } from './buttons.js';
-import { clearContext, getCenterH, getCenterV } from './draw.js';
-import { clickAnswer, shuffleQuestAnswer } from './game.js';
-
-// Engine variables -------------------------------------
-let DEBUG = true;
-let canvas = null; // canvas id
-let context = null; // context id
-let cW = null; // canvas with
-let cH = null; // canvas height
-let orientation = null; // screen orientation
-let button = null; // buttons array
-let area = null; // game areas (buttons, images, etc.)
-let game = null;
-
-// Init -------------------------------------------------
-window.onload = function() {
-	// init canvas id and sizes
-	canvas = document.getElementById('game');
-	context = canvas.getContext('2d');
-	cW = canvas.width;
-	cH = canvas.height;
-
-	// set screen orientation by carculate canvas width&height
-	if (cW >= cH) {	orientation = true;	}
-	else { orientation = false;	}
-
-	if (DEBUG) {
-		console.log(`Loaded ${gameData.length} quests.`);
-	}
-
-	game = {
-		// TODO: change quest by script
-		questIndex: 0,
-		quest: null,
-		questImage: null,
-		totalRightAnswers: 0, // количество правильных ответов
-		scene: null,
-	};
-	shuffleQuestAnswer(gameData); // shuffle quest
-	game.quest = gameData[game.questIndex];
-	shuffleQuestAnswer(gameData[game.questIndex].answer); // shuffle first quest answers
-
-	// присваем всем квестам статус не выполнен
-	gameData.forEach(element => element.status = null);
-
-	if (!orientation) {
-		area = {
-			answerButtons: { x: 10, y: cH - 340, w: cW - 20, h: 250 },
-			questionLabel: { x: 10, y: cH - 340 - 80, w: cW - 20, h: 70 },
-			uiButtons: { x: 10, y: cH - 80, w: cW - 20, h: 70 },
-			questProgress: { x: 10, y: 10, w: cW - 20, h: 20 },
-		}
-		area.image = { x: 10, y: area.questProgress.y + area.questProgress.h + 10,
-			w: cW - 20, h: area.questionLabel.y - area.questProgress.y - (area.questProgress.h * 2) };
-	}
-	// TODO: add areas for landscape mode
-
-	button = {
-		info: { x: 10, y: cH - 80, w: 70, h: 70 },
-		sfx: { x: cW - 80, y: cH - 80, w: 70, h: 70 },
-		// TODO: change data: to null
-		answerButtons: [
-			{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
-			{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
-			{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
-			{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
-		],
-	}
-
-	button.answerButtons.forEach(function callback(value, index, array) {
-		if (index == 0)
-			array[index].y = area.answerButtons.y;
-		else
-			array[index].y = array[index - 1].y + value.h + 15;
-	});
-
-	canvas.addEventListener('click', function(evt) {
-		let mousePos = getMousePos(canvas, evt);
-
-		// click info button
-		if (isInside(mousePos, button.info)) {
-			console.log("info");
-		}
-
-		// click sfx button
-		if (isInside(mousePos, button.sfx)) {
-			console.log("sfx");
-		}
-
-		// click by first answer button
-		if (isInside(mousePos, button.answerButtons[0])) {
-			clickAnswer(gameData, game, button.answerButtons[0].data);
-		}
-
-		// click by second answer button
-		if (isInside(mousePos, button.answerButtons[1])) {
-			clickAnswer(gameData, game, button.answerButtons[1].data);
-		}
-
-		// click by third answer button
-		if (isInside(mousePos, button.answerButtons[2])) {
-			clickAnswer(gameData, game, button.answerButtons[2].data);
-		}
-
-		// click by four answer button
-		if (isInside(mousePos, button.answerButtons[3])) {
-			clickAnswer(gameData, game, button.answerButtons[3].data);
-		}
-	}, false);
-
-	window.requestAnimationFrame(gameLoop);
-};
-
-
-// GameLoop ---------------------------------------------
-function gameLoop(timeStamp) {
-	update();
-	draw();
-
-	window.requestAnimationFrame(gameLoop);
-}
-
-// Game update func -------------------------------------
-function update() {
-	// Update answer buttons label
-	button.answerButtons.forEach(function callback(value, index) {
-		value.data = game.quest.answer[index];
-	});
-}
-
-// Draw to canvas func ----------------------------------
-function draw() {
-	clearContext(canvas, config); // flush?! canvas
-
-	// draw question label
-	context.font = "32px Ubuntu";
-	context.textAlign = "center";
-	context.fillStyle = "white";
-	context.fillText(game.quest.question, cW / 2, area.questionLabel.y + 30);
-
-	// draw answer buttons
-	context.fillStyle = "purple";
-	context.strokeStyle = "navy";
-	context.lineWidth = 2;
-
-	for (let i = 0; i <= button.answerButtons.length - 1; i++) {
-		context.fillRect(button.answerButtons[i].x, button.answerButtons[i].y,
-			button.answerButtons[i].w, button.answerButtons[i].h);
-		context.strokeRect(button.answerButtons[i].x, button.answerButtons[i].y,
-			button.answerButtons[i].w, button.answerButtons[i].h);
-	}
-
-	// draw answer button label
-	context.font = "32px Ubuntu";
-	context.textAlign = "center";
-	context.fillStyle = "white";
-
-	button.answerButtons.forEach(function callback(value) {
-		context.fillText(value.data, cW / 2, value.y + 35);
-	});
-
-	// draw image
-	game.questImage = new Image();
-	game.questImage.src = 'assets/images/' + game.quest.image;
-
-	// carculate image ratio by area.image size
-	if (game.questImage.width >= game.questImage.height) {
-		if (game.questImage.height > area.image.h) {
-			let ratio = game.questImage.width / area.image.w;
-			let newImageW = area.image.w / ratio;
-			let newImageH = area.image.h;
-
-			context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y,
-				newImageW, newImageH);
-		}
-		else {
-			// TODO: draw image center
-			// TODO: add option to sizeUp images to engine config
-		}
-	}
-	else {
-		let ratio = game.questImage.height / area.image.h;
-		let newImageW = area.image.w / ratio;
-
-		context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y,
-			newImageW, area.image.h);
-	}
-
-	// draw progress bar
-	let sizeProgressItem = area.questProgress.w / gameData.length;
-
-	context.strokeStyle = "black";
-
-	for (let i = 0; i < gameData.length; i++) {
-		// change progress item color by status answer
-		switch (gameData[i].status) {
-			case null:
-				context.fillStyle = "gray";
-				break;
-			case true:
-				context.fillStyle = "green";
-				break;
-			case false:
-				context.fillStyle = "red";
-				break;
-		}
-
-		context.fillRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
-		context.strokeRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
-	}
-
-	// UI ------------------------------------------
-	// TODO: переписать это всё г*
-	context.fillStyle = "red";
-	context.strokeStyle = "navy";
-	context.lineWidth = 2;
-	context.fillRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
-	context.strokeRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
-	context.fillRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
-	context.strokeRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
-
-	// draw game areas
-	if (DEBUG) {
-		context.strokeStyle = "red";
-		context.lineWidth = 2;
-
-		// answer buttons area
-		if (orientation)
-			// TODO: draw answer buttons area by landscape
-			console.log('TODO: draw answer buttons area by landscape');
-		else
-			for (const [key, value] of Object.entries(area)) {
-				context.strokeRect(value.x, value.y, value.w, value.h);
-			}
-	}
-}
diff --git a/js/index.js b/js/index.js
index db173f9..f7a5c9a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,8 +1,8 @@
 'use strict';
 
 // Import game configs and questsData -------------------
-import config from '../app/config.json'; // game configuration
-import gameData from '../app/gameData.json'; // game data
+import config from './config.json'; // game configuration
+import gameData from './gameData.json'; // game data
 
 // Import engine libs -----------------------------------
 import * as Engine from './engine.js';
diff --git a/package.json b/package.json
index d5a0ca5..82231a4 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "start": "webpack serve",
     "build": "webpack --mode=production",
+    "docs": "documentation build ./js -f md --markdown-toc=false -o docs/DOCS.md",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -21,6 +22,7 @@
   "homepage": "https://github.com/emilecok/quizEngine#readme",
   "devDependencies": {
     "docsify-cli": "^4.4.3",
+    "documentation": "^13.2.5",
     "webpack": "^5.42.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"