diff --git a/calculator/css/style.css b/calculator/css/style.css
index bbbe444..5a53b5d 100644
--- a/calculator/css/style.css
+++ b/calculator/css/style.css
@@ -37,6 +37,10 @@
     margin: 5px;
     font-size: 25px;
     width: 110px;
+    -webkit-transition: all 0.5s; /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s; /* add this line, firefox */
+    -o-transition: all 0.5s; /* add this line, opera */
+    transition: all 0.5s; /* add this line */
 }
 
 #clear {
@@ -51,6 +55,14 @@
     width: 230px;
 }
 
+#action:hover {
+    background-color: #F0ECE2;
+}
+
+#clear:hover {
+    background-color: #FF6D60;
+}
+
 body {
     display: flex;
     justify-content: center;
diff --git a/calculator/index.html b/calculator/index.html
index 8e99803..3db8834 100644
--- a/calculator/index.html
+++ b/calculator/index.html
@@ -15,26 +15,27 @@
             0
         </div>
         <div class="buttons">
-            <button id="clear" class="btn">A/C</button>
-            <button id="action" class="btn">+/-</button>
-            <button id="action" class="btn">%</button>
-            <button id="action" class="btn">÷</button>
-            <button class="btn">7</button>
-            <button class="btn">8</button>
-            <button class="btn">9</button>
-            <button id="action" class="btn">*</button>
-            <button class="btn">4</button>
-            <button class="btn">5</button>
-            <button class="btn">6</button>
-            <button id="action" class="btn">-</button>
-            <button class="btn">1</button>
-            <button class="btn">2</button>
-            <button class="btn">3</button>
-            <button id="action" class="btn">+</button>
-            <button id="zero" class="btn">0</button>
-            <button id="decimal" class="btn">.</button>
-            <button id="action" class="btn">=</button>
+            <button id="clear" class="btn" value="cls">A/C</button>
+            <button id="action" class="btn" value="+/-">+/-</button>
+            <button id="action" class="btn" value="%">%</button>
+            <button id="action" class="btn" value="÷">÷</button>
+            <button class="btn" value="7">7</button>
+            <button class="btn" value="8">8</button>
+            <button class="btn" value="9">9</button>
+            <button id="action" class="btn" value="*">*</button>
+            <button class="btn" value="4">4</button>
+            <button class="btn" value="5">5</button>
+            <button class="btn" value="6">6</button>
+            <button id="action" class="btn" value="-">-</button>
+            <button class="btn" value="1">1</button>
+            <button class="btn" value="2">2</button>
+            <button class="btn" value="3">3</button>
+            <button id="action" class="btn" value="+">+</button>
+            <button id="zero" class="btn" value="0">0</button>
+            <button id="decimal" class="btn" value=".">.</button>
+            <button id="action" class="btn" value="=">=</button>
         </div>
    </div> 
+   <script src="js/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/calculator/js/script.js b/calculator/js/script.js
index ad18737..ed6d779 100644
--- a/calculator/js/script.js
+++ b/calculator/js/script.js
@@ -1,6 +1,10 @@
-let firstNum = undefined
-let secondNum = undefined
-let operator = undefined
+let firstNum = undefined;
+let secondNum = undefined;
+let operator = undefined;
+let screen = document.querySelector('.screen');
+
+
+const buttons = document.querySelectorAll('.btn');
 
 function add(x, y) {
     return Number(x + y);
@@ -35,3 +39,23 @@ function operate(firstNum, secondNum, operator) {
             return divive(firstNum, secondNum);
     }
 }
+
+function updateDisplay(displayValue) {
+    let currentScreen = screen.textContent.trim();
+    console.log(currentScreen);
+    if (currentScreen.length >= 8) return;
+
+    if (Number(currentScreen) === 0) {
+        screen.textContent = displayValue;
+    } else {
+        screen.textContent += displayValue;
+    }
+}
+
+
+
+buttons.forEach(btn => {
+    btn.addEventListener('click', e => {
+         updateDisplay(e.target.value);
+    });
+});
\ No newline at end of file