diff --git a/check.js b/check.js
index 6ce2dc6..761480a 100644
--- a/check.js
+++ b/check.js
@@ -33,3 +33,4 @@ function check(){
     }
 }
 setTimeout( function ( ) { alert( "Time is up!!!" ); location.reload();}, 300000 ) //added a timer to reset the gane after 5 mins
+
diff --git a/countdown.js b/countdown.js
new file mode 100644
index 0000000..35f4865
--- /dev/null
+++ b/countdown.js
@@ -0,0 +1,53 @@
+function diff_easy(num)
+{   startTimer();
+   if(num==1){
+    document.getElementById('timer').innerHTML =
+  07 + ":" + 00;}
+  else{
+  reset();}
+   }
+
+function diff_med(num)
+{   startTimer();
+   if(num==2){
+    document.getElementById('timer').innerHTML =
+  05 + ":" + 00;}
+  else{
+  reset();}
+   }
+
+function diff_hard(num)
+   {   startTimer();
+      if(num==3){
+       document.getElementById('timer').innerHTML =
+     03 + ":" + 00;}
+     else{
+     reset();}
+      }
+
+function reset(){
+      window.location.reload();
+}
+
+function startTimer() {
+  var presentTime = document.getElementById('timer').innerHTML;
+  var timeArray = presentTime.split(/[:]+/);
+  var m = timeArray[0];
+  var s = checkSecond((timeArray[1] - 1));
+  if(s==59){m=m-1}
+  if(m<0){
+    return
+  }
+  
+  document.getElementById('timer').innerHTML =
+    m + ":" + s;
+  console.log(m)
+  setTimeout(startTimer, 1000);
+  
+}
+
+function checkSecond(sec) {
+  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
+  if (sec < 0) {sec = "59"};
+  return sec;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index bdc89ee..a1ec572 100644
--- a/index.html
+++ b/index.html
@@ -21,16 +21,28 @@
     <script src="wordle.js"></script>
     <script src="Falling_words.js"></script>
     <script src="check.js"></script>
+    <link href="styles.css" rel="stylesheet">
+    
+    
         <div style="width:100vw;">
+           
+
             <div style="display: flex;justify-content: center;">
                 <h1 style="font-family: monospace;font-size: 64px;">Wordle Clone</h1>
             </div>
+            <div id="timertext">Time left = <span id="timer"></span></div>
+            <BR>
             <div id="dif">  
                 <div id="dif_title"></div>
-                <div id="0" class="dif_but" onclick="difficultyHandle(event)">Easy</div>
-                <div id="1" class="dif_but" onclick="difficultyHandle(event)">Medium</div>
-                <div id="2" class="dif_but" onclick="difficultyHandle(event)">Hard</div>
+                
+                <div id="0" class="dif_but"  onclick="diff_easy(1)">Easy</div>
+                <div id="1" class="dif_but" onclick="diff_med(2)">Medium</div>
+                <div id="2" class="dif_but" onclick="diff_hard(3)">Hard</div>
+                <div id="3" class="dif_but" onclick="reset()">Reset</div>
+
             </div>
+            <center>
+            <P style="font-family: monospace; font-size:15px">Choose "RESET" if you want to change the difficulty timer</P> </center>
             <div id="wordle_canvas" style="display: flex;justify-content: center;"></div>
             <div style="display: flex;justify-content: center;">
                 <h2 style="font-family: monospace;font-size: 32px;">Rules</h2></div>
@@ -42,5 +54,6 @@ <h2 style="font-family: monospace;font-size: 32px;">Rules</h2></div>
                 </ul>
             </div>
         </div>
+        <script src="countdown.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d24ab91
--- /dev/null
+++ b/style.css
@@ -0,0 +1,26 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
+
+button:focus,
+input:focus{
+  outline: none;
+  box-shadow: none;
+}
+a,
+a:hover{
+  text-decoration: none;
+}
+
+body{
+  font-family: 'Roboto', sans-serif;
+}
+
+/*------------------  */
+.otp-countdown{
+  display: inline-block;
+  margin: 0 auto;
+  padding: 8px 30px;
+  background-color: #333;
+  border-radius: 50px;
+  color: #fff;
+  
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..aa6be16
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,8 @@
+#timertext{
+    font-size: 35px;
+    text-align: center;
+}
+
+#virtual-keyboard{
+    align-items: center;
+}
\ No newline at end of file