diff --git a/calci.html b/calci.html
index ba5b43a..9b5e825 100644
--- a/calci.html
+++ b/calci.html
@@ -1,71 +1,93 @@
-<! doctype html>
+<!Doctype html>
 <html>
 <head> 
     <title> Calculator </title>
-    <link style="stylesheet.css">
+    <link href="stylesheet.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
     </head>
     <body>
-    <div class="display">
-        <h1>Calculator</h1>
-        <input type="text" readonly id="display" size="15px">
-        </div>
-        <div class="keys">
-            <input type="button" value="0" onclick="addValue('0')">
-            <input type="button" value="1" onclick="addValue('1')">
-            <input type="button" value="2" onclick="addValue('2')">
-            <input type="button" value="3" onclick="addValue('3')">
-            <br>
-            <input type="button" value="4" onclick="addValue('4')">
-            <input type="button" value="5" onclick="addValue('5')">
-            <input type="button" value="6" onclick="addValue('6')">
-            <input type="button" value="7" onclick="addValue('7')">
-            <br>
-            <input type="button" value="8" onclick="addValue('8')">
-            <input type="button" value="9" onclick="addValue('9')">
-            <input type="button" value="+" onclick="addValue('+')">
-            <input type="button" value="-" onclick="addValue('-')">
-            <br>
-            <input type="button" value="*" onclick="addValue('*')">
-            <input type="button" value="/" onclick="addValue('/')">
-            <input type="button" value="REM" onclick="addValue('%')">
-            <input type="button" value="CLR" onclick="addValue("")">
-            <input type="button" value="=" onclick="evaluation()">
-            
-            </div>
+       <div class="center">
+            <form name="forms">
+              <input type="text" id="display" name="display" disabled>
+        <div class="buttons">
+            <input type="button" id="seven" value="7">
+            <input type="button" id="eight" value="8">
+            <input type="button" id="nine" value="9">
+            <input type="button" id="divide" value="/"><br>
+            <input type="button" id="four" value="4">
+            <input type="button" id="five" value="5">
+            <input type="button" id="six" value="6">
+            <input type="button" id="multi" value="*"><br>
+            <input type="button" id="one" value="1">
+            <input type="button" id="two" value="2">
+            <input type="button" id="three" value="3">
+            <input type="button" id="subs" value="-"><br>
+            <input type="button" id="dot" value=".">
+            <input type="button" id="zero" value="0">
+            <input type="button" id="add" value="+">
+            <input type="button" id="clear" value="C"><br>
+            <input type="button" id="equal" value="=">
+          </div>
     <script>
-        function assignValue(val)
-        {
-            document.getElementById("display").value=val;
-        }
-        function addValue(val)
-        {
-            document.getElementById("display").value+=val;
-        }
-        function evaluation()
-        {
-            try
-                {
-                    assignValue(eval(document.getElementById("display").value));
-                }
-            catch(evaluation)
-                {
-                assignValue("Error");
-        }
-        }
-        
-        
-        
+       $(document).ready(function(){
+  $('#one').click(function(){
+    document.forms.display.value += 1;
+  });
+  $('#two').click(function(){
+    document.forms.display.value += 2;
+  });
+  $('#three').click(function(){
+    document.forms.display.value += 3;
+  });
+  $('#four').click(function(){
+    document.forms.display.value += 4;
+  });
+  $('#five').click(function(){
+    document.forms.display.value += 5;
+  });
+  $('#six').click(function(){
+    document.forms.display.value += 6;
+  });
+  $('#seven').click(function(){
+    document.forms.display.value += 7;
+  });
+  $('#eight').click(function(){
+    document.forms.display.value += 8;
+  });
+  $('#nine').click(function(){
+    document.forms.display.value += 9;
+  });
+  $('#zero').click(function(){
+    document.forms.display.value += 0;
+  });
+  $('#add').click(function(){
+    document.forms.display.value += '+';
+  });
+  $('#subs').click(function(){
+    document.forms.display.value += '-';
+  });
+  $('#multi').click(function(){
+    document.forms.display.value += '*';
+  });
+  $('#divide').click(function(){
+    document.forms.display.value += '/';
+  });
+  $('#dot').click(function(){
+    document.forms.display.value += '.';
+  });
+  $('#equal').click(function(){
+    if (display.value == "") {
+      alert("Please enter any numbers to calculate!");
+    }else{
+      document.forms.display.value =
+      eval(document.forms.display.value);
+    }
+  });
+  $('#clear').click(function(){
+    document.forms.display.value = "";
+  });
+})
+
         </script>
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
     </body>
 </html>
