diff --git a/src/css/style.css b/src/css/style.css
index 0583b92..3545fe4 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,12 +1,59 @@
-.rectangle-77, .rectangle-77 * {
-    box-sizing: border-box;
-    }
-.rectangle-77 {
-   background: #17181c;
-    border-radius: 20px;
-    width: 1362px;
+.top_panel {
+    width: auto;
     height: 87px;
-    position: relative;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-   }
+    background: #17181C;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px;
+    margin-left: 105px;
+    margin-top: 7px;
 
+}
+
+.top_panel {
+    width: auto;
+    height: 87px;
+    background: #17181C;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px;
+    margin-left: 105px;
+    margin-top: 7px;
+
+}
+.top_panel {
+    width: auto;
+    height: 87px;
+    background: #17181C;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px;
+    margin-left: 105px;
+    margin-top: 7px;
+
+}
+
+.left_box{
+    width: 88px;
+    height: auto;
+}
+
+.left_panel {
+    width: 88px;
+    height: auto;
+    background: #17181C;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px;
+    margin-left: 8px;
+    padding-top: 100%;
+    margin-top: -86px;
+
+}
+
+.main_box{
+    width: 1165px;
+    height: 240px;
+    border-radius: 40px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    position: absolute;
+    top: 50%;
+    left: 10%;
+}
diff --git a/src/img/svg/Group 3.svg b/src/img/svg/Group 3.svg
new file mode 100644
index 0000000..f93e14d
--- /dev/null
+++ b/src/img/svg/Group 3.svg	
@@ -0,0 +1,56 @@
+<svg width="88" height="956" viewBox="0 0 88 956" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_378_57)">
+<rect width="88" height="964.495" fill="#17181C"/>
+</g>
+<g filter="url(#filter1_d_378_57)">
+<path d="M6 29C6 17.9543 14.9543 9 26 9H59C70.0457 9 79 17.9543 79 29V62C79 73.0457 70.0457 82 59 82H26C14.9543 82 6 73.0457 6 62V29Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_378_57)">
+<path d="M7 895C7 883.954 15.9543 875 27 875H60C71.0457 875 80 883.954 80 895V928C80 939.046 71.0457 948 60 948H27C15.9543 948 7 939.046 7 928V895Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_d_378_57)">
+<path d="M7 207C7 195.954 15.9543 187 27 187H60C71.0457 187 80 195.954 80 207V571C80 582.046 71.0457 591 60 591H27C15.9543 591 7 582.046 7 571V207Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_378_57" x="-4" y="0" width="96" height="972.495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
+</filter>
+<filter id="filter1_d_378_57" x="6" y="9" width="81" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
+</filter>
+<filter id="filter2_d_378_57" x="7" y="875" width="81" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
+</filter>
+<filter id="filter3_d_378_57" x="7" y="187" width="81" height="412" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/index.html b/src/index.html
index e185217..e072bf9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,60 +7,17 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="normalize.css">
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="css/normalize.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
     <title>LUCKY DIAMOND</title>
 </head>
 <body style="background-color: #121212;">
