diff --git a/assets/html/comsp.html b/assets/html/comsp.html
index bc2874a3..168f7df0 100644
--- a/assets/html/comsp.html
+++ b/assets/html/comsp.html
@@ -601,151 +601,283 @@
           /* Increase the top margin of each item */
         }
       </style>
-      <header class="header header-anim nav-h" data-header>
-    
-        <div class="container mobile-container-styles" style="padding-left: 0;">
-    
-          <nav class="navbar nav_activated" data-navbar>
-    
-    
-            <ul class="navbar-list nav">
-              <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-                <img src="../images/final.png" class="logopic" style=" width: 150px;">
-              </a>
-              <li class="navbar-item">
-                <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>
-              </li>
-    
-              <li class="navbar-item">
-                <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
-                    class="ri-bar-chart-fill"></i> Genre</a>
-              </li>
-    
-              <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>
+  <header class="header header-anim nav-h" data-header>
 
-                </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>
-               
-              <li class="navbar-item" id="login-signup-link">
-                <a href="..//html/login.html" class="navbar-link">Login/Signup</a>
-              </li>
-              
-              
+    <div class="container mobile-container-styles" style="padding-left: 0;">
+
+      <nav class="navbar nav_activated" data-navbar>
 
+
+        <ul class="navbar-list nav">
+          <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+            <img src="./assets/images/final.png" class="logopic" style=" width: 150px;">
+          </a>
+          <li class="navbar-item">
+            <a href="#home" 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="./assets/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#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
+              
+          <li class="navbar-item">
+            <a href="#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">
+            <a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
+                class="ri-bar-chart-fill"></i> Genre</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="#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="#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>
-    
-              <li class="navbar-item" id="login-signup-link">
-                <a href="../html/login.html" class="navbar-link">Login/Signup</a>
-              </li>
-    
-    
+              </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"
-                    viewBox="0 0 24 24">
-                    <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
-                  </svg></a>
-                <div class="dropdown-menu" id="dropdown-menu">
-    
-                  <ul class="dropdown-menu-list">
-                    <li>
-                      <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
-                        Community chat
-                    </a>
-                    </li>
-                    
-                    <li class="dropdown-menu-item">
-                      <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
-
-                      <a href="chat.html" class="navbar-link"
-                        style="font-family: sans-serif; color: black; margin-bottom: 5px;">
-                        Community chat
-                      </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>
-
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/book_recommend.html" class="navbar-link" data-nav-link>
-                        <i class="ri-customer-service-2-fill"></i> Book Recommendation
-                      </a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
-                        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>
-                    </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/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>
-
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/about.html" class="navbar-link">About</a>
-                    </li>
-                  </ul>
-                </div>
+          <li class="navbar-item">
+            <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
+            <li class="navbar-item" id="login-signup-link">
+              <a href="./assets/html/event.html" class="navbar-link">Events</a>
             </li>
-            </ul>
-          </nav>
-        <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')
-              }
-            })
-      window.addEventListener("scroll", onScroll);
-    </script>
-        </div>
-      </header>
+          <li class="navbar-item" id="login-signup-link">
+            <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
+          </li>
+          <li class="navbar-item" id="login-signup-link">
+            <a href="./assets/html/comsp.html" class="navbar-link">Community Spotlight</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"
+                viewBox="0 0 24 24">
+                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
+              </svg></a>
+            <div class="dropdown-menu" id="dropdown-menu">
+
+              <ul class="dropdown-menu-list">
+                <li>
+                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; margin-bottom: 5px;">
+                    Community chat
+                </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/literaryrealms.html" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
+                      class="ri-medal-fill"></i> Literary Realms</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/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="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="/assets/html/book_recommend.html" class="navbar-link" data-nav-link>
+                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
+                  </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/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="./assets/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="./assets/html/quiz.html" class="navbar-link">Quizes</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/read.html" class="navbar-link">Reading Challenge</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/blog.html" class="navbar-link">Community Blogs</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/borrow.html" class="navbar-link">BookLend</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/about.html" class="navbar-link">About</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+              <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+              <h3>XYZ<br /><span>Book Lover</span></h3>
+              <ul>
+                <li>
+                  <img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a>
+                </li>
+                <li>
+                  <img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a>
+                </li>
+                <li>
+                  <img src="./assets/images/inbox.png" /><a href="#">Inbox</a>
+                </li>
+                <li>
+                  <img src="./assets/images/settings.png" /><a href="#">Settings</a>
+                </li>
+                <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                <li>
+                  <img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a>
+                </li>
+              </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");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
+<div id="modal">
+  <form class="modal-box">
+    <img src="https://st2.depositphotos.com/4103319/6625/i/450/depositphotos_66251761-stock-photo-logout-circular-icon-on-white.jpg" class="logout-img"/>
+    <h1>Logout Account</h1>
+    <p class="logout-que">Are you sure you want to log out ?</p>
+    <div class="close-logout-btn">
+      <button class="cancel-logout-btn">Cancel</button>
+      <button class="out-logout-btn">Log Out</button>
+    </div>
+  </form>
+</div>
+
+<script src="../../logout.js"></script>
+
+          <!-- Google Translate Element -->
+          <!-- <li class="navbar-item">
+            <div id="google_element"></div>
+          </li> -->
+        </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>
+    <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>
+  
+    <div className="wrapper col-md-3 col-12" style= "justify-Content: 'center'; display: 'flex'">
+
+            <div id="google_element"></div>
+            <Script
+              src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
+              strategy="afterInteractive"/>
+            <Script
+              id="google-translate"
+              strategy="afterInteractive"
+              dangerouslySetInnerHTML={{
+                __html: `
+                  function loadGoogleTranslate() {
+                    new google.translate.TranslateElement({
+                      pageLanguage: 'en'
+                    }, 'google_element');
+                  }
+                `,
+              }}
+            />
+          </div>
+    <script>
+      // const hamburger=document.querySelector('.hamburger');
+      // const head=document.querySelector('.header');
+      // const nav=document.querySelector('.nav');
+      // hamburger.addEventListener('click',()=>{
+      //   head.classList.toggle('nav-h');
+      //   nav.classList.toggle('vis-h');
+      // })
+      // let lastScrollTop = 0;
+      // function onScroll() {
+      //     let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+      //     const header = document.querySelector('.header');
+
+      //     if (currentScroll > lastScrollTop) {
+      //         header.classList.add('hidden');
+      //     } else {
+      //         header.classList.remove('hidden');
+      //     }
+      //     lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
+      // }
+
+
+  window.addEventListener("scroll", onScroll);
+</script>
+      <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>
       
     <main>
       <section class="community-spotlight">