diff --git a/about.html b/about.html
index d6ece4e..5158f62 100644
--- a/about.html
+++ b/about.html
@@ -21,11 +21,15 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
-  <div id="loader" class="spinner-container">
-    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
-      <span class="visually-hidden">Loading...</span>
+    <div id="loader" class="spinner-container">
+      <div
+        class="spinner-border"
+        role="status"
+        style="width: 4rem; height: 4rem; color: #1db954"
+      >
+        <span class="visually-hidden">Loading...</span>
+      </div>
     </div>
-  </div>
     <!-- <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="">
@@ -70,15 +74,18 @@
                 />
               </svg>
             </div>
-            <a href="./index.html" class="text-gray-300 hover:text-green-500"
+            <a
+              href="./index.html"
+              class="text-gray-300 hover:text-green-500"
+              id="home"
               >Home</a
             >
-            <a href="./about.html" class="text-gray-300 hover:text-green-500"
+            <a
+              href="./about.html"
+              class="text-gray-300 hover:text-green-500"
+              id="about"
               >About</a
             >
-            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
-              >Contact</a
-            >
 
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
diff --git a/audio/PaleBlueDot/Chap-2.mp3 b/audio/PaleBlueDot/Chap-2_aberrations of light.mp3
similarity index 100%
rename from audio/PaleBlueDot/Chap-2.mp3
rename to audio/PaleBlueDot/Chap-2_aberrations of light.mp3
diff --git a/audio/PaleBlueDot/chap-1.mp3 b/audio/PaleBlueDot/chap-1_you_are_here.mp3
similarity index 100%
rename from audio/PaleBlueDot/chap-1.mp3
rename to audio/PaleBlueDot/chap-1_you_are_here.mp3
diff --git a/audio/PaleBlueDot/chap-3.mp3 b/audio/PaleBlueDot/chap-3_the great demotions.mp3
similarity index 100%
rename from audio/PaleBlueDot/chap-3.mp3
rename to audio/PaleBlueDot/chap-3_the great demotions.mp3
diff --git a/audio/PaleBlueDot/chap-4.mp3 b/audio/PaleBlueDot/chap-4_a universe not made for us.mp3
similarity index 100%
rename from audio/PaleBlueDot/chap-4.mp3
rename to audio/PaleBlueDot/chap-4_a universe not made for us.mp3
diff --git a/audio/PaleBlueDot/chap-5.mp3 b/audio/PaleBlueDot/chap-5_is there intelligent life on earth.mp3
similarity index 100%
rename from audio/PaleBlueDot/chap-5.mp3
rename to audio/PaleBlueDot/chap-5_is there intelligent life on earth.mp3
diff --git a/audio/PaleBlueDot/chap-6.m4b b/audio/PaleBlueDot/chap-6_the triumph of voyager.m4b
similarity index 100%
rename from audio/PaleBlueDot/chap-6.m4b
rename to audio/PaleBlueDot/chap-6_the triumph of voyager.m4b
diff --git a/audio/PaleBlueDot/chap-7.mp3 b/audio/PaleBlueDot/chap-6_the triumph of voyager.mp3
similarity index 100%
rename from audio/PaleBlueDot/chap-7.mp3
rename to audio/PaleBlueDot/chap-6_the triumph of voyager.mp3
diff --git a/audio/PaleBlueDot/08 - Chapter 7.mp3 b/audio/PaleBlueDot/chap-7_among the moons of saturn.mp3
similarity index 100%
rename from audio/PaleBlueDot/08 - Chapter 7.mp3
rename to audio/PaleBlueDot/chap-7_among the moons of saturn.mp3
diff --git a/audio/PaleBlueDot/09 - Chapter 8.mp3 b/audio/PaleBlueDot/chap-8_the first new planet.mp3
similarity index 100%
rename from audio/PaleBlueDot/09 - Chapter 8.mp3
rename to audio/PaleBlueDot/chap-8_the first new planet.mp3
diff --git a/contact.html b/contact.html
index 5b77a7b..ba1e6ea 100644
--- a/contact.html
+++ b/contact.html
@@ -4,14 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"
+    ></script>
     <script type="text/javascript">
-        (function() {
-            // https://dashboard.emailjs.com/admin/account
-            emailjs.init({
-              publicKey: "your_public_key",
-            });
-        })();
+      (function () {
+        // https://dashboard.emailjs.com/admin/account
+        emailjs.init({
+          publicKey: "your_public_key",
+        });
+      })();
     </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <link
