diff --git a/index.html b/index.html
index 8a580ffb3..e13021e98 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,39 @@
+<!DOCTYPE html>
 <html>
     <head>
     <script src="script.js"></script>
     <link rel="stylesheet" href="style.css">
     </head>
     <body>
-        <h1>Simple Interest Calculator</h1>
-
-        Amount <input type="number"  id="principal">  <br/>
-        Rate <input type="number"  id="rate">  <br/>
-        No. of Years <input type="number"  id="years">  <br/>
-        Interest : <span id="result"></span><br>
-
-        <button onclick="compute()">Compute</button>
+      <div>
+        <div class="maindiv"
+         <br>
+         <h1> Simple Interest Calculator 
+      </h1>
+        Amount 
+        <input type="number" id="principal" 
+          </br>
+        <br> Interest Rate 
+        <class="slidecontainer">
+         <input type="range" min="1" max="20" step="0.25" 
+         value="10.25" class="slider" id="myRange">
+         <span id="demo">
+           </span>  
+         <br> No. of Years <select id="years"> <option value="1">1
+        <option value="2">2<option value="3">3<option value="4">4
+        <option value="5">5<option value="6">6<option value="7">7
+        <option value="8">8<option value="9">9<option value="10">10
+        </option>
+        <br>
+        </select> <br/>
+        <button onclick="compute()">Compute Interest</button>
+        <span id="result">
+        </span> <br/>
+        <p id="log"></p>
+      
+        <footer>
+        &#169; This Calculator belongs to Agape
+          </footer>
+      </div>
     </body>
 </html>
