diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
index 80c1c71b..00197100 100644
--- a/assets/html/booklistswap.html
+++ b/assets/html/booklistswap.html
@@ -372,14 +372,13 @@
             <a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
                 class="ri-home-fill"></i> Home</a>
           </li>
-           <li class="navbar-item">
-                <a href="../html/about.html"  class="navbar-link" data-nav-link><i
-                    class="ri-home-fill"></i> About Us </a>
-              </li>
-              
           <li class="navbar-item">
-            <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
-                class="ri-bar-chart-fill"></i> Benefits</a>
+            <a href="../html/about.html" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> About Us </a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link"
+              data-nav-link><i class="ri-bar-chart-fill"></i> Benefits</a>
           </li>
 
           <li class="navbar-item">
@@ -390,21 +389,22 @@
           <li class="navbar-item">
             <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                 class="ri-customer-service-2-fill"></i> Contact</a>
-            </li>
-            <li class="navbar-item">
-              <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
-                  <i class="ri-questionnaire-fill"></i> FAQ
-              </a>
+          </li>
+          <li class="navbar-item">
+            <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
+              <i class="ri-questionnaire-fill"></i> FAQ
+            </a>
           </li>
 
           <li class="navbar-item">
-            <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
-           
+            <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+          </li>
+
           <li class="navbar-item" id="login-signup-link">
             <a href="../html/login.html" class="navbar-link">Login/Signup</a>
           </li>
-          
-          
+
+
           <li class="navbar-item dropdown" id="more-dropdown">
             <a href="#" class="navbar-link" id="more-link">More
               <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
@@ -415,14 +415,15 @@
 
               <ul class="dropdown-menu-list">
                 <li>
-                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
+                  <a href="chat.html" class="navbar-link"
+                    style="font-family: sans-serif; color: black; margin-bottom: 5px;">
                     Community chat
-                </a>
+                  </a>
                 </li>
-                
+
                 <li class="dropdown-menu-item">
-                  <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
-                      class="ri-price-tag-3-fill"></i> Pricing</a>
+                  <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link"
+                    data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
                 </li>
                 <li class="dropdown-menu-item">
                   <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
@@ -437,10 +438,12 @@
                     data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
+                  <a href="../html/read_later.html" class="navbar-link" data-nav-link><i
+                      class="ri-price-tag-3-fill"></i>Read Later</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
+                  <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i
+                      class="ri-price-tag-3-fill"></i>Reader Connection</a>
                 </li>
                 <li class="dropdown-menu-item">
                   <a href="../html/about.html" class="navbar-link">About</a>
@@ -449,76 +452,76 @@
             </div>
           </li>
           <li>
-          <div class="action">
-            <div class="profile" onclick="menuToggle();">
-              <img id="profile-avatar" src="../images/avatar1.jpg" />
-            </div>
-            <div class="menu">
-              <h3>XYZ<br /><span>Book Lover</span></h3>
-              <ul>
-                <li>
-                  <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
-                </li>
-                <li>
-                  <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
-                </li>
-                <li>
-                  <img src="../images/inbox.png" /><a href="#">Inbox</a>
-                </li>
-                <li>
-                  <img src="../images/settings.png" /><a href="#">Settings</a>
-                </li>
-                <li><img src="../images/help.png" /><a href="#">Help</a></li>
-                <li>
-                  <img src="../images/logout.png" /><a href="#">Logout</a>
-                </li>
-              </ul>
-            </li>
-              </div>
-            </ul>
+            <div class="action">
+              <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="../images/avatar1.jpg" />
               </div>
-              <script>
-               document.addEventListener("DOMContentLoaded", () => {
-    const savedAvatar = localStorage.getItem("selectedAvatar");
-    if (savedAvatar) {
-        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
-    }
-});
-
-        
-                function menuToggle() {
-                    const toggleMenu = document.querySelector(".menu");
-                    toggleMenu.classList.toggle("active");
-                }
-            </script>
-          <!-- Google Translate Element -->
-          <!-- <li class="navbar-item">
+              <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                  <li>
+                    <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/inbox.png" /><a href="#">Inbox</a>
+                  </li>
+                  <li>
+                    <img src="../images/settings.png" /><a href="#">Settings</a>
+                  </li>
+                  <li><img src="../images/help.png" /><a href="#">Help</a></li>
+                  <li>
+                    <img src="../images/logout.png" /><a href="#">Logout</a>
+                  </li>
+                </ul>
+          </li>
+    </div>
+    </ul>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const savedAvatar = localStorage.getItem("selectedAvatar");
+        if (savedAvatar) {
+          document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+        }
+      });
+
+
+      function menuToggle() {
+        const toggleMenu = document.querySelector(".menu");
+        toggleMenu.classList.toggle("active");
+      }
+    </script>
+    <!-- Google Translate Element -->
+    <!-- <li class="navbar-item">
             <div id="google_element"></div>
           </li> -->