@@ -30,19 +33,19 @@
   <body class="dark-theme bg-gray-900 text-gray-300">
     <!-- Navbar -->
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
-    <header class="sticky top-0 z-20 bg-gray-800 p-4">
+    <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">
         <div class="container mx-auto flex justify-between items-center">
           <!-- Logo -->
           <a
-            class="text-green-500 h3 font-bold d-flex"
+            class="logo-text h3 font-bold d-inline-flex"
             href="./index.html"
             class="navbar-brand"
           >
             <img
-              src="./Images/lisbook-logo.png"
+              src="./Images/lisbook-logo-1.png"
               alt="Logo"
-              width="35"
+              width="40"
               height="auto"
               class="align-text-center me-2"
             />
@@ -73,22 +76,25 @@
                 />
               </svg>
             </div>
-            <a href="./index.html" class="text-gray-300 hover:text-green-500"
+            <a
+              href="./index.html"
+              class="text-gray-300 hover:text-green-500"
+              id="home"
               >Home</a
             >
-            <a href="./about.html" class="text-gray-300 hover:text-green-500"
+            <a
+              href="./about.html"
+              class="text-gray-300 hover:text-green-500"
+              id="about"
               >About</a
             >
+
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</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"
@@ -136,37 +142,41 @@
     </header>
 
     <main class="container my-5">
-       <!-- Feedback 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 Feedback</h2>
-        <form id="feedback-form" class="space-y-4">
-          <div>
-            <label for="username" class="block text-sm font-medium"
-              >Your Name:</label
-            >
-            <input
-              type="text"
-              name="username"
-              autocomplete="off"
-              id="username"
-              class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
-              required
-            />
-          </div>
-          <div>
-            <label for="username" class="block text-sm font-medium"
-              >Your Email:</label
-            >
-            <input
-              type="email"
-              id="email"
-              name="email"
-              autocomplete="off"
-              class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
-              required
-            />
-          </div>
-          <form>
+      <!-- Feedback Section -->
+
+      <section class="row d-flex align-items-stretch rounded-5 p-5">
+        <div class="container mx-auto p-6 rounded-lg">
+          <h2 class="display-5 page-title fw-semibold mb-5 text-center">
+            Share Your Feedback
+          </h2>
+          <form id="feedback-form" class="space-y-4">
+            <div>
+              <label for="username" class="block text-sm font-medium"
+                >Your Name:</label
+              >
+              <input
+                type="text"
+                name="username"
+                autocomplete="off"
+                id="username"
+                class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
+                required
+              />
+            </div>
+            <div>
+              <label for="username" class="block text-sm font-medium"
+                >Your Email:</label
+              >
+              <input
+                type="email"
+                id="email"
+                name="email"
+                autocomplete="off"
+                class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
+                required
+              />
+            </div>
+
             <label for="comment" class="block text-sm font-medium"
               >Your Feedback:</label
             >
@@ -178,12 +188,17 @@ <h2 class="text-center text-2xl mb-6">Share Your Feedback</h2>
               rows="4"
               required
             ></textarea>
-            <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
-                            id="share2">
-                            Share comment
-                        </button>
-                    </form>
-       
+            <div class="text-center mt-5">
+              <button
+                type="submit"
+                class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+                id="share2"
+              >
+                Share Feedback
+              </button>
+            </div>
+          </form>
+        </div>
       </section>
     </main>
     <!-- Footer -->
diff --git a/index.html b/index.html
index 387975c..bb02977 100644
--- a/index.html
+++ b/index.html
@@ -1,104 +1,202 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" 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"
-        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+    <link
+      rel="stylesheet"
+      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"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
     <title>My Favorite Books Music App</title>
-</head>
+  </head>
 
-<body class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100">
+  <body
+    class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
+  >
     <div id="loader" class="spinner-container">
-        <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
-          <span class="visually-hidden">Loading...</span>
-        </div>
+      <div
+        class="spinner-border"
+        role="status"
+        style="width: 4rem; height: 4rem; color: #1db954"
+      >
+        <span class="visually-hidden">Loading...</span>
       </div>
-      
+    </div>
+
     <!-- 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="">
