diff --git a/Calculator/index.html b/Calculator/index.html
deleted file mode 100644
index 41bc2af7..00000000
--- a/Calculator/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <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="src/style.css" />
-    <title>Calculator</title>
-</head>
-
-<body>
-    <div class="container">
-        <div class="calculator">
-            <input type="text" id="inputBox" placeholder="0" />
-            <div>
-                <button class="button operator">AC</button>
-                <button class="button operator">DEL</button>
-                <button class="button operator">%</button>
-                <button class="button operator">/</button>
-            </div>
-            <div>
-                <button class="button">7</button>
-                <button class="button">8</button>
-                <button class="button">9</button>
-                <button class="button operator">*</button>
-            </div>
-            <div>
-                <button class="button">4</button>
-                <button class="button">5</button>
-                <button class="button">6</button>
-                <button class="button operator">-</button>
-            </div>
-            <div>
-                <button class="button">1</button>
-                <button class="button">2</button>
-                <button class="button">3</button>
-                <button class="button operator">+</button>
-            </div>
-
-            <div>
-                <button class="button">00</button>
-                <button class="button">0</button>
-                <button class="button">.</button>
-                <button class="button equalBtn">=</button>
-            </div>
-        </div>
-    </div>
-
-    <script src="scripts/script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/Calculator/scripts/script.js b/Calculator/scripts/script.js
deleted file mode 100644
index 305772de..00000000
--- a/Calculator/scripts/script.js
+++ /dev/null
@@ -1,27 +0,0 @@
-let input = document.getElementById('inputBox');
-let buttons = document.querySelectorAll('button');
-
-let string = "";
-let arr = Array.from(buttons);
-arr.forEach(button => {
-    button.addEventListener('click', (e) => {
-        if (e.target.innerHTML == '=') {
-            string = eval(string);
-            input.value = string;
-        }
-
-        else if (e.target.innerHTML == 'AC') {
-            string = "";
-            input.value = string;
-        }
-        else if (e.target.innerHTML == 'DEL') {
-            string = string.substring(0, string.length - 1);
-            input.value = string;
-        }
-        else {
-            string += e.target.innerHTML;
-            input.value = string;
-        }
-
-    })
-});
\ No newline at end of file
diff --git a/Calculator/src/calci.css b/Calculator/src/calci.css
new file mode 100644
index 00000000..7b2a00bb
--- /dev/null
+++ b/Calculator/src/calci.css
@@ -0,0 +1,68 @@
+body{
+    background-color: aliceblue;
+}
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    background-color: #ecf0f3;
+    font-family: sans-serif;
+    outline:none;
+}
+.container{
+    height:100vh;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+.calci{
+    padding:15px;
+    border-radius:30px;
+    display:grid;
+    grid-template-columns: repeat(4,68px);
+    box-shadow: inset 5px 5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+}
+input{
+    grid-column:span 4 ;
+    height:60px;
+    width:250px;
+    background-color: #ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+    border:none;
+    border-radius:30px;
+    font-size: 50px;
+    text-align: end;
+    margin:auto;
+    margin-top:40px;
+    margin-bottom:30px;
+    padding:20px;
+    color:rgba(70,70,70);
+
+}
+input:hover{
+    background-color: aqua;
+}
+button{
+    height:48px;
+    width:48px;
+    background-color: #ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+    border:none;
+    border-radius:30px;
+    margin:8px;
+    font-size: 15px;
+}
+.equal{
+    width:115px;
+    border-radius: 40px;
+    background-color:#ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+}
+button:hover{
+    background-color:aqua;
+}
+ 
\ No newline at end of file
diff --git a/Calculator/src/index.html b/Calculator/src/index.html
new file mode 100644
index 00000000..bb769e6a
--- /dev/null
+++ b/Calculator/src/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="calci.css">
+</head>
+<body>
+    <div class="container">
+        <div class="calci">
+            <input type="text" placeholder="0" id="output">
+            <button onclick="Clear()">C</button>
+            <button onclick="del()">DEL</button>
+            <button onclick="display('%')">%</button>
+            <button onclick="display('/')">/</button>
+            <button onclick="display('7')">7</button>
+            <button onclick="display('8')">8</button>
+            <button onclick="display('9')">9</button>
+            <button onclick="display('+')">+</button>
+            <button onclick="display('4')">4</button>
+            <button onclick="display('5')">5</button>
+            <button onclick="display('6')">6</button>
+            <button onclick="display('-')">-</button>
+            <button onclick="display('1')">1</button>
+            <button onclick="display('2')">2</button>
+            <button onclick="display('3')">3</button>
+            <button onclick="display('*')">*</button>
+            <button onclick="display('0')">0</button>
+            <button onclick="display('00')">00</button>
+            <button onclick="caliculate('=')" class="equal">=</button>
+
+        </div>
+    </div>
+    <script>
+        let output=document.getElementById('output');
+        function display(num){
+            output.value+=num;
+        }
+        function caliculate(){
+            try{
+                output.value=eval(output.value);
+            }
+            catch(err){
+                alert('Invalid');
+            }
+        }
+        function Clear(){
+            output.value="";
+        }
+        function del(){
+            output.value=output.value.slice(0,-1);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Calculator/src/style.css b/Calculator/src/style.css
deleted file mode 100644
index d608264c..00000000
--- a/Calculator/src/style.css
+++ /dev/null
@@ -1,74 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
-body {
-    background: linear-gradient(45deg, #0a0a0a, #3a4452);
-    user-select: none;
-    width: 100%;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.calculator {
-    border: 1px solid #717377;
-    padding: 5px;
-    border-radius: 16px;
-    background: transparent;
-    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
-}
-
-input {
-    width: 320px;
-    border: none;
-    padding: 24px;
-    margin: 10px;
-    background: transparent;
-    box-shadow: 0px 3px 15px rgba(21, 20, 20, 0.463);
-    border-radius: 16px;
-    font-size: 40px;
-    text-align: right;
-    cursor: pointer;
-    color: #ffffff;
-}
-input:hover{
-    background-color:skyblue;
-}
-
-input::placeholder {
-    color: #ffffff;
-}
-
-button {
-    border: none;
-    width: 60px;
-    height: 60px;
-    margin: 10px;
-    border-radius: 50%;
-    background: transparent;
-    color: #ffffff;
-    font-size: 20px;
-    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-}
-button:hover{
-    background-color: aqua;
-}
-
-.equalBtn {
-    background-color: #fb7c14;
-}
-
-.operator {
-    color: #6dee0a;
-}
-.operator:hover{
-    background-color: yellow;
-}
\ No newline at end of file
