diff --git a/AR_Meditate/meditation.js b/AR_Meditate/meditation.js
index 6e33d955..a17b4394 100644
--- a/AR_Meditate/meditation.js
+++ b/AR_Meditate/meditation.js
@@ -1,92 +1,105 @@
-const audioContainer=document.querySelector(".audio-container");
+document.addEventListener("DOMContentLoaded", function() {
+  const audioContainer = document.querySelector(".audio-container");
 
-const audios=[
-  {
-    title: "Deep meditation Music",
-    path:"../Images/deep-music.mp3",
-    thumbnail:"./Images/Deep_meditation.jpg"
-  },
-  {
-    title: "Krishna Flute meditation music",
-    path:"../Images/krishna.mp3",
-    thumbnail:"./Images/Krishna.jpg"
-  },
-  {
-    title: "River meditation music",
-    path:"../Images/river-music.mp3",
-    thumbnail:"./Images/River.jpg"
-  },
-  {
-    title: "Piano meditation music",
-    path:"../Images/piano-music.mp3",
-    thumbnail:"./Images/Piano.jpg"
-  },
-  {
-    title: "Himalayas meditation music",
-    path:"../Images/himalaya-music.mp3",
-    thumbnail:"./Images/Himalayas.jpg"
-  }
-]
+  const audios = [
+    {
+      title: "Deep meditation Music",
+      path: "../Images/deep-music.mp3",
+      thumbnail: "./Images/Deep_meditation.jpg"
+    },
+    {
+      title: "Krishna Flute meditation music",
+      path: "../Images/krishna.mp3",
+      thumbnail: "./Images/Krishna.jpg"
+    },
+    {
+      title: "River meditation music",
+      path: "../Images/river-music.mp3",
+      thumbnail: "./Images/River.jpg"
+    },
+    {
+      title: "Piano meditation music",
+      path: "../Images/piano-music.mp3",
+      thumbnail: "./Images/Piano.jpg"
+    },
+    {
+      title: "Himalayas meditation music",
+      path: "../Images/himalaya-music.mp3",
+      thumbnail: "./Images/Himalayas.jpg"
+    }
+  ];
 
+  const audioToInsert = audios.map((item, index) => {
+    return `<div class="col-12 p-0 col-sm-12 col-lg-5 mx-auto glassmorphism">
+      <div id="player" class="d-flex align-items-center rounded-4 justify-content-between p-3 text-uppercase text-white fw-medium">
+        <img src="${item.thumbnail}" alt="" height="80px" style="border-radius: 16px; height:80px;" />
+        <p id="music" class="m-0">${item.title}</p>
+        <button class="icons bg-transparent border-0 text-danger-emphasis fs-2 play-pause-btn" data-id="${index}">
+          <i class="bi bi-play-circle-fill" data-id="${index}"></i>
+        </button>
+      </div>
+    </div>`;
+  }).join("");
+  audioContainer.innerHTML = audioToInsert;
 
-const audioToInsert = audios.map((item,index)=>{
-  return `<div class="col-12 p-0 col-sm-12 col-lg-5 mx-auto glassmorphism">
-  <div
-       id="player"
-       class="d-flex align-items-center rounded-4 justify-content-between p-3 text-uppercase text-white fw-medium">
-    <img
-         src="${item.thumbnail}"
-         alt=""
-         height="80px"
-         style="border-radius: 16px; height:80px;" />
-    <p id="music" class="m-0">${item.title}</p>
-    <button class="icons bg-transparent border-0 text-danger-emphasis fs-2 play-pause-btn" data-id="${index}">
-      <i class="bi bi-play-circle-fill" data-id="${index}"></i>
-    </button>
-  </div>
-</div>`
-}).join("");
-audioContainer.innerHTML=audioToInsert;
+  let currentAudio = {
+    isPlaying: false,
+    audioId: "",
+    audioPath: ""
+  };
 
-let currentAudio={
-  isPlaying:false,
-  audioId:"",
-  audioPath:""
-};
-const playPauseBtns=document.querySelectorAll(".play-pause-btn");
-playPauseBtns.forEach(playPauseBtn=>{
-  playPauseBtn.addEventListener("click",(e)=>{
-    if(currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id){ // pause btn pressed
-      playPauseBtns.forEach((btn,index)=>{
-        btn.innerHTML=`<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
-      });
-      currentAudio.audio.pause();
-      currentAudio={
-        isPlaying:false,
-        audioId:"",
-        audioPath:""
-      };
-      console.log("Hi..");
-      return;
-    }
-    else if(currentAudio.isPlaying){ // new audio needs to be played, pause the current audio
-      playPauseBtns.forEach((btn,index)=>{
-        btn.innerHTML=`<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
-      });
-      currentAudio.audio.pause();
-      currentAudio={
-        isPlaying:false,
-        audioId:"",
-        audioPath:""
-      };
-    }
-    // play the audio
-    playPauseBtn.innerHTML='<i class="bi bi-pause-circle-fill"></i>';
-    currentAudio.audioId = playPauseBtn.dataset.id;
-    currentAudio.isPlaying=true;
-    currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path);
-    currentAudio.audio.play();
+  const playPauseBtns = document.querySelectorAll(".play-pause-btn");
+  playPauseBtns.forEach(playPauseBtn => {
+    playPauseBtn.addEventListener("click", (e) => {
+      if (currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id) {
+        playPauseBtns.forEach((btn, index) => {
+          btn.innerHTML = `<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
+        });
+        currentAudio.audio.pause();
+        currentAudio = {
+          isPlaying: false,
+          audioId: "",
+          audioPath: ""
+        };
+        return;
+      } else if (currentAudio.isPlaying) {
+        playPauseBtns.forEach((btn, index) => {
+          btn.innerHTML = `<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
+        });
+        currentAudio.audio.pause();
+        currentAudio = {
+          isPlaying: false,
+          audioId: "",
+          audioPath: ""
+        };
+      }
+
+      playPauseBtn.innerHTML = '<i class="bi bi-pause-circle-fill"></i>';
+      currentAudio.audioId = playPauseBtn.dataset.id;
+      currentAudio.isPlaying = true;
+      currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path);
+      currentAudio.audio.play();
+    });
+  });
 
+  // Scroll to top functionality
+  const scbtn = document.querySelector("#bttbutton");
+  const contentWrapper = document.querySelector(".contentWrapper");
 
+  function scrollUp() {
+    if (contentWrapper.scrollTop > 100) {
+      scbtn.style.display = "block";
+    } else {
+      scbtn.style.display = "none";
+    }
+  }
+
+  scbtn.addEventListener("click", () => {
+    contentWrapper.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
   });
-})
+
+  contentWrapper.addEventListener("scroll", scrollUp);
+});
diff --git a/Pomodro_page/reward.css b/Pomodro_page/reward.css
index 1f63949c..2477e39d 100644
--- a/Pomodro_page/reward.css
+++ b/Pomodro_page/reward.css
@@ -297,3 +297,103 @@ footer img{
 }
  */
 