-            <div class="container mx-auto flex justify-between items-center">
-                <!-- Logo -->
-                <a class="logo-text h3 font-bold d-inline-flex" href="./index.html" class="navbar-brand">
-                    <img src="./Images/lisbook-logo-1.png" alt="Logo" width="40" height="auto"
-                        class="align-text-center me-2" />
-                    Lisbook
-                </a>
+      <nav class="">
+        <div class="container mx-auto flex justify-between items-center">
+          <!-- Logo -->
+          <a
+            class="logo-text h3 font-bold d-inline-flex"
+            href="./index.html"
+            class="navbar-brand"
+          >
+            <img
+              src="./Images/lisbook-logo-1.png"
+              alt="Logo"
+              width="40"
+              height="auto"
+              class="align-text-center me-2"
+            />
+            Lisbook
+          </a>
 
-                <!-- Menu Links and Theme Toggle -->
-                <div id="menu"
-                    class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-end lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4 z-20">
-                    <div id="menu-close" class="text-gray-300 lg:hidden absolute top-5 right-5 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="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </div>
-                    <a href="./index.html" class="text-gray-300 hover:text-green-500" id="home">Home</a>
-                    <a href="./about.html" class="text-gray-300 hover:text-green-500" id="about">About</a>
+          <!-- Menu Links and Theme Toggle -->
+          <div
+            id="menu"
+            class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-end lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4 z-20"
+          >
+            <div
+              id="menu-close"
+              class="text-gray-300 lg:hidden absolute top-5 right-5 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="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </div>
+            <a
+              href="./index.html"
+              class="text-gray-300 hover:text-green-500"
+              id="home"
+              >Home</a
+            >
+            <a
+              href="./about.html"
+              class="text-gray-300 hover:text-green-500"
+              id="about"
+              >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">FAQs</a>
-                    <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
-                        <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                        </svg>
-                    </button>
-                </div>
+            <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"
+              >FAQs</a
+            >
+            <button
+              id="theme-toggle"
+              class="text-gray-300 hover:text-green-500"
+            >
+              <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                />
+              </svg>
+            </button>
+          </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>
-            </div>
-        </nav>
+          <!-- 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>
+        </div>
+      </nav>
     </header>
 
     <!-- Social Share Modal -->
-    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
-        tabindex="-1">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
-                        Share it on :
-                    </h1>
-                    <button type="button" class="btn-close rounded-5" data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <!-- Modale body -->
-                <div class="modal-body">
-                    <div class="flex justify-center space-x-4 mt-4">
-                        <a href="https://www.facebook.com/sharer/sharer.php?u=http://127.0.0.1:5500/Lisbook/pbd.html&text=Lisbook+god Delusion"
-                            target="_blank">
-                            <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
-                                alt="Share on Facebook" style="width: 24px; height: 24px" />
-                        </a>
-                        <a href="https://twitter.com/intent/tweet?url=http://127.0.0.1:5500/Lisbook/pbd.html&text=Lisbook+god Delusion"
-                            target="_blank">
-                            <img src="https://cdn4.iconfinder.com/data/icons/social-media-black-white-2/1227/X-512.png" alt="Share on X" style="width: 24px; height: 24px" />
-                        </a>
-                        <a href="https://api.whatsapp.com/send?text=http://127.0.0.1:5500/Lisbook/pbd.html"
-                            target="_blank">
-                            <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_whatsapp-512.png"
-                                alt="Share on WhatsApp" style="width: 24px; height: 24px" />
-                        </a>
-                    </div>
-                </div>
-                <!-- <div class="modal-footer">
+    <div
+      class="modal fade"
+      id="exampleModalToggle"
+      aria-hidden="true"
+      aria-labelledby="exampleModalToggleLabel"
+      tabindex="-1"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
+              Share it on :
+            </h1>
+            <button
+              type="button"
+              class="btn-close rounded-5"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <!-- Modale body -->
+          <div class="modal-body">
+            <div class="flex justify-center space-x-4 mt-4">
+              <a
+                href="https://www.facebook.com/sharer/sharer.php?u=http://127.0.0.1:5500/Lisbook/pbd.html&text=Lisbook+god Delusion"
+                target="_blank"
+              >
+                <img
+                  src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
+                  alt="Share on Facebook"
+                  style="width: 24px; height: 24px"
+                />
+              </a>
+              <a
+                href="https://twitter.com/intent/tweet?url=http://127.0.0.1:5500/Lisbook/pbd.html&text=Lisbook+god Delusion"
+                target="_blank"
+              >
+                <img
+                  src="https://abs.twimg.com/favicons/twitter.2.ico"
+                  alt="Share on X"
+                />
+              </a>
+              <a
+                href="https://api.whatsapp.com/send?text=http://127.0.0.1:5500/Lisbook/pbd.html"
+                target="_blank"
+              >
+                <img
+                  src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_whatsapp-512.png"
+                  alt="Share on WhatsApp"
+                  style="width: 24px; height: 24px"
+                />
+              </a>
+            </div>
+          </div>
+          <!-- <div class="modal-footer">
             <button
               class="btn btn-primary"
               data-bs-target="#exampleModalToggle2"
