diff --git a/Calculator/cal.css b/Calculator/cal.css
index 25bad49..e808286 100644
--- a/Calculator/cal.css
+++ b/Calculator/cal.css
@@ -1,64 +1,87 @@
 body{
-    background-image: url(c10.jpg);
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-position: center;
-    background-size: cover;
-}
-button{
-    width: 200px;
-    height: 50px;
-    margin: 2px 2px;
-    background-color: blue;
-    color: #fff4a7;
-    border-radius: 20px;
-    font-weight: bolder;
-    font-style: italic;
-    font-size: larger;
+    background-color: rgb(211, 211, 211);
+    display: flex;
+    justify-content: center; /* centra horizontalmente */
+    align-items: center; /* centra verticalmente */
+    margin-top: 50px;
+
 }
-#outside{
-    color: white;
+.container{
+    width: 20vw;
+    height: 60vh;
+    background-color: rgb(245, 245, 245);
     border-radius: 5px;
-    margin: auto;
-    margin-top: 100px;
-    width: 1000px;
-    height: 600px;
-    padding: 5px;
+    display: flex;
+    flex-direction: column; /* apila los elementos verticalmente */
+    gap: 10px; /* espacio entre pantalla y filas */
 }
-#heading{
-    margin: auto;
-    width: 412px;
-    font-size: xxx-large;
+.screen {
+  background-color: black;
+  color: white;
+  height: 100px;
+  padding: 10px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /* Pone el resultado abajo */
+  align-items: flex-end; /* Alinea el texto a la derecha */
+  font-size: 1.5em;
+  margin-bottom: 50px;
 }
-#btn{
-    margin: auto;
-    margin-top: 20px;
-    width: 815px;
+
+#operation {
+  opacity: 0.7; /* Más tenue para diferenciar */
+  font-size: 1em;
 }
-.btn-inside{
-    width: 900px;
+
+#result {
+  font-size: 1.4em;
 }
-#val{
-    /* border: 2px solid red; */
-    height: 55px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 20px;
-    font-weight: bolder;
+
+.button{
+    display: flex; /* hace que los botones estén en fila */
+    justify-content: space-between; /* distribuye los botones */
+    gap: 5px;
+    
 }
-#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;
+
+button {
+  flex: 1; /* cada botón ocupa el mismo espacio */
+  padding: 10px;
+  font-size: 18px;
+  border: none;
+  border-radius: 25px;
+  background-color: #666;
+  color: white;
+  cursor: pointer;
+}
+.cero{
+    flex: 3.6;
 }
 
+button:hover {
+  background-color: #888;
+}
+
+.Clear{
+    background-color: rgba(243, 75, 75, 0.911);
+}
+.Clear:hover{
+    background-color: rgba(241, 128, 128, 0.911);
+}
+
+.equal{
+    background-color: rgba(243, 75, 75, 0.911);
+}
+.equal:hover{
+    background-color: rgba(241, 128, 128, 0.911);
+}
+
+footer{
+    color: darkgray;
+    margin-top: auto;
+}
+
+p{
+    color: white;
+}
\ No newline at end of file
diff --git a/Calculator/cal.html b/Calculator/cal.html
index 84a65f1..f28392c 100644
--- a/Calculator/cal.html
+++ b/Calculator/cal.html
@@ -5,50 +5,57 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="cal.css">
+    <link rel="stylesheet" href="styles.css">
+    
     <title>Calculator</title>
 </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="container">
+        
+        <div class="screen">
+            <div id="operation"></div>
+            <div id="result"></div>
         </div>
+
+        <div class="button">
+            <button class="Clear" onclick="clearer()">C</button>
+            <button class="Del" onclick="adder()">Del</button>
+            <button onclick="adder('*')">*</button>
+            <button onclick="adder('/')">/</button>
+        </div>
+
+        <div class="button">
+            <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="button">
+            <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="button">
+            <button onclick="adder('1')">1</button>
+            <button onclick="adder('2')">2</button>
+            <button onclick="adder('3')">3</button>
+            <button  class="equal" onclick="compute()">=</button>
+        </div>
+
+        <div class="button">
+            <button class="cero" onclick="adder('0')">0</button>
+            <button onclick="adder('.')">.</button>
+        </div>
+
+        <footer>Made with love By Community</footer>
+
     </div>
-    <script src="cal.js"></script>
+
+<script src="cal.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Calculator/cal.js b/Calculator/cal.js
index 1699f4c..b0cd3fc 100644
--- a/Calculator/cal.js
+++ b/Calculator/cal.js
@@ -1,42 +1,25 @@
-let valEl = document.getElementById("val")
-let resEl = document.getElementById("res")
-function clearer(){
-    valEl.innerText = ""
-    resEl.innerText = ""
+let opEl = document.getElementById("operation");
+let resEl = document.getElementById("result");
+
+function clearer() {
+  opEl.innerText = "";
+  resEl.innerText = "";
 }
-function adder(k){
-    valEl.innerText += k
-    if(k=='*' || k=='+' || k=='-' || k=='/'){
-        compute(0)
-    }
+
+function adder(k) {
+  if (k === '=') {
+    compute();
+  } else {
+    opEl.innerText += k;
+  }
+}
+
+function compute() {
+  try {
+    let expression = opEl.innerText;
+    let result = eval(expression);
+    resEl.innerText = result;
+  } catch (e) {
+    resEl.innerText = "Error";
+  }
 }
-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);
-        }
-        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
diff --git a/Calculator/readme.md b/Calculator/readme.md
index cc6f286..c2b521a 100644
--- a/Calculator/readme.md
+++ b/Calculator/readme.md
@@ -5,3 +5,8 @@
 2. Buttons to add, subtract, multiply and divide
 3. Button to clear everything
 
+**NEW FUNCTIONALITIES by angelvear**
+1. more realistic appearance to a calculator
+2. screen visible at the top
+3. Rounded buttons with colour differences and hover effect
+4. We see the operation and the result on the same screen with different shades to easily differentiate them.
\ No newline at end of file
