diff --git a/08_calculator/calculator.js b/08_calculator/calculator.js
index 4147969..a8ce245 100644
--- a/08_calculator/calculator.js
+++ b/08_calculator/calculator.js
@@ -1,3 +1,9 @@
+let displayValue = 0;
+let operator = 0;
+let num1 = 0;
+let num2 = 0;
+const specialChars = ['!', '^', '*', '/', '+', '-'];
+
 const add = function(num1, num2) {
   let sum = num1 + num2;
   return sum;
@@ -8,28 +14,31 @@ const subtract = function(num1, num2) {
 	return sum;
 };
 
-const sum = function(array) {
-  let sum = 0;
-  if (array.length > 0) {
-  	for (i = 0; i < array.length; i++ ) {
-      sum += array[i];
-    }
-  } else {
-    let sum = 0;
-    return sum;
-  }
-  return sum;
-};
+// const sum = function(array) {
+//   let sum = 0;
+//   if (array.length > 0) {
+//   	for (i = 0; i < array.length; i++ ) {
+//       sum += array[i];
+//     }
+//   } else {
+//     let sum = 0;
+//     return sum;
+//   }
+//   return sum;
+// };
 
-const multiply = function(array) {
+const multiply = function(num1, num2) {
   let sum = 1;
-  for (i = 0; i < array.length; i++) {
-    sum = sum * array[i];
-  }
+  sum = num1 * num2;
   return sum;
 
 };
 
+const divide = function(num1, num2) {
+  let sum = num1 / num2;
+  return sum;
+}
+
 const power = function(num1, num2) {
   let sum = 1;
 	for (i = 0; i < num2; i++) {
@@ -48,19 +57,107 @@ const factorial = function(num) {
 
 const operate = function(op, num1, num2) {
   switch (op) {
-    case 'add':
+    case '+':
       return add(num1, num2);
-    case 'subtract':
+    case '-':
       return subtract(num1, num2);
-    case 'multiply':
+    case '*':
       return multiply(num1, num2);
-    case 'power':
+    case '/':
+      return divide(num1, num2);
+    case '^':
       return power(num1, num2);
-    case 'factorial':
+    case '!':
       return factorial(num1);
   }
 }
+function updateDisplay(id) {
+  switch (id) {
+    case '+':
+    case '-':
+    case '*':
+    case '/':
+    case '^':
+    case '!':
+    case '.':
+      let includesSpec = specialChars.some(char => display.textContent.includes(char));
+      if (includesSpec) {
+        let num2 = display.textContent.split(/[\/+^!-*-]/);
+        num1 = num2[0];
+        num1 = parseFloat(num1);
+        num2 = num2[1];
+        num2 = parseFloat(num2);
+        let currentAnswer = operate(operator, num1, num2);
+        operator = id;
+        display.textContent = currentAnswer + id;
+        displayValue = display.textContent;
+        break;
 
-let answer = operate("multiply", 1, 2);
+      }
+      else {
+        num1 = display.textContent;
+        num1 = parseFloat(num1);
+        operator = id;
+        display.textContent += id;
+        displayValue = display.textContent;
+        console.log('false');
+        break;
+      }
+    case '1':
+    case "2":
+    case "3":
+    case "4":
+    case "5":
+    case "6":
+    case '7':
+    case '8':
+    case '9':
+    case '0':
+      if (displayValue === 0) {
+        display.textContent = '';
+        display.textContent = id;
+        displayValue = display.textContent;
+      }
+      else {
+        display.textContent += id;
+        displayValue = display.textContent;
+      };
+      break;
+    case 'back':
+      let newString = display.textContent.slice(0, -1);
+      display.textContent = newString
+      displayValue = display.textContent;
+      console.log('back');
+      break;
+    case 'equals':
+      let num2 = display.textContent.split(/[\/+^!-*-]/);
+      num1 = num2[0];
+      num1 = parseFloat(num1);
+      num2 = num2[1];
+      num2 = parseFloat(num2);
+      let answer = operate(operator, num1, num2)
+      display.textContent = answer;
+      displayValue = answer;
+      console.log('equals');
+      break;
+    case 'clear':
+      display.textContent = '0';
+      displayValue = 0;
+      console.log('clear');
+      break;
+  }
+}
 
-console.log(answer);
\ No newline at end of file
+const display = document.querySelector('.display');
+
+const buttons = document.querySelectorAll('.btn');
+buttons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+        // operate(button.id);
+        updateDisplay(button.id);
+    });
+  });
+
+// let answer = operate("multiply", 1, 2);
+
+// console.log(answer);
\ No newline at end of file
diff --git a/08_calculator/index.html b/08_calculator/index.html
index 5253aa5..3a12eea 100644
--- a/08_calculator/index.html
+++ b/08_calculator/index.html
@@ -12,26 +12,29 @@
 <body>
     <div class="container">
         <div class="calculator">
-            <div class='display calc-top'>1000</div>
-            <div class="clear">C</div>
-            <div class="power">a ^</div>
-            <div class="factorial">n!</div>
-            <div class="divide">/</div>
-            <div class="num">7</div>
-            <div class="num">8</div>
-            <div class="num">9</div>
-            <div class="multiply"></div>
-            <div class="num">4</div>
-            <div class="num">5</div>
-            <div class="num">6</div>
-            <div class="minus">-</div>
-            <div class="num">1</div>
-            <div class="num">2</div>
-            <div class="num">3</div>
-            <div class="plus">+</div>
-            <div class="decimal">.</div>
-            <div class="num">0</div>
-            <div class="backspace">&lt</div>
+            <div class="top">
+                <div class='display'>0</div>
+            </div>
+            <div class="btn op clear" id="clear">C</div>
+            <div class="btn op power" id="^">a ^</div>
+            <div class="btn op factorial" id="!">n!</div>
+            <div class="btn op divide" id="/">/</div>
+            <div class="btn num" id="7">7</div>
+            <div class="btn num" id="8">8</div>
+            <div class="btn num" id="9">9</div>
+            <div class="btn op multiply" id="*">*</div>
+            <div class="btn num" id="4">4</div>
+            <div class="btn num" id="5">5</div>
+            <div class="btn num" id="6">6</div>
+            <div class="btn op minus" id="-">-</div>
+            <div class="btn num" id="1">1</div>
+            <div class="btn num" id="2">2</div>
+            <div class="btn num" id="3">3</div>
+            <div class="btn op plus" id="+">+</div>
+            <div class="btn op decimal" id=".">.</div>
+            <div class="btn op num zero" id="0">0</div>
+            <div class="btn op backspace" id="back">&lt</div>
+            <div class="btn op equals" id="equals">=</div>
         </div>
     </div>
 
diff --git a/08_calculator/styles.css b/08_calculator/styles.css
index e69de29..777dda6 100644
--- a/08_calculator/styles.css
+++ b/08_calculator/styles.css
@@ -0,0 +1,85 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-style: italic;
+    font-weight: bold;
+    font-size: 1.8em;
+    color: white;
+}
+.container {
+    display: flex;
+    justify-content: center;
+    box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
+}
+
+.calculator {
+    border: solid #E5A9A9 10px;
+    /* box-shadow: 5px 5px 15px 5px #000000; */
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    /* align-items:flex-end; */
+    align-content: center;
+    background-color: #E5A9A9;
+    height: 500px;
+    width: 400px;
+}
+
+.top {
+    background-color: #F4E4BA;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    font-size: 2em;
+    border-bottom: solid #E5A9A9 4px;
+    width: 400px;
+    height: 83px;
+    -webkit-box-shadow: inset 0px 0px 0px 2px #000000; 
+    box-shadow: inset 0px 0px 0px 2px #000000;
+    
+    
+}
+
+.display {
+    margin-right: 0.1em;
+    
+    
+}
+
+.btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 1px 1px 3px 1px #000000;
+    /* border-top: solid #E5A9A9 1px;
+    border-right: solid #E5A9A9 1px; */
+    width: 99px;
+    height: 81.5px;
+    border-radius: 50%;
+    background-color: darkgray;
+}
+
+.btn:hover {
+    /* transform: scale(1.1); */
+    background-color: #FBD87F;
+}
+
+.op {
+    background-color: #AF4D98;
+}
+
+.row {
+    background-color: #DDE8B9;
+}
+.num {
+    background-color: #D66BA0;
+}
+
+.btn.num.zero {
+    /* border-bottom: solid black 2px; */
+}
+
+.btn.op.equals {
+    /* background-color: black; */
+}
\ No newline at end of file