@@ -107,199 +205,326 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
               Open second modal
             </button>
           </div> -->
-            </div>
         </div>
+      </div>
     </div>
     <!-- Social Share Modal end -->
 
     <main class="container my-5">
-        <!-- Top audio book -->
-        <section class="rounded-5 p-5 my-5">
-            <h2 class="display-5 page-title fw-semibold" id="top-audio-books">Top Audio Books</h2>
+      <!-- Top audio book -->
+      <section class="rounded-5 p-5 my-5">
+        <h2 class="display-5 page-title fw-semibold" id="top-audio-books">
+          Top Audio Books
+        </h2>
 
-            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mt-4 align-items-stretch">
-                <!-- book card -->
-                <div class="col">
-                    <div class="features-card border rounded-5 p-4 text-center">
-                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
-                            <img src="./Images/cs.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
-                        </div>
-                        <div class="card-body mt-4">
-                            <h4 class="card-title h-6 page-title">God Delusion</h4>
-                            <p class="card-text">By Richard Dawkins</p>
-                            <a href="pbd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
-                        </div>
-                    </div>
-                </div>
-                <!-- book card -->
-                <div class="col">
-                    <div class="features-card border rounded-5 p-4 text-center">
-                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
-                            <img src="./Images/Frankestine.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
-                        </div>
-                        <div class="card-body mt-4">
-                            <h4 class="card-title h6 page-title">Frankestine</h4>
-                            <p class="card-text">By Mary Shelby</p>
-                            <a href="fs.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
-                        </div>
-                    </div>
-                </div>
-                <!-- book card -->
-                <div class="col">
-                    <div class="features-card border rounded-5 p-4 text-center">
-                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
-                            <img src="./Images/Adventures_Sherlock_Holmes.jpg" class="card-img-top img-fluid"
-                                alt="Audio book cover" />
-                        </div>
-                        <div class="card-body mt-4">
-                            <h4 class="card-title h6 page-title">
-                                Adventures of Sherlock Holmes
-                            </h4>
-                            <p class="card-text">By Sir Arthur Conan Doyle</p>
-                            <a href="adventures.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
-                        </div>
-                    </div>
-                </div>
-                <!-- book card -->
-                <div class="col">
-                    <div class="features-card border rounded-5 p-4 text-center">
-                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
-                            <img src="./Images/Sapiens.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
-                        </div>
-                        <div class="card-body mt-4">
-                            <h4 class="card-title h6 page-title">
-                                Sapiens: A Brief History of Humankind
-                            </h4>
-                            <p class="card-text">By Yuval Noah Harari</p>
-                            <a href="rdpd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
-                        </div>
-                    </div>
-                </div>
+        <div
+          class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mt-4 align-items-stretch"
+        >
+          <!-- book card -->
+          <div class="col">
+            <div class="features-card border rounded-5 p-4 text-center">
+              <div
+                class="card-cover-container rounded-4 d-flex align-items-center border"
+              >
+                <img
+                  src="./Images/cs.jpg"
+                  class="card-img-top img-fluid"
+                  alt="Audio book cover"
+                />
+              </div>
+              <div class="card-body mt-4">
+                <h4 class="card-title h-6 page-title">Pale Blue Dot</h4>
+                <p class="card-text">By Carl Sagan</p>
+                <a
+                  href="pbd.html"
+                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
+                  >Discover</a
+                >
+              </div>
             </div>
