diff --git a/index.html b/index.html
index 05397d1..90cc308 100644
--- a/index.html
+++ b/index.html
@@ -1,50 +1,47 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>repl.it</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <title>repl.it</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet">
-  <link href="style.css" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
-  <div id="loading" class="loading">
-    <img src="assets/jumanjiLogo.png" alt="logo" class="logo-load">
-    <p class="progress-load-num">0 %</p>
-    <div class="progress-bar">
-      <div class="progress-fill"></div>
-    </div>
-  </div>
-  <div id="content" class="content hidden">
-    <div class="start-page">
-      <div class="bab1">
+  <body>
+    <div id="loading" class="loading">
+      <img src="assets/jumanjiLogo.png" alt="logo" class="logo-load" />
+      <p class="progress-load-num">0 %</p>
+      <div class="progress-bar">
+        <div class="progress-fill"></div>
       </div>
-      <div class="bab2">
-        <div class="action-container">
-          <button class="start-btn" onclick="startBtn()">Start</button>
-          <div class="sound-btn" onclick="soundBtn()">
-            <div class="checkbox">
-              <img src="assets/icons8-checkmark-96.svg" alt="check icon">
+    </div>
+    <div id="content" class="content hidden">
+      <div class="start-page">
+        <div class="bab1"></div>
+        <div class="bab2">
+          <div class="action-container">
+            <button class="start-btn" onclick="startBtn()">Start</button>
+            <div class="sound-btn" onclick="soundBtn()">
+              <div class="checkbox">
+                <img src="assets/icons8-checkmark-96.svg" alt="check icon" />
+              </div>
+              <span>Sound</span>
             </div>
-            <span>Sound</span>
           </div>
         </div>
-
       </div>
+      <audio id="sound"><source src="sound/jumanji.mp3" /></audio>
+      <div class="madLibsEdit"></div>
+      <div class="madLibsPreview"></div>
     </div>
-    <div class='madLibsEdit'>
-    </div>
-    <div class='madLibsPreview'>
-    </div>
-  </div>
-  <script src="do-not-touch.js"></script>
-  <script src="madlibs.js"></script>
-</body>
 
-</html>
\ No newline at end of file
+    <script src="do-not-touch.js"></script>
+    <script src="madlibs.js"></script>
+  </body>
+</html>
diff --git a/madlibs.js b/madlibs.js
index 257589c..3c63ffa 100644
--- a/madlibs.js
+++ b/madlibs.js
@@ -26,6 +26,7 @@
  * There are multiple ways to do this, but you may want to use regular expressions.
  * Please go through this lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/
  */
+document.body.style.overflow = "hidden";
 
 const progressFill = document.querySelector(".progress-fill"),
   progressLoadNum = document.querySelector(".progress-load-num");