+/* Common styles for responsiveness */
+@media only screen and (max-width: 768px) {
+  .container-header {
+    padding: 50px;
+  }
+  .header {
+    padding: 30px;
+  }
+  .content {
+    margin: 30px;
+    font-size: 18px;
+  }
+  .content img {
+    margin-right: 10px;
+  }
+  .pomodoro_container p {
+    font-size: 1.2rem;
+  }
+  .inline-text {
+    margin-top: 1rem;
+    margin-left: 1rem;
+    font-size: 1.5rem;
+  }
+  .pomodoro-text {
+    margin-top: 0.5rem;
+    margin-left: 1rem;
+  }
+}
+
+/* Styles for smaller screens */
+@media only screen and (max-width: 576px) {
+  .container-header {
+    margin: 50px auto;
+    padding: 30px;
+  }
+  .header h1 {
+    font-size: 30px;
+  }
+  .header p {
+    font-size: 18px;
+  }
+  .content {
+    margin: 20px;
+    font-size: 16px;
+  }
+  .content img {
+    width: 100%;
+    margin-right: 0;
+  }
+  .pomodoro_container p {
+    font-size: 1rem;
+  }
+  .inline-text {
+    font-size: 1.2rem;
+    margin-left: 0.5rem;
+  }
+  .pomodoro-text {
+    margin-left: 0.5rem;
+  }
+}
+
+/* Styles for extra small screens */
+@media only screen and (max-width: 360px) {
+  .header h1 {
+    font-size: 24px;
+  }
+  .header p {
+    font-size: 16px;
+  }
+  .content {
+    margin: 10px;
+    font-size: 14px;
+  }
+  .inline-text {
+    font-size: 1rem;
+    margin-left: 0.2rem;
+  }
+  .pomodoro-text {
+    margin-left: 0.2rem;
+  }
+}
+
+/* Styles for smaller screens */
+@media only screen and (max-width: 320px) {
+  .header h1 {
+    font-size: 20px;
+  }
+  .header p {
+    font-size: 14px;
+  }
+  .content {
+    font-size: 12px;
+  }
+  .inline-text {
+    font-size: 0.8rem;
+  }
+  .pomodoro-text {
+    margin-left: 0.1rem;
+  }
+}