diff --git a/assets/calc_style.css b/assets/calc_style.css
index 4781757..ba7396e 100644
--- a/assets/calc_style.css
+++ b/assets/calc_style.css
@@ -1,85 +1,114 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
-    font-size: 2.5vh;
-    top: 15%;
-    left: 40%;
-    margin: 0 auto;
-    background-color: black;
-    font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
 }
 
 h1 {
-    color: white;
-    text-align: center;
-    margin: 0;
+  color: white;
+  text-align: center;
+  margin-bottom: 10px;
 }
 
 #calculator {
-    width: auto;
-    height: auto;
-    padding: 1.5vh;
-    border: 5px solid #666666;
-    border-radius: 15px;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+  background-color: #333;
+  border: 5px solid #666;
+  border-radius: 15px;
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 450px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  text-align: center;
 }
 
 .box {
-    text-align:right;
-    font-size: 2.8vh;
-    height: 3vh;
-    line-height: 3vh;
-    padding: 1em;
-    border: 2px solid #e68a00;
-    color: white;
-    border-radius: 15px;
-    background-color: black;
+  background-color: black;
+  border: 2px solid #e68a00;
+  border-radius: 15px;
+  color: white;
+  font-size: 1.5rem;
+  text-align: right;
+  padding: 1rem;
+  margin: 10px 0;
 }
 
 #last_operation_history {
-    height: 1.8vh;
-    font-size: 1.8vh;
-    text-align:right;
-    padding-right: 1.5vh;
-    color: rgb(177, 176, 176);
-    background-color: black;
+  color: rgb(177, 176, 176);
+  font-size: 1.2em;
+  text-align: right;
+  margin-bottom: 10px;
+  height: 1.5em;
 }
 
-button {
-    width:9vh;
-    height: 9vh;
-    font-weight:bold;
-    font-size: 3vh;
-    color: white;
-    background-color: #666666;
-    border-radius: 50%;
-    border: 1px solid #333333;
+#table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-#backspace_btn {
-    background-image: url("../assets/back_remove.png");
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-size: 1.7em;
+button {
+  background-color: #666;
+  border: 1px solid #333;
+  border-radius: 50%;
+  color: white;
+  font-size: 1.5em;
+  font-weight: bold;
+  height: 50px;
+  margin: 5px;
+  width: 50px;
+  transition: background-color 0.3s;
 }
 
 button:hover {
-    background-color: #999999;
-    cursor: pointer;
+  background-color: #999;
+  cursor: pointer;
+}
+
+button:active {
+  transform: scale(0.95);
 }
 
-.operator {
-    background-color: #e68a00;
+button.operator {
+  background-color: #e68a00;
 }
 
-.operator:hover {
-    background-color: #ffd11a;
+button.operator:hover {
+  background-color: #ffd11a;
 }
 
-#equal_sign {
-    width: 100%;
-    border-radius: 15px;
+button#equal_sign {
+  border-radius: 15px;
+  width: calc(100% - 10px);
+}
+
+#backspace_btn {
+  background-image: url("../assets/back_remove.png");  
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 1.7rem;
+}
+
+@media (max-width: 600px) {
+  body {
+    height: auto;
+  }
+  button {
+    height: 50px;
+    width: 50px;
+    font-size: 1.2em;
+  }
+
+  .box {
+    font-size: 2em;
+    padding: 15px;
+  }
 }