diff --git a/calculator/index.html b/calculator/index.html
index 2a10992..0668c76 100644
--- a/calculator/index.html
+++ b/calculator/index.html
@@ -14,29 +14,29 @@
   </head>
   <body>
     <div class="calculator">
-      <input type="text" class="display" />
+      <input type="text" id="display" disabled />
 
       <button class="clear">C</button>
       <button>←</button>
-      <button>÷</button>
+      <button class="operator">÷</button>
 
       <button>7</button>
       <button>8</button>
       <button>9</button>
-      <button>×</button>
+      <button class="operator">×</button>
 
       <button>4</button>
       <button>5</button>
       <button>6</button>
-      <button>-</button>
+      <button class="operator">-</button>
 
       <button>1</button>
       <button>2</button>
       <button>3</button>
-      <button>+</button>
+      <button class="operator">+</button>
 
       <button class="zero">0</button>
-      <button>=</button>
+      <button class="operator">=</button>
     </div>
   </body>
 </html>
diff --git a/calculator/style.css b/calculator/style.css
index 105a0ef..ce6c905 100644
--- a/calculator/style.css
+++ b/calculator/style.css
@@ -12,16 +12,40 @@ body {
 .calculator {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    border-collapse: collapse;
+    border-radius: 0;
 }
 
-.display {
+#display {
     grid-column: 1 / 5;
-    height: 50px;
-    width: 200px;
+    height: 100px;
+    width: 400px;
+    background-color: black;
+    color: white;
+    text-align: right;
+    font-size: 75px;
 }
 
 button {
-    height: 50px;
+    height: 100px;
+    font-size: 50px;
+    background-color: #d8d9db;
+    border: 1px solid black;
+    padding: 0;
+
+}
+
+button:hover {
+    background-color: #ebebeb;
+}
+
+.operator {
+    background-color: #df974c;
+    color: white;
+}
+
+.operator:hover {
+    background-color: #dfb07e;
 }
 
 .clear {
