diff --git a/public/index.html b/public/index.html
index c6f852c..9312151 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,20 +1,19 @@
-<script src="https://telegram.org/js/telegram-web-app.js"></script>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>CampFire ID</title>
     <link rel="stylesheet" href="./styles/main.css">
 </head>
 <body>
-    <div class="containerloader">
-            <div class="block">
-                <span class="loader"></span>
-            </div>
+    <div class="containerloader" id="loader">
+        <div class="block">
+            <span class="loader"></span>
         </div>
+    </div>
     <main class="maincontainer">
-        
         <div class="userprofile">
             <div class="userprofile_left">
                 <img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
@@ -40,8 +39,11 @@
                 <img src="Images/Campfire.png" alt="none" class="achievement_image">
                 <p class="achievement_name">Ачивка</p>
             </div>
-            
+
         </div>
     </main>
+    <!--connect backend-->
+    <script src="../backend/main.js"></script>
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/styles/main.css b/public/styles/main.css
index 0eae5dd..6c86a64 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -150,13 +150,14 @@ body {
 }
 
 .containerloader {
-    background-color: var(--black);
-    z-index: 10 !important;
-    position: absolute;
-    width: 120%;
-    height: 120%;
-    opacity: 100%;
-    transform: translate(-8%, -21%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--black); 
+    z-index: 100;
+    opacity: 1;
     padding: 35%;
     animation: loadscreen 1s 1 normal forwards;
    
@@ -200,15 +201,15 @@ body {
 
   @keyframes loadscreen {
     0% {
-        z-index: 1;
-        opacity: 100%;
+        z-index: 100;
+        opacity: 1;
     }
     80% {
-        z-index: 1;
-        opacity: 100%;
+        z-index: 100;
+        opacity: 1;
     }
     100% {
-        opacity: 0%;
+        opacity: 0;
         z-index: -1
     }
   }
