diff --git a/assets/css/style.css b/assets/css/style.css
index 274e0517..dce40533 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1436,13 +1436,17 @@ body.dark-mode .chapter-card:hover {
 /*-----------------------------------*\
   #PRICING
 \*-----------------------------------*/
-
+ 
 #pricing .container {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  width: 97%;
-  padding: 20px 0px;
+
+  margin-top:  20px;
+  margin-bottom:  20px;
+  width:  97%;
+  padding:  20px 0px;
+  margin-left:  100px;
+
 }
+
 .pricing-card {
   box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
   padding: 40px 50px;
diff --git a/assets/html/about.html b/assets/html/about.html
index 706b4055..6f675f1a 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -710,9 +710,7 @@
           </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>
diff --git a/index.html b/index.html
index 80abd661..f10bd8af 100644
--- a/index.html
+++ b/index.html
@@ -3029,201 +3029,62 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
 
     <div class="container mobile-container-styles">
 
-      <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: 15rem; margin:0px 0px 0px -10px;">
-        </a>  
-          <li class="navbar-item">
-             <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link> 
-              <lord-icon
-              src="https://cdn.lordicon.com/qeltvbrs.json"
-              trigger="hover"
-              colors="primary:#e88c30,secondary:#a30f17"
-              style="width:25px;height:25px">
-            </lord-icon> 
-            Home</a>
-          </li>
-           <li class="navbar-item">
-                <a href="./assets/html/about.html"  class="navbar-link" data-nav-link><script src="https://cdn.lordicon.com/lordicon.js"></script>
-                  <lord-icon
-                      src="https://cdn.lordicon.com/fozsorqm.json"
-                      trigger="hover"
-                      stroke="bold"
-                      state="hover-up"
-                      colors="primary:#a30f17,secondary:#e88c30"
-                      style="width:30px;height:30px"></lord-icon>
-                 About</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" id="login-signup-link">
-                  <a href="./assets/html/login.html" class="navbar-link">Create Account</a>
-                </li>
-            <!-- <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 class="navbar-item">
-            <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/jibxifeu.json"
-              trigger="hover"
-              state="hover-up"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon> Benefits</a>
-
-          </li>
-
-          <li class="navbar-item">
-            <a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/bhmovrlt.json"
-              trigger="hover"
-              state="morph-open"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon>  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><img src="./assets/images/telephone.png" height="25px" width="25px"/> Contact</a>
-            </li> 
-            
+      <nav class="navbar nav_activated" data-navbar>
+        <ul class="navbar-list nav">
+            <li class="navbar-item logo-item" style="display:flex;">
+                <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo">
+                    <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
+                </a>
+            </li>
+            <li class="navbar-item" style="margin-right: -30px;"></li>
+                <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="#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
-                <script src="https://cdn.lordicon.com/lordicon.js"></script>
-                <lord-icon
-                    src="https://cdn.lordicon.com/motnbmtz.json"
-                    trigger="hover"
-                    stroke="bold"     
-                    colors="primary:#a30f17,secondary:#e88c30"
-                    style="width:25px;height:25px">
-                </lord-icon> FAQ
-              </a>
-          </li> 
-
-          <li class="navbar-item"> 
-            <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
-          </li> 
-            <a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">
-            <lord-icon
-             src="https://cdn.lordicon.com/jxjfjyri.json"
-             trigger="morph"
-             stroke="bold"
-             state="morph-select"
-             colors="primary:#eeaa66,secondary:#e88c30"
-             style="width:25px;height:25px">
-            </lord-icon>  Rate</a></li>
-
- 
+                <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="#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="#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>
             <li class="navbar-item" id="login-signup-link">
-              <a href="./assets/html/event.html" class="navbar-link"><script src="https://cdn.lordicon.com/lordicon.js"></script>
-                <lord-icon
-                    src="https://cdn.lordicon.com/kvuyljqb.json"
-                    trigger="hover"
-                    stroke="bold"
-                    colors="primary:#eeaa66,secondary:#e88c30"
-                    style="width:25px;height:25px">
-                </lord-icon> Events</a>
+                <a href="./assets/html/login.html" class="navbar-link">Login</a>
+            </li>
+            <li class="navbar-item" id="login-signup-link">
+                <a href="comsp.html" class="navbar-link">Community Spotlight</a>
+            </li>
+            <li class="navbar-item">
+                <a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
+                    <i class="ri-bar-chart-fill"></i> Audio<br> Books
+                </a>
+            </li>
+            <li>
+                <div class="action">
+                    <div class="profile" onclick="menuToggle();">
+                        <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+                    </div>
+                </div>
             </li>
+        </ul>
+    </nav>
+     
           
-          <li class="navbar-item" id="login-signup-link">
-            <a href="../html/login.html" class="navbar-link">
-              <lord-icon
-              src="https://cdn.lordicon.com/xfzuyvam.json"
-              trigger="morph"
-              state="morph-group"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon> Login/Signup</a>
-          </li> 
-          <li class="navbar-item" id="login-signup-link">
-            <a href="comsp.html" class="navbar-link"><script src="https://cdn.lordicon.com/lordicon.js"></script>
-              <lord-icon
-                  src="https://cdn.lordicon.com/fqbvgezn.json"
-                  trigger="hover"
-                  stroke="bold"
-                  colors="primary:#a30f17,secondary:#e88c30"
-                  style="width:37px;height:37px">
-              </lord-icon>Community Spotlight</a>
-          </li>
-
-          <li class="navbar-item">
-              <a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
-                <script src="https://cdn.lordicon.com/lordicon.js"></script>
-                <lord-icon
-                    src="https://cdn.lordicon.com/vycwlttg.json"
-                    trigger="hover"
-                    stroke="bold"
-                    colors="primary:#a30f17,secondary:#e88c30"
-                    style="width:25px;height:25px">
-                </lord-icon> Audio<br> Books
-              </a>
-          </li> -->
-           <!-- New Dropdown Menu for More -->
-    <li class="navbar-item dropdown">
-      <a href="#" class="navbar-link dropdown-toggle" onclick="toggleDropdown(event)">More <span class="arrow" id="arrow" style="display: inline;">&#9660;</span></a>
-      <ul class="dropdown-menu">
-          <li class="dropdown-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="dropdown-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="dropdown-item">
-              <a href="#faq" onclick="lenis.scrollTo('#faq')" class="navbar-link" data-nav-link>
-                  <i class="ri-questionnaire-fill"></i> FAQ
-              </a>
-          </li>
-          <li class="dropdown-item">
-              <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
-          </li>
-          <li class="dropdown-item" id="login-signup-link">
-              <a href="./assets/html/event.html" class="navbar-link">Events</a>
-          </li>
-          <li class="dropdown-item" id="login-signup-link">
-              <a href="comsp.html" class="navbar-link">Community Spotlight</a>
-          </li>
-      </ul>
-  </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>
                 function toggleDropdown(event) {
                     event.preventDefault();
@@ -4909,15 +4770,21 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
   text-decoration: underline;
   transition: ease-in;
 }
+.donate-books-section{
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
 
-.container {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 2rem;
+.donate-books-section .container {
+  display: grid;
+  margin: 120px;
+  grid-template-columns: repeat(3, 1fr); /* 3 columns */
+  width: 100%;
 }
 
 .card {
+ main
   margin: 1.5rem;
   border-bottom: 0.5rem solid #A30F17;
   border-radius: 1rem;
@@ -4926,6 +4793,15 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
   height: 50rem;
   background-color: rgba(255, 255, 255, 0.9);
   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+
+  background-color: #fff;
+  border-radius: 10px;
+  height: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+ main
 }
 
 .card img {
@@ -4984,6 +4860,7 @@ <h1>Donate Books</h1>
   <br>
   <div class="container">
 
+
     
     <!-- Card 1 -->
     <div class="card" onmouseover="hoverCard(this)" onmouseout="unhoverCard(this)">
@@ -5017,9 +4894,47 @@ <h3 class="card-sty">Organizations</h3>
         <p class="card-text">Help the organizations by donating books to support their educational programs.</p>
         <div class="button-container">
           <a href="./assets/html/ngo.html" class="donate-button" style="margin-bottom:10rem;">Donate to Organizations</a>
+ main
         </div>
       </div>
   </div>
+
+          </div>
+          </div>
+          </div>
+
+    <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto; ">
+          <img src="./assets/images/images/lib.jpg" alt="Library Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
+          <div class="card-body">
+              <h3 class="card-sty" style="text-align: center;">Library</h3>
+              <p class="card-text" style="font-style: italic;">Donate your books to local libraries and help foster a love for reading in your community.</p>
+              <div class="button-container">
+                  <a href="./assets/html/donate.html" class="donate-button">Donate to Libraries</a>
+              </div>
+          </div>
+      </div>
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto;">
+          <img src="./assets/images/images/school.png" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
+          <div class="card-body">
+              <h3 class="card-sty" style="text-align: center;">Schools</h3>
+              <p class="card-text" style="font-style: italic;">Support children's education by donating books to nearby schools for students of all ages.</p>
+              <div class="button-container">
+                  <a href="./assets/html/school.html" class="donate-button">Donate to Schools</a>
+              </div>
+          </div>
+      </div>
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto;">
+          <img src="./assets/images/images/ngo.jpeg" alt="Organization Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
+          <div class="card-body">
+              <h3 class="card-sty" style="text-align: center;">Organizations</h3>
+              <p class="card-text" style="font-style: italic;">Donate books to support educational programs of NGOs and other organizations.</p>
+              <div class="button-container">
+                  <a href="./assets/html/ngo.html" class="donate-button">Donate to Organizations</a>
+              </div>
+          </div>
+      </div>
+
+ main
 </div>
 
 <script>
@@ -5066,8 +4981,55 @@ <h3>Rate Us</h3>
 
 <div id="toastMessage" class="toast-message"></div>
 
+ main
+    <script>
+     document.addEventListener("DOMContentLoaded", function() {
+
+
+
+<!-- JavaScript for form submission -->
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+
+
+
+      <!-- rate us -->
+
+
+       <!-- Rate Us Component -->
+       <div id="rate-us">
+        <div class="heading">
+            <h3>Rateus</h3>
+            <p>Tell us about your experience!</p>
+        </div>
+    
+        <div class="stars">
+            <input type="radio" id="star5" name="rate" value="5" />
+            <label for="star5">😭</label>
+            <input type="radio" id="star4" name="rate" value="4" />
+            <label for="star4">😢</label>
+            <input type="radio" id="star3" name="rate" value="3" />
+            <label for="star3">😐</label>
+            <input type="radio" id="star2" name="rate" value="2" />
+            <label for="star2">😊</label>
+            <input type="radio" id="star1" name="rate" value="1" />
+            <label for="star1">😍</label>
+        </div>
+    
+        <div class="feedback-container">
+            <textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
+        </div>
+    
+        <div class="button">
+          
+            <center><button id="submit-btn">Submit</button></center>
+        </div>
+    </div>
+    
+    <div id="toastMessage" class="toast-message"></div>
     <script>
      document.addEventListener("DOMContentLoaded", function() {
+main
     const toastMessage = document.getElementById("toastMessage");
 
     document.getElementById("submit-btn").addEventListener("click", function(event) {
@@ -5231,7 +5193,7 @@ <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
     </article>
   </main>
 
-  <!-- --Testimonials -->
+  
 
   <h2 class="h2 section-title has-underline" style="margin-top: 10.5rem;">
     Testimonials