diff --git a/client/package.json b/client/package.json
index 1e26150..bdd82ad 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "html-webpack-plugin": "^3.2.0",
     "socket.io-client": "^2.3.0",
     "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.2",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14"
diff --git a/client/src/assets/svgs/loader.svg b/client/src/assets/svgs/loader.svg
new file mode 100644
index 0000000..bdc5315
--- /dev/null
+++ b/client/src/assets/svgs/loader.svg
@@ -0,0 +1,14 @@
+<svg style="display: block; width: 100px; margin: 0 auto;" version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+  <path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
+    c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z" transform="rotate(157.998 50 50)">
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
+  </path>
+  <path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
+    c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z" transform="rotate(-315.996 50 50)">
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform>
+  </path>
+  <path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
+    L82,35.7z" transform="rotate(157.998 50 50)">
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
+  </path>
+</svg>
\ No newline at end of file
diff --git a/client/src/js/Modal.js b/client/src/js/Modal.js
index 2cd7d83..32827b1 100644
--- a/client/src/js/Modal.js
+++ b/client/src/js/Modal.js
@@ -30,9 +30,10 @@ class Modal {
     this.hide();
   }
 
-  show() {
+  show(bg = 'rgba(0,0,0,0.7)') {
     this.#visible = true;
     this.#overlay.style.display = 'flex';
+    this.#overlay.style.backgroundColor = bg
   }
 
   hide() {
diff --git a/client/src/js/main.js b/client/src/js/main.js
index 4bfdb55..3bfee91 100644
--- a/client/src/js/main.js
+++ b/client/src/js/main.js
@@ -1,4 +1,5 @@
 import '../scss/app.scss';
+import loaderSvg from '../assets/svgs/loader.svg';
 import '@fortawesome/fontawesome-free/js/all';
 import Board from './Game/Board';
 import Modal from './Modal';
@@ -13,15 +14,17 @@ let room;
 
 menu.setAction('<i class="fas fa-play"></i>', () => {
   socket.emit('room');
-  menu.setTitle('Waiting for other player')
+  menu.setTitle('Waiting for other player');
+  menu.setContent(loaderSvg);
   menu.disableAction(0);
 });
-menu.show();
+
+menu.show('black');
 
 modal.setAction('<i class="fas fa-undo-alt"></i>', () => {
   socket.emit('room', room);
   modal.hide();
-  menu.show();
+  menu.show('black');
   game.destroy();
 }, 'success', 'Rematch');
 
@@ -29,7 +32,7 @@ modal.setAction('<i class="fas fa-play"></i>', () => {
   socket.emit('player-left');
   socket.emit('room');
   modal.hide();
-  menu.show();
+  menu.show('black');
   game.destroy();
 }, '', 'New game');
 
@@ -38,13 +41,14 @@ socket.on('start-game', (board, playerRoom) => {
   game = new Board(el, board, socket.id);
   game.setPlayerTurn(board.playerOfTheTime);
   menu.hide();
+  menu.setContent('');
 
   socket.on('enemy-left', () => {
     game.destroy();
     modal.hide();
     menu.setTitle('Enemy left the room');
     menu.enableAction(0);
-    menu.show();
+    menu.show('black');
   })
 
   socket.on('check', ids => {
diff --git a/client/src/scss/modal.scss b/client/src/scss/modal.scss
index 49e6db0..f98c13b 100644
--- a/client/src/scss/modal.scss
+++ b/client/src/scss/modal.scss
@@ -8,7 +8,6 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,0.7);
 
   .modal {
     padding: 20px 30px;
@@ -18,7 +17,7 @@
 
     .title {
       color: #fff;
-      font-size: 4rem;
+      font-size: clamp(2rem, 10vw, 4rem);
       text-align: center;
     }
 
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 867785f..84a9113 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -34,6 +34,11 @@ module.exports = {
               test: /\.(wav|mp3)$/,
               use: ['file-loader'] 
             },
+            {
+              exclude: /node_modules/,
+              test: /\.svg$/,
+              loader: 'svg-inline-loader'
+            }
         ]
     },
     output: {