-        </ul>
-        <!-- <div class="hamburger">
+    </ul>
+    <!-- <div class="hamburger">
           <div class="line"></div>
           <div class="line"></div>
           <div class="line"></div>
         </div> -->
-      </nav>
-      <div id="mobile_View_Menu">
-        <span id="menu_lines"></span>
-       </div>
+    </nav>
+    <div id="mobile_View_Menu">
+      <span id="menu_lines"></span>
+    </div>
     <script>
-        let menu=document.getElementById('mobile_View_Menu')
-        let navbar_con=document.querySelector('.navbar')
-        menu.addEventListener('click',()=>{
-          if(menu.classList.contains('open_menu')){
-            menu.classList.remove('open_menu')
-            navbar_con.classList.add('nav_activated')
-          }
-          else{
-            menu.classList.add('open_menu')
-            navbar_con.classList.remove('nav_activated')
-          }
-        })
-      </script>
+      let menu = document.getElementById('mobile_View_Menu')
+      let navbar_con = document.querySelector('.navbar')
+      menu.addEventListener('click', () => {
+        if (menu.classList.contains('open_menu')) {
+          menu.classList.remove('open_menu')
+          navbar_con.classList.add('nav_activated')
+        }
+        else {
+          menu.classList.add('open_menu')
+          navbar_con.classList.remove('nav_activated')
+        }
+      })
+    </script>
     <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
     <script>
       function loadGoogleTranslate() {
@@ -549,12 +552,12 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
       // }
 
 
-  window.addEventListener("scroll", onScroll);
-</script>
+      window.addEventListener("scroll", onScroll);
+    </script>
+
 
 
 
-    
     <!-- <div class="switch-toggle-container">
 
 
@@ -572,28 +575,28 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
         </label>
       </div> -->
 
-      <!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
+    <!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
         <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>
 
         <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
       </button> -->
-      <div class="switch-container" style="top: 15px;">
-        <input type="checkbox" id="switch" class="switch-checkbox">
-        <label for="switch" class="switch-label">
-          <div class="switch-button">
-            <span class="material-icons sun-icon">wb_sunny</span>
-            <span class="material-icons moon-icon">brightness_2</span>
-          </div>
-        </label>
-      </div>
+    <div class="switch-container" style="top: 15px;">
+      <input type="checkbox" id="switch" class="switch-checkbox">
+      <label for="switch" class="switch-label">
+        <div class="switch-button">
+          <span class="material-icons sun-icon">wb_sunny</span>
+          <span class="material-icons moon-icon">brightness_2</span>
+        </div>
+      </label>
+    </div>
     </div>
 
 
 
     </div>
   </header>
-         
-  
+
+
   <style>
     .dark-mode .book_title {
       color: white;
@@ -800,6 +803,44 @@ <h2>Quick Links</h2>
             right: 12px;
             top: 10px;
           }
+
+          /* Dark mode styles for book list container */
+          body.dark-mode #container5,
+          body.dark-mode #container5 h2,
+          body.dark-mode #container5 input,
+          body.dark-mode #container5 .book-item {
+            color: #ffffff;
+            /* Set text color to white in dark mode */
+          }
+
+          /* Style input fields in dark mode */
+          body.dark-mode #container5 input {
+            background-color: #333;
+            /* Darker background for input fields */
+            border-color: #555;
+            /* Darker border for input fields */
+          }
+
+          /* Maintain original color for "Add to List" button in dark mode */
+          body.dark-mode #container5 #book-form button {
+            background-color: var(--old-rose);
+            /* Keep original background color */
+            color: var(--white);
+            /* Ensure text is white for visibility */
+          }
+
+          /* Style for remove button in dark mode */
+          body.dark-mode #container5 .remove-btn {
+            background-color: #c27a7e;
+            /* Light red background */
+            color: white;
+            /* White text */
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+            font-size: 14px;
+            /* Adjust as needed */
+          }
         </style>
 
         <div class="icons">
@@ -895,7 +936,7 @@ <h3>${title}</h3>
                         <p><strong>Author:</strong> ${author}</p>
                         <p><strong>Genre:</strong> ${genre}</p>
                     </div>
-                    <button class="remove-btn">-</button>
+                    <button class="remove-btn">Remove</button> <!-- Changed from '-' to 'Remove' for clarity -->
                     <div class="interested-users">
                         <h4>Interested Bookworm</h4>
                         <form class="interested-form">