diff --git a/Pomodro_page/reward.css b/Pomodro_page/reward.css
index 2477e39d..e5ec22f8 100644
--- a/Pomodro_page/reward.css
+++ b/Pomodro_page/reward.css
@@ -4,13 +4,10 @@
 }
 
 body {
-  background-color: #2980b9;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: cover;
+  background-image: url();
 }
 p {
-  color: rgb(0, 0, 0);
+  color: rgb(41, 50, 93);
 }
 
 ol {
@@ -31,9 +28,13 @@ ol {
 
 .pomodoro-timer {
   display: flex;
-  margin: 2rem;
+  margin: 0.2rem;
   align-items: center;
   justify-content: center;
+  border:4px solid white;
+  padding:120px;
+  background-color:rgba(137, 195, 197, 0.34);
+  border-radius: 10px;
 } 
 
 .timer {
@@ -102,7 +103,7 @@ button {
 .start,.reset{
   border-radius: 0.2cm;
   font-size: 1.4rem;
-  background-color: #023e8a;
+  background-color: #2a69bd;
   color: white;
   padding: 10px 30px;
   font-weight: bold;
@@ -110,14 +111,14 @@ button {
 
 .start::after,
 .reset::after {
-  content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
-  background: linear-gradient(to right, #03045e, transparent);
+  background:#548fee;
   transition: width 0.3s;
+  color:#2980b9
 }
 
 .start:hover::after,
@@ -166,25 +167,37 @@ button:hover {
   border-radius: 50%;
   object-fit: cover;
 }
-
+.navbar{
+  background: linear-gradient(to right,rgb(246, 235, 220), rgb(243, 227, 252)) ;
+}
 /* footer img {
   width: 128px;
   border-radius: 50%;
 } */
 .pomodoro{
-  font-family: cursive;
+  font-family:fantasy;
   font-size: 2rem;
+  color:brown;
+}
+
+.container{
+  margin: 0.2rem;
+  background-color: #f5d480;
+  border-radius: 0.4cm;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 .pomodoro_container{
-  margin: 2rem;
-  background-color: #faedcd;
+  margin: 0.2rem;
+  background-color: #f5d480;
   border-radius: 0.4cm;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }
-
 .pomodoro_container p{
   font-size: 1.5rem;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
@@ -280,11 +293,6 @@ button:hover {
   font-size: 1.2rem;
 }
 
-.container-header{
-  margin: 100px auto 100px auto; 
-  padding: 150px;
-}
-
 /* footer .logo {
   border-radius: 50%;
 }
@@ -296,9 +304,25 @@ footer img{
   width: 7rem;
 }
  */
-
+ @media only screen and (max-width: 30000px) {
+ .container-header{
+  margin:580px auto 100px auto; 
+  padding: 150px;
+}
+ }
+ @media only screen and (max-width: 1100px) {
+  .container-header{
+    margin:50px auto 100px auto; 
+    padding: 150px;
+  }
+ }
+ 
 /* Common styles for responsiveness */
 @media only screen and (max-width: 768px) {
+  .container-header{
+    margin:10px auto 100px auto; 
+    padding: 150px;
+  }
   .container-header {
     padding: 50px;
   }
@@ -328,6 +352,7 @@ footer img{
 
 /* Styles for smaller screens */
 @media only screen and (max-width: 576px) {
+  
   .container-header {
     margin: 50px auto;
     padding: 30px;
@@ -360,6 +385,7 @@ footer img{
 
 /* Styles for extra small screens */
 @media only screen and (max-width: 360px) {
+  
   .header h1 {
     font-size: 24px;
   }
@@ -381,7 +407,11 @@ footer img{
 
 /* Styles for smaller screens */
 @media only screen and (max-width: 320px) {
-  .header h1 {
+.container-header{
+  margin:20px auto 100px auto; 
+  padding: 150px;
+}
+.header h1 {
     font-size: 20px;
   }
   .header p {
@@ -397,3 +427,17 @@ footer img{
     margin-left: 0.1rem;
   }
 }
+.pomodoro_feature{
+  background-color:rgb(229, 160, 110);
+  border-radius: 10px;
+}
+.pomodoro_feature_heading{
+  color:brown;
+  font-weight: 200;
+  font-family:fantasy;
+}
+.list-paragraph{
+  font-size: 1rem;
+  color:black;
+  font-weight: 400;
+}
diff --git a/Pomodro_page/reward.html b/Pomodro_page/reward.html
index fe77e054..986562af 100644
--- a/Pomodro_page/reward.html
+++ b/Pomodro_page/reward.html
@@ -51,29 +51,27 @@
                         </div>
               
                         <section class="mt-8 py-4 w-full flex flex-col">
-                          <div class="pomodoro_container">
-                              <h1 class="pomodoro">What is Pomodoro?</h1>
-                              <p style="margin-top: 6px;">
+                            <br><br><br>
+                            <div class="pomodoro_container">
+                                <center><h1 class="pomodoro">What is Pomodoro?</h1></center>
+                              <p style="margin-top: 6px; font-size: 20px;">
                                   The Pomodoro Technique is a time management method. The main idea behind the Pomodoro Technique is to break
                                   work into manageable intervals, allowing you to maintain focus and avoid burnout. By using the Pomodoro
                                   Technique, you can improve your productivity and manage your time more effectively. The structured intervals
                                   help you work with greater concentration while the breaks provide opportunities for rest and rejuvenation.
                               </p>
                           </div>
-                          <div class="pomodoro-timer">
-                              <button class="start">Start</button>
-                              <div class="timer" id="app">
-                                  <div class="time-left">25:00</div>
-                              </div>
-                              <button class="reset">Reset</button>
-                          </div>
+                          <br><br>
+                          <div class="pomodoro_feature">
                           <div class="inline-text">
-                              <h1><b>How to use the Pomodoro Feature</b></h1>
+                            <b><center><h1 class="pomodoro_feature_heading">How to use the Pomodoro Feature?</h1></center></b>
                           </div>
                           <script src="reward.js"></script>
                           <div class="pomodoro-text">
-                              <h4>This is an excellent feature that can help users integrate spiritual learning into their daily routine and
-                                  promote a healthier work-life balance.</h4>
+                            <br>
+                              <h3 style=" color:#ebdcdc;font-weight: 700;">This is an excellent feature that can help users integrate spiritual learning into their daily routine and
+                                  promote a healthier work-life balance.</h3>
+                                  <br>
                               <p>
                                   <ol type="1">
                                       <li>
@@ -81,7 +79,7 @@ <h4>This is an excellent feature that can help users integrate spiritual learnin
                                       </li>
                                       <li>
                                           <p class="list-paragraph">2. After 25 minutes, take a 5-minute break. An alert will be there to read a Bhagavad
-                                              Gita <a href="../shlok_page/motivation.html">shloka</a> with explanation.</p>
+                                               &nbsp;&nbsp;&nbsp;&nbsp;Gita<span class="shloka_page_directing"><a href="../shlok_page/motivation.html" style="color:black;font-size:17px;" >shloka</a></span>with explanation.</p>
                                       </li>
                                       <li>
                                           <p class="list-paragraph">3. After 4 breaks, take a 30-minute break.</p>
@@ -93,17 +91,24 @@ <h4>This is an excellent feature that can help users integrate spiritual learnin
                               </p>
                               <br>
                               <h2 class="text-center mx-auto text-20xl text-blue-500 font-semibold" >Good Luck!</h2>
+                              <br>
                           </div>
+                          </div>
+                          <br><br>
+                          <div class="pomodoro-timer">
+                            <button class="start">Start</button>
+                            <div class="timer" id="app">
+                                <div class="time-left">25:00</div>
+                            </div>
+                            <button class="reset">Reset</button>
+                        </div>
                       </section>
-                      
-              
-              
                       </div>
 
                       <div id="about" class="container container-header">
                         <div class="row">
                             <div class="col-sm-12">
-                                <div class="d-flex flex-column align-items-center bg-light p-5 rounded-lg shadow-md" style="border-radius: 35px; box-shadow: 0 2px 4px rgba(255, 255, 0, 0.5);">
+                                <div class="d-flex flex-column align-items-center bg-light p-5 rounded-lg shadow-md" style="border-radius: 35px; box-shadow: 0 2px 4px rgba(19, 19, 1, 0.5);">
                                     <a class="float-left mr-5"></a>
                                     <div class="header">
                                         <h1 class="text-3xl font-bold">Pomodoro Spiritual Break</h1>