diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md
index 25d984f..5c3892a 100644
--- a/CONTRIBUTION.md
+++ b/CONTRIBUTION.md
@@ -2,7 +2,7 @@
 
 ## How to contribute ?
 
-You can contibute to this repository by following these steps:
+You can contribute to this repository by following these steps:
 
 - Firstly, you open an issue with the changes you want to make
 - Wait until you get assigned to make these changes
diff --git a/Calculator/cal.css b/Calculator/cal.css
index 25bad49..5b4eef4 100644
--- a/Calculator/cal.css
+++ b/Calculator/cal.css
@@ -1,64 +1,146 @@
-body{
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
     background-image: url(c10.jpg);
     background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
     background-position: center;
     background-size: cover;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }
-button{
-    width: 200px;
-    height: 50px;
-    margin: 2px 2px;
-    background-color: blue;
-    color: #fff4a7;
+
+.calculator {
+    width: 350px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(15px);
     border-radius: 20px;
-    font-weight: bolder;
-    font-style: italic;
-    font-size: larger;
-}
-#outside{
-    color: white;
-    border-radius: 5px;
-    margin: auto;
-    margin-top: 100px;
-    width: 1000px;
-    height: 600px;
-    padding: 5px;
-}
-#heading{
-    margin: auto;
-    width: 412px;
-    font-size: xxx-large;
-}
-#btn{
-    margin: auto;
-    margin-top: 20px;
-    width: 815px;
-}
-.btn-inside{
-    width: 900px;
-}
-#val{
-    /* border: 2px solid red; */
-    height: 55px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 20px;
-    font-weight: bolder;
-}
-#res{
-    /* border: 2px solid red; */
-    height: 50px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 25px;
-    font-weight: bolder;
-    font-size: x-large;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    color: rgba(255, 255, 255, 0.9);
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    letter-spacing: 1px;
+}
+
+.display {
+    width: 100%;
+    margin-bottom: 20px;
+    text-align: right;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.history {
+    min-height: 20px;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 5px;
+}
+
+.result {
+    min-height: 40px;
+    font-size: 2rem;
+    color: #fff;
+    font-weight: 600;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+/* Custom scrollbar for result */
+.result::-webkit-scrollbar {
+    height: 4px;
+}
+
+.result::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+.keypad {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+}
+
+.btn {
+    height: 60px;
+    border: none;
+    outline: none;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.25);
+    color: #fff;
+    font-size: 1.2rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn:hover {
+    background: rgba(255, 255, 255, 0.35);
+    transform: translateY(-2px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-operator {
+    background: rgba(255, 166, 0, 0.35);
+    color: #ffcc00;
+}
+
+.btn-operator:hover {
+    background: rgba(255, 166, 0, 0.45);
+}
+
+.btn-action {
+    background: rgba(255, 0, 0, 0.3);
+    color: #ff6b6b;
+}
+
+.btn-action:hover {
+    background: rgba(255, 0, 0, 0.4);
+}
+
+.btn-equal {
+    background: rgba(0, 255, 128, 0.35);
+    color: #00ff88;
+    grid-column: span 1;
+}
+
+.btn-equal:hover {
+    background: rgba(0, 255, 128, 0.45);
 }
 
+.span-2 {
+    grid-column: span 2;
+}
\ No newline at end of file
diff --git a/Calculator/cal.html b/Calculator/cal.html
index 84a65f1..1ffc942 100644
--- a/Calculator/cal.html
+++ b/Calculator/cal.html
@@ -10,41 +10,36 @@
 </head>
 
 <body>
-    <div id="outside">
-        <h1 id="heading">🖩CALCULATOR🖩</h1>
-        <div>
-            <div>
-                <h1 id="val"> </h1>
+    <div class="container">
+        <div class="calculator">
+            <h1 class="title">Calculator</h1>
+            <div class="display">
+                <div id="res" class="history"></div>
+                <div id="val" class="result"></div>
             </div>
-            <div>
-                <p id="res"></p>
-            </div>
-            <div id="btn">
-                <div class="btn-inside">
-                    <button onclick="adder('1')">1</button>
-                    <button onclick="adder('2')">2</button>
-                    <button onclick="adder('3')">3</button>
-                    <button onclick="adder('*')">*</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="adder('4')">4</button>
-                    <button onclick="adder('5')">5</button>
-                    <button onclick="adder('6')">6</button>
-                    <button onclick="adder('+')">+</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="adder('7')">7</button>
-                    <button onclick="adder('8')">8</button>
-                    <button onclick="adder('9')">9</button>
-                    <button onclick="adder('-')">-</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="clearer()">C</button>
-                    <button onclick="adder('0')">0</button>
-                    <button onclick="compute(1)">=</button>
-                    <button onclick="adder('/')">/</button>
-                </div>
-                <button onclick="adder('.')">.</button>
+            <div class="keypad">
+                <button onclick="clearer()" class="btn btn-action span-2">C</button>
+                <button onclick="backspace()" class="btn btn-action">⌫</button>
+                <button onclick="adder('/')" class="btn btn-operator">÷</button>
+
+                <button onclick="adder('7')" class="btn">7</button>
+                <button onclick="adder('8')" class="btn">8</button>
+                <button onclick="adder('9')" class="btn">9</button>
+                <button onclick="adder('*')" class="btn btn-operator">×</button>
+
+                <button onclick="adder('4')" class="btn">4</button>
+                <button onclick="adder('5')" class="btn">5</button>
+                <button onclick="adder('6')" class="btn">6</button>
+                <button onclick="adder('-')" class="btn btn-operator">-</button>
+
+                <button onclick="adder('1')" class="btn">1</button>
+                <button onclick="adder('2')" class="btn">2</button>
+                <button onclick="adder('3')" class="btn">3</button>
+                <button onclick="adder('+')" class="btn btn-operator">+</button>
+
+                <button onclick="adder('0')" class="btn span-2">0</button>
+                <button onclick="adder('.')" class="btn">.</button>
+                <button onclick="compute(1)" class="btn btn-equal">=</button>
             </div>
         </div>
     </div>
diff --git a/Calculator/cal.js b/Calculator/cal.js
index 1699f4c..05c9134 100644
--- a/Calculator/cal.js
+++ b/Calculator/cal.js
@@ -1,42 +1,49 @@
 let valEl = document.getElementById("val")
 let resEl = document.getElementById("res")
-function clearer(){
+function clearer() {
     valEl.innerText = ""
     resEl.innerText = ""
 }
-function adder(k){
+function backspace() {
+    let temp = valEl.innerText
+    valEl.innerText = temp.slice(0, -1)
+}
+function adder(k) {
     valEl.innerText += k
-    if(k=='*' || k=='+' || k=='-' || k=='/'){
+    if (k == '*' || k == '+' || k == '-' || k == '/') {
         compute(0)
     }
 }
-function compute(is){
+function compute(is) {
     let temp = valEl.innerText, i
-    let t = temp[temp.length-1];
-    for(i=0;i<temp.length-1;i++){
-        if((temp[i]=='*' || temp[i]=='+' || temp[i]=='-' || temp[i]=='/') && i!=0){
+    let t = temp[temp.length - 1];
+    for (i = 0; i < temp.length - 1; i++) {
+        if ((temp[i] == '*' || temp[i] == '+' || temp[i] == '-' || temp[i] == '/') && i != 0) {
             break;
         }
     }
-    if(i!=temp.length-1){
-        let part1 = parseFloat(temp.substring(0,i));
-        let part2 = parseFloat(temp.substring(i+1));
+    if (i != temp.length - 1) {
+        let part1 = parseFloat(temp.substring(0, i));
+        let part2 = parseFloat(temp.substring(i + 1));
         let k5 = temp[i];
-        if(k5=='+'){
-            resEl.innerText = (part1)+(part2);
-        }else if(k5=='-'){
-            resEl.innerText = (part1)-(part2);
-        }else if(k5=='*'){
-            resEl.innerText = (part1)*(part2);
-        }else{
-            resEl.innerText = (part1)/(part2);
+        if (k5 == '+') {
+            resEl.innerText = (part1) + (part2);
+        } else if (k5 == '-') {
+            resEl.innerText = (part1) - (part2);
+        } else if (k5 == '*') {
+            resEl.innerText = (part1) * (part2);
+        } else {
+            resEl.innerText = (part1) / (part2);
+        }
+        let finalRes = resEl.innerText;
+        if (is) {
+            // Equals clicked: Move expression to history, Result to main
+            resEl.innerText = temp;
+            valEl.innerText = finalRes;
+        } else {
+            // Operator clicked: Continue calculation
+            resEl.innerText = '= ' + finalRes;
+            valEl.innerText = finalRes + t;
         }
-        resEl.innerText = '= ' + resEl.innerText
-        if(!is){
-            valEl.innerText = resEl.innerText + t
-            if(valEl.innerText[0] == '='){
-                valEl.innerText = valEl.innerText.substring(1)
-            }
-        } 
     }
 }
\ No newline at end of file