diff --git a/stylesheet.css b/stylesheet.css
index 83aa2cc..acd2657 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,108 +1,57 @@
-<style>
-body
-{
-background-color:tan;
-}
-h2
-{
-text-align:center;
-text-decoration:underline;
-}
-.box
-{
-background-color:#3d4543;
-height:300px;
-width:250px;
-border-radius:10px;
-position:relative;
-top:80px;
-left:40%;
-}
-.display
-{
-background-color:#222;
-width:220px;
-position:relative;
-left:15px;
-top:20px;
-height:40px;
-}
-.display input
-{
-position:relative;
-left:2px;
-top:2px;
-height:35px;
-color:black;
-background-color:#bccd95;
-font-size:21px;
-text-align:right;
-}
-.keys
-{
-position:relative;
-top:15px;
-}
-.button
-{
-width:40px;
-height:30px;
-border:none;
-border-radius:8px;
-margin-left:17px;
-cursor:pointer;
-border-top:2px solid transparent;
-}
-.button.gray
-{
-color:white;
-background-color:#6f6f6f;
-border-bottom:black 2px solid;
-border-top:2px #6f6f6f solid;
-}
-.button.pink
-{
-color:black;
-background-color:#ff4561;
-border-bottom:black 2px solid;
-}
-.button.black
-{
-color:white;
-background-color:303030;
-border-bottom:black 2px solid;
-border-top:2px 303030 solid;
-}
-.button.orange
-{
-color:black;
-background-color:FF9933;
-border-bottom:black 2px solid;
-border-top:2px FF9933 solid;
-}
-.gray:active
-{
-border-top:black 2px solid;
-border-bottom:2px #6f6f6f solid;
-}
-.pink:active
-{
-border-top:black 2px solid;
-border-bottom:#ff4561 2px solid;
-}
-.black:active
-{
-border-top:black 2px solid;
-border-bottom:#303030 2px solid;
-}
-.orange:active
-{
-border-top:black 2px solid;
-border-bottom:FF9933 2px solid;
-}
-p
-{
-line-height:10px;
-}
 
-</style>
+*{
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+  }
+  body{
+    font-family: montserrat;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(#bdc6c9,rgb(214, 137, 208));
+  }
+  .center{
+    /* display: none; */
+    width: 350px;
+    background: black;
+    border-radius: 20px;
+    }
+   
+  input[type="text"]{
+    height: 60px;
+    width: 300px;
+    margin-top: 40px;
+    border-radius: 1px;
+    border: 1px solid #e1e7ea;
+    color: black;
+    font-size: 22px;
+    font-weight: bold;
+    text-align: right;
+    padding-right: 20px;
+    background: linear-gradient(#d1dce0,#dfe6e9);
+  }
+  form .buttons{
+    width: 300px;
+    margin: 10px 25px 0 25px;
+    padding: 10px 0;
+  }
+  input[type="button"]{
+    width: 58px;
+    height: 55px;
+    margin: 5px;
+    font-size: 22px;
+    line-height: 55px;
+    border-radius: 3px;
+    border: 1px solid #d9d9d9;
+    background: linear-gradient(#d9d9d9, #bfbfbf);
+  }
+  input[type="button"]:hover{
+    transition: .5s;
+    background: linear-gradient(#bfbfbf, #d9d9d9);
+  }
+  
+  
\ No newline at end of file
