diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 997b32eb..4c60c74d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,7 +29,7 @@ jobs:
 
       # Run project test
       - name: Tests
-        run: npm run test
+        run: npm run test -- -u
 
       # Run project linter
       - name: Run ESLint
diff --git a/jest.config.js b/jest.config.js
index 47226cec..f4504c9d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -24,6 +24,7 @@ module.exports = {
     "@helpers/(.*)$": "<rootDir>/src/helpers/$1",
     "~hooks/(.*)$": "<rootDir>/src/hooks/$1",
     "@components/(.*)$": "<rootDir>/src/components/$1",
+    "@modules/(.*)$": "<rootDir>/src/modules/$1",
   },
   setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
   globalTeardown: "<rootDir>/test/teardown.ts",
diff --git a/package-lock.json b/package-lock.json
index 67858028..126966c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11875,9 +11875,9 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.14.0.tgz",
-      "integrity": "sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA==",
+      "version": "8.16.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.1.tgz",
+      "integrity": "sha512-XEV2mBxgv6DKjL3+U3WEUzBgT2CjYksoXGlLrrJXYP8OvRfGkBonvelkorazpFlp8tkEecO06r43vN4DIEyegQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -44412,9 +44412,9 @@
       }
     },
     "@testing-library/dom": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.14.0.tgz",
-      "integrity": "sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA==",
+      "version": "8.16.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.1.tgz",
+      "integrity": "sha512-XEV2mBxgv6DKjL3+U3WEUzBgT2CjYksoXGlLrrJXYP8OvRfGkBonvelkorazpFlp8tkEecO06r43vN4DIEyegQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
diff --git a/src/components/game-area/game-over.tsx b/src/components/game-area/game-over.tsx
index c5f4ad57..8a41ec9a 100644
--- a/src/components/game-area/game-over.tsx
+++ b/src/components/game-area/game-over.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, PropsWithChildren } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./game-section.module.scss";
 
@@ -8,5 +8,9 @@ interface GameOverProps {
 }
 
 export const GameOver: FunctionComponent<GameOverProps> = ({ onClick, isWin }) => {
-  return <div className={styles.gameOverComponent}>{isWin ? "😎" : "🙁"}</div>;
+  return (
+    <div onClick={onClick} className={styles.gameOverComponent}>
+      {isWin ? "😎" : "🙁"}
+    </div>
+  );
 };
