diff --git a/static/calculator.css b/static/calculator.css
index 69dc9654..07db3177 100644
--- a/static/calculator.css
+++ b/static/calculator.css
@@ -11,33 +11,63 @@ body {
   width: 400px;
   background-color: black;
   color: white;
+  border: 8px double blue;
+  border-radius: 10px;
+  margin: 25px auto;
 }
 
 .screen {
   color: white;
   font-size: 40px;
+  height: 80px;
   font-family: "Courier New", Courier, monospace;
   text-align: right;
   padding: 20px 5px;
+  border-bottom: 8px double blue;
 }
 
 .calc-button {
-  background-color: #d8d9db;
+  background-color: #dadfe9;
   color: black;
+  font-weight: 500;
   height: 100px;
   width: 24.5%;
   border: none;
-  border-radius: 0;
+  border-radius: 10px;
   font-size: 40px;
   cursor: pointer;
 }
 
+#c{
+  background-color: rgb(72, 240, 72);
+}
+
+#c:hover{
+  background-color: rgb(6, 248, 6);
+}
+
+#percentage{
+  background-color:rgb(231, 49, 49);
+}
+
+#percentage:hover{
+  background-color:red;
+}
+
+#back{
+  background-color: rgb(214, 214, 60);
+}
+
+#back:hover{
+  background-color: yellow;
+}
+
 .calc-button:hover {
   background-color: #ebebeb;
 }
 
 .calc-button:active {
-  background-color: #bbbcbe;
+  background-color: #d6d8db;
 }
 
 .double {
@@ -49,16 +79,16 @@ body {
 }
 
 .calc-button:last-child {
-  background-color: #df974c;
+  background-color: #4cd5df;
   color: white;
 }
 
 .calc-button:last-child:hover {
-  background-color: #dfb07e;
+  background-color: #04e8f8;
 }
 
 .calc-button:last-child:active {
-  background-color: #dd8d37;
+  background-color: #04e8f8;
 }
 
 .calc-button-row {
diff --git a/static/calculator.html b/static/calculator.html
index eca38195..cc083f49 100644
--- a/static/calculator.html
+++ b/static/calculator.html
@@ -17,8 +17,9 @@
 
     <section class="calc-buttons">
       <div class="calc-button-row">
-        <button class="calc-button double ">C</button>
-        <button class="calc-button">←</button>
+        <button class="calc-button" id="c">C</button>
+        <button class="calc-button" id="percentage">%</button>
+        <button class="calc-button" id="back">←</button>
         <button class="calc-button">÷</button>
       </div>
       <div class="calc-button-row">
@@ -40,7 +41,8 @@
         <button class="calc-button">+</button>
       </div>
       <div class="calc-button-row">
-        <button class="calc-button triple">0</button>
+        <button class="calc-button double">00</button>
+        <button class="calc-button">0</button>
         <button class="calc-button">=</button>
       </div>
     </section>
diff --git a/static/calculator.js b/static/calculator.js
index efc7afde..002970f3 100644
--- a/static/calculator.js
+++ b/static/calculator.js
@@ -45,9 +45,12 @@ function flushOperation(intBuffer) {
     runningTotal -= intBuffer;
   } else if (previousOperator === "×") {
     runningTotal *= intBuffer;
-  } else {
+  } else if(previousOperator === "÷") {
     runningTotal /= intBuffer;
   }
+  else{
+    runningTotal /= 100;
+  }
 }
 
 function handleSymbol(value) {
@@ -77,6 +80,7 @@ function handleSymbol(value) {
     case "-":
     case "×":
     case "÷":
+    case "%":
       handleMath(value);
       break;
   }