-    <div style="width: 100%; height: 100%; position: relative; background: #121212">
-        <div style="width: 88px; height: 957px; left: 4px; top: 0px; position: absolute; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px">
-            <div style="width: 88px; height: 956px; left: 0px; top: 4px; position: absolute; border-radius: 20px; overflow: hidden">
-                <div style="width: 88px; height: 964.50px; left: 0px; top: 0px; position: absolute; background: #17181C"></div>
-                <div style="width: 73px; height: 73px; left: 6px; top: 9px; position: absolute; background: rgba(217, 217, 217, 0.28); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-                <div style="width: 73px; height: 73px; left: 7px; top: 875px; position: absolute; background: rgba(217, 217, 217, 0.12); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-                <div style="width: 73px; height: 401px; left: 7px; top: 190px; position: absolute; background: rgba(217, 217, 217, 0.12); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-                <div style="width: 52px; height: 52px; left: 20px; top: 521px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px"></div>
-                <div style="width: 60px; height: 60px; left: 14px; top: 882px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px"></div>
-                <div style="width: 50.19px; height: 49.94px; left: 19px; top: 346px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
-                <img style="width: 60px; height: 33px; left: 16px; top: 281px; position: absolute; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)" src="https://via.placeholder.com/60x33" />
-                <div style="width: 53px; height: 48px; left: 16px; top: 208px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
-            </div>
-            <div style="width: 1362px; height: 87px; left: 95px; top: 4px; position: absolute; background: #17181C; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-        </div>
-        <div style="width: 87px; height: 17px; left: 562px; top: 32px; position: absolute; color: #EF4444; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Главная</div>
-        <div style="width: 91px; height: 17px; left: 724px; top: 35px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Профиль</div>
-        <div style="width: 84px; height: 17px; left: 890px; top: 35px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Помощь</div>
-        <div style="width: 77.06px; height: 0px; left: 564px; top: 56px; position: absolute; border: 2.30px #EF4444 solid"></div>
-        <div style="width: 139px; height: 48px; left: 1166px; top: 20px; position: absolute; background: #22252F; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9px"></div>
-        <div style="width: 134px; height: 54px; left: 1273px; top: 17px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 13px"></div>
-        <div style="width: 59px; height: 15px; left: 1207px; top: 36px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">25000</div>
-        <div style="width: 88px; height: 13px; left: 1296px; top: 37px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 600; word-wrap: break-word">КОШЕЛЁК</div>
-        <div style="width: 220px; height: 36px; left: 135px; top: 37px; position: absolute; color: white; font-size: 22px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">LUCKY DIAMOND</div>
-        <div style="width: 63px; height: 17px; left: 136px; top: 26px; position: absolute; color: #EF4444; font-size: 10px; font-family: Montserrat Alternates; font-weight: 800; word-wrap: break-word">PLAY NOW</div>
-        <img style="width: 28px; height: 28px; left: 1173px; top: 30px; position: absolute" src="https://via.placeholder.com/28x28" />
-        <div style="width: 403px; height: 87px; left: 1466px; top: 4px; position: absolute">
-            <div style="width: 403px; height: 87px; left: 0px; top: 0px; position: absolute; background: #17181C; box-shadow: 4px 3px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-            <div style="width: 80.60px; height: 15.01px; left: 82.32px; top: 24px; position: absolute; color: white; font-size: 15px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">Artemka</div>
-            <img style="width: 51.81px; height: 54.03px; left: 15.35px; top: 17.01px; position: absolute; border-radius: 20px" src="https://via.placeholder.com/52x54" />
-            <div style="width: 90.94px; height: 27px; left: 79.45px; top: 44px; position: absolute">
-                <div style="width: 90.94px; height: 26px; left: -0px; top: 1px; position: absolute; background: #30323E; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
-                <div style="width: 64.14px; height: 27px; left: 4.79px; top: 0px; position: absolute; color: rgba(255, 255, 255, 0.50); font-size: 14px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">ВЫХОД</div>
-                <img style="width: 16.27px; height: 16px; left: 66.05px; top: 6px; position: absolute; border-radius: 20px" src="https://via.placeholder.com/16x16" />
-            </div>
-        </div>
-        <div style="width: 1165px; height: 240px; left: 215px; top: 137px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
-        <div style="width: 436px; height: 493px; left: 215px; top: 429px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
-        <div style="width: 694px; height: 226px; left: 686px; top: 429px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
-        <div style="width: 367px; height: 249px; left: 686px; top: 673px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
-        <div style="width: 291px; height: 249px; left: 1089px; top: 673px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
-        <div style="width: 884px; height: 299px; left: 356px; top: 104px; position: absolute; text-align: center; color: white; font-size: 91px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">LUCKY DIAMOND</div>
-        <div style="width: 384px; height: 95px; left: 629px; top: 285px; position: absolute"><span style="color: white; font-size: 24px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">MINECRAFT CASINO - </span><span style="color: #CFEB21; font-size: 24px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">SPM</span></div>
-        <div style="width: 270px; height: 95px; left: 686px; top: 146px; position: absolute; color: white; font-size: 32px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">онлайн-казино</div>
-        <div style="width: 175px; height: 21px; left: 212px; top: 388px; position: absolute; color: white; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">РЕЖИМЫ ИГРЫ</div>
-        <div style="width: 1165px; height: 0px; left: 215px; top: 415px; position: absolute; border-radius: 50px; border: 3px white solid"></div>
-        <div style="width: 392px; height: 785px; left: 1448px; top: 137px; position: absolute; background: #D9D9D9; border-radius: 30px"></div>
-        <div style="width: 50px; height: 50px; left: 24px; top: 439px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
-        <div style="width: 49px; height: 55px; left: 22px; top: 21px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px"></div>
-    </div> 
+    <header>
+        <div class="top_panel"></div>
+        <div class="left_panel"></div>
+    </header>
+    <main>
+        <div class="main_box"></div>
+    </main>
 </body>
 </html>
\ No newline at end of file