diff --git a/about.html b/about.html
index e1ec8c1..360def9 100644
--- a/about.html
+++ b/about.html
@@ -40,16 +40,6 @@
             />
             Lisbook
           </a>
->>>>>>> c3e3653 (Redesign Footer for Enhanced Visual Appeal)
-
-  <body class="dark-theme bg-gray-900 text-gray-300">
-    <!-- Navbar -->
-    <nav class="sticky top-0 z-20 bg-gray-800 p-4">
-      <div class="container mx-auto flex justify-between items-center">
-        <!-- Logo -->
-        <a class="text-green-500 text-2xl font-bold" href="./index.html"
-          >Lisbook</a
-        >
 
           <!-- Menu Links and Theme Toggle -->
           <div
@@ -81,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
diff --git a/adventures.html b/adventures.html
index 74b3ab7..810be54 100644
--- a/adventures.html
+++ b/adventures.html
@@ -71,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
@@ -185,6 +179,15 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               </a>
             </div>
           </div>
+          <!-- <div class="modal-footer">
+            <button
+              class="btn btn-primary"
+              data-bs-target="#exampleModalToggle2"
+              data-bs-toggle="modal"
+            >
+              Open second modal
+            </button>
+          </div> -->
         </div>
       </div>
     </div>
diff --git a/app.js b/app.js
index b8c479b..8e52319 100644
--- a/app.js
+++ b/app.js
@@ -1,80 +1,80 @@
 document.addEventListener("DOMContentLoaded", function () {
-    const audioPlayer = document.getElementById("audio-player");
-    const playlistItems = document.querySelectorAll("#playlist li");
-    const playPauseBtn = document.getElementById('playPauseBtn'); // Play/Pause button
+  const audioPlayer = document.getElementById("audio-player");
+  const playlistItems = document.querySelectorAll("#playlist li");
+  const playPauseBtn = document.getElementById("playPauseBtn"); // Play/Pause button
 
-    // Playlist functionality: Play the clicked audio
-    playlistItems.forEach((item) => {
-        item.addEventListener("click", function () {
-            const audioSource = this.getAttribute("data-src");
-            audioPlayer.src = audioSource;
-            audioPlayer.play();
-            playPauseBtn.classList.remove('play');  // Update the button to pause when playing
-            playPauseBtn.classList.add('pause');
-        });
+  // Playlist functionality: Play the clicked audio
+  playlistItems.forEach((item) => {
+    item.addEventListener("click", function () {
+      const audioSource = this.getAttribute("data-src");
+      audioPlayer.src = audioSource;
+      audioPlayer.play();
+      playPauseBtn.classList.remove("play"); // Update the button to pause when playing
+      playPauseBtn.classList.add("pause");
     });
+  });
 
-    // Play/Pause button functionality
-    playPauseBtn.addEventListener('click', () => {
-        if (audioPlayer.paused) {
-            audioPlayer.play();
-            playPauseBtn.classList.remove('play');
-            playPauseBtn.classList.add('pause');
-        } else {
-            audioPlayer.pause();
-            playPauseBtn.classList.remove('pause');
-            playPauseBtn.classList.add('play');
-        }
-    });
+  // Play/Pause button functionality
+  playPauseBtn.addEventListener("click", () => {
+    if (audioPlayer.paused) {
+      audioPlayer.play();
+      playPauseBtn.classList.remove("play");
+      playPauseBtn.classList.add("pause");
+    } else {
+      audioPlayer.pause();
+      playPauseBtn.classList.remove("pause");
+      playPauseBtn.classList.add("play");
+    }
+  });
 
-    // Comment submission functionality
-    const commentForm = document.getElementById("comment-form");
-    const commentsList = document.getElementById("comments-list");
+  // Comment submission functionality
+  const commentForm = document.getElementById("comment-form");
+  const commentsList = document.getElementById("comments-list");
 
-    commentForm.addEventListener("submit", function (e) {
-        e.preventDefault();
+  commentForm.addEventListener("submit", function (e) {
+    e.preventDefault();
 
-        const username = document.getElementById("username").value;
-        const commentText = document.getElementById("comment").value;
+    const username = document.getElementById("username").value;
+    const commentText = document.getElementById("comment").value;
 
-        if (username && commentText) {
-            const commentElement = document.createElement("div");
-            commentElement.classList.add("comment");
-            commentElement.innerHTML = `<strong>${username}:</strong><p>${commentText}</p>`;
-            commentsList.appendChild(commentElement);
+    if (username && commentText) {
+      const commentElement = document.createElement("div");
+      commentElement.classList.add("comment");
+      commentElement.innerHTML = `<strong>${username}:</strong><p>${commentText}</p>`;
+      commentsList.appendChild(commentElement);
 
-            // Clear the form
-            commentForm.reset();
-        }
-    });
+      // Clear the form
+      commentForm.reset();
+    }
+  });
 
-    // Page navigation buttons functionality
-    const prevBtn = document.getElementById("prev-btn");
-    const nextBtn = document.getElementById("next-btn");
+  // Page navigation buttons functionality
+  const prevBtn = document.getElementById("prev-btn");
+  const nextBtn = document.getElementById("next-btn");
 
-    // Define the pages for navigation
-    const pages = ['index.html', 'genres.html', 'about.html'];
-    let currentPageIndex = pages.indexOf(window.location.pathname);
+  // Define the pages for navigation
+  const pages = ["index.html", "genres.html", "about.html"];
+  let currentPageIndex = pages.indexOf(window.location.pathname);
 
-    // Function to navigate to the next page
-    function nextPage() {
-        if (currentPageIndex < pages.length - 1) {
-            currentPageIndex++;
-            window.location.href = pages[currentPageIndex];
-        }
+  // Function to navigate to the next page
+  function nextPage() {
+    if (currentPageIndex < pages.length - 1) {
+      currentPageIndex++;
+      window.location.href = pages[currentPageIndex];
     }
+  }
 
-    // Function to navigate to the previous page
-    function prevPage() {
-        if (currentPageIndex > 0) {
-            currentPageIndex--;
-            window.location.href = pages[currentPageIndex];
-        }
+  // Function to navigate to the previous page
+  function prevPage() {
+    if (currentPageIndex > 0) {
+      currentPageIndex--;
+      window.location.href = pages[currentPageIndex];
     }
+  }
 
-    // Event listener for "Next" button
-    if (nextBtn) nextBtn.addEventListener("click", nextPage);
+  // Event listener for "Next" button
+  if (nextBtn) nextBtn.addEventListener("click", nextPage);
 
-    // Event listener for "Previous" button
-    if (prevBtn) prevBtn.addEventListener("click", prevPage);
+  // Event listener for "Previous" button
+  if (prevBtn) prevBtn.addEventListener("click", prevPage);
 });
diff --git a/faq.html b/faq.html
index 822e694..08b6a6d 100644
--- a/faq.html
+++ b/faq.html
@@ -17,16 +17,20 @@
     />
     <title>My Favorite Books Music App</title>
   </head>
+
   <body
     class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
   >
     <!-- Navbar -->
     <div id="header-placeholder" class="sticky top-0 z-20"></div>
-    <main>
+
+    <!-- Main -->
+    <main class="container my-5">
       <h1>FAQs</h1>
     </main>
     <!-- Footer -->
     <div id="footer-placeholder" class="mt-auto"></div>
+
     <!-- JavaScript -->
     <script src="./script.js"></script>
     <script
diff --git a/fs.html b/fs.html
index 2da6d02..5900085 100644
--- a/fs.html
+++ b/fs.html
@@ -71,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
diff --git a/index.html b/index.html
index 996d4ae..5def626 100644
--- a/index.html
+++ b/index.html
@@ -71,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
diff --git a/pages/header.html b/pages/header.html
index 0cb830c..6837e93 100644
--- a/pages/header.html
+++ b/pages/header.html
@@ -47,19 +47,11 @@
         <a href="./about.html" class="text-gray-300 hover:text-green-500"
           >About</a
         >
+
         <a href="./contact.html" class="text-gray-300 hover:text-green-500"
           >Contact</a
         >
-        <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-          >About</a
-        >
-
-        <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+        <a href="./faq.html" class="text-gray-300 hover:text-green-500">FAQs</a>
         <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/pbd.html b/pbd.html
index d4e1091..96251bc 100644
--- a/pbd.html
+++ b/pbd.html
@@ -15,11 +15,11 @@
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
     />
+
     <title>My Favorite Books Music App</title>
   </head>
-
   <body
-    class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
+    class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
     <!-- Navbar -->
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
@@ -72,19 +72,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
@@ -140,7 +134,7 @@
       tabindex="-1"
     >
       <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
+        <div class="modal-content modal-background">
           <div class="modal-header">
             <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               Share it on :
@@ -213,18 +207,17 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               <img
                 id="img"
                 src="./Images/cs.jpg"
-                alt="Pale Blue Dot"
+                alt="God Delusion Cover"
                 class="card-img-top img-fluid"
               />
             </div>
             <!-- Book Details -->
             <div class="mt-4">
-              <h1 class="text-2xl font-bold text-green-500">Pale Blue Dot</h1>
-              <h3 class="text-lg mt-2">By Carl Sagan</h3>
+              <h1 class="text-2xl font-bold text-green-500">God Delusion</h1>
+              <h3 class="text-lg mt-2">By Richard Dawkins</h3>
               <p class="text-sm mt-2">
-                Pale Blue Dot explores humanity's place in the universe,
-                emphasizing the importance of space exploration and our
-                responsibility to protect Earth.
+                The God Delusion is a book by English biologist Richard Dawkins
+                that argues against the existence of a supernatural creator.
               </p>
             </div>
 
@@ -262,66 +255,64 @@ <h3 class="text-lg mt-2">By Carl Sagan</h3>
             >
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/Introduction.mp3"
+                data-src="audio/part1.mp3"
               >
-                <p>Introduction: Pale Blue Dot</p>
-                <a href="audio/PaleBlueDot/Introduction.mp3" download
+                <p>Introduction: God Delusion</p>
+                <a href="audio/part1.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/chap-1.mp3"
+                data-src="audio/part2.mp3"
               >
-                <p>Chapter 1: The Shores of the Cosmic Ocean</p>
-                <a href="audio/PaleBlueDot/chap-1.mp3" download
+                <p>Piste 02</p>
+                <a href="audio/part2.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/Chap-2.mp3"
+                data-src="audio/part3.mp3"
               >
-                <p>Chapter 2: One Voice in the Cosmic Fugue</p>
-                <a href="audio/PaleBlueDot/Chap-2.mp3" download
+                <p>Piste 03</p>
+                <a href="audio/part3.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/chap-3.mp3"
+                data-src="audio/part4.mp3"
               >
-                <p>Chapter 3: The Harmony of the Worlds</p>
-                <a href="audio/PaleBlueDot/chap-3.mp3" download
+                <p>Piste 04</p>
+                <a href="audio/part4.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/chap-4.mp3"
+                data-src="audio/part5.mp3"
               >
-                <p>Chapter 4: Heaven and Hell</p>
-                <a href="audio/PaleBlueDot/chap-4.mp3" download
+                <p>Piste 05</p>
+                <a href="audio/part5.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/chap-5.mp3"
+                data-src="audio/part6.mp3"
               >
-                <p>Chapter 5:</p>
-
-                <a href="audio/PaleBlueDot/chap-5.mp3" download
+                <p>Piste 06</p>
+                <a href="audio/part6.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
               <li
-                class="p-2 d-flex justify-content-between"
-                data-src="audio/PaleBlueDot/chap-6.m4b"
+                class="adiobk-sub-item d-flex justify-content-between"
+                data-src="audio/part7.mp3"
               >
-                <p>Chapter 6:</p>
-
-                <a href="audio/PaleBlueDot/chap-6.m4b" download
+                <p>Piste 07</p>
+                <a href="audio/part7.mp3" download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
diff --git a/rdpd.html b/rdpd.html
index 4ce9b04..20175d6 100644
--- a/rdpd.html
+++ b/rdpd.html
@@ -10,15 +10,17 @@
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
     <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
     />
+
     <title>My Favorite Books Music App</title>
   </head>
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
-    <!-- Navbar -->
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">
@@ -69,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
@@ -127,6 +123,7 @@
         </div>
       </nav>
     </header>
+
     <!-- Social Share Modal -->
     <div
       class="modal fade"
@@ -136,7 +133,7 @@
       tabindex="-1"
     >
       <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content modal-background">
+        <div class="modal-content">
           <div class="modal-header">
             <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               Share it on :
@@ -182,56 +179,48 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               </a>
             </div>
           </div>
-          <!-- Mobile Menu Toggle Button -->
-        <div
-          id="menu-toggle"
-          title="Menu"
-          class="text-gray-300 lg:hidden cursor-pointer"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h16m-7 6h7"
-            />
-          </svg>
+          <!-- <div class="modal-footer">
+            <button
+              class="btn btn-primary"
+              data-bs-target="#exampleModalToggle2"
+              data-bs-toggle="modal"
+            >
+              Open second modal
+            </button>
+          </div> -->
         </div>
       </div>
-    </nav>
-
-    <!-- Book Card Display -->
-    <div
-      class="container flex flex-col md:flex-row mx-auto mt-10 p-6 text-center"
-    >
-      <div
-        class="book-card flex-auto p-6 rounded-lg shadow-lg md:max-w-sm mx-auto md:w-1/3 mb-6 md:mb-0"
-      >
-        <!-- Cover Image -->
-        <img
-          id="img"
-          src="./Images/Sapiens.jpg"
-          alt="God Delusion Cover"
-          class="w-full h-64 object-cover rounded-lg"
-        />
+    </div>
+    <!-- Social Share Modal end -->
 
-        <!-- Book Details -->
-        <div class="mt-4">
-          <h1 class="text-2xl font-bold text-green-500">
-            Sapiens: A Brief History of Humankind
-          </h1>
-          <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
-          <p class="text-sm mt-2">
-            Sapiens explores the history and evolution of humanity, from early
-            Homo sapiens to modern society.
-          </p>
-        </div>
+    <main class="container my-5">
+      <section class="row d-flex align-items-stretch rounded-5 p-5">
+        <!-- Book Card Display -->
+        <div class="col-12 col-lg-4 mb-5 mb-lg-0">
+          <div class="features-card border rounded-5 p-4 text-center h-100">
+            <!-- Cover Image -->
+            <div
+              class="card-cover-container rounded-4 d-flex align-items-center border"
+              style="height: 16rem"
+            >
+              <img
+                id="img"
+                src="./Images/Sapiens.jpg"
+                alt="God Delusion Cover"
+                class="card-img-top img-fluid"
+              />
+            </div>
+            <!-- Book Details -->
+            <div class="mt-4">
+              <h1 class="text-2xl font-bold text-green-500">
+                Sapiens: A Brief History of Humankind
+              </h1>
+              <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
+              <p class="text-sm mt-2">
+                Sapiens explores the history and evolution of humanity, from
+                early Homo sapiens to modern society.
+              </p>
+            </div>
 
             <hr class="opacity-50 w-60 mt-4 mx-auto" />
 
@@ -335,52 +324,75 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
               <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
             </div>
 
-        <!-- Play/Pause Button with Animation -->
-        <div class="mt-4 flex justify-center">
-          <button id="playPauseBtn" class="play"></button>
-          <!-- Added Play/Pause button here -->
+            <!-- Play/Pause Button with Animation -->
+            <div class="mt-4 flex justify-center">
+              <button id="playPauseBtn" class="play"></button>
+              <!-- Added Play/Pause button here -->
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </section>
 
-    <!-- Comments Section -->
-    <div class="container mx-auto mt-16 bg-gray-800 p-6 rounded-lg shadow-lg">
-      <h2 class="text-center text-2xl mb-6">Share Your Thoughts</h2>
-      <form id="comment-form" class="space-y-4">
-        <div>
-          <label for="username" class="block text-sm font-medium"
-            >Your Name:</label
-          >
-          <input
-            type="text"
-            id="username"
-            class="w-full p-2 rounded-lg bg-gray-700 text-white"
-            required
-          />
-        </div>
-        <div>
-          <label for="comment" class="block text-sm font-medium"
-            >Your Comment:</label
+      <!-- Book buttons navigations -->
+      <section
+        class="row d-flex align-items-stretch rounded-5 p-5 my-5 gx-5 text-center"
+      >
+        <div class="col-md-6">
+          <a
+            href="./fs.html"
+            class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5"
+            >Previous Book</a
           >
-          <textarea
-            id="comment"
-            class="w-full p-2 rounded-lg bg-gray-700 text-white"
-            rows="4"
-            required
-          ></textarea>
         </div>
-        <div class="text-center">
-          <button
-            type="submit"
-            class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+        <div class="col-md-6">
+          <a
+            href="./adventures.html"
+            class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
+            >Next Book</a
           >
-            Submit
-          </button>
         </div>
-      </form>
+      </section>
+      <!-- Book buttons navigations end -->
 
-      <div id="comments-list" class="mt-10 space-y-4"></div>
-    </div>
+      <!-- Comments Section -->
+      <section class="row rounded-5 p-5 mt-5">
+        <div class="container mx-auto p-6 rounded-lg">
+          <h2 class="display-5 page-title fw-semibold mb-6">
+            Share Your Comments
+          </h2>
+          <form id="comment-form" class="space-y-4 mt-5">
+            <div>
+              <label for="username" class="form-label">Your Name:</label>
+              <input
+                type="text"
+                id="username"
+                class="form-control mt-2 rounded-5 bg-body-tertiary border"
+                required
+              />
+            </div>
+            <div>
+              <label for="comment" class="form-label">Your Comment:</label>
+              <textarea
+                id="comment"
+                class="form-control mt-2 rounded-5 bg-body-tertiary border"
+                rows="6"
+                required
+              ></textarea>
+            </div>
+            <div class="text-center">
+              <button
+                type="submit"
+                class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+              >
+                Share comment
+              </button>
+            </div>
+          </form>
+
+          <div id="comments-list" class="mt-10 space-y-4"></div>
+        </div>
+      </section>
+    </main>
 
     <!-- Footer -->
     <div id="footer-placeholder" class="mt-auto"></div>
diff --git a/script.js b/script.js
index 23f0c65..a557539 100644
--- a/script.js
+++ b/script.js
@@ -261,28 +261,30 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  menuClose.addEventListener("click", () => {
-    menu.classList.add("scale-0");
-    menu.classList.remove("scale-100");
-  });
-
-  // Function to load an HTML file into an element
-  function loadHTML(file, elementId) {
-    fetch(file)
-      .then((response) => {
-        if (!response.ok)
-          throw new Error("Erreur lors du chargement du fichier " + file);
-        return response.text();
-      })
-      .then((data) => {
-        document.getElementById(elementId).innerHTML = data;
-      })
-      .catch((error) => console.error(error));
+  if (menuClose) {
+    menuClose.addEventListener("click", () => {
+      menu.classList.add("scale-0");
+      menu.classList.remove("scale-100");
+    });
   }
+});
 
-  // Load header and footer
-  document.addEventListener("DOMContentLoaded", function () {
-    loadHTML("./pages/header.html", "header-placeholder");
-    loadHTML("./pages/footer.html", "footer-placeholder");
-  });
+// Function to load an HTML file into an element
+function loadHTML(file, elementId) {
+  fetch(file)
+    .then((response) => {
+      if (!response.ok)
+        throw new Error("Erreur lors du chargement du fichier " + file);
+      return response.text();
+    })
+    .then((data) => {
+      document.getElementById(elementId).innerHTML = data;
+    })
+    .catch((error) => console.error(error));
+}
+
+// Load header and footer
+document.addEventListener("DOMContentLoaded", function () {
+  loadHTML("./pages/header.html", "header-placeholder");
+  loadHTML("./pages/footer.html", "footer-placeholder");
 });
diff --git a/test.html b/test.html
index 5c39d2c..7666e06 100644
--- a/test.html
+++ b/test.html
@@ -71,19 +71,13 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >About</a
+              >FAQs</a
             >
-
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
@@ -129,7 +123,6 @@
         </div>
       </nav>
     </header>
-
     <!-- Social Share Modal -->
     <div
       class="modal fade"