-        </section>
+          </div>
+          <!-- book card -->
+          <div class="col">
+            <div class="features-card border rounded-5 p-4 text-center">
+              <div
+                class="card-cover-container rounded-4 d-flex align-items-center border"
+              >
+                <img
+                  src="./Images/Frankestine.jpg"
+                  class="card-img-top img-fluid"
+                  alt="Audio book cover"
+                />
+              </div>
+              <div class="card-body mt-4">
+                <h4 class="card-title h6 page-title">Frankestine</h4>
+                <p class="card-text">By Mary Shelby</p>
+                <a
+                  href="fs.html"
+                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
+                  >Discover</a
+                >
+              </div>
+            </div>
+          </div>
+          <!-- book card -->
+          <div class="col">
+            <div class="features-card border rounded-5 p-4 text-center">
+              <div
+                class="card-cover-container rounded-4 d-flex align-items-center border"
+              >
+                <img
+                  src="./Images/Adventures_Sherlock_Holmes.jpg"
+                  class="card-img-top img-fluid"
+                  alt="Audio book cover"
+                />
+              </div>
+              <div class="card-body mt-4">
+                <h4 class="card-title h6 page-title">
+                  Adventures of Sherlock Holmes
+                </h4>
+                <p class="card-text">By Sir Arthur Conan Doyle</p>
+                <a
+                  href="adventures.html"
+                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
+                  >Discover</a
+                >
+              </div>
+            </div>
+          </div>
+          <!-- book card -->
+          <div class="col">
+            <div class="features-card border rounded-5 p-4 text-center">
+              <div
+                class="card-cover-container rounded-4 d-flex align-items-center border"
+              >
+                <img
+                  src="./Images/Sapiens.jpg"
+                  class="card-img-top img-fluid"
+                  alt="Audio book cover"
+                />
+              </div>
+              <div class="card-body mt-4">
+                <h4 class="card-title h6 page-title">
+                  Sapiens: A Brief History of Humankind
+                </h4>
+                <p class="card-text">By Yuval Noah Harari</p>
+                <a
+                  href="rdpd.html"
+                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
+                  >Discover</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-        <!-- Book details playlist -->
-        <section class="row d-flex align-items-stretch rounded-5 p-5">
-            <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/GD.jpeg" 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">God Delusion</h1>
-                        <h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
-                        <p class="text-sm mt-2">
-                            The God Delusion is a book by English biologist Richard Dawkins
-                            that argues against the existence of a supernatural creator.
-                        </p>
-                    </div>
+      <!-- Book details playlist -->
+      <section class="row d-flex align-items-stretch rounded-5 p-5">
+        <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/GD.jpeg"
+                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">God Delusion</h1>
+              <h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
+              <p class="text-sm mt-2">
+                The God Delusion is a book by English biologist Richard Dawkins
+                that argues against the existence of a supernatural creator.
+              </p>
+            </div>
 
-                    <hr class="opacity-50 w-60 mt-4 mx-auto" />
+            <hr class="opacity-50 w-60 mt-4 mx-auto" />
 
-                    <!-- Favorite Button -->
-                    <div class="mt-3 flex justify-center icon-action-btn-container">
-                        <i class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
-                            id="favourite-btn"><span class="tooltip" id="favourite">Save to Favourites</span></i>
-                        <i class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="share-btn"
-                            data-bs-target="#exampleModalToggle" data-bs-toggle="modal"><span class="tooltip"
-                                id="share">Share</span></i>
-                        <i class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom"
-                            id="view-comments-btn"><span class="tooltip" id="view">View comments</span></i>
-                    </div>
-                </div>
+            <!-- Favorite Button -->
+            <div class="mt-3 flex justify-center icon-action-btn-container">
+              <i
+                class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+                id="favourite-btn"
+                ><span class="tooltip" id="favourite"
+                  >Save to Favourites</span
+                ></i
+              >
+              <i
+                class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+                id="share-btn"
+                data-bs-target="#exampleModalToggle"
+                data-bs-toggle="modal"
+                ><span class="tooltip" id="share">Share</span></i
+              >
+              <i
+                class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+                id="view-comments-btn"
+                ><span class="tooltip" id="view">View comments</span></i
+              >
             </div>
