diff --git a/public/index.html b/public/index.html
index d8c2ae5..4df630e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,7 +38,7 @@
             </div>
         </div>
         <div class="last">
-            <button id="pause-button">Pause And Resume</button>
+            <label id="pause-button">Pause And Resume</label>
             <canvas id="preview-canvas" width="100" height="100"></canvas>
         </div>
     </div>
diff --git a/public/script/view.js b/public/script/view.js
index 5245375..317dbfc 100644
--- a/public/script/view.js
+++ b/public/script/view.js
@@ -1,17 +1,21 @@
+let gapPiece = 6;
+
 function drawTetisWithOppacity(x, y, color, oppacity) {
-    boardContext.drawImage(img, x, y, board.width/10, board.width/10);
+    boardContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity/255})`
+    boardContext.fillRect(x + gapPiece/2, y + gapPiece/2, board.width/10 - gapPiece, board.width/10 - gapPiece);
+    // boardContext.drawImage(img, x, y, board.width/10, board.width/10);
 
-    const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10);
-    const data = imageData.data;
+    // const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10);
+    // const data = imageData.data;
 
-    for (let i = 0; i < data.length; i += 4) {
-        data[i] = data[i] * color[0] / 255;
-        data[i + 1] = data[i + 1] * color[1] / 255;
-        data[i + 2] = data[i + 2] * color[2] / 255;
-        data[i + 3] = data[i + 3] * oppacity / 255;
-    }
+    // for (let i = 0; i < data.length; i += 4) {
+    //     data[i] = data[i] * color[0] / 255;
+    //     data[i + 1] = data[i + 1] * color[1] / 255;
+    //     data[i + 2] = data[i + 2] * color[2] / 255;
+    //     data[i + 3] = data[i + 3] * oppacity / 255;
+    // }
 
-    boardContext.putImageData(imageData, x, y);
+    // boardContext.putImageData(imageData, x, y);
 }
 
 function drawTetrisOnThePreview(x, y, color) {
diff --git a/public/style/index.css b/public/style/index.css
index 8868fdc..290c7d7 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -5,8 +5,8 @@ body {
     place-items: center;
     background: repeating-conic-gradient(
       from 45deg,
-      #253a5e 0% 25%,
-      #3c5e8b 0% 50%
+      #fff34f 0% 25%,
+      #ff8b07 0% 50%
     );
     background-size: max(10vw, 10svh) max(10vw, 10svh);
     background-color: #3c5e8b;
@@ -29,19 +29,21 @@ body {
     width: 300px;
     height: 600px;
 
-    background: black;
+    padding: 10px;
+
+    border-radius: 10px;
+
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+
+    background: rgb(34, 34, 34);
 }
 
 .first {
     width: 150px;
-
-    background: white;
 }
 
 .last {
     width: 150px;
-
-    background: white;
 }
 
 .main-menu {