diff --git a/assets/main.css b/assets/main.css
index 6f5e22c..1aa94cb 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -226,13 +226,14 @@ h3 {
     border-radius: 0.5em;
     position: absolute;
     z-index: 9;
-    padding: 1rem;
+    padding: 0 1rem;
     font-family: 'Times New Roman', Times, serif;
     font-weight: bold;
     display: none;
     width: 60vw;
     margin-bottom: 7rem;
-    height: 90vh;
+    margin-top: 1.6rem;
+    height: 83vh;
     color: #ff1251;
     flex-direction: column;
     justify-content: center;
@@ -241,31 +242,16 @@ h3 {
     animation-duration: 3s;
     animation-iteration-count: 1;
     transform: scale(1);
+    overflow-y: auto;
+    overflow-x: none;
 }
-
-#instructions2, #instructions3 {
-    border: 0.3em solid goldenrod;
-    background-color: #eaf9d9;
-    border-radius: 0.5em;
-    position: absolute;
-    z-index: 9;
-    padding: 1rem;
-    font-family: 'Times New Roman', Times, serif;
-    font-weight: bold;
-    display: none;
-    width: 60vw;
-    margin-bottom: 7rem;
-    height: 20vh;
-    color: #ff1251;
-    flex-direction: column;
-    justify-content: center;
-    transition: all 0.5s ease-in-out;
-    animation-name: scaleMenu;
-    animation-duration: 3s;
-    animation-iteration-count: 1;
-    transform: scale(1);
+.instruction-heading{
+    margin-top: 2.5rem;
 }
-
+#instructions ol, #instructions2 ol, #instructions3 ol{
+        margin-top: 0 ;
+        margin-bottom: 0;
+    }
 #instructions ol li, #instructions2 ol li, #instructions3 ol li {
     text-align:left;
     font-weight: 300;
@@ -614,7 +600,7 @@ img {
     align-items: center;
     justify-content: center;
     position: relative;
-    margin-top: 6rem;
+    margin-top: 4rem;
 }
 
 .time,
@@ -1198,14 +1184,14 @@ h1 {
     border-style: solid;
     animation: colorfulBorder 4s infinite linear;
     text-align: center;
-    height: 36em;
+    /* height: 36em; */
   }
   .xy{
     border-width: 5px;
     border-style: solid;
     animation: colorfulBorder 2s infinite linear;
-    margin-left: 100px;
-    margin-right: 100px;
+    margin-left: 90px;
+    margin-right: 90px;
     background-color: #fffc34;
     border-radius: 14px;
     color: black;
@@ -1249,7 +1235,54 @@ h1 {
     text-align: center;
   }
   }
-
+  /* responsive instruction box  */
+  @media screen and (max-width:1024px){
+    #instructions, #instructions2, #instructions3 {
+        width: 70vw;
+    }
+    .instruction-heading{
+        margin-top: 10rem;
+    }
+}
+  @media screen and (max-width:768px){
+    #instructions, #instructions2, #instructions3 {
+        width: 85vw;
+    }
+    .instruction-heading{
+        margin-top: 10rem;
+    }
+    .xy{
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    .game-container {
+        margin-top: 3.4rem;
+    }
+}
+@media screen and (max-width: 676px){
+    .instruction-heading{
+        margin-top: 13rem;
+    }
+}
+@media screen and (max-width: 478px){
+    #instructions, #instructions2, #instructions3 {
+        width: 85vw;
+    }
+    .instruction-heading{
+        margin-top: 13rem;
+    }
+    #instructions ol, #instructions2 ol, #instructions3 ol{
+        padding: 0 6px;
+    }
+}
+@media screen and (max-width: 400px){
+    #instructions, #instructions2, #instructions3 {
+        width: 90vw;
+    }
+    .instruction-heading{
+        margin-top: 18rem;
+    }
+}
   #gameplayTime {    
     background: rgb(249,249,202);
     background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(112, 245, 240) 100%);
diff --git a/assets/main.html b/assets/main.html
index ea49cd5..247fdaf 100644
--- a/assets/main.html
+++ b/assets/main.html
@@ -67,9 +67,9 @@ <h2>Play with your Favourite Edible🎮</h2>
         </button>
         
         <div id="instructions" class="abc">
-            <b style="font-weight:500; text-allign:center; font-size: 1.9vmax; padding-bottom: 1rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
-            <b  style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
-            <b style=" font-size: 1.3vmax; " >Here's how to play:</b><br>
+            <b style="font-weight:500; text-align:center; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
+            <b  style=" font-size: 1.4vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
+            <b style=" font-size: 1.4vmax; " >Here's how to play:</b><br>
             
             <ol type="1">
                 <li>
@@ -105,8 +105,8 @@ <h2>Play with your Favourite Edible🎮</h2>
 
     <div class="screen head">
         <div id="instructions2" class="abc">
-            <b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 0.8rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
-            <b style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
+            <b style="font-weight:500; text-align:center; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
+            <b style=" font-size: 1.3vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
             <b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>
     
             <ol type="1">
@@ -453,8 +453,8 @@ <h5>(Make sure that your image has a transparent background)</h5>
         <h3 id="time" class="time"></h3>
         <h3 id="score" class="score">Score: 0</h3>
         <div id="instructions3" class="abc">
-            <b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 1rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
-            <b style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
+            <b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
+            <b style=" font-size: 1.3vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
             <b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>
             
             <ol type="1">