diff --git a/index.html b/index.html
index 8c5291e4..fc5ab0c4 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,70 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QA Guru</title>
+    <style>
+      #loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .loader {
+        animation: spin 1.4s linear infinite;
+        width: 40px;
+        height: 40px;
+      }
+
+      .loader circle {
+        stroke: #20aee3;
+        stroke-width: 4;
+        stroke-linecap: round;
+        fill: none;
+        stroke-dasharray: 90;
+        stroke-dashoffset: 0;
+        transform-origin: center;
+      }
+
+      #root {
+        display: none;
+      }
+
+      .loaded #loader {
+        display: none;
+      }
+
+      .loaded #root {
+        display: block;
+      }
+    </style>
   </head>
   <body>
+    <div id="loader">
+      <svg class="loader" viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="20"></circle>
+      </svg>
+    </div>
+
     <div id="root"></div>
+
     <script type="module" src="/src/index.tsx"></script>
+    <script>
+      window.addEventListener("load", function () {
+        document.body.classList.add("loaded");
+      });
+    </script>
   </body>
 </html>