-            <div class="col-12 col-lg-8 ps-4">
-                <!-- playlist -->
-                <div class="eatures-card border rounded-5 p-4 text-center h-100">
-                    <ul id="playlist" class="playlist list-none text-left overflow-auto m-2 mb-4">
-                        <li class="adiobk-sub-item d-flex justify-content-between" data-src="audio/part1.mp3">
-                            <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/part2.mp3">
-                            <p>Part 2</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/part3.mp3">
-                            <p>Part 3</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/part4.mp3">
-                            <p>Part 4</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/part5.mp3">
-                            <p>Part 5</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/part6.mp3">
-                            <p>Part 6</p>
-
-                            <a href="audio/part6.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/part7.mp3">
-                            <p>Part 7</p>
+          </div>
+        </div>
+        <div class="col-12 col-lg-8 ps-4">
+          <!-- playlist -->
+          <div class="eatures-card border rounded-5 p-4 text-center h-100">
+            <ul
+              id="playlist"
+              class="playlist list-none text-left overflow-auto m-2 mb-4"
+            >
+              <li
+                class="adiobk-sub-item d-flex justify-content-between"
+                data-src="audio/part1.mp3"
+              >
+                <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/part2.mp3"
+              >
+                <p>Part 2</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/part3.mp3"
+              >
+                <p>Part 3</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/part4.mp3"
+              >
+                <p>Part 4</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/part5.mp3"
+              >
+                <p>Part 5</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/part6.mp3"
+              >
+                <p>Part 6</p>
 
-                            <a href="audio/part7.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
-                        </li>
-                    </ul>
+                <a href="audio/part6.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/part7.mp3"
+              >
+                <p>Part 7</p>
 
-                    <div class="player container rounded-5">
-                        <div class="audio-img"></div>
-                        <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
-                    </div>
+                <a href="audio/part7.mp3" download
+                  ><i class="bi bi-cloud-arrow-down-fill"></i
+                ></a>
+              </li>
+            </ul>
 
-                    <!-- Play/Pause Button with Animation -->
-                    <div class="mt-3 flex justify-center">
-                        <button id="playPauseBtn" class="play"></button>
-                        <!-- Added Play/Pause button here -->
-                    </div>
-                </div>
+            <div class="player container rounded-5">
+              <div class="audio-img"></div>
+              <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
             </div>
-        </section>
 
-        <!-- 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="./index.html"
-                    class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5">Previous Book</a>
+            <!-- Play/Pause Button with Animation -->
+            <div class="mt-3 flex justify-center">
+              <button id="playPauseBtn" class="play"></button>
+              <!-- Added Play/Pause button here -->
             </div>
-            <div class="col-md-6">
-                <a href="./pbd.html" class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5">Next
-                    Book</a>
-            </div>
-        </section>
+          </div>
+        </div>
+      </section>
 
-        <section class="row rounded-5 p-5 mt-5">
-            <!-- Comments Section -->
-            <div class="container mx-auto p-6 rounded-lg">
-                <h2 class="display-5 page-title fw-semibold mb-6" id="share1">
-                    Share Your Comments
-                </h2>
-                <form id="comment-form" class="space-y-4 mt-5">
-                    <div>
-                        <label for="username" class="form-label" id="yourname">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" id="yourcomment">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"
-                            id="share2">
-                            Share comment
-                        </button>
-                    </div>
-                </form>
+      <!-- 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="./index.html"
+            class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5"
+            >Previous Book</a
+          >
+        </div>
+        <div class="col-md-6">
+          <a
+            href="./pbd.html"
+            class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
+            >Next Book</a
+          >
+        </div>
+      </section>
 
-                <div id="comments-list" class="mt-10 space-y-4"></div>
+      <section class="row rounded-5 p-5 mt-5">
+        <!-- Comments Section -->
+        <div class="container mx-auto p-6 rounded-lg">
+          <h2
+            class="display-5 page-title fw-semibold mb-6 text-center"
+            id="share"
+          >
+            Share Your Comments
+          </h2>
+          <form id="comment-form" class="space-y-4 mt-5">
+            <div>
+              <label for="username" class="form-label" id="yourname"
+                >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" id="yourcomment"
+                >Your Comment:</label
+              >
+              <textarea
+                id="comment"
+                class="form-control mt-2 rounded-5 bg-body-tertiary border"
+                rows="6"
+                required
+              ></textarea>
             </div>
-        </section>
+            <div class="text-center">
+              <button
+                type="submit"
+                class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+                id="share2"
+              >
+                Share comment
+              </button>
+            </div>
+          </form>
+
+          <div id="comments-list" class="mt-10 space-y-4"></div>
+        </div>
+      </section>
     </main>
 
     <!-- Footer -->
@@ -308,9 +533,10 @@ <h2 class="display-5 page-title fw-semibold mb-6" id="share1">
     <!-- JavaScript -->
 
     <script src="./script.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/pbd.css b/pbd.css
