diff --git a/fs.html b/fs.html
index 5991fc8..1728c95 100644
--- a/fs.html
+++ b/fs.html
@@ -9,7 +9,10 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
-
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>My Favorite Books Music App</title>
   </head>
   <body class="bg-gray-900 text-gray-300 dark-theme">
@@ -138,45 +141,87 @@ <h3 class="text-lg mt-2">By Mary Shelby</h3>
         >
           <li class="p-2 hover:bg-gray-700" data-src="audio/FS/01.mp3">
             Introduction
+            <a href="audio/FS/01.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/FS/02.mp3">
             Part 2
+            <a href="audio/FS/02.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/FS/03.mp3">
             Part 3
+            <a href="audio/FS/03.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part4.mp3">
             Part 4
+            <a href="audio/part4.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part5.mp3">
             Part 5
+            <a href="audio/part5.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part6.mp3">
             Part 6
+            <a href="audio/part6.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part7.mp3">
             Part 7
+            <a href="audio/part7.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part8.mp3">
             Part 8
+            <a href="audio/part8.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part9.mp3">
             Part 9
+            <a href="audio/part9.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part10.mp3">
             Part 10
+            <a href="audio/part10.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part11.mp3">
             Part 11
+            <a href="audio/part11.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part12.mp3">
             Part 12
+            <a href="audio/part12.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part13.mp3">
             Part 13
+            <a href="audio/part13.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part14.mp3">
             Part 14
+            <a href="audio/part14.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
         </ul>
         <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
diff --git a/index.html b/index.html
index ef74f0c..df7434c 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,10 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>My Favorite Books Music App</title>
   </head>
 
@@ -45,17 +49,26 @@
               />
             </svg>
           </div>
-          <a href="./index.html" class="text-gray-300 hover:text-green-500 my-auto"
+          <a
+            href="./index.html"
+            class="text-gray-300 hover:text-green-500 my-auto"
             >Home</a
           >
 
-          <a href="./index.html" class="text-gray-300 hover:text-green-500 my-auto"
+          <a
+            href="./index.html"
+            class="text-gray-300 hover:text-green-500 my-auto"
             >Previous</a
           >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500 my-auto"
+          <a
+            href="./pbd.html"
+            class="text-gray-300 hover:text-green-500 my-auto"
             >Next</a
           >
-          <button id="theme-toggle" class="text-gray-300 rounded tooltip-parent my-auto tooltip-left">
+          <button
+            id="theme-toggle"
+            class="text-gray-300 rounded tooltip-parent my-auto tooltip-left"
+          >
             <span class="tooltip">Switch theme</span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -99,10 +112,12 @@
     </nav>
 
     <div class="container p-4 w-full">
-
       <p class="text-2xl mt-3 pb-5 ps-3 font-bold">Top Audio Books</p>
 
-      <ul id="audio-books-list" class="space-x-2 space-y-2 flex flex-wrap w-full mx-auto"></ul>
+      <ul
+        id="audio-books-list"
+        class="space-x-2 space-y-2 flex flex-wrap w-full mx-auto"
+      ></ul>
     </div>
 
     <!-- Book Card Display -->
@@ -132,9 +147,21 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>
 
         <!-- Favorite Button -->
         <div class="mt-4 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">Save to Favourites</span></i>
-          <i class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="share-btn"><span class="tooltip">Share</span></i>
-          <i class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="view-comments-btn"><span class="tooltip">View comments</span></i>
+          <i
+            class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+            id="favourite-btn"
+            ><span class="tooltip">Save to Favourites</span></i
+          >
+          <i
+            class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+            id="share-btn"
+            ><span class="tooltip">Share</span></i
+          >
+          <i
+            class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom"
+            id="view-comments-btn"
+            ><span class="tooltip">View comments</span></i
+          >
         </div>
       </div>
       <!-- playlist -->
@@ -145,33 +172,75 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>
           id="playlist"
           class="playlist list-none rounded-lg text-left overflow-auto"
         >
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part1.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part1.mp3"
+          >
             Introduction: God Delusion
+            <a href="audio/part1.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part2.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part2.mp3"
+          >
             Part 2
+            <a href="audio/part2.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part3.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part3.mp3"
+          >
             Part 3
+            <a href="audio/part3.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part4.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part4.mp3"
+          >
             Part 4
+            <a href="audio/part4.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part5.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part5.mp3"
+          >
             Part 5
+            <a href="audio/part5.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part6.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part6.mp3"
+          >
             Part 6
+            <a href="audio/part6.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
-          <li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part7.mp3">
+          <li
+            class="adiobk-sub-item hover:bg-gray-700"
+            data-src="audio/part7.mp3"
+          >
             Part 7
+            <a href="audio/part7.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
         </ul>
 
         <div class="player container rounded-xl">
           <div class="audio-img"></div>
           <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
-        </div> 
+        </div>
 
         <!-- Play/Pause Button with Animation -->
         <div class="mt-4 flex justify-center">
@@ -224,35 +293,43 @@ <h2 class="text-center text-2xl mb-6">Share Your Thoughts</h2>
     <footer class="bg-gray-900 p-4 text-center mt-10">
       <div class="text-gray-500">&copy; 2024 Lisbook | All Rights Reserved</div>
     </footer>
