diff --git a/Calculator/cal.css b/Calculator/cal.css
index 25bad49..842a362 100644
--- a/Calculator/cal.css
+++ b/Calculator/cal.css
@@ -1,64 +1,121 @@
-body{
-    background-image: url(c10.jpg);
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-position: center;
-    background-size: cover;
+@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 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #e0e3eb; /* Light grey background */
+    /* Optional: Keep the background image if desired, but a clean look is better for "realistic" usually. 
+       Let's use a subtle gradient or the original image if it was good, but I'll stick to a clean modern background. */
+    background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
 }
-button{
-    width: 200px;
-    height: 50px;
-    margin: 2px 2px;
-    background-color: blue;
-    color: #fff4a7;
+
+.calculator {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5);
     border-radius: 20px;
-    font-weight: bolder;
-    font-style: italic;
-    font-size: larger;
+    padding: 20px;
+    width: 350px;
 }
-#outside{
-    color: white;
-    border-radius: 5px;
-    margin: auto;
-    margin-top: 100px;
-    width: 1000px;
-    height: 600px;
-    padding: 5px;
+
+.screen {
+    background: #000;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
 }
-#heading{
-    margin: auto;
-    width: 412px;
-    font-size: xxx-large;
+
+.operation-display {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.2rem;
+    min-height: 24px;
+    word-wrap: break-word;
+    word-break: break-all;
 }
-#btn{
-    margin: auto;
-    margin-top: 20px;
-    width: 815px;
+
+.result-display {
+    color: #fff;
+    font-size: 2.5rem;
+    font-weight: 600;
+    word-wrap: break-word;
+    word-break: break-all;
 }
-.btn-inside{
-    width: 900px;
+
+.buttons-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
 }
-#val{
-    /* border: 2px solid red; */
-    height: 55px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 20px;
-    font-weight: bolder;
+
+.btn {
+    border: none;
+    outline: none;
+    height: 60px;
+    width: 60px;
+    border-radius: 50%; /* Rounded buttons */
+    font-size: 1.2rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: 0.2s ease;
+    background: #333;
+    color: #fff;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
+                -2px -2px 5px rgba(255, 255, 255, 0.1);
 }
-#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;
+
+.btn:active {
+    transform: scale(0.95);
+    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3),
+                inset -2px -2px 5px rgba(255, 255, 255, 0.1);
 }
 
+/* Number buttons */
+.btn-number {
+    background: #333;
+}
+
+/* Operator buttons */
+.btn-operator {
+    background: #ff9f0a; /* Orange like iOS */
+    color: #fff;
+}
+
+/* Clear/Delete buttons */
+.btn-clear, .btn-delete {
+    background: #a5a5a5; /* Light grey like iOS */
+    color: #000;
+}
+
+/* Equal button */
+.btn-equal {
+    background: #34c759; /* Green */
+    color: #fff;
+    grid-column: span 1; /* Keep it single for now to match grid */
+}
+
+.btn-zero {
+    grid-column: span 2;
+    width: 100%;
+    border-radius: 30px; /* Pill shape for zero */
+    text-align: left;
+    padding-left: 25px;
+}
+
+
diff --git a/Calculator/cal.html b/Calculator/cal.html
index 84a65f1..a210d0e 100644
--- a/Calculator/cal.html
+++ b/Calculator/cal.html
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
+<head>
+    <meta charset="UTF-8">
+<!DOCTYPE html>
+<html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,42 +15,34 @@
 </head>
 
 <body>
-    <div id="outside">
-        <h1 id="heading">🖩CALCULATOR🖩</h1>
-        <div>
-            <div>
-                <h1 id="val"> </h1>
-            </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>
+    <div class="calculator">
+        <div class="screen">
+            <div id="val" class="operation-display"></div>
+            <div id="res" class="result-display">0</div>
+        </div>
+        <div class="buttons-grid">
+            <button class="btn btn-clear" onclick="clearer()">AC</button>
+            <button class="btn btn-operator" onclick="adder('/')">÷</button>
+            <button class="btn btn-operator" onclick="adder('*')">×</button>
+            <button class="btn btn-delete" onclick="backspace()">⌫</button>
+
+            <button class="btn btn-number" onclick="adder('7')">7</button>
+            <button class="btn btn-number" onclick="adder('8')">8</button>
+            <button class="btn btn-number" onclick="adder('9')">9</button>
+            <button class="btn btn-operator" onclick="adder('-')">-</button>
+
+            <button class="btn btn-number" onclick="adder('4')">4</button>
+            <button class="btn btn-number" onclick="adder('5')">5</button>
+            <button class="btn btn-number" onclick="adder('6')">6</button>
+            <button class="btn btn-operator" onclick="adder('+')">+</button>
+
+            <button class="btn btn-number" onclick="adder('1')">1</button>
+            <button class="btn btn-number" onclick="adder('2')">2</button>
+            <button class="btn btn-number" onclick="adder('3')">3</button>
+            <button class="btn btn-equal" onclick="compute(1)">=</button>
+
+            <button class="btn btn-number btn-zero" onclick="adder('0')">0</button>
+            <button class="btn btn-number" onclick="adder('.')">.</button>
         </div>
     </div>
     <script src="cal.js"></script>
diff --git a/Calculator/cal.js b/Calculator/cal.js
index 1699f4c..e3cd206 100644
--- a/Calculator/cal.js
+++ b/Calculator/cal.js
@@ -1,42 +1,42 @@
 let valEl = document.getElementById("val")
 let resEl = document.getElementById("res")
+
+let calculation = ""; // Internal string for eval
+
+function updateDisplay() {
+    // Replace * with ×, / with ÷ for display
+    let displayString = calculation.replace(/\*/g, '×').replace(/\//g, '÷');
+    valEl.innerText = displayString;
+}
+
 function clearer(){
-    valEl.innerText = ""
-    resEl.innerText = ""
+    calculation = "";
+    valEl.innerText = "";
+    resEl.innerText = "0";
+}
+
+function backspace() {
+    calculation = calculation.slice(0, -1);
+    updateDisplay();
 }
+
 function adder(k){
-    valEl.innerText += k
-    if(k=='*' || k=='+' || k=='-' || k=='/'){
-        compute(0)
-    }
+    calculation += k;
+    updateDisplay();
 }
-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){
-            break;
-        }
-    }
-    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);
+
+function compute(isFinal){
+    if(!calculation) return;
+    try {
+        let result = eval(calculation);
+        resEl.innerText = result;
+        if(isFinal) {
+            // Optional: reset calculation to result?
+            // calculation = result.toString();
+            // updateDisplay();
+            // But usually we want to see the history until we type again.
         }
-        resEl.innerText = '= ' + resEl.innerText
-        if(!is){
-            valEl.innerText = resEl.innerText + t
-            if(valEl.innerText[0] == '='){
-                valEl.innerText = valEl.innerText.substring(1)
-            }
-        } 
+    } catch (e) {
+        resEl.innerText = "Error";
     }
 }
\ No newline at end of file