deleted file mode 100644
index e69de29..0000000
diff --git a/pbd.html b/pbd.html
index d727b99..38ceee4 100644
--- a/pbd.html
+++ b/pbd.html
@@ -21,11 +21,15 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
-  <div id="loader" class="spinner-container">
-    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
-      <span class="visually-hidden">Loading...</span>
+    <div id="loader" class="spinner-container">
+      <div
+        class="spinner-border"
+        role="status"
+        style="width: 4rem; height: 4rem; color: #1db954"
+      >
+        <span class="visually-hidden">Loading...</span>
+      </div>
     </div>
-  </div>
     <!-- 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">
@@ -219,11 +223,13 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
             </div>
             <!-- Book Details -->
             <div class="mt-4">
-              <h1 class="text-2xl font-bold text-green-500">God Delusion</h1>
-              <h3 class="text-lg mt-2">By Richard Dawkins</h3>
+              <h1 class="text-2xl font-bold text-green-500">Pale Blue Dot</h1>
+              <h3 class="text-lg mt-2">By Carl Sagan</h3>
               <p class="text-sm mt-2">
-                The God Delusion is a book by English biologist Richard Dawkins
-                that argues against the existence of a supernatural creator.
+                Pale Blue Dot Sagan traces the spellbinding history of our
+                launch into the cosmos and assesses the future that looms before
+                us as we move out into our own solar system and on to distant
+                galaxies beyond.
               </p>
             </div>
 
@@ -261,64 +267,96 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>
             >
               <li
                 class="adiobk-sub-item d-flex justify-content-between"
-                data-src="audio/part1.mp3"
+                data-src="audio/PaleBlueDot/Introduction.mp3"
+              >
+                <p>Introduction</p>
+                <a href="audio/PaleBlueDot/Introduction.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_you_are_here.mp3"
+              >
+                <p>Chapitre 1: You are here</p>
+                <a href="audio/PaleBlueDot/chap-1_you_are_here.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_aberrations of light.mp3"
               >
-                <p>Introduction: God Delusion</p>
-                <a href="audio/part1.mp3" download
+                <p>Chapitre 2: Aberrations of light</p>
+                <a
+                  href="audio/PaleBlueDot/Chap-2_aberrations of light.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/part2.mp3"
+                data-src="audio/PaleBlueDot/chap-3_the great demotions.mp3"
               >
-                <p>Piste 02</p>
-                <a href="audio/part2.mp3" download
+                <p>Chapitre 3: The great demotions</p>
+                <a
+                  href="audio/PaleBlueDot/chap-3_the great demotions.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/part3.mp3"
+                data-src="audio/PaleBlueDot/chap-4_a universe not made for us.mp3"
               >
-                <p>Piste 03</p>
-                <a href="audio/part3.mp3" download
+                <p>Chapitre 4: A universe not made for us</p>
+                <a
+                  href="audio/PaleBlueDot/chap-4_a universe not made for us.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/part4.mp3"
+                data-src="audio/PaleBlueDot/chap-5_is there intelligent life on earth.mp3"
               >
-                <p>Piste 04</p>
-                <a href="audio/part4.mp3" download
+                <p>Chapitre 5: Is there intelligent life on earth?</p>
+                <a
+                  href="audio/PaleBlueDot/chap-5_is there intelligent life on earth.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/part5.mp3"
+                data-src="audio/PaleBlueDot/chap-6_the triumph of voyager.m4b"
               >
-                <p>Piste 05</p>
-                <a href="audio/part5.mp3" download
+                <p>Chapitre 06: The triumph of voyager</p>
+                <a
+                  href="audio/PaleBlueDot/chap-6_the triumph of voyager.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/part6.mp3"
+                data-src="audio/PaleBlueDot/chap-6_the triumph of voyager.mp3"
               >
-                <p>Piste 06</p>
-                <a href="audio/part6.mp3" download
+                <p>Chapitre 07: Among the moons of saturn</p>
+                <a
+                  href="audio/PaleBlueDot/chap-7_among the moons of saturn.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/part7.mp3"
+                data-src="audio/PaleBlueDot/chap-8_the first new planet.mp3"
               >
-                <p>Piste 07</p>
-                <a href="audio/part7.mp3" download
+                <p>Chapitre 08: The first new planet</p>
+                <a
+                  href="audio/PaleBlueDot/chap-8_the first new planet.mp3"
+                  download
                   ><i class="bi bi-cloud-arrow-down-fill"></i
                 ></a>
               </li>