-    
+
     <!-- Template for the book card -->
     <template id="book-card-template">
-
-
-      <li id="audio-book-list-item flex-row items-center" class="md:w-60 w-full">
-        <div class="book-card flex flex-row p-4 sm:p-3 rounded-lg shadow-lg w-full h-full md:flex-col items-center md:items-start">
+      <li
+        id="audio-book-list-item flex-row items-center"
+        class="md:w-60 w-full"
+      >
+        <div
+          class="book-card flex flex-row p-4 sm:p-3 rounded-lg shadow-lg w-full h-full md:flex-col items-center md:items-start"
+        >
           <!-- Cover Image -->
-           <div class="container w-14 md:w-40 md:h-40 flex items-center md:w-full"
-           >
-             <img
-               id="img"
-               src=""
-               alt=""
-               class="rounded-lg w-full h-full aspect-square object-cover"
-             />
-           </div>
+          <div
+            class="container w-14 md:w-40 md:h-40 flex items-center md:w-full"
+          >
+            <img
+              id="img"
+              src=""
+              alt=""
+              class="rounded-lg w-full h-full aspect-square object-cover"
+            />
+          </div>
 
           <!-- Book Details -->
-          <div class="md:mt-2 ps-4 md:px-1 text-wrap flex-col items-center" id="text-content">
-            <p class="md:text-lg text-sm font-medium text-green-500 w-32 truncate sm:w-full align-middle" id="book-title"></p>
+          <div
+            class="md:mt-2 ps-4 md:px-1 text-wrap flex-col items-center"
+            id="text-content"
+          >
+            <p
+              class="md:text-lg text-sm font-medium text-green-500 w-32 truncate sm:w-full align-middle"
+              id="book-title"
+            ></p>
             <p class="text-sm truncate align-middle" id="book-author"></p>
           </div>
         </div>
       </li>
-
     </template>
 
-    
     <!-- JS Scripts -->
     <script src="./script.js"></script>
   </body>
diff --git a/pbd.html b/pbd.html
index afb8563..3094182 100644
--- a/pbd.html
+++ b/pbd.html
@@ -143,30 +143,45 @@ <h3 class="text-lg mt-2">By Carl Sagan</h3>
             data-src="audio/PaleBlueDot/Introduction.mp3"
           >
             Introduction: Pale Blue Dot
+            <a href="audio/PaleBlueDot/Introduction.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li
             class="p-2 hover:bg-gray-700"
             data-src="audio/PaleBlueDot/chap-1.mp3"
           >
             Chapter 1: The Shores of the Cosmic Ocean
+            <a href="audio/PaleBlueDot/chap-1.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li
             class="p-2 hover:bg-gray-700"
             data-src="audio/PaleBlueDot/Chap-2.mp3"
           >
             Chapter 2: One Voice in the Cosmic Fugue
+            <a href="audio/PaleBlueDot/Chap-2.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li
             class="p-2 hover:bg-gray-700"
             data-src="audio/PaleBlueDot/chap-3.mp3"
           >
             Chapter 3: The Harmony of the Worlds
+            <a href="audio/PaleBlueDot/chap-3.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li
             class="p-2 hover:bg-gray-700"
             data-src="audio/PaleBlueDot/chap-4.mp3"
           >
             Chapter 4: Heaven and Hell
+            <a href="audio/PaleBlueDot/chap-4.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
         </ul>
         <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
diff --git a/rdpd.html b/rdpd.html
index 73f9ecd..98f0654 100644
--- a/rdpd.html
+++ b/rdpd.html
@@ -9,6 +9,10 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>My Favorite Books Music App</title>
   </head>
   <body class="bg-gray-900 text-gray-300 dark-theme">
@@ -141,45 +145,87 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
         >
           <li class="p-2 hover:bg-gray-700" data-src="audio/part1.mp3">
             Introduction: God Delusion
+            <a href="audio/part1.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part2.mp3">
             Part 2
+            <a href="audio/part2.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part3.mp3">
             Part 3
+            <a href="audio/part3.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part4.mp3">
             Part 4
+            <a href="audio/part4.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part5.mp3">
             Part 5
+            <a href="audio/part5.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part6.mp3">
             Part 6
+            <a href="audio/part6.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part7.mp3">
             Part 7
+            <a href="audio/part7.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part8.mp3">
             Part 8
+            <a href="audio/part8.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part9.mp3">
             Part 9
+            <a href="audio/part9.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part10.mp3">
             Part 10
+            <a href="audio/part10.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part11.mp3">
             Part 11
+            <a href="audio/part11.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part12.mp3">
             Part 12
+            <a href="audio/part12.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part13.mp3">
             Part 13
+            <a href="audio/part13.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
           <li class="p-2 hover:bg-gray-700" data-src="audio/part14.mp3">
             Part 14
+            <a href="audio/part14.mp3" download
+              ><i class="fa fa-download" style="font-size: 24px"></i
+            ></a>
           </li>
         </ul>
         <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
