diff --git a/index.css b/index.css
new file mode 100644
index 0000000..de27937
--- /dev/null
+++ b/index.css
@@ -0,0 +1,43 @@
+.Title {
+    margin-bottom: 10px;
+    text-align: center;
+    width: 210px;
+    color: rgb(238, 20, 20);
+    border: solid black 2px;
+}
+
+input[type="button"] {
+    background-color: green;
+    color: rgba(245, 241, 23, 0.966);
+    border: solid black 2px;
+    width: 100%
+}
+
+input[type="text"] {
+    background-color: white;
+    border: solid black 2px;
+    width: 100%
+}
+
+.m_body {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-image: url("calc.jpeg");
+    background-position: center;
+    background-repeat: no-repeat;
+
+}
+
+input:hover {
+    background-color: white;
+    color: black;
+}
+
+table {
+    height: 30%;
+    border-radius: 10px;
+    border: 5px solid black;
+}
diff --git a/index.html b/index.html
index d8e3b39..38aaccb 100644
--- a/index.html
+++ b/index.html
@@ -1,81 +1,9 @@
 <html>
 
 <head>
-    <script>
-        function display(val) {
-            document.getElementById("result").value += val;
-        }
-        function calcculate() {
-            var str = document.getElementById("result").value;
-            var ans = eval(str);
-            document.getElementById("result").value = ans;
-        }
-        function clear_screen() {
-            document.getElementById("result").value = "";
-        }
-    </script>
-
-    <!---style starts here..........-->
-    <style>
-        body{
-            font-size: 2rem;
-        }
-        td{
-            height: 2rem;
-            width: 2rem;
-        }
-        td > input{
-            
-            padding: 50px;
-        }
-        .Title {
-            margin-bottom: 10px;
-            text-align: center;
-            width: 30vw;
-            color: rgb(238, 20, 20);
-            border: solid black 2px;
-        }
-
-        input[type="button"] {
-            background-color: green;
-            color: rgba(245, 241, 23, 0.966);
-            border: solid black 2px;
-            width: 100%
-        }
-
-        input[type="text"] {
-            background-color: white;
-            border: solid black 2px;
-            width: 100%
-        }
-
-        .m_body {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background-position: center;
-            background-repeat: no-repeat;
-
-        }
-
-        input:hover {
-            background-color: white;
-            color: black;
-        }
-
-        table {
-            /* height: 70%;
-            width: 70%; */
-            border-radius: 10px;
-            border: 5px solid black;
-        }
-        #result{
-            font-size: 2rem;
-        }
-    </style>
 
+    <script src="index.js"></script>
+    <link rel="stylesheet" href="index.css" type="text/css">
 
 </head>
 
@@ -116,5 +44,4 @@
         </table>
     </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..3a3fe47
--- /dev/null
+++ b/index.js
@@ -0,0 +1,11 @@
+function display(val) {
+    document.getElementById("result").value += val;
+}
+function calcculate() {
+    var str = document.getElementById("result").value;
+    var ans = eval(str);
+    document.getElementById("result").value = ans;
+}
+function clear_screen() {
+    document.getElementById("result").value = "";
+}
