diff --git a/calcu-js.js b/calcu-js.js
index 1c47541..71f74f3 100644
--- a/calcu-js.js
+++ b/calcu-js.js
@@ -1,64 +1,180 @@
-let output = "";
-let mem = null;
-const printNums = document.querySelector("print");
-
-// set all values to the textbox
-function setVal(value){
-    output += value;
-    document.getElementById("print").value = output;
-
-    // set to zero idk how to sir sankyuu
-    // if(value===document.getElementById("print").value){
-    //     output = 0;
-    // }
-
-    if(value %2 === 0){
-        document.getElementById("opbtn").style.backgroundColor = "green";
-    } else if(!isNaN(value)){
-        document.getElementById("opbtn").style.backgroundColor = "red";
-    }else{
-        document.getElementById("opbtn").style.backgroundColor = "white";
+let num1 = document.getElementById("num1");
+let num2 = document.getElementById("num2");
+
+let result = document.getElementById("result");
+
+let btnAddition = document.getElementById("btn-addition");
+let btnSubtraction = document.getElementById("btn-subtraction");
+let btnMultiplication = document.getElementById("btn-multiplication");
+let btnDivision = document.getElementById("btn-division");
+
+let history = document.getElementById("historyList");
+let history_list = [];
+let btnClearHistory = document.getElementById("clear-history");
+
+let btnStore = document.getElementById("store-result");
+let btnMemoryRecall = document.getElementById("memory-recall");
+let btnMemoryClear = document.getElementById("memory-clear");
+
+let memory = null;
+
+let resultingValue;
+
+class Operation {
+    constructor(num1, num2, result, operator) {
+        this.num1 = num1;
+        this.num2 = num2;
+        this.result = result;
+        this.operator = operator;
+    }
+
+    toString() {
+        return `${this.num1} ${this.operator} ${this.num2} = ${this.result}`;
     }
 }
 
-// retrieve memory
-function retrieveMemory(){
-    const x = parseFloat(output);
+num1.addEventListener("keyup", function () {
+    checkInputs();
+});
 
-    if(!isNaN(x)){
-        mem = x;
-    }
+num2.addEventListener("keyup", function () {
+    checkInputs();
+});
 
-    if(mem !== null){
-        output = mem.toString();
-        document.getElementById("print").value = output;
+function checkInputs() {
+    if (num1.value == "" || num2.value == "") {
+        btnAddition.disabled = true;
+        btnSubtraction.disabled = true;
+        btnMultiplication.disabled = true;
+        btnDivision.disabled = true;
+        return false;
+    } else {
+        btnAddition.disabled = false;
+        btnSubtraction.disabled = false;
+        btnMultiplication.disabled = false;
+        btnDivision.disabled = false;
+        return true;
     }
 }
 
-// clear memory
-function clearMemory(){
-    if(mem===null){
-        alert("Memory is empty");
-    }else{
-        mem = null;
+function checkHistory() {
+    if (history.innerHTML != "") {
+        btnClearHistory.disabled = false;
+    } else {
+        btnClearHistory.disabled = true;
     }
 }
 
-// clear num
-function eraseNum(){
-    output = " ";
-    document.getElementById("print").value = " ";
-    document.getElementById("opbtn").style.backgroundColor = "white";
+function doOperation(operator) {
+    if (checkInputs()) {
+        let num1Value = parseFloat(num1.value);
+        let num2Value = parseFloat(num2.value);
+        let resultValue;
+
+        try {
+            switch (operator) {
+                case "+":
+                    resultValue = num1Value + num2Value;
+                    break;
+                case "-":
+                    resultValue = num1Value - num2Value;
+                    break;
+                case "*":
+                    resultValue = num1Value * num2Value;
+                    break;
+                case "/":
+                    if (num2Value === 0) {
+                        throw new Error("Division by zero");
+                    }
+                    resultValue = num1Value / num2Value;
+                    break;
+            }
+            result.innerHTML = `Result: ${resultValue}`;
+            history_list.push(
+                new Operation(num1Value, num2Value, resultValue, operator)
+            );
+            resultingValue = resultValue;
+        } catch (error) {
+            history_list.push(
+                new Operation(
+                    num1Value,
+                    num2Value,
+                    `Result: Error: ${error.message}`,
+                    operator
+                )
+            );
+            result.innerHTML = `Result: Error: ${error.message}`;
+            resultingValue = undefined;
+        } finally {
+            history.innerHTML =
+                history.innerHTML +
+                `<li>${history_list[history_list.length - 1].toString()}</li>`;
+            checkHistory();
+        }
+    }
 }
 
-// display
-function print(){
-    try{
-        const res = eval(output);
-        document.getElementById("print").value = res;
-        output = res.toString();
-    }catch(error){
-        document.getElementById("print").value = "error";
-        output = "";
+btnAddition.addEventListener("click", function () {
+    doOperation("+");
+});
+
+btnSubtraction.addEventListener("click", function () {
+    doOperation("-");
+});
+
+btnMultiplication.addEventListener("click", function () {
+    doOperation("*");
+});
+
+btnDivision.addEventListener("click", function () {
+    doOperation("/");
+});
+
+btnStore.addEventListener("click", function () {
+    if (memory == null) {
+        memory = [];
+    }
+    if (resultingValue != undefined) {
+        memory.push(resultingValue);
+        alert(`Stored in memory: ${memory[memory.length - 1]}`);
+    }
+});
+
+btnMemoryRecall.addEventListener("click", function () {
+    if (memory != null && memory.length > 0) {
+        num1.value = memory.pop();
+    } else {
+        alert("Memory is empty.");
+    }
+});
+
+btnMemoryClear.addEventListener("click", function () {
+    memory = null;
+    alert("Memory cleared.");
+});
+
+btnClearHistory.addEventListener("click", function () {
+    history_list = [];
+    history.innerHTML = "";
+    checkHistory();
+});
+
+document.addEventListener("keyup", function (event) {
+    console.log(event.key);
+    if (checkInputs()) {
+        switch (event.key) {
+            case "+":
+                doOperation("+");
+                break;
+            case "-":
+                doOperation("-");
+                break;
+            case "*":
+                doOperation("*");
+                break;
+            case "/":
+                doOperation("/");
+                break;
+        }
     }
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/calcu-main.html b/calcu-main.html
index c340684..04fb457 100644
--- a/calcu-main.html
+++ b/calcu-main.html
@@ -2,46 +2,51 @@
 
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=0.1">
-        <title>Calculator</title>
-        <link rel="stylesheet" href="calcu-styles.css">
-        <script src="calcu-js.js"></script>
-    </head>
-
-    <body>
-       <!-- div for buttons -->
-        <div class="calcu" id="opbtn">
-            <!-- display input/selected button value -->
-             <div class="con">
-                <input type="text" class="display" id="print"/>
-                <button class="opt" id="op" onclick="eraseNum()">C</button>
-            </div> <!--end of con-->
-            
-            <div class="opt-buttons">
-                <button class="opt" id="mr" onclick="retrieveMemory();">MR</button>
-                <button class="opt" id="mc" onclick="clearMemory();">MC</button>
-                <button class="opt" id="op" onclick="setVal('*');">*</button>
-                <button class="opt" id="op" onclick="setVal('/');">/</button>
-
-                <button class="onum" id="num" onclick="setVal('7');">7</button>
-                <button class="enum" id="num" onclick="setVal('8');">8</button>
-                <button class="onum" id="num" onclick="setVal('9');">9</button>
-                <button class="opt" id="op" onclick="setVal('+');">+</button>
-
-                <button class="enum" id="num" onclick="setVal('4');">4</button>
-                <button class="onum" id="num" onclick="setVal('5');">5</button>
-                <button class="enum" id="num" onclick="setVal('6');">6</button>
-                <button class="opt" id="op" onclick="setVal('-')">-</button>
-                
-                <button class="onum" id="num" onclick="setVal('1');">1</button>
-                <button class="enum" id="num" onclick="setVal('2');">2</button>
-                <button class="onum" id="num" onclick="setVal('3');">3</button>
-                <button class="opt" id="op" onclick="print();">=</button>
-
-                <button class="number" id="num" onclick="setVal('0');">0</button>
-            </div> <!--end of opt buttons-->
-        </div><!--end of calcu-->
-    </body>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title> Calculator </title>
+    <link rel="stylesheet" href="calcu-styles.css">
+</head>
+
+<body>
+    <div class="container">
+        <h2 id="header">CALCULATOR</h2>
+        <hr>
+        <div>
+            <input type="number" name="" id="num1">
+            <input type="number" name="" id="num2">
+        </div>
+        <div class="operations">
+            <button type="" id="btn-addition" disabled>+</button>
+            <button type="" id="btn-subtraction" disabled>-</button>
+            <button type="" id="btn-multiplication" disabled>*</button>
+            <button type="" id="btn-division" disabled>/</button>
+        </div>
+
+        <div class="memory-buttons">
+            <button id="store-result">M+</button>
+            <button id="memory-recall">MR</button>
+            <button id="memory-clear">MC</button>
+        </div>
+        <div>
+            <h3>Result:</h3>
+            <div id="result" class="result">
+
+            </div>
+        </div>
+        <hr>
+        <h3 style="text-align: center;">HISTORY</h3>
+        <div id="historyList">
+
+        </div>
+        <div class="history-actions">
+            <button id="clear-history" disabled>Clear History</button>
+        </div>
+
+        <script type="text/javascript" src="index.js"></script>
+
+</body>
+
 </html>
\ No newline at end of file
diff --git a/calcu-styles.css b/calcu-styles.css
index 4e9538e..5db329e 100644
--- a/calcu-styles.css
+++ b/calcu-styles.css
@@ -1,86 +1,112 @@
-*{
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: Arial, Helvetica, sans-serif;
-    }
-    
-    body{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: black;
-    }
-    
-    /* full calcu div */
-    .calcu{
-        /* display: flex; */
-        justify-content: center;
-        align-items: center;
-        /* height: 200px; */
-        max-width: 400px;
-        width: 100%;
-        border-radius: 12px;
-        padding: 10px 20px 20px;
-        position: relative;
-        background-color: lightblue;
-    }
-    
-    /* input bar */
-    .display{
-        height: 40px;
-        width: 80%;
-        border: none;
-        outline: none;
-        text-align: right;
-        margin-bottom: 5px;
-        font-size: 20px;
-        pointer-events: none;
-        /* display: inline-block; */
-        /* align-items: center;
-        justify-content: center; */
-    }
-    
-    /* operator buttons */
-    .opt-buttons{
-        display: grid;
-        grid-gap: 10px;
-        grid-template-columns: repeat(4, 1fr);
-    }
-    
-    .opt-buttons button{
-        padding: 10px;
-        border-radius: 6px;
-        border: none;
-        font-size: 20px;
-        cursor: pointer;
-    }
-    
-    .opt-buttons button:active{
-        transform: scale(0.99);
-    }
-    
-    /* container: display and clear */
-    .con{
-        display: grid;
-        grid-gap: 10px;
-        grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .con button{
-        padding: 10px;
-        margin-bottom: 5px;
-        border-radius: 6px;
-        border: none;
-        font-size: 20px;
-        cursor: pointer;
-    }
-    
-    .con button:active{
-        transform: scale(0.99);
-    }
-    
-    .opt, .clear{
-        color: grey;
-    }
\ No newline at end of file
+body {
+    font-family: "Poppins", sans-serif;
+    background: #f0f2f5;
+    display: flex;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.container {
+    background: #fff;
+    border-radius: 20px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 420px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+h1,
+h2,
+h3 {
+    text-align: center;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.result {
+    height: 40px;
+    padding: 15px;
+    border-radius: 20px;
+    border-color: black;
+    border-width: 3px;
+    border-style: solid;
+}
+
+input {
+    display: flex;
+    width: 93%;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+input[type="number"] {
+    flex: 1;
+    padding: 0.75rem;
+    font-size: 1.2rem;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+.operations,
+.memory-buttons,
+.history-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+}
+
+button {
+    font-family: "Poppins";
+    width: 60px;
+    height: 60px;
+    font-size: 1.4rem;
+    font-weight: bold;
+    background: linear-gradient(145deg, #e6e6e6, #ffffff);
+    border: 2px solid #ccc;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #333;
+}
+
+button:hover:not(:disabled) {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+    transform: scale(1.05);
+}
+
+button:disabled {
+    background: #f0f0f0;
+    color: #aaa;
+    border-color: #ddd;
+    cursor: not-allowed;
+}
+
+.memory-buttons button,
+.history-actions button {
+    width: auto;
+    height: 45px;
+    padding: 0 1rem;
+    font-size: 1rem;
+    border-radius: 12px;
+}
+
+#result {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 1rem 0;
+    color: #222;
+}
+
+#historyList {
+    padding-left: 1.5rem;
+    color: #444;
+}
\ No newline at end of file