diff --git a/css/style.css b/css/style.css
index 3d0e4af..14be9b0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,2 +1,157 @@
-html,body{height:100%;margin:0;padding:0}body{display:flex;justify-content:center;align-items:center;text-align:center;font-family:"arial";color:#505050;background:#2193b0;background:-webkit-linear-gradient(to bottom, #6dd5ed, #2193b0);background:linear-gradient(to bottom, #6dd5ed, #2193b0)}#container{margin:0 auto;background-color:white;border-radius:6px;-webkit-box-shadow:0px 0px 22px 0px rgba(10,10,10,0.5);-moz-box-shadow:0px 0px 22px 0px rgba(10,10,10,0.5);box-shadow:0px 0px 22px 0px rgba(10,10,10,0.5)}#info{display:inline-block;vertical-align:top}#matriz{width:auto;height:auto;display:inline-block;margin:0 auto}#pontuacaoBox,#matriz{margin:10px;border:solid 5px #6dbbff;border-radius:3px;-webkit-box-shadow:0px 0px 8px 0px rgba(10,10,10,0.3);-moz-box-shadow:0px 0px 8px 0px rgba(10,10,10,0.3);box-shadow:0px 0px 8px 0px rgba(10,10,10,0.3)}#proximasPecasBox{min-height:170px}#proximasPecasBox .bloco{width:15px}#proximasPecasBox .bloco.ativo{background-color:#6dbbff}#proximasPecasBox .linha,#proximasPecasBox .bloco{height:15px}.bloco{color:#505050;background-color:white;width:30px;height:30px;display:inline-block;vertical-align:top;line-height:25px;font-size:15px}.bloco.ativo{background-color:black}.ativo.cor-0{background-color:#d9534f}.ativo.cor-1{background-color:#ffbf01}.ativo.cor-2{background-color:#5bc0de}.ativo.cor-3{background-color:#5cb85c}.ativo.cor-4{background-color:#428bca}.ativo.cor-5{background-color:#4fd75a}.ativo.cor-6{background-color:#bfff00}#info .box{padding:10px 10px}#info .box .titulo{font-weight:bold;margin-bottom:5px}#particles-js{flex:1;position:absolute;width:100%;height:90%;z-index:-1}#joystick{display:flex;border-top:solid 3px black}#direcional{flex:1}#direcional a{background-color:black;width:25px;height:25px;display:block;margin:0 auto;border-radius:50%}#direcional table{flex:1;display:flex;justify-content:center;align-items:center;height:100px}#botoes{flex:1;display:flex;justify-content:center;align-items:center}#botoes #action{background-color:black;width:50px;height:50px;display:block;border-radius:50%}
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-family: "arial";
+  color: #505050;
+  background: #2193b0;
+  background: -webkit-linear-gradient(to bottom, #6dd5ed, #2193b0);
+  background: linear-gradient(to bottom, #6dd5ed, #2193b0);
+}
+#container {
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 6px;
+  -webkit-box-shadow: 0px 0px 22px 0px rgba(10, 10, 10, 0.5);
+  -moz-box-shadow: 0px 0px 22px 0px rgba(10, 10, 10, 0.5);
+  box-shadow: 0px 0px 22px 0px rgba(10, 10, 10, 0.5);
+}
+#info {
+  display: inline-block;
+  vertical-align: top;
+}
+#matriz {
+  width: auto;
+  height: auto;
+  display: inline-block;
+  margin: 0 auto;
+}
+#pontuacaoBox,
+#matriz {
+  margin: 10px;
+  border: solid 5px #6dbbff;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 0px 8px 0px rgba(10, 10, 10, 0.3);
+  -moz-box-shadow: 0px 0px 8px 0px rgba(10, 10, 10, 0.3);
+  box-shadow: 0px 0px 8px 0px rgba(10, 10, 10, 0.3);
+}
+#proximasPecasBox {
+  min-height: 170px;
+}
+#proximasPecasBox .bloco {
+  width: 15px;
+}
+#proximasPecasBox .bloco.ativo {
+  background-color: #6dbbff;
+}
+#proximasPecasBox .linha,
+#proximasPecasBox .bloco {
+  height: 15px;
+}
+.bloco {
+  color: #505050;
+  background-color: white;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  vertical-align: top;
+  line-height: 25px;
+  font-size: 15px;
+}
+.bloco.ativo {
+  background-color: black;
+}
+.ativo.cor-0 {
+  background-color: #d9534f;
+}
+.ativo.cor-1 {
+  background-color: #ffbf01;
+}
+.ativo.cor-2 {
+  background-color: #5bc0de;
+}
+.ativo.cor-3 {
+  background-color: #5cb85c;
+}
+.ativo.cor-4 {
+  background-color: #428bca;
+}
+.ativo.cor-5 {
+  background-color: #4fd75a;
+}
+.ativo.cor-6 {
+  background-color: #bfff00;
+}
+#info .box {
+  padding: 10px 10px;
+}
+#info .box .titulo {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+#particles-js {
+  flex: 1;
+  position: absolute;
+  width: 100%;
+  height: 90%;
+  z-index: -1;
+}
+#joystick {
+  display: flex;
+  border-top: solid 3px black;
+}
+#direcional {
+  flex: 1;
+}
+#direcional a {
+  background-color: black;
+  width: 25px;
+  height: 25px;
+  display: block;
+  margin: 0 auto;
+  border-radius: 50%;
+}
+#direcional table {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+}
+#botoes {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#botoes #action {
+  background-color: black;
+  width: 50px;
+  height: 50px;
+  display: block;
+  border-radius: 50%;
+}
+
+/* styles for the buttons */
+.buttons button {
+  width: 30px;
+  height: 30px;
+  background-color: #053c4d75;
+  border: none;
+  border-radius: 3px;
+  box-shadow: 2px 2px 1px #000;
+}
+
+.buttons button i {
+  padding: 2px;
+  font-size: 20px;
+}
 /*# sourceMappingURL=style.css.map */
