diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
index e69de29..3b28c46 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -0,0 +1,10 @@
+#chat {
+    height: 95%;
+}
+
+.saper {
+    padding-top: 20%;
+    border-radius: 20px;
+    background: #17181C;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 362dfda..afb6133 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -153,6 +153,7 @@ body, html {
 
 .saper {
     grid-area: saper;
+    height: 95.5%;
 }
 
 /* /Saper */
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/SapergamePage.vue b/luckydiamond/src/pages/games-pages/SapergamePage.vue
index 5e23aaa..53f2cef 100644
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -4,7 +4,7 @@
 
     <header-element-page></header-element-page>
 
-    <chat-component></chat-component>
+    <chat-component id="chat"></chat-component>
 
     <section class="saper">
       <div class="saper-start">