@@ -73,7 +74,7 @@ function parseStory(rawStory) {
   rawStory = rawStory.replace(/\,/g, " ,");
   let arrWord = rawStory.split(" ");
   let storyToObj = [];
-  arrWord.forEach(item => {
+  arrWord.forEach((item) => {
     if (item.match(/[[a-zA-Z]]/g)) {
       let key = item.split("[");
       switch (key[1]) {
@@ -113,10 +114,43 @@ function parseStory(rawStory) {
  * You'll want to use the results of parseStory() to display the story on the page.
  *
  */
+const body = document.querySelector("body");
+const container = document.createElement("div");
+const edit = document.querySelector(".madLibsEdit"); // Using querySelector to select a specific element
+const pre = document.querySelector(".madLibsPreview"); // Using querySelector to select a specific element
+const playMusic = document.createElement("button");
+const resetBtn = document.createElement("button");
+const soundCheckBtn = document.querySelector(".sound-btn");
+const sound = document.getElementById("sound");
+soundCheckBtn.addEventListener("click", () => {
+  if (sound.paused) {
+    sound.play();
+    playMusic.textContent = "Pause";
+  } else {
+    sound.pause();
+  }
+});
+body.append(container);
+playMusic.textContent = "Play";
+resetBtn.textContent = "Reset";
+
+playMusic.addEventListener("click", () => {
+  if (sound.paused) {
+    sound.play();
+    playMusic.textContent = "Pause";
+  } else {
+    sound.pause();
+    playMusic.textContent = "Play";
+  }
+});
+
+container.setAttribute("class", "container");
+container.appendChild(edit);
+container.appendChild(pre);
 
 function madlibsEdit(processedStory) {
-  const edit = document.querySelector(".madLibsEdit"); // Using querySelector to select a specific element
-  const pre = document.querySelector(".madLibsPreview"); // Using querySelector to select a specific element
+  const editPara = document.createElement("p");
+  const previewPara = document.createElement("p");
   const newArr = [];
   for (const item of processedStory) {
     if (item.pos) {
@@ -124,13 +158,22 @@ function madlibsEdit(processedStory) {
       const span = document.createElement("span");
 
       span.setAttribute("class", "opacity");
-      edit.appendChild(input);
-      pre.appendChild(span);
+      editPara.appendChild(input);
+      previewPara.appendChild(span);
 
       input.setAttribute("placeholder", item.pos);
       input.setAttribute("maxlength", "20");
       span.innerHTML = ` ${item.pos}`;
 
+      input.addEventListener("input", (e) => {
+        if (e.target.value === "") {
+          span.innerHTML = ` ${item.pos}`;
+          span.classList.remove("noopacity");
+        } else {
+          span.innerHTML = ` ${e.target.value}`;
+          span.classList.add("noopacity");
+        }
+      });
       input.addEventListener("focus", function () {
         input.style.backgroundColor = "green";
       });
@@ -139,22 +182,18 @@ function madlibsEdit(processedStory) {
         input.style.backgroundColor = "";
       });
 
-      input.addEventListener("input", e => {
-        if (e.target.value === '') {
-          span.innerHTML = ` ${item.pos}`;
-          span.classList.remove("noopacity");
-        } else {
-          span.innerHTML = ` ${e.target.value}`;
-          span.classList.add("noopacity");
-        }
+      resetBtn.addEventListener("click", () => {
+        input.value = "";
+        input.setAttribute("placeholder", item.pos);
+        span.textContent = item.pos;
       });
       newArr.push(input);
     } else {
-      edit.append(` ${item.word} `);
-      pre.append(` ${item.word} `);
+      editPara.append(` ${item.word} `);
+      previewPara.append(` ${item.word} `);
     }
     newArr.forEach((input, i) => {
-      input.addEventListener("keypress", e => {
+      input.addEventListener("keypress", (e) => {
         if (e.key === "Enter") {
           if (i < newArr.length - 1) {
             newArr[i + 1].focus();
@@ -163,11 +202,14 @@ function madlibsEdit(processedStory) {
       });
     });
   }
+  body.appendChild(playMusic);
+  body.appendChild(resetBtn);
+  edit.append(editPara);
+  pre.append(previewPara);
 }
 
-
 getRawStory()
   .then(parseStory)
-  .then(processedStory => {
+  .then((processedStory) => {
     madlibsEdit(processedStory);
   });
diff --git a/sound/24655.mp3:Zone.Identifier b/sound/24655.mp3:Zone.Identifier
new file mode 100644
index 0000000..cc03f0f
--- /dev/null
+++ b/sound/24655.mp3:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://voicebot.su/en/sound/the-sound-of-the-drum-from-the-movie-jumanji-listen-and-download/
+HostUrl=https://voicebot.su/uploads/sounds/25/24655/24655.mp3
diff --git a/sound/jumanji.mp3 b/sound/jumanji.mp3
new file mode 100644
index 0000000..edfc625
Binary files /dev/null and b/sound/jumanji.mp3 differ
diff --git a/style.css b/style.css
index 5a270e2..a0b686d 100644
--- a/style.css
+++ b/style.css
@@ -1,208 +1,219 @@
 /**
  * Your CSS goes here.
  */
+
 body {
-    font-family: 'Merienda', cursive;
-    margin: 0;
-    padding: 0;
+  font-family: "Merienda", cursive;
+  margin: 0;
+  padding: 0;
 }
 
 button {
-    font-family: 'Merienda', cursive;
+  font-family: "Merienda", cursive;
 }
 
 .madLibsEdit {
-    margin-bottom: 80px;
+  margin-bottom: 80px;
 }
 
-
-
 .loading-message {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
 }
 
 .content {
-    opacity: 0;
-    transition: opacity 0.5s ease-in-out;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 .loading {
-    width: 100%;
-    height: 100vh;
-    background-image: url("assets/img.png");
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 0% 80%;
-    display: flex;
+  width: 100%;
+  height: 100vh;
+  background-image: url("assets/img.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 0% 80%;
+  display: flex;
 }
 
 .logo-load {
-    width: 500px;
-    height: fit-content;
-    margin: 4rem auto;
+  width: 500px;
+  height: fit-content;
+  margin: 4rem auto;
 }
 
 .progress-load-num {
-    font-size: 70px;
-    color: white;
-    position: absolute;
-    left: 50%;
-    top: 38%;
-    transform: translate(-50%, -50%);
-    font-weight: 300;
+  font-size: 70px;
+  color: white;
+  position: absolute;
+  left: 50%;
+  top: 38%;
+  transform: translate(-50%, -50%);
+  font-weight: 300;
 }
 
 .progress-bar {
-    position: absolute;
-    left: 50%;
-    top: 56%;
-    transform: translate(-50%, -50%);
-    width: 300px;
-    height: 7px;
-    background-color: rgba(255, 255, 255, 0.411);
-    border-radius: 50px;
-
+  position: absolute;
+  left: 50%;
+  top: 56%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 7px;
+  background-color: rgba(255, 255, 255, 0.411);
+  border-radius: 50px;
 }
 
 .progress-fill {
-    width: 10px;
-    height: 7px;
-    background-color: rgb(255, 255, 255);
-    border-radius: 50px;
+  width: 10px;
+  height: 7px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 50px;
 }
 
 .start-page {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .bab1,
 .bab2 {
-    position: relative;
-    width: 100%;
-    height: 50vh;
-    background-size: 100% 100%;
-
+  position: relative;
+  width: 100%;
+  height: 50vh;
+  background-size: 100% 100%;
 }
 
 .bab1 {
-    background-image: url("assets/bab1.jpg");
+  background-image: url("assets/bab1.jpg");
 }
 
 .bab2 {
-    background-image: url("assets/bab2.jpg");
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  background-image: url("assets/bab2.jpg");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .start-btn {
-    max-width: max-content;
-    border: 4px solid #FFB904;
-    color: #FFB904;
-    padding: 6px 50px;
-    font-size: 1.7rem;
-    border-radius: 20px;
-    background-color: #372C28;
-    margin-top: 11rem;
-    box-shadow: 1px 1px 10px 2px #ffb80448;
-    cursor: pointer;
+  max-width: max-content;
+  border: 4px solid #ffb904;
+  color: #ffb904;
+  padding: 6px 50px;
+  font-size: 1.7rem;
+  border-radius: 20px;
+  background-color: #372c28;
+  margin-top: 11rem;
+  box-shadow: 1px 1px 10px 2px #ffb80448;
+  cursor: pointer;
 }
 
 .start-btn:active {
-    background-color: #3d302b;
-    border: 4px solid #ffc940;
-    color: #ffc940;
+  background-color: #3d302b;
+  border: 4px solid #ffc940;
+  color: #ffc940;
 }
 
 .action-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .sound-btn {
-    margin-top: 2rem;
-    color: #ffc940;
-    font-size: 1.2rem;
-    display: flex;
-
+  margin-top: 2rem;
+  color: #ffc940;
+  font-size: 1.2rem;
+  display: flex;
 }
 
 .checkbox {
-    position: relative;
-    border: 3px solid #ffc940;
-    width: 20px;
-    height: 20px;
-    margin-right: 0.8rem;
-    border-radius: 5px;
-    cursor: pointer;
-    z-index: 5;
+  position: relative;
+  border: 3px solid #ffc940;
+  width: 20px;
+  height: 20px;
+  margin-right: 0.8rem;
+  border-radius: 5px;
+  cursor: pointer;
+  z-index: 5;
 }
 
 .checkbox img {
-    width: 38px;
-    position: absolute;
-    top: -13px;
-    left: -5px;
-    z-index: 4;
-    opacity: 0;
+  width: 38px;
+  position: absolute;
+  top: -13px;
+  left: -5px;
+  z-index: 4;
+  opacity: 0;
 }
 
-
 .bab1Anim {
-    animation: openBoard1 2s linear;
+  animation: openBoard1 2s linear;
 }
 
 .bab2Anim {
-    animation: openBoard2 2s linear;
-
+  animation: openBoard2 2s linear;
 }
 
-
 .bab1Anim,
 .bab2Anim {
-    box-shadow: 1px 1px 60px 5px #372C28;
-    -webkit-animation-fill-mode: forwards;
-    /* Chrome 16+, Safari 4+ */
-    -moz-animation-fill-mode: forwards;
-    /* FF 5+ */
-    -o-animation-fill-mode: forwards;
-    /* Not implemented yet */
-    -ms-animation-fill-mode: forwards;
-    /* IE 10+ */
-    animation-fill-mode: forwards;
+  box-shadow: 1px 1px 60px 5px #372c28;
+  -webkit-animation-fill-mode: forwards;
+  /* Chrome 16+, Safari 4+ */
+  -moz-animation-fill-mode: forwards;
+  /* FF 5+ */
+  -o-animation-fill-mode: forwards;
+  /* Not implemented yet */
+  -ms-animation-fill-mode: forwards;
+  /* IE 10+ */
+  animation-fill-mode: forwards;
 }
 
 @keyframes openBoard1 {
-    from {
-        top: 0px;
-    }
+  from {
+    top: 0px;
+  }
 
-    to {
-        top: -50vh;
-        display: none;
-    }
+  to {
+    top: -50vh;
+    display: none;
+  }
 }
 
 @keyframes openBoard2 {
-    from {
-        top: 0px;
-    }
-
-    to {
-        top: 50vh;
-        display: none;
-    }
-}
\ No newline at end of file
+  from {
+    top: 0px;
+  }
+
+  to {
+    top: 50vh;
+    display: none;
+  }
+}
+
+.container {
+  padding: 5rem;
+  display: flex;
+  justify-content: flex-start;
+  gap: 6rem;
+}
+
+.madLibsEdit {
+  flex: 50%;
+}
+.madLibsPreview {
+  flex: 50%;
+}
+
+.play_music {
+  display: hidden;
+}