diff --git a/index.html b/index.html
index 0ce5f06..fcfdaf7 100644
--- a/index.html
+++ b/index.html
@@ -1,51 +1,98 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     <meta http-equiv="content-language" content="pt-br, en-US" />
-    <title>Jogue Tetris | Jogue o clássico game Tetris agora mesmo!! </title>
+    <title>Jogue Tetris | Jogue o clássico game Tetris agora mesmo!!</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="O famoso e clássico Tetris em sua versão online. Quantos pontos você consegue fazer?">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="google-site-verification" content="leuuzx65nQLBknkD8eoz_jwFmHFbSWuobvIzVQufNDs" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="O famoso e clássico Tetris em sua versão online. Quantos pontos você consegue fazer?"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta
+      name="google-site-verification"
+      content="leuuzx65nQLBknkD8eoz_jwFmHFbSWuobvIzVQufNDs"
+    />
     <link rel="stylesheet" type="text/css" href="css/style.css?v=dGvYF7j" />
 
-    <link rel="icon" type="image/png" href="img/favicon.png">
-</head>
-<body>
-<div id="particles-js"></div>
+    <link rel="icon" type="image/png" href="img/favicon.png" />
+  </head>
+  <body>
+    <div id="particles-js"></div>
 
-<div id="container">
-    <div id="matriz"></div> 
-    <div id="info">
+    <div id="container">
+      <div id="matriz"></div>
+      <div id="info">
         <div id="pontuacaoBox" class="box">
-            <div class="titulo">Pontuação</div>
-            <div id="pontuacao">-</div>
+          <div class="titulo">Pontuação</div>
+          <div id="pontuacao">-</div>
+        </div>
+
+        <div class="buttons">
+          <button>
+            <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
+          </button>
+          <button>
+            <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
+          </button>
+          <button>
+            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
+          </button>
+          <button>
+            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
+          </button>
         </div>
 
         <div class="box">
-            <a class="github-button" href="https://github.com/guitarrist/tetriss" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star guitarrist/tetriss on GitHub">Star</a>
+          <a
+            class="github-button"
+            href="https://github.com/guitarrist/tetriss"
+            data-icon="octicon-star"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star guitarrist/tetriss on GitHub"
+            >Star</a
+          >
         </div>
         <div class="box">
-            <a class="github-button" href="https://github.com/guitarrist/tetriss/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork guitarrist/tetriss on GitHub">Fork</a>         
+          <a
+            class="github-button"
+            href="https://github.com/guitarrist/tetriss/fork"
+            data-icon="octicon-repo-forked"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Fork guitarrist/tetriss on GitHub"
+            >Fork</a
+          >
         </div>
 
         <div id="proximasPecasBox" class="box">
-            <div class="2"></div>
-            <br>
-            <div class="1"></div>
-            <br>
-            <div class="0"></div>
-            <br>
+          <div class="2"></div>
+          <br />
+          <div class="1"></div>
+          <br />
+          <div class="0"></div>
+          <br />
         </div>
-    </div>  
-</div>
-
-<script type="text/javascript" src="index.js?v=sHJGwXD"></script>
+      </div>
+    </div>
+    <script src="https://use.fontawesome.com/6fc9b92bab.js"></script>
+    <script type="text/javascript" src="index.js?v=sHJGwXD"></script>
 
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-59419372-7"></script>
-<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-59419372-7');</script>
-<script async defer src="https://buttons.github.io/buttons.js"></script>
-</body>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-59419372-7"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "UA-59419372-7");
+    </script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </body>
 </html>