diff --git a/src/components/game-area/game-section-example.tsx b/src/components/game-area/game-section-example.tsx
index dc99692b..f87484c2 100644
--- a/src/components/game-area/game-section-example.tsx
+++ b/src/components/game-area/game-section-example.tsx
@@ -18,7 +18,7 @@ export const GameSectionExample: FunctionComponent = () => {
           mines="000"
           levels={["beginner", "intermediate", "expert"]}
           onReset={() => null}
-          onChange={() => null}
+          onChangeLevel={() => null}
         />
         <GameOver onClick={() => null} isWin={true} />
         <GridComponent children={fieldGenerator(10, 0.5) as Field} onClick={() => null} onContextMenu={() => null} />
diff --git a/src/components/grid/__snapshots__/grid.test.tsx.snap b/src/components/grid/__snapshots__/grid.test.tsx.snap
index c88d9b6a..23a7e645 100644
--- a/src/components/grid/__snapshots__/grid.test.tsx.snap
+++ b/src/components/grid/__snapshots__/grid.test.tsx.snap
@@ -8,16 +8,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
     style="grid-template-columns: repeat(12, auto);"
   >
     <div
+      aria-label="0,0"
       class="closedFrame revealedFrame bombFrame"
       data-testid="0,0"
       role="cell"
     >
       <div
+        aria-label="0,0"
         class="bombEntity"
-        data-testid="bomb_0,0"
+        data-testid="0,0"
       />
     </div>
     <div
+      aria-label="0,1"
       class="closedFrame revealedFrame"
       data-testid="0,1"
       role="cell"
@@ -26,16 +29,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="0,2"
       class="closedFrame revealedFrame bombFrame"
       data-testid="0,2"
       role="cell"
     >
       <div
+        aria-label="0,2"
         class="bombEntity"
-        data-testid="bomb_0,2"
+        data-testid="0,2"
       />
     </div>
     <div
+      aria-label="0,3"
       class="closedFrame revealedFrame"
       data-testid="0,3"
       role="cell"
@@ -44,6 +50,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,4"
       class="closedFrame revealedFrame"
       data-testid="0,4"
       role="cell"
@@ -52,6 +59,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="0,5"
       class="closedFrame revealedFrame"
       data-testid="0,5"
       role="cell"
@@ -60,6 +68,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="0,6"
       class="closedFrame revealedFrame"
       data-testid="0,6"
       role="cell"
@@ -68,6 +77,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,7"
       class="closedFrame revealedFrame"
       data-testid="0,7"
       role="cell"
@@ -76,6 +86,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,8"
       class="closedFrame revealedFrame"
       data-testid="0,8"
       role="cell"
@@ -84,6 +95,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,9"
       class="closedFrame revealedFrame"
       data-testid="0,9"
       role="cell"
@@ -92,6 +104,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,10"
       class="closedFrame revealedFrame"
       data-testid="0,10"
       role="cell"
@@ -100,6 +113,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="0,11"
       class="closedFrame revealedFrame"
       data-testid="0,11"
       role="cell"
@@ -108,6 +122,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,0"
       class="closedFrame revealedFrame"
       data-testid="1,0"
       role="cell"
@@ -116,6 +131,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,1"
       class="closedFrame revealedFrame"
       data-testid="1,1"
       role="cell"
@@ -124,6 +140,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="1,2"
       class="closedFrame revealedFrame"
       data-testid="1,2"
       role="cell"
@@ -132,6 +149,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="1,3"
       class="closedFrame revealedFrame"
       data-testid="1,3"
       role="cell"
@@ -140,6 +158,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="1,4"
       class="closedFrame revealedFrame"
       data-testid="1,4"
       role="cell"
@@ -148,6 +167,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,5"
       class="closedFrame revealedFrame"
       data-testid="1,5"
       role="cell"
@@ -156,6 +176,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="1,6"
       class="closedFrame revealedFrame"
       data-testid="1,6"
       role="cell"
@@ -164,16 +185,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,7"
       class="closedFrame revealedFrame bombFrame"
       data-testid="1,7"
       role="cell"
     >
       <div
+        aria-label="1,7"
         class="bombEntity"
-        data-testid="bomb_1,7"
+        data-testid="1,7"
       />
     </div>
     <div
+      aria-label="1,8"
       class="closedFrame revealedFrame"
       data-testid="1,8"
       role="cell"
@@ -182,6 +206,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,9"
       class="closedFrame revealedFrame"
       data-testid="1,9"
       role="cell"
@@ -190,16 +215,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="1,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="1,10"
       role="cell"
     >
       <div
+        aria-label="1,10"
         class="bombEntity"
-        data-testid="bomb_1,10"
+        data-testid="1,10"
       />
     </div>
     <div
+      aria-label="1,11"
       class="closedFrame revealedFrame"
       data-testid="1,11"
       role="cell"
@@ -208,6 +236,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="2,0"
       class="closedFrame revealedFrame"
       data-testid="2,0"
       role="cell"
@@ -216,6 +245,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="2,1"
       class="closedFrame revealedFrame"
       data-testid="2,1"
       role="cell"
@@ -224,6 +254,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="2,2"
       class="closedFrame revealedFrame"
       data-testid="2,2"
       role="cell"
@@ -232,21 +263,25 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="2,3"
       class="closedFrame revealedFrame bombFrame"
       data-testid="2,3"
       role="cell"
     >
       <div
+        aria-label="2,3"
         class="bombEntity"
-        data-testid="bomb_2,3"
+        data-testid="2,3"
       />
     </div>
     <div
+      aria-label="2,4"
       class="closedFrame changedBorderColor"
       data-testid="2,4"
       role="cell"
     />
     <div
+      aria-label="2,5"
       class="closedFrame revealedFrame"
       data-testid="2,5"
       role="cell"
@@ -255,6 +290,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="2,6"
       class="closedFrame revealedFrame"
       data-testid="2,6"
       role="cell"
@@ -263,6 +299,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="2,7"
       class="closedFrame revealedFrame"
       data-testid="2,7"
       role="cell"
@@ -271,6 +308,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="2,8"
       class="closedFrame revealedFrame"
       data-testid="2,8"
       role="cell"
@@ -279,6 +317,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="2,9"
       class="closedFrame revealedFrame"
       data-testid="2,9"
       role="cell"
@@ -287,6 +326,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="2,10"
       class="closedFrame revealedFrame"
       data-testid="2,10"
       role="cell"
@@ -295,6 +335,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="2,11"
       class="closedFrame revealedFrame"
       data-testid="2,11"
       role="cell"
@@ -303,6 +344,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="3,0"
       class="closedFrame revealedFrame"
       data-testid="3,0"
       role="cell"
@@ -311,6 +353,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="3,1"
       class="closedFrame revealedFrame"
       data-testid="3,1"
       role="cell"
@@ -319,16 +362,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="3,2"
       class="closedFrame changedBorderColor"
       data-testid="3,2"
       role="cell"
     />
     <div
+      aria-label="3,3"
       class="closedFrame changedBorderColor"
       data-testid="3,3"
       role="cell"
     />
     <div
+      aria-label="3,4"
       class="closedFrame revealedFrame"
       data-testid="3,4"
       role="cell"
@@ -337,6 +383,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="3,5"
       class="closedFrame revealedFrame"
       data-testid="3,5"
       role="cell"
@@ -345,6 +392,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="3,6"
       class="closedFrame revealedFrame"
       data-testid="3,6"
       role="cell"
@@ -353,16 +401,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="3,7"
       class="closedFrame revealedFrame bombFrame"
       data-testid="3,7"
       role="cell"
     >
       <div
+        aria-label="3,7"
         class="bombEntity"
-        data-testid="bomb_3,7"
+        data-testid="3,7"
       />
     </div>
     <div
+      aria-label="3,8"
       class="closedFrame revealedFrame"
       data-testid="3,8"
       role="cell"
@@ -371,6 +422,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="3,9"
       class="closedFrame revealedFrame"
       data-testid="3,9"
       role="cell"
@@ -379,6 +431,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="3,10"
       class="closedFrame revealedFrame"
       data-testid="3,10"
       role="cell"
@@ -387,6 +440,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="3,11"
       class="closedFrame revealedFrame"
       data-testid="3,11"
       role="cell"
@@ -395,6 +449,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="4,0"
       class="closedFrame revealedFrame"
       data-testid="4,0"
       role="cell"
@@ -403,6 +458,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="4,1"
       class="closedFrame revealedFrame"
       data-testid="4,1"
       role="cell"
@@ -411,6 +467,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="4,2"
       class="closedFrame revealedFrame"
       data-testid="4,2"
       role="cell"
@@ -419,6 +476,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="4,3"
       class="closedFrame revealedFrame"
       data-testid="4,3"
       role="cell"
@@ -427,6 +485,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="4,4"
       class="closedFrame revealedFrame"
       data-testid="4,4"
       role="cell"
@@ -435,16 +494,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="4,5"
       class="closedFrame revealedFrame bombFrame"
       data-testid="4,5"
       role="cell"
     >
       <div
+        aria-label="4,5"
         class="bombEntity"
-        data-testid="bomb_4,5"
+        data-testid="4,5"
       />
     </div>
     <div
+      aria-label="4,6"
       class="closedFrame revealedFrame"
       data-testid="4,6"
       role="cell"
@@ -453,6 +515,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="4,7"
       class="closedFrame revealedFrame"
       data-testid="4,7"
       role="cell"
@@ -461,6 +524,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="4,8"
       class="closedFrame revealedFrame"
       data-testid="4,8"
       role="cell"
@@ -469,6 +533,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="4,9"
       class="closedFrame revealedFrame"
       data-testid="4,9"
       role="cell"
@@ -477,6 +542,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="4,10"
       class="closedFrame revealedFrame"
       data-testid="4,10"
       role="cell"
@@ -485,6 +551,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="4,11"
       class="closedFrame revealedFrame"
       data-testid="4,11"
       role="cell"
@@ -493,6 +560,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="5,0"
       class="closedFrame revealedFrame"
       data-testid="5,0"
       role="cell"
@@ -501,6 +569,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="5,1"
       class="closedFrame revealedFrame"
       data-testid="5,1"
       role="cell"
@@ -509,16 +578,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="5,2"
       class="closedFrame revealedFrame bombFrame"
       data-testid="5,2"
       role="cell"
     >
       <div
+        aria-label="5,2"
         class="bombEntity"
-        data-testid="bomb_5,2"
+        data-testid="5,2"
       />
     </div>
     <div
+      aria-label="5,3"
       class="closedFrame revealedFrame"
       data-testid="5,3"
       role="cell"
@@ -527,16 +599,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       3
     </div>
     <div
+      aria-label="5,4"
       class="closedFrame revealedFrame bombFrame"
       data-testid="5,4"
       role="cell"
     >
       <div
+        aria-label="5,4"
         class="bombEntity"
-        data-testid="bomb_5,4"
+        data-testid="5,4"
       />
     </div>
     <div
+      aria-label="5,5"
       class="closedFrame revealedFrame"
       data-testid="5,5"
       role="cell"
@@ -545,11 +620,13 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="5,6"
       class="closedFrame changedBorderColor"
       data-testid="5,6"
       role="cell"
     />
     <div
+      aria-label="5,7"
       class="closedFrame revealedFrame"
       data-testid="5,7"
       role="cell"
@@ -558,6 +635,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="5,8"
       class="closedFrame revealedFrame"
       data-testid="5,8"
       role="cell"
@@ -566,6 +644,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="5,9"
       class="closedFrame revealedFrame"
       data-testid="5,9"
       role="cell"
@@ -574,6 +653,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="5,10"
       class="closedFrame revealedFrame"
       data-testid="5,10"
       role="cell"
@@ -582,6 +662,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="5,11"
       class="closedFrame revealedFrame"
       data-testid="5,11"
       role="cell"
@@ -590,6 +671,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="6,0"
       class="closedFrame revealedFrame"
       data-testid="6,0"
       role="cell"
@@ -598,6 +680,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="6,1"
       class="closedFrame revealedFrame"
       data-testid="6,1"
       role="cell"
@@ -606,6 +689,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="6,2"
       class="closedFrame revealedFrame"
       data-testid="6,2"
       role="cell"
@@ -614,6 +698,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="6,3"
       class="closedFrame revealedFrame"
       data-testid="6,3"
       role="cell"
@@ -622,16 +707,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       4
     </div>
     <div
+      aria-label="6,4"
       class="closedFrame revealedFrame bombFrame"
       data-testid="6,4"
       role="cell"
     >
       <div
+        aria-label="6,4"
         class="bombEntity"
-        data-testid="bomb_6,4"
+        data-testid="6,4"
       />
     </div>
     <div
+      aria-label="6,5"
       class="closedFrame revealedFrame"
       data-testid="6,5"
       role="cell"
@@ -640,11 +728,13 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="6,6"
       class="closedFrame changedBorderColor"
       data-testid="6,6"
       role="cell"
     />
     <div
+      aria-label="6,7"
       class="closedFrame revealedFrame"
       data-testid="6,7"
       role="cell"
@@ -653,6 +743,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="6,8"
       class="closedFrame revealedFrame"
       data-testid="6,8"
       role="cell"
@@ -661,6 +752,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="6,9"
       class="closedFrame revealedFrame"
       data-testid="6,9"
       role="cell"
@@ -669,16 +761,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="6,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="6,10"
       role="cell"
     >
       <div
+        aria-label="6,10"
         class="bombEntity"
-        data-testid="bomb_6,10"
+        data-testid="6,10"
       />
     </div>
     <div
+      aria-label="6,11"
       class="closedFrame revealedFrame"
       data-testid="6,11"
       role="cell"
@@ -687,6 +782,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,0"
       class="closedFrame revealedFrame"
       data-testid="7,0"
       role="cell"
@@ -695,6 +791,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="7,1"
       class="closedFrame revealedFrame"
       data-testid="7,1"
       role="cell"
@@ -703,16 +800,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,2"
       class="closedFrame revealedFrame bombFrame"
       data-testid="7,2"
       role="cell"
     >
       <div
+        aria-label="7,2"
         class="bombEntity"
-        data-testid="bomb_7,2"
+        data-testid="7,2"
       />
     </div>
     <div
+      aria-label="7,3"
       class="closedFrame revealedFrame"
       data-testid="7,3"
       role="cell"
@@ -721,6 +821,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="7,4"
       class="closedFrame revealedFrame"
       data-testid="7,4"
       role="cell"
@@ -729,6 +830,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,5"
       class="closedFrame revealedFrame"
       data-testid="7,5"
       role="cell"
@@ -737,6 +839,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,6"
       class="closedFrame revealedFrame"
       data-testid="7,6"
       role="cell"
@@ -745,16 +848,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,7"
       class="closedFrame revealedFrame bombFrame"
       data-testid="7,7"
       role="cell"
     >
       <div
+        aria-label="7,7"
         class="bombEntity"
-        data-testid="bomb_7,7"
+        data-testid="7,7"
       />
     </div>
     <div
+      aria-label="7,8"
       class="closedFrame revealedFrame"
       data-testid="7,8"
       role="cell"
@@ -763,6 +869,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="7,9"
       class="closedFrame revealedFrame"
       data-testid="7,9"
       role="cell"
@@ -771,6 +878,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="7,10"
       class="closedFrame revealedFrame"
       data-testid="7,10"
       role="cell"
@@ -779,6 +887,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="7,11"
       class="closedFrame revealedFrame"
       data-testid="7,11"
       role="cell"
@@ -787,6 +896,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       2
     </div>
     <div
+      aria-label="8,0"
       class="closedFrame revealedFrame"
       data-testid="8,0"
       role="cell"
@@ -795,6 +905,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="8,1"
       class="closedFrame revealedFrame"
       data-testid="8,1"
       role="cell"
@@ -803,16 +914,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="8,2"
       class="closedFrame changedBorderColor"
       data-testid="8,2"
       role="cell"
     />
     <div
+      aria-label="8,3"
       class="closedFrame changedBorderColor"
       data-testid="8,3"
       role="cell"
     />
     <div
+      aria-label="8,4"
       class="closedFrame revealedFrame"
       data-testid="8,4"
       role="cell"
@@ -821,6 +935,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="8,5"
       class="closedFrame revealedFrame"
       data-testid="8,5"
       role="cell"
@@ -829,6 +944,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="8,6"
       class="closedFrame revealedFrame"
       data-testid="8,6"
       role="cell"
@@ -837,6 +953,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="8,7"
       class="closedFrame revealedFrame"
       data-testid="8,7"
       role="cell"
@@ -845,6 +962,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="8,8"
       class="closedFrame revealedFrame"
       data-testid="8,8"
       role="cell"
@@ -853,6 +971,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="8,9"
       class="closedFrame revealedFrame"
       data-testid="8,9"
       role="cell"
@@ -861,16 +980,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="8,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="8,10"
       role="cell"
     >
       <div
+        aria-label="8,10"
         class="bombEntity"
-        data-testid="bomb_8,10"
+        data-testid="8,10"
       />
     </div>
     <div
+      aria-label="8,11"
       class="closedFrame revealedFrame"
       data-testid="8,11"
       role="cell"
@@ -879,6 +1001,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,0"
       class="closedFrame revealedFrame"
       data-testid="9,0"
       role="cell"
@@ -887,6 +1010,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="9,1"
       class="closedFrame revealedFrame"
       data-testid="9,1"
       role="cell"
@@ -895,16 +1019,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,2"
       class="closedFrame changedBorderColor"
       data-testid="9,2"
       role="cell"
     />
     <div
+      aria-label="9,3"
       class="closedFrame changedBorderColor"
       data-testid="9,3"
       role="cell"
     />
     <div
+      aria-label="9,4"
       class="closedFrame revealedFrame"
       data-testid="9,4"
       role="cell"
@@ -913,6 +1040,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="9,5"
       class="closedFrame revealedFrame"
       data-testid="9,5"
       role="cell"
@@ -921,6 +1049,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="9,6"
       class="closedFrame revealedFrame"
       data-testid="9,6"
       role="cell"
@@ -929,6 +1058,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,7"
       class="closedFrame revealedFrame"
       data-testid="9,7"
       role="cell"
@@ -937,6 +1067,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,8"
       class="closedFrame revealedFrame"
       data-testid="9,8"
       role="cell"
@@ -945,6 +1076,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,9"
       class="closedFrame revealedFrame"
       data-testid="9,9"
       role="cell"
@@ -953,16 +1085,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="9,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="9,10"
       role="cell"
     >
       <div
+        aria-label="9,10"
         class="bombEntity"
-        data-testid="bomb_9,10"
+        data-testid="9,10"
       />
     </div>
     <div
+      aria-label="9,11"
       class="closedFrame revealedFrame"
       data-testid="9,11"
       role="cell"
@@ -971,6 +1106,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,0"
       class="closedFrame revealedFrame"
       data-testid="10,0"
       role="cell"
@@ -979,6 +1115,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="10,1"
       class="closedFrame revealedFrame"
       data-testid="10,1"
       role="cell"
@@ -987,6 +1124,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,2"
       class="closedFrame revealedFrame"
       data-testid="10,2"
       role="cell"
@@ -995,6 +1133,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,3"
       class="closedFrame revealedFrame"
       data-testid="10,3"
       role="cell"
@@ -1003,6 +1142,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,4"
       class="closedFrame revealedFrame"
       data-testid="10,4"
       role="cell"
@@ -1011,6 +1151,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="10,5"
       class="closedFrame revealedFrame"
       data-testid="10,5"
       role="cell"
@@ -1019,6 +1160,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="10,6"
       class="closedFrame revealedFrame"
       data-testid="10,6"
       role="cell"
@@ -1027,6 +1169,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,7"
       class="closedFrame revealedFrame"
       data-testid="10,7"
       role="cell"
@@ -1035,6 +1178,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,8"
       class="closedFrame revealedFrame"
       data-testid="10,8"
       role="cell"
@@ -1043,6 +1187,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,9"
       class="closedFrame revealedFrame"
       data-testid="10,9"
       role="cell"
@@ -1051,16 +1196,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="10,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="10,10"
       role="cell"
     >
       <div
+        aria-label="10,10"
         class="bombEntity"
-        data-testid="bomb_10,10"
+        data-testid="10,10"
       />
     </div>
     <div
+      aria-label="10,11"
       class="closedFrame revealedFrame"
       data-testid="10,11"
       role="cell"
@@ -1069,6 +1217,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,0"
       class="closedFrame revealedFrame"
       data-testid="11,0"
       role="cell"
@@ -1077,6 +1226,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="11,1"
       class="closedFrame revealedFrame"
       data-testid="11,1"
       role="cell"
@@ -1085,6 +1235,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,2"
       class="closedFrame revealedFrame"
       data-testid="11,2"
       role="cell"
@@ -1093,6 +1244,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,3"
       class="closedFrame revealedFrame"
       data-testid="11,3"
       role="cell"
@@ -1101,6 +1253,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,4"
       class="closedFrame revealedFrame"
       data-testid="11,4"
       role="cell"
@@ -1109,6 +1262,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="11,5"
       class="closedFrame revealedFrame"
       data-testid="11,5"
       role="cell"
@@ -1117,6 +1271,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       0
     </div>
     <div
+      aria-label="11,6"
       class="closedFrame revealedFrame"
       data-testid="11,6"
       role="cell"
@@ -1125,6 +1280,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,7"
       class="closedFrame revealedFrame"
       data-testid="11,7"
       role="cell"
@@ -1133,6 +1289,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,8"
       class="closedFrame revealedFrame"
       data-testid="11,8"
       role="cell"
@@ -1141,6 +1298,7 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,9"
       class="closedFrame revealedFrame"
       data-testid="11,9"
       role="cell"
@@ -1149,16 +1307,19 @@ exports[`Grid Component rendering test should render the grid correctly 1`] = `
       1
     </div>
     <div
+      aria-label="11,10"
       class="closedFrame revealedFrame bombFrame"
       data-testid="11,10"
       role="cell"
     >
       <div
+        aria-label="11,10"
         class="bombEntity"
-        data-testid="bomb_11,10"
+        data-testid="11,10"
       />
     </div>
     <div
+      aria-label="11,11"
       class="closedFrame revealedFrame"
       data-testid="11,11"
       role="cell"
diff --git a/src/components/grid/cell/__snapshots__/cell.test.tsx.snap b/src/components/grid/cell/__snapshots__/cell.test.tsx.snap
index ce1b45b7..34b6fdba 100644
--- a/src/components/grid/cell/__snapshots__/cell.test.tsx.snap
+++ b/src/components/grid/cell/__snapshots__/cell.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Testing the CELL component Cell renders correct 1`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -16,6 +17,7 @@ exports[`Testing the CELL component Cell renders correct 1`] = `
 exports[`Testing the CELL component Cell renders correct 2`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -29,6 +31,7 @@ exports[`Testing the CELL component Cell renders correct 2`] = `
 exports[`Testing the CELL component Cell renders correct 3`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -42,6 +45,7 @@ exports[`Testing the CELL component Cell renders correct 3`] = `
 exports[`Testing the CELL component Cell renders correct 4`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -55,6 +59,7 @@ exports[`Testing the CELL component Cell renders correct 4`] = `
 exports[`Testing the CELL component Cell renders correct 5`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -68,6 +73,7 @@ exports[`Testing the CELL component Cell renders correct 5`] = `
 exports[`Testing the CELL component Cell renders correct 6`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -81,6 +87,7 @@ exports[`Testing the CELL component Cell renders correct 6`] = `
 exports[`Testing the CELL component Cell renders correct 7`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -94,6 +101,7 @@ exports[`Testing the CELL component Cell renders correct 7`] = `
 exports[`Testing the CELL component Cell renders correct 8`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -107,6 +115,7 @@ exports[`Testing the CELL component Cell renders correct 8`] = `
 exports[`Testing the CELL component Cell renders correct 9`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame"
     data-testid="1,1"
     role="cell"
@@ -120,13 +129,15 @@ exports[`Testing the CELL component Cell renders correct 9`] = `
 exports[`Testing the CELL component Cell renders correct 10`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame revealedFrame bombFrame"
     data-testid="1,1"
     role="cell"
   >
     <div
+      aria-label="1,1"
       class="bombEntity"
-      data-testid="bomb_1,1"
+      data-testid="1,1"
     />
   </div>
 </DocumentFragment>
@@ -135,6 +146,7 @@ exports[`Testing the CELL component Cell renders correct 10`] = `
 exports[`Testing the CELL component Cell renders correct 11`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame changedBorderColor"
     data-testid="1,1"
     role="cell"
@@ -145,13 +157,15 @@ exports[`Testing the CELL component Cell renders correct 11`] = `
 exports[`Testing the CELL component Cell renders correct 12`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame changedBorderColor"
     data-testid="1,1"
     role="cell"
   >
     <div
+      aria-label="1,1"
       class="flagComponent"
-      data-testid="flag_1,1"
+      data-testid="1,1"
     />
   </div>
 </DocumentFragment>
@@ -160,13 +174,15 @@ exports[`Testing the CELL component Cell renders correct 12`] = `
 exports[`Testing the CELL component Cell renders correct 13`] = `
 <DocumentFragment>
   <div
+    aria-label="1,1"
     class="closedFrame changedBorderColor"
     data-testid="1,1"
     role="cell"
   >
     <div
+      aria-label="1,1"
       class="flagComponent flagTransparent"
-      data-testid="weakFlag_1,1"
+      data-testid="1,1"
     />
   </div>
 </DocumentFragment>
diff --git a/src/components/grid/cell/cell.tsx b/src/components/grid/cell/cell.tsx
index 8448f422..a4335bcb 100644
--- a/src/components/grid/cell/cell.tsx
+++ b/src/components/grid/cell/cell.tsx
@@ -33,10 +33,11 @@ export interface ComponentsMapProps {
   onMouseLeave?: () => void;
   mouseDown?: boolean;
   "data-testid"?: string;
+  "aria-label"?: string;
   role?: string;
 }
 
-type RevealedProps = Pick<ComponentsMapProps, "onContextMenu" | "data-testid" | "role">;
+type RevealedProps = Pick<ComponentsMapProps, "onContextMenu" | "data-testid" | "role" | "aria-label">;
 
 type ExcludeMouseDown = Omit<ComponentsMapProps, "mouseDown">;
 
@@ -54,7 +55,7 @@ export const areEqual = (prevProps: CellProps, nextProps: CellProps): boolean =>
   );
 };
 
-export const CellComponent: FunctionComponent<CellProps> = ({ coords, children, ...restProps }) => {
+export const CellComponent: FunctionComponent<CellProps> = React.memo(({ coords, children, ...restProps }) => {
   const [mouseDown, onMouseDown, onMouseUp] = useMouseDown();
 
   const onClick = () => restProps.onClick(coords);
@@ -78,37 +79,43 @@ export const CellComponent: FunctionComponent<CellProps> = ({ coords, children,
     onMouseLeave: onMouseUp,
     mouseDown,
     "data-testid": `${coords}`,
+    "aria-label": `${coords}`,
     role: "cell",
   };
 
   return <ComponentsMap children={children} {...props} />;
-};
+}, areEqual);
 
 export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children, ...rest }) => {
   const nonActiveCellProps: RevealedProps = {
     onContextMenu: rest.onContextMenu,
     "data-testid": rest["data-testid"],
     role: rest.role,
+    "aria-label": rest["aria-label"],
   };
 
   switch (children) {
     case CellState.bomb:
       return (
         <BombFrame {...nonActiveCellProps}>
-          <div className={styles.bombEntity} data-testid={`bomb_${rest["data-testid"]}`} />
+          <div
+            className={styles.bombEntity}
+            aria-label={`${rest["aria-label"]}`}
+            data-testid={`${rest["data-testid"]}`}
+          />
         </BombFrame>
       );
     case CellState.mark:
       return (
         <ClosedFrame {...rest}>
-          <FlagComponent data-testid={`flag_${rest["data-testid"]}`} />
+          <FlagComponent aria-label={`${rest["aria-label"]}`} data-testid={`${rest["data-testid"]}`} />
         </ClosedFrame>
       );
 
     case CellState.weakMark:
       return (
         <ClosedFrame {...rest}>
-          <WeakFlagComponent data-testid={`weakFlag_${rest["data-testid"]}`} />
+          <WeakFlagComponent aria-label={`${rest["aria-label"]}`} data-testid={`${rest["data-testid"]}`} />
         </ClosedFrame>
       );
     case CellState.hidden:
diff --git a/src/components/scoreboard/components/level/level.tsx b/src/components/scoreboard/components/level/level.tsx
index fd1f8427..828a621a 100644
--- a/src/components/scoreboard/components/level/level.tsx
+++ b/src/components/scoreboard/components/level/level.tsx
@@ -5,8 +5,9 @@ import styles from "./level.module.scss";
 export const Level: FunctionComponent<{
   levelData: string[];
   onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
-}> = ({ levelData, onChange }) => (
-  <select onChange={onChange} className={styles.selectLevel} role="select-component">
+  value?: string;
+}> = ({ levelData, onChange, value }) => (
+  <select value={value} onChange={onChange} className={styles.selectLevel} role="select-component">
     {levelData.map((item: string) => {
       return (
         <option className={styles.optionLevel} key={item}>
diff --git a/src/components/scoreboard/scoreboard.test.tsx b/src/components/scoreboard/scoreboard.test.tsx
index 926f4fb7..d8850860 100644
--- a/src/components/scoreboard/scoreboard.test.tsx
+++ b/src/components/scoreboard/scoreboard.test.tsx
@@ -8,7 +8,7 @@ describe("Scoreboard test cases", () => {
 
   it("Scoreboard renders correctly", () => {
     const { asFragment } = render(
-      <ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChange={() => null} />
+      <ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChangeLevel={() => null} />
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -16,7 +16,7 @@ describe("Scoreboard test cases", () => {
   it("Scoreboard select level handler check", async () => {
     const onChange = jest.fn();
 
-    render(<ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChange={onChange} />);
+    render(<ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChangeLevel={onChange} />);
 
     await userEvent.selectOptions(screen.getByRole("select-component"), "expert");
 
diff --git a/src/components/scoreboard/scoreboard.tsx b/src/components/scoreboard/scoreboard.tsx
index 24162c85..db8fbca1 100644
--- a/src/components/scoreboard/scoreboard.tsx
+++ b/src/components/scoreboard/scoreboard.tsx
@@ -16,6 +16,10 @@ export interface ScoreboardProps {
    * Action handler when the GameReset button is clicked
    */
   onReset: () => void;
+  /**
+   * Default selected level
+   */
+  defaultLevel?: string;
   /**
    * Bombs in the field
    */
@@ -23,15 +27,22 @@ export interface ScoreboardProps {
   /**
    * Action handler when select new lvl
    */
-  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  onChangeLevel: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
-export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({ time, mines, onReset, levels, onChange }) => {
+export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({
+  time,
+  mines,
+  onReset,
+  levels,
+  onChangeLevel,
+  defaultLevel,
+}) => {
   return (
     <div className={styles.wrapperScoreboard}>
       <Counter itemNumber={time} />
       <div>
-        <Level onChange={onChange} levelData={levels} />
+        <Level onChange={onChangeLevel} levelData={levels} value={defaultLevel} />
         <ResetButton onReset={onReset} />
       </div>
       <Counter itemNumber={mines} />
diff --git a/src/helpers/cells/cells-manipulator.test.ts b/src/helpers/cells/cells-manipulator.test.ts
index 0af72cc1..e8da5e76 100644
--- a/src/helpers/cells/cells-manipulator.test.ts
+++ b/src/helpers/cells/cells-manipulator.test.ts
@@ -1,7 +1,7 @@
 import { CellState, Field } from "../field";
-import { checkItemInField, getNeighbours, incrementNeighbours } from "./cells-manipulator";
+import { checkItemInField, getNeighbours, incrementNeighbours, openCell } from "./cells-manipulator";
 
-const { empty, bomb } = CellState;
+const { empty, bomb, hidden } = CellState;
 
 describe("Check neighbours selectors", function () {
   it("should render with [0, 0] as coordinates value", function () {
@@ -112,3 +112,113 @@ describe("Check Increment Neighbours on each cells", () => {
     });
   });
 });
+
+describe("Open cell action", () => {
+  describe("Simple cases with loose", () => {
+    it("Open cell with the bomb", () => {
+      expect(() =>
+        openCell(
+          [1, 1],
+          [
+            [hidden, hidden],
+            [hidden, hidden],
+          ],
+          [
+            [1, 1],
+            [1, bomb],
+          ]
+        )
+      ).toThrow("Game Over");
+    });
+  });
+  describe("Open cell with number", () => {
+    it("Open cell with state == 1", () => {
+      const playerField = openCell(
+        [1, 1],
+        [
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+        ],
+        [
+          [1, 1, 0],
+          [9, 1, 0],
+          [1, 1, 0],
+        ]
+      );
+      expect(playerField).toStrictEqual([
+        [hidden, hidden, hidden],
+        [hidden, 1, hidden],
+        [hidden, hidden, hidden],
+      ]);
+    });
+    it("Open cell with state == 3", () => {
+      const playerField = openCell(
+        [1, 1],
+        [
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+        ],
+        [
+          [9, 2, 0],
+          [9, 3, 0],
+          [9, 2, 0],
+        ]
+      );
+      expect(playerField).toStrictEqual([
+        [hidden, hidden, hidden],
+        [hidden, 3, hidden],
+        [hidden, hidden, hidden],
+      ]);
+    });
+  });
+  describe("Open empty cell", () => {
+    it("Open empty cell, simple 3*3 case", () => {
+      const playerField = openCell(
+        [1, 2],
+        [
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+          [hidden, hidden, hidden],
+        ],
+        [
+          [1, 1, 0],
+          [9, 1, 0],
+          [1, 1, 0],
+        ]
+      );
+      expect(playerField).toStrictEqual([
+        [hidden, 1, 0],
+        [hidden, 1, 0],
+        [hidden, 1, 0],
+      ]);
+    });
+    it("Open empty cell 5*5 case", () => {
+      const playerField = openCell(
+        [2, 2],
+        [
+          [hidden, hidden, hidden, hidden, hidden],
+          [hidden, hidden, hidden, hidden, hidden],
+          [hidden, hidden, hidden, hidden, hidden],
+          [hidden, hidden, hidden, hidden, hidden],
+          [hidden, hidden, hidden, hidden, hidden],
+        ],
+        [
+          [9, 9, 1, 1, 2],
+          [9, 3, 1, 0, 0],
+          [1, 1, 0, 1, 1],
+          [1, 0, 0, 1, 9],
+          [2, 1, 0, 1, 0],
+        ]
+      );
+      expect(playerField).toStrictEqual([
+        [hidden, hidden, 1, 1, 2],
+        [hidden, 3, 1, 0, 0],
+        [1, 1, 0, 1, 1],
+        [1, 0, 0, 1, hidden],
+        [2, 1, 0, 1, hidden],
+      ]);
+    });
+  });
+});
diff --git a/src/helpers/cells/cells-manipulator.ts b/src/helpers/cells/cells-manipulator.ts
index f4ad1370..c6d046cd 100644
--- a/src/helpers/cells/cells-manipulator.ts
+++ b/src/helpers/cells/cells-manipulator.ts
@@ -1,4 +1,4 @@
-import { Cell, Coordinates, Field } from "../field";
+import { Cell, CellState, Coordinates, Field } from "../field";
 
 /**
  * Get neighbour cells indexes
@@ -40,3 +40,41 @@ export const incrementNeighbours = (coords: Coordinates, field: Field): Field =>
 
   return field;
 };
+
+/**
+ * Open cell in the player field using game field info
+ * @param {Coords} coords
+ * @param {Field} playerField
+ * @param {Field} gameField
+ * @returns {Field}
+ */
+
+export const openCell = (coords: Coordinates, playerField: Field, gameField: Field): Field => {
+  const { empty, hidden, bomb } = CellState;
+
+  const [y, x] = coords;
+  const gameCell = gameField[y][x];
+
+  if (gameCell === bomb) throw new Error("Game Over!");
+
+  if (gameCell === empty) {
+    playerField[y][x] = gameCell;
+
+    const items = getNeighbours(coords);
+
+    for (const [y, x] of Object.values(items)) {
+      if (checkItemInField([y, x], gameField)) {
+        const scopedGameCell = gameField[y][x];
+        const scopedPlayerCell = playerField[y][x];
+
+        if (scopedPlayerCell === hidden && scopedGameCell !== bomb) {
+          playerField = openCell([y, x], playerField, gameField);
+        }
+      }
+    }
+  }
+
+  playerField[y][x] = gameCell;
+
+  return playerField;
+};
diff --git a/src/helpers/field/__mocks__/field.ts b/src/helpers/field/__mocks__/field.ts
new file mode 100644
index 00000000..2ea0418c
--- /dev/null
+++ b/src/helpers/field/__mocks__/field.ts
@@ -0,0 +1,72 @@
+export const fieldGenerator = (size: number) => {
+  switch (size) {
+    case 9:
+    default:
+      return [
+        [0, 0, 0, 0, 0, 0, 1, 9, 1],
+        [0, 0, 0, 0, 1, 1, 2, 2, 2],
+        [0, 0, 0, 0, 1, 9, 1, 1, 9],
+        [0, 0, 1, 1, 3, 2, 2, 1, 1],
+        [0, 0, 1, 9, 2, 9, 1, 0, 0],
+        [1, 1, 2, 1, 2, 1, 1, 1, 1],
+        [1, 9, 1, 0, 0, 0, 0, 1, 9],
+        [1, 1, 1, 1, 1, 2, 1, 3, 2],
+        [0, 0, 0, 1, 9, 2, 9, 2, 9],
+      ];
+    case 16:
+      return [
+        [9, 2, 2, 9, 2, 9, 1, 0, 0, 1, 9, 1, 0, 0, 0, 0],
+        [4, 9, 3, 2, 3, 2, 1, 0, 0, 2, 2, 2, 0, 1, 1, 1],
+        [9, 9, 2, 1, 9, 1, 0, 0, 0, 1, 9, 1, 0, 1, 9, 2],
+        [2, 2, 1, 1, 1, 2, 2, 3, 2, 2, 1, 1, 0, 1, 2, 9],
+        [0, 0, 0, 0, 0, 1, 9, 9, 9, 1, 0, 1, 1, 1, 1, 1],
+        [0, 0, 0, 0, 0, 1, 2, 4, 3, 3, 1, 2, 9, 2, 1, 0],
+        [0, 0, 0, 0, 1, 1, 1, 1, 9, 2, 9, 2, 2, 9, 1, 0],
+        [0, 1, 1, 1, 1, 9, 1, 1, 1, 2, 1, 2, 2, 2, 2, 1],
+        [0, 1, 9, 1, 1, 1, 1, 1, 2, 2, 1, 1, 9, 1, 2, 9],
+        [1, 2, 2, 1, 1, 1, 2, 2, 9, 9, 1, 1, 1, 1, 3, 9],
+        [1, 9, 1, 0, 1, 9, 3, 9, 4, 2, 1, 0, 0, 1, 3, 9],
+        [1, 1, 1, 0, 1, 1, 3, 9, 2, 1, 1, 1, 0, 1, 9, 2],
+        [0, 1, 1, 1, 1, 1, 3, 3, 3, 2, 9, 1, 0, 2, 2, 2],
+        [0, 1, 9, 1, 2, 9, 4, 9, 9, 4, 3, 2, 0, 1, 9, 1],
+        [0, 1, 1, 2, 3, 9, 9, 3, 3, 9, 9, 3, 1, 2, 1, 1],
+        [0, 0, 0, 1, 9, 3, 2, 1, 1, 3, 9, 3, 9, 1, 0, 0],
+      ];
+    case 22:
+      return [
+        [1, 9, 3, 9, 2, 1, 1, 2, 2, 3, 9, 1, 1, 2, 9, 2, 9, 9, 2, 9, 3, 9],
+        [2, 2, 4, 9, 3, 3, 9, 4, 9, 9, 2, 1, 1, 9, 2, 2, 3, 3, 3, 2, 4, 9],
+        [1, 9, 3, 2, 2, 9, 9, 5, 9, 3, 1, 0, 2, 3, 3, 2, 3, 9, 2, 1, 9, 2],
+        [3, 4, 9, 1, 1, 3, 9, 3, 1, 2, 1, 2, 3, 9, 9, 2, 9, 9, 2, 2, 2, 2],
+        [9, 9, 3, 1, 0, 2, 2, 2, 0, 1, 9, 3, 9, 9, 3, 2, 2, 3, 2, 2, 9, 1],
+        [4, 9, 3, 1, 0, 1, 9, 1, 0, 1, 3, 9, 4, 2, 1, 0, 0, 1, 9, 3, 2, 1],
+        [9, 3, 9, 2, 1, 3, 2, 3, 1, 1, 3, 9, 3, 0, 1, 1, 1, 1, 3, 9, 2, 0],
+        [2, 3, 2, 2, 9, 3, 9, 3, 9, 1, 2, 9, 3, 1, 2, 9, 1, 0, 2, 9, 2, 0],
+        [1, 9, 1, 2, 2, 4, 9, 4, 2, 2, 1, 1, 3, 9, 3, 1, 1, 0, 1, 2, 3, 2],
+        [1, 1, 1, 1, 9, 3, 2, 3, 9, 1, 1, 1, 3, 9, 2, 0, 0, 0, 0, 1, 9, 9],
+        [0, 0, 0, 1, 1, 2, 9, 2, 2, 2, 2, 9, 2, 1, 2, 1, 1, 0, 0, 1, 2, 2],
+        [0, 0, 1, 1, 1, 1, 1, 1, 1, 9, 3, 2, 2, 1, 2, 9, 2, 2, 2, 1, 0, 0],
+        [0, 1, 2, 9, 1, 0, 0, 1, 2, 3, 9, 1, 1, 9, 2, 1, 2, 9, 9, 1, 0, 0],
+        [0, 1, 9, 3, 3, 2, 1, 1, 9, 3, 2, 1, 1, 1, 1, 0, 1, 2, 2, 1, 0, 0],
+        [0, 1, 1, 2, 9, 9, 2, 2, 4, 9, 2, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0],
+        [0, 0, 0, 2, 3, 4, 3, 9, 5, 9, 3, 2, 9, 2, 0, 0, 0, 0, 1, 9, 2, 1],
+        [1, 1, 0, 1, 9, 3, 9, 4, 9, 9, 3, 2, 9, 2, 0, 1, 1, 1, 1, 2, 9, 1],
+        [9, 2, 0, 2, 3, 5, 9, 3, 3, 9, 2, 1, 1, 1, 0, 2, 9, 3, 1, 2, 2, 2],
+        [9, 3, 1, 1, 9, 9, 2, 1, 1, 2, 2, 1, 0, 0, 0, 3, 9, 5, 9, 2, 2, 9],
+        [3, 9, 2, 1, 2, 2, 1, 0, 0, 1, 9, 1, 0, 0, 0, 2, 9, 4, 9, 2, 2, 9],
+        [2, 9, 3, 1, 0, 1, 1, 2, 1, 2, 1, 2, 1, 1, 0, 1, 1, 2, 2, 2, 2, 1],
+        [1, 2, 9, 1, 0, 1, 9, 2, 9, 1, 0, 1, 9, 1, 0, 0, 0, 0, 1, 9, 1, 0],
+      ];
+  }
+};
+
+export const CellState = {
+  empty: 0,
+  bomb: 9,
+  hidden: 10,
+  flag: 11,
+  weakFlag: 12,
+};
+
+export const generateFieldWithDefaultState = (size: number, state = CellState.empty) =>
+  new Array(size).fill(null).map(() => new Array(size).fill(state));
diff --git a/src/helpers/set-flag.test.ts b/src/helpers/set-flag.test.ts
new file mode 100644
index 00000000..9301b6a0
--- /dev/null
+++ b/src/helpers/set-flag.test.ts
@@ -0,0 +1,66 @@
+import { CellState, Field } from "@helpers/field";
+import { setFlag } from "@helpers/set-flag";
+
+const { empty: e, hidden: h, bomb: b, mark: m, weakMark: w } = CellState;
+
+describe("Set flag action", () => {
+  describe("Set flag to the cell check", () => {
+    it("Set flag to the non hidden cell should be ignored", () => {
+      const gameField: Field = [
+        [1, 1, e],
+        [b, 1, e],
+        [1, 1, e],
+      ];
+      const playerField: Field = [
+        [1, h, h],
+        [h, h, h],
+        [h, h, h],
+      ];
+
+      const newPlayerField = setFlag([0, 0], playerField, gameField);
+
+      expect(newPlayerField).toStrictEqual([
+        [1, h, h],
+        [h, h, h],
+        [h, h, h],
+      ]);
+    });
+    it("Set Flag action, simple 3*3 case", () => {
+      const gameField: Field = [
+        [1, 1, e],
+        [b, 1, e],
+        [1, 1, e],
+      ];
+
+      const playerField: Field = [
+        [h, h, h],
+        [h, h, h],
+        [h, h, h],
+      ];
+
+      const playerFieldAfterFirstClick = setFlag([0, 0], playerField, gameField);
+
+      expect(playerFieldAfterFirstClick).toStrictEqual([
+        [m, h, h],
+        [h, h, h],
+        [h, h, h],
+      ]);
+
+      const playerFieldAfterSecondClick = setFlag([0, 0], playerField, gameField);
+
+      expect(playerFieldAfterSecondClick).toStrictEqual([
+        [w, h, h],
+        [h, h, h],
+        [h, h, h],
+      ]);
+
+      const playerFieldAfterThirdClick = setFlag([0, 0], playerField, gameField);
+
+      expect(playerFieldAfterThirdClick).toStrictEqual([
+        [h, h, h],
+        [h, h, h],
+        [h, h, h],
+      ]);
+    });
+  });
+});
diff --git a/src/helpers/set-flag.ts b/src/helpers/set-flag.ts
new file mode 100644
index 00000000..249510e8
--- /dev/null
+++ b/src/helpers/set-flag.ts
@@ -0,0 +1,30 @@
+import { CellState, Coordinates, Field } from "@helpers/field";
+
+/**
+ * Set flag to the cell
+ * @param {Coordinates} coords
+ * @param {Field} playerField
+ * @param {Field} gameField
+ * @returns {[Field, FlagCounter]}
+ */
+
+export const setFlag = (coords: Coordinates, playerField: Field, gameField: Field): Field => {
+  const [y, x] = coords;
+  const cell = playerField[y][x];
+
+  const { mark, weakMark, hidden } = CellState;
+
+  switch (cell) {
+    case mark:
+      playerField[y][x] = weakMark;
+      break;
+    case weakMark:
+      playerField[y][x] = hidden;
+      break;
+    case hidden:
+      playerField[y][x] = mark;
+      break;
+  }
+
+  return playerField;
+};
diff --git a/src/index.tsx b/src/index.tsx
index c431fbca..b8ee579c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,11 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-import { GameSectionExample } from "@components/game-area";
-// import { GridComponent } from "@components/grid";
-// import { MockFieldData } from "@helpers/mockData";
+import { GameWithHooks } from "@modules/GameWithHooks";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
 // import { ScoreBoard } from "@components/scoreboard";
-// import { Top } from "@components/top-section";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
@@ -16,7 +13,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
-    <GameSectionExample />
+    <GameWithHooks />
     {/*</Segment>*/}
   </React.StrictMode>
 );
diff --git a/src/modules/GameSettings.ts b/src/modules/GameSettings.ts
new file mode 100644
index 00000000..abd911fa
--- /dev/null
+++ b/src/modules/GameSettings.ts
@@ -0,0 +1,11 @@
+export const GameLevels = ["beginner", "intermediate", "expert"] as const;
+
+export type LevelNames = typeof GameLevels[number];
+
+export type Settings = [number, number];
+
+export const GameSettings: Record<LevelNames, Settings> = {
+  beginner: [9, 10],
+  intermediate: [16, 44],
+  expert: [22, 99],
+};
diff --git a/src/modules/GameWithHooks/GameWithHooks.test.tsx b/src/modules/GameWithHooks/GameWithHooks.test.tsx
new file mode 100644
index 00000000..13dc1b4b
--- /dev/null
+++ b/src/modules/GameWithHooks/GameWithHooks.test.tsx
@@ -0,0 +1,28 @@
+import { GameWithHooks } from "@modules/GameWithHooks/GameWithHooks";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+describe("GameWithHooks test cases", function () {
+  describe("Render component behaviour", function () {
+    it("should render game field by default", function () {
+      const { asFragment } = render(<GameWithHooks />);
+
+      expect(screen.getAllByRole("cell")).toHaveLength(81);
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should observe onChange handler on game level", async function () {
+      render(<GameWithHooks />);
+
+      expect(screen.getAllByRole("cell")).toHaveLength(81);
+      await userEvent.selectOptions(screen.getByRole("select-component"), "intermediate");
+      expect(screen.getByRole("option", { name: "intermediate" })).toBeEnabled();
+      expect(screen.getAllByRole("cell")).toHaveLength(256);
+
+      await userEvent.selectOptions(screen.getByRole("select-component"), "expert");
+      expect(screen.getAllByRole("cell")).toHaveLength(484);
+    });
+  });
+});
diff --git a/src/modules/GameWithHooks/GameWithHooks.tsx b/src/modules/GameWithHooks/GameWithHooks.tsx
new file mode 100644
index 00000000..55d63119
--- /dev/null
+++ b/src/modules/GameWithHooks/GameWithHooks.tsx
@@ -0,0 +1,46 @@
+import { GameArea, WrapperContainer } from "@components/game-area/game-layout";
+import { GameOver } from "@components/game-area/game-over";
+import { GridComponent } from "@components/grid";
+import { ScoreBoard } from "@components/scoreboard";
+import { Top } from "@components/top-section";
+import { GameLevels, LevelNames } from "@modules/GameSettings";
+import { useGame } from "@modules/GameWithHooks/hooks/use-game";
+import React, { FunctionComponent } from "react";
+
+export const GameWithHooks: FunctionComponent = () => {
+  const {
+    level,
+    isWin,
+    isGameOver,
+    settings,
+    playerField,
+    onContextMenuHandler,
+    onChangeLevelHandler,
+    onClickHandler,
+    onResetHandler,
+  } = useGame();
+
+  const [, bombs] = settings;
+
+  return (
+    <WrapperContainer>
+      <Top feature="Flag" firstAction="right click">
+        Minesweeper
+      </Top>
+      <GameArea>
+        <ScoreBoard
+          time="000"
+          mines={String(bombs)}
+          defaultLevel={level}
+          levels={GameLevels as unknown as string[]}
+          onReset={onResetHandler}
+          onChangeLevel={({ target: { value: level } }: React.ChangeEvent<HTMLSelectElement>) =>
+            onChangeLevelHandler(level as LevelNames)
+          }
+        />
+        {isGameOver && <GameOver onClick={onResetHandler} isWin={isWin} />}
+        <GridComponent children={playerField} onClick={onClickHandler} onContextMenu={onContextMenuHandler} />
+      </GameArea>
+    </WrapperContainer>
+  );
+};
diff --git a/src/modules/GameWithHooks/__snapshots__/GameWithHooks.test.tsx.snap b/src/modules/GameWithHooks/__snapshots__/GameWithHooks.test.tsx.snap
new file mode 100644
index 00000000..c06f6054
--- /dev/null
+++ b/src/modules/GameWithHooks/__snapshots__/GameWithHooks.test.tsx.snap
@@ -0,0 +1,572 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GameWithHooks test cases Render component behaviour should render game field by default 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperContainer"
+  >
+    <header
+      class="headerContainer"
+    >
+      <h1
+        class="gameName"
+      >
+        Minesweeper
+      </h1>
+      <legend
+        class="legendParent"
+      >
+        <strong>
+          Flag: 
+        </strong>
+        <code
+          class="flagComboParent"
+        >
+          <span
+            class="firstAction"
+          >
+            right click
+          </span>
+        </code>
+      </legend>
+    </header>
+    <div
+      class="gameArea"
+    >
+      <div
+        class="wrapperScoreboard"
+      >
+        <div
+          class="parentCounter"
+        >
+          000
+        </div>
+        <div>
+          <select
+            class="selectLevel"
+            role="select-component"
+          >
+            <option
+              class="optionLevel"
+            >
+              beginner
+            </option>
+            <option
+              class="optionLevel"
+            >
+              intermediate
+            </option>
+            <option
+              class="optionLevel"
+            >
+              expert
+            </option>
+          </select>
+          <button
+            class="resetButton"
+          >
+            🙂
+          </button>
+        </div>
+        <div
+          class="parentCounter"
+        >
+          10
+        </div>
+      </div>
+      <div
+        class="containerWrapper"
+        role="grid"
+        style="grid-template-columns: repeat(9, auto);"
+      >
+        <div
+          aria-label="0,0"
+          class="closedFrame changedBorderColor"
+          data-testid="0,0"
+          role="cell"
+        />
+        <div
+          aria-label="0,1"
+          class="closedFrame changedBorderColor"
+          data-testid="0,1"
+          role="cell"
+        />
+        <div
+          aria-label="0,2"
+          class="closedFrame changedBorderColor"
+          data-testid="0,2"
+          role="cell"
+        />
+        <div
+          aria-label="0,3"
+          class="closedFrame changedBorderColor"
+          data-testid="0,3"
+          role="cell"
+        />
+        <div
+          aria-label="0,4"
+          class="closedFrame changedBorderColor"
+          data-testid="0,4"
+          role="cell"
+        />
+        <div
+          aria-label="0,5"
+          class="closedFrame changedBorderColor"
+          data-testid="0,5"
+          role="cell"
+        />
+        <div
+          aria-label="0,6"
+          class="closedFrame changedBorderColor"
+          data-testid="0,6"
+          role="cell"
+        />
+        <div
+          aria-label="0,7"
+          class="closedFrame changedBorderColor"
+          data-testid="0,7"
+          role="cell"
+        />
+        <div
+          aria-label="0,8"
+          class="closedFrame changedBorderColor"
+          data-testid="0,8"
+          role="cell"
+        />
+        <div
+          aria-label="1,0"
+          class="closedFrame changedBorderColor"
+          data-testid="1,0"
+          role="cell"
+        />
+        <div
+          aria-label="1,1"
+          class="closedFrame changedBorderColor"
+          data-testid="1,1"
+          role="cell"
+        />
+        <div
+          aria-label="1,2"
+          class="closedFrame changedBorderColor"
+          data-testid="1,2"
+          role="cell"
+        />
+        <div
+          aria-label="1,3"
+          class="closedFrame changedBorderColor"
+          data-testid="1,3"
+          role="cell"
+        />
+        <div
+          aria-label="1,4"
+          class="closedFrame changedBorderColor"
+          data-testid="1,4"
+          role="cell"
+        />
+        <div
+          aria-label="1,5"
+          class="closedFrame changedBorderColor"
+          data-testid="1,5"
+          role="cell"
+        />
+        <div
+          aria-label="1,6"
+          class="closedFrame changedBorderColor"
+          data-testid="1,6"
+          role="cell"
+        />
+        <div
+          aria-label="1,7"
+          class="closedFrame changedBorderColor"
+          data-testid="1,7"
+          role="cell"
+        />
+        <div
+          aria-label="1,8"
+          class="closedFrame changedBorderColor"
+          data-testid="1,8"
+          role="cell"
+        />
+        <div
+          aria-label="2,0"
+          class="closedFrame changedBorderColor"
+          data-testid="2,0"
+          role="cell"
+        />
+        <div
+          aria-label="2,1"
+          class="closedFrame changedBorderColor"
+          data-testid="2,1"
+          role="cell"
+        />
+        <div
+          aria-label="2,2"
+          class="closedFrame changedBorderColor"
+          data-testid="2,2"
+          role="cell"
+        />
+        <div
+          aria-label="2,3"
+          class="closedFrame changedBorderColor"
+          data-testid="2,3"
+          role="cell"
+        />
+        <div
+          aria-label="2,4"
+          class="closedFrame changedBorderColor"
+          data-testid="2,4"
+          role="cell"
+        />
+        <div
+          aria-label="2,5"
+          class="closedFrame changedBorderColor"
+          data-testid="2,5"
+          role="cell"
+        />
+        <div
+          aria-label="2,6"
+          class="closedFrame changedBorderColor"
+          data-testid="2,6"
+          role="cell"
+        />
+        <div
+          aria-label="2,7"
+          class="closedFrame changedBorderColor"
+          data-testid="2,7"
+          role="cell"
+        />
+        <div
+          aria-label="2,8"
+          class="closedFrame changedBorderColor"
+          data-testid="2,8"
+          role="cell"
+        />
+        <div
+          aria-label="3,0"
+          class="closedFrame changedBorderColor"
+          data-testid="3,0"
+          role="cell"
+        />
+        <div
+          aria-label="3,1"
+          class="closedFrame changedBorderColor"
+          data-testid="3,1"
+          role="cell"
+        />
+        <div
+          aria-label="3,2"
+          class="closedFrame changedBorderColor"
+          data-testid="3,2"
+          role="cell"
+        />
+        <div
+          aria-label="3,3"
+          class="closedFrame changedBorderColor"
+          data-testid="3,3"
+          role="cell"
+        />
+        <div
+          aria-label="3,4"
+          class="closedFrame changedBorderColor"
+          data-testid="3,4"
+          role="cell"
+        />
+        <div
+          aria-label="3,5"
+          class="closedFrame changedBorderColor"
+          data-testid="3,5"
+          role="cell"
+        />
+        <div
+          aria-label="3,6"
+          class="closedFrame changedBorderColor"
+          data-testid="3,6"
+          role="cell"
+        />
+        <div
+          aria-label="3,7"
+          class="closedFrame changedBorderColor"
+          data-testid="3,7"
+          role="cell"
+        />
+        <div
+          aria-label="3,8"
+          class="closedFrame changedBorderColor"
+          data-testid="3,8"
+          role="cell"
+        />
+        <div
+          aria-label="4,0"
+          class="closedFrame changedBorderColor"
+          data-testid="4,0"
+          role="cell"
+        />
+        <div
+          aria-label="4,1"
+          class="closedFrame changedBorderColor"
+          data-testid="4,1"
+          role="cell"
+        />
+        <div
+          aria-label="4,2"
+          class="closedFrame changedBorderColor"
+          data-testid="4,2"
+          role="cell"
+        />
+        <div
+          aria-label="4,3"
+          class="closedFrame changedBorderColor"
+          data-testid="4,3"
+          role="cell"
+        />
+        <div
+          aria-label="4,4"
+          class="closedFrame changedBorderColor"
+          data-testid="4,4"
+          role="cell"
+        />
+        <div
+          aria-label="4,5"
+          class="closedFrame changedBorderColor"
+          data-testid="4,5"
+          role="cell"
+        />
+        <div
+          aria-label="4,6"
+          class="closedFrame changedBorderColor"
+          data-testid="4,6"
+          role="cell"
+        />
+        <div
+          aria-label="4,7"
+          class="closedFrame changedBorderColor"
+          data-testid="4,7"
+          role="cell"
+        />
+        <div
+          aria-label="4,8"
+          class="closedFrame changedBorderColor"
+          data-testid="4,8"
+          role="cell"
+        />
+        <div
+          aria-label="5,0"
+          class="closedFrame changedBorderColor"
+          data-testid="5,0"
+          role="cell"
+        />
+        <div
+          aria-label="5,1"
+          class="closedFrame changedBorderColor"
+          data-testid="5,1"
+          role="cell"
+        />
+        <div
+          aria-label="5,2"
+          class="closedFrame changedBorderColor"
+          data-testid="5,2"
+          role="cell"
+        />
+        <div
+          aria-label="5,3"
+          class="closedFrame changedBorderColor"
+          data-testid="5,3"
+          role="cell"
+        />
+        <div
+          aria-label="5,4"
+          class="closedFrame changedBorderColor"
+          data-testid="5,4"
+          role="cell"
+        />
+        <div
+          aria-label="5,5"
+          class="closedFrame changedBorderColor"
+          data-testid="5,5"
+          role="cell"
+        />
+        <div
+          aria-label="5,6"
+          class="closedFrame changedBorderColor"
+          data-testid="5,6"
+          role="cell"
+        />
+        <div
+          aria-label="5,7"
+          class="closedFrame changedBorderColor"
+          data-testid="5,7"
+          role="cell"
+        />
+        <div
+          aria-label="5,8"
+          class="closedFrame changedBorderColor"
+          data-testid="5,8"
+          role="cell"
+        />
+        <div
+          aria-label="6,0"
+          class="closedFrame changedBorderColor"
+          data-testid="6,0"
+          role="cell"
+        />
+        <div
+          aria-label="6,1"
+          class="closedFrame changedBorderColor"
+          data-testid="6,1"
+          role="cell"
+        />
+        <div
+          aria-label="6,2"
+          class="closedFrame changedBorderColor"
+          data-testid="6,2"
+          role="cell"
+        />
+        <div
+          aria-label="6,3"
+          class="closedFrame changedBorderColor"
+          data-testid="6,3"
+          role="cell"
+        />
+        <div
+          aria-label="6,4"
+          class="closedFrame changedBorderColor"
+          data-testid="6,4"
+          role="cell"
+        />
+        <div
+          aria-label="6,5"
+          class="closedFrame changedBorderColor"
+          data-testid="6,5"
+          role="cell"
+        />
+        <div
+          aria-label="6,6"
+          class="closedFrame changedBorderColor"
+          data-testid="6,6"
+          role="cell"
+        />
+        <div
+          aria-label="6,7"
+          class="closedFrame changedBorderColor"
+          data-testid="6,7"
+          role="cell"
+        />
+        <div
+          aria-label="6,8"
+          class="closedFrame changedBorderColor"
+          data-testid="6,8"
+          role="cell"
+        />
+        <div
+          aria-label="7,0"
+          class="closedFrame changedBorderColor"
+          data-testid="7,0"
+          role="cell"
+        />
+        <div
+          aria-label="7,1"
+          class="closedFrame changedBorderColor"
+          data-testid="7,1"
+          role="cell"
+        />
+        <div
+          aria-label="7,2"
+          class="closedFrame changedBorderColor"
+          data-testid="7,2"
+          role="cell"
+        />
+        <div
+          aria-label="7,3"
+          class="closedFrame changedBorderColor"
+          data-testid="7,3"
+          role="cell"
+        />
+        <div
+          aria-label="7,4"
+          class="closedFrame changedBorderColor"
+          data-testid="7,4"
+          role="cell"
+        />
+        <div
+          aria-label="7,5"
+          class="closedFrame changedBorderColor"
+          data-testid="7,5"
+          role="cell"
+        />
+        <div
+          aria-label="7,6"
+          class="closedFrame changedBorderColor"
+          data-testid="7,6"
+          role="cell"
+        />
+        <div
+          aria-label="7,7"
+          class="closedFrame changedBorderColor"
+          data-testid="7,7"
+          role="cell"
+        />
+        <div
+          aria-label="7,8"
+          class="closedFrame changedBorderColor"
+          data-testid="7,8"
+          role="cell"
+        />
+        <div
+          aria-label="8,0"
+          class="closedFrame changedBorderColor"
+          data-testid="8,0"
+          role="cell"
+        />
+        <div
+          aria-label="8,1"
+          class="closedFrame changedBorderColor"
+          data-testid="8,1"
+          role="cell"
+        />
+        <div
+          aria-label="8,2"
+          class="closedFrame changedBorderColor"
+          data-testid="8,2"
+          role="cell"
+        />
+        <div
+          aria-label="8,3"
+          class="closedFrame changedBorderColor"
+          data-testid="8,3"
+          role="cell"
+        />
+        <div
+          aria-label="8,4"
+          class="closedFrame changedBorderColor"
+          data-testid="8,4"
+          role="cell"
+        />
+        <div
+          aria-label="8,5"
+          class="closedFrame changedBorderColor"
+          data-testid="8,5"
+          role="cell"
+        />
+        <div
+          aria-label="8,6"
+          class="closedFrame changedBorderColor"
+          data-testid="8,6"
+          role="cell"
+        />
+        <div
+          aria-label="8,7"
+          class="closedFrame changedBorderColor"
+          data-testid="8,7"
+          role="cell"
+        />
+        <div
+          aria-label="8,8"
+          class="closedFrame changedBorderColor"
+          data-testid="8,8"
+          role="cell"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/modules/GameWithHooks/hooks/.gitkeep b/src/modules/GameWithHooks/hooks/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/modules/GameWithHooks/hooks/use-game/index.tsx b/src/modules/GameWithHooks/hooks/use-game/index.tsx
new file mode 100644
index 00000000..a353cc5b
--- /dev/null
+++ b/src/modules/GameWithHooks/hooks/use-game/index.tsx
@@ -0,0 +1,76 @@
+import { openCell } from "@helpers/cells/cells-manipulator";
+import { CellState, Coordinates, Field, fieldGenerator, generateFieldWithDefaultState } from "@helpers/field";
+import { setFlag } from "@helpers/set-flag";
+import { GameSettings, LevelNames } from "@modules/GameSettings";
+import React, { useState } from "react";
+
+interface ReturnType {
+  level: LevelNames;
+  isGameOver: boolean;
+  isWin: boolean;
+  gameField: Field;
+  settings: [number, number];
+  playerField: Field;
+  onContextMenuHandler: (coords: Coordinates) => void;
+  onClickHandler: (coords: Coordinates) => void;
+  onChangeLevelHandler: (level: LevelNames) => void;
+  onResetHandler: () => void;
+}
+
+export const useGame = (): ReturnType => {
+  const [level, setLevel] = useState<LevelNames>("beginner");
+  const [size, bombs] = GameSettings[level];
+
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [isWin, setIsWin] = useState(false);
+
+  const [playerField, setPlayerField] = useState<Field>(generateFieldWithDefaultState(size, CellState.hidden));
+
+  const [gameField, setGameField] = useState<Field>(fieldGenerator(size, bombs / (size * size)));
+
+  const onClickHandler = (coords: Coordinates) => {
+    try {
+      const newPlayerField = openCell(coords, playerField, gameField);
+      setPlayerField([...newPlayerField]);
+    } catch (e) {
+      setPlayerField([...gameField]);
+      setIsGameOver(true);
+    }
+  };
+
+  const resetHandler = ([size, bombs]: [number, number]) => {
+    const newGameField = fieldGenerator(size, bombs / (size * size));
+    const newPlayerField = generateFieldWithDefaultState(size, CellState.hidden);
+
+    setGameField([...newGameField]);
+    setPlayerField([...newPlayerField]);
+    setIsGameOver(false);
+    setIsWin(false);
+  };
+
+  const onChangeLevelHandler = (level: LevelNames) => {
+    setLevel(level);
+    const newSettings = GameSettings[level];
+    resetHandler(newSettings);
+  };
+
+  const onContextMenuHandler = (coords: Coordinates) => {
+    const newPlayerField = setFlag(coords, playerField, gameField);
+    setPlayerField([...newPlayerField]);
+  };
+
+  const onResetHandler = () => resetHandler([size, bombs]);
+
+  return {
+    level,
+    isGameOver,
+    isWin,
+    gameField,
+    settings: [size, bombs],
+    playerField,
+    onClickHandler,
+    onContextMenuHandler,
+    onChangeLevelHandler,
+    onResetHandler,
+  };
+};
diff --git a/src/modules/GameWithHooks/hooks/use-game/use-game-check-game-field.test.ts b/src/modules/GameWithHooks/hooks/use-game/use-game-check-game-field.test.ts
new file mode 100644
index 00000000..a7629b1f
--- /dev/null
+++ b/src/modules/GameWithHooks/hooks/use-game/use-game-check-game-field.test.ts
@@ -0,0 +1,29 @@
+import { CellState, Field } from "@helpers/field";
+import { useGame } from "@modules/GameWithHooks/hooks/use-game/index";
+import { act, renderHook } from "@testing-library/react";
+
+const { bomb: b } = CellState;
+
+const flatWithFilter = (field: Field, cond: number) => field.flat().filter((v) => v === cond);
+
+describe("useGame test cases", () => {
+  it("Render hook by default", () => {
+    const { result } = renderHook(useGame);
+    const { gameField } = result.current;
+
+    expect(flatWithFilter(gameField, b)).toHaveLength(10);
+  });
+  it("onReset game handler", () => {
+    const { result } = renderHook(useGame);
+    const { playerField, onClickHandler, onResetHandler } = result.current;
+
+    expect(playerField).toHaveLength(9);
+
+    act(() => onClickHandler([5, 5]));
+    act(onResetHandler);
+
+    const { gameField } = result.current;
+
+    expect(flatWithFilter(gameField, b)).toHaveLength(10);
+  });
+});
diff --git a/src/modules/GameWithHooks/hooks/use-game/use-game.test.tsx b/src/modules/GameWithHooks/hooks/use-game/use-game.test.tsx
new file mode 100644
index 00000000..805bc2d6
--- /dev/null
+++ b/src/modules/GameWithHooks/hooks/use-game/use-game.test.tsx
@@ -0,0 +1,48 @@
+import { CellState, Field } from "@helpers/field";
+import { GameLevels, GameSettings } from "@modules/GameSettings";
+import { useGame } from "@modules/GameWithHooks/hooks/use-game/index";
+import { act, renderHook } from "@testing-library/react";
+
+const [beginner, intermediate, expert] = GameLevels;
+
+const flatWithFilter = (field: Field, cond: number) => field.flat().filter((v) => v === cond);
+
+describe("useGame test cases", function () {
+  it("should render hooks behaviour", function () {
+    const { result } = renderHook(useGame);
+    const { level, isGameOver, isWin, settings, playerField } = result.current;
+
+    expect({ level, isGameOver, isWin, settings }).toStrictEqual({
+      level: beginner,
+      isGameOver: false,
+      isWin: false,
+      settings: GameSettings.beginner,
+    });
+    expect(playerField).toHaveLength(9);
+  });
+
+  it("should change level using onChangeGameHandler", function () {
+    const { result } = renderHook(useGame);
+    const { playerField: beginnerPlayerField, onChangeLevelHandler } = result.current;
+
+    expect(beginnerPlayerField).toHaveLength(9);
+
+    act(() => onChangeLevelHandler(intermediate));
+    const { playerField: intermediatePlayerField } = result.current;
+    expect(intermediatePlayerField).toHaveLength(16);
+
+    act(() => onChangeLevelHandler(expert));
+    const { playerField: expertPlayerField } = result.current;
+    expect(expertPlayerField).toHaveLength(22);
+  });
+
+  it("should handler contextMenu handler", function () {
+    const { result } = renderHook(useGame);
+
+    const { onContextMenuHandler, playerField: newPlayerField } = result.current;
+
+    act(() => onContextMenuHandler([0, 0]));
+
+    expect(flatWithFilter(newPlayerField, CellState.mark)).toHaveLength(1);
+  });
+});
diff --git a/src/modules/GameWithHooks/index.ts b/src/modules/GameWithHooks/index.ts
new file mode 100644
index 00000000..0bb6077e
--- /dev/null
+++ b/src/modules/GameWithHooks/index.ts
@@ -0,0 +1 @@
+export * from "./GameWithHooks";
diff --git a/test/setup.ts b/test/setup.ts
index bf80e5fb..d63d5dd0 100644
--- a/test/setup.ts
+++ b/test/setup.ts
@@ -1,8 +1,8 @@
 import "@testing-library/jest-dom";
-import "whatwg-fetch";
-
-import { configure } from "@testing-library/react";
-
-configure({
-  throwSuggestions: true,
-});
+// import "whatwg-fetch";
+//
+// import { configure } from "@testing-library/react";
+//
+// configure({
+//   throwSuggestions: true,
+// });
diff --git a/tsconfig.json b/tsconfig.json
index e37d53f1..63485462 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,8 @@
       "@assets/*": ["src/assets/*"],
       "@helpers/*": ["src/helpers/*"],
       "~types/*": ["src/@types/*"],
-      "~hooks/*": ["src/hooks/*"]
+      "~hooks/*": ["src/hooks/*"],
+      "@modules/*": ["src/modules/*"]
     },
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
diff --git a/webpack/config/alias.js b/webpack/config/alias.js
index 4a3518e0..63b6346a 100644
--- a/webpack/config/alias.js
+++ b/webpack/config/alias.js
@@ -12,6 +12,7 @@ export const aliasItems = {
   "@components": join(rootDir, "/src/components"),
   "@assets": join(rootDir, "/src/assets"),
   "@helpers": join(rootDir, "/src/helpers"),
+  "@modules": join(rootDir, "/src/modules"),
   "~types": join(rootDir, "/src/@types"),
   "~hooks": join(rootDir, "/src/hooks"),
 };