diff --git a/Grade_Calc/Grade Calc.html b/Grade_Calc/Grade Calc.html
new file mode 100644
index 00000000..204dee8b
--- /dev/null
+++ b/Grade_Calc/Grade Calc.html	
@@ -0,0 +1,74 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="design.css">
+</head>
+<body>
+    <button class="refresh" onclick="window.location.reload()">Check Another Result </button>
+    <section class="box">
+
+       <div class="vl"></div>
+       <div class="wrapper">
+        <input class="input" type="text" placeholder="PHYSICS" id="phy">
+        <hr>
+        <input class="input" type="text" placeholder="CHEMISTRY" id="che">
+        <hr>
+        <input class="input" type="text" placeholder="MATHS" id="maths">
+        <hr>
+        <input class="input" type="text" placeholder="BIOLOGY" id="bio">
+        <hr>
+       <input type="button" name="" value="showPercentage" class="app-form-button" onclick="calcy()">
+      
+    </div>
+        <div class="header">STUDENT <br> GRADE <br> CALC</div>
+        <div class="show">
+            <p id="showData"></p>
+        </div>
+   
+    </section>
+    <script>
+   const calcy = () =>{
+       let phy = document.getElementById('phy').value ;
+       let maths = document.getElementById('che').value ;
+       let che = document.getElementById('maths').value ;
+       let bio = document.getElementById('bio').value ;
+       let grades="";
+       
+
+     let totalGrades = parseFloat(phy) + parseFloat(maths) + parseFloat(che) + parseFloat(bio);
+   // alert(totalGrades);  
+   
+     let perc = (totalGrades/400) * 100 ;
+     //alert(perc);
+
+     if(perc <= 100 && perc >= 80){
+        grades='A' ;
+     }else if(perc <= 79 && perc >= 60){
+      grades='B';
+     }else if(perc <= 59 && perc >= 40){
+      grades='C';
+     }else if (perc>100){
+         grades='Invalid'
+     }
+     else {
+      grades='F';
+     }
+    if (perc >=40){
+        document.getElementById('showData').innerHTML= `Out of 400 your Total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are PASS `
+    }else{
+        document.getElementById('showData').innerHTML= `Out of 400 your Total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. Better Luck Next Time.  `
+    } if(perc>100){
+        document.getElementById('showData').innerHTML= `Please Enter Valid Data`
+    }
+     
+   
+  }
+
+    </script>
+    <p class="saka">Developed_@sakaX</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/Grade_Calc/design.css b/Grade_Calc/design.css
new file mode 100644
index 00000000..35e41588
--- /dev/null
+++ b/Grade_Calc/design.css
@@ -0,0 +1,92 @@
+body{
+    background-color: rgba(0, 255, 255, 0.863);
+}
+.box{
+    background-color: rgba(0, 0, 0, 0.658);
+    width: 670px;
+    height: 380px;
+    border-radius: 12px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.521);
+    
+    
+    margin-left: 340px;
+    margin-top: 120px;
+    align-items: center;
+}
+.header{
+    
+    color: rgba(0, 255, 255, 0.863);
+    font-weight: 700;
+    font: bolder;
+    font-size: 1.5em;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 95px;
+
+            animation-name: sample;
+            animation-duration: 1s;
+            animation-iteration-count: infinite;
+            animation-direction: alternate;
+    
+}
+ @keyframes sample {
+    from{font-size: 1.5em; color: aqua;}
+    to{font-size: 1.5em; color: rgba(0, 255, 255, 0.658);}
+
+}
+
+ .vl{
+    position: absolute;
+    margin: 90px 80px;
+    
+    border-left: 2px  solid rgba(0, 255, 255, 0.863);
+    height: 110px;
+}
+.wrapper{
+    position: absolute;
+    margin: 65px 380px;
+    
+}
+input{
+    background-color:rgba(0, 0, 0, 0.00);
+    border: none;
+    font-size: 1.2em;
+    color: white;
+    font-weight: 700;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+::placeholder{
+    color: white;
+}
+.app-form-button{
+    color: rgba(0, 255, 255, 0.671);
+    font: bolder;
+    cursor: pointer;
+    font-size: 1.1em;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-transform: uppercase;
+    
+}
+hr{
+   
+    border: 0.3px solid  rgba(0, 255, 255, 0.116);
+}
+#showData{
+    color: white;
+    font-weight: 600;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+     margin-left: 85px;
+    
+}
+.saka{
+    color: teal;
+    margin-top: 95px;
+}
+.refresh{
+    background-color: teal;
+    border: none;
+    color: rgba(0, 255, 255, 0.76);
+    font-size: 1.2em;
+  border-radius: 5px;
+  padding: 2px;
+  cursor: pointer ;
+}
\ No newline at end of file
