diff --git a/README.md b/README.md
index e45e6578..45ce77eb 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,34 @@ SwapReads.com is the solution to common challenges faced by book enthusiasts in
 
 <hr>
 
+## Table of Contents
+1. [Introduction](#about-us)
+2. [Featured In](#featured-in)
+3. [The Problem](#the-problem)
+4. [How SwapReads.com Solves These Problems](#how-swapreadscom-solves-these-problems)
+5. [Tech Stacks](#-tech-stacks)
+6. [Contribution](#contribution)
+7. [Open Innovation Challenge](#open-innovation-challenge)
+8. [Contact Us](#-contact-us)
+9. [Code of Conduct](#code-of-conduct)
+10. [Support Our Project](#support-our-project)
+11. [Contributors](#our-contributors)
+12. [Website Preview](#-website-preview)
+12. [Stargazers](#stargazers)
+13. [Forkers](#forkers)
+
+<hr>
+
+## About Us
+
+[SwapReads](https://swapreadsconnect.netlify.app/#) is a vibrant online platform dedicated to connecting book lovers from around the world. Our mission is to make reading more accessible, affordable, and sustainable by enabling readers to exchange books and discover new literary adventures.
+
+In today’s fast-paced world, we understand the challenges faced by book enthusiasts—ranging from limited access to diverse books, high costs, to the environmental impact of book production. At SwapReads.com, we address these concerns by creating a community where members can swap their books, exchange personalized recommendations, and engage in meaningful discussions with fellow readers.
+
+We believe in fostering a global community of readers who are passionate about sharing knowledge, expanding their literary horizons, and reducing waste through book exchanges. SwapReads.com promotes sustainable reading habits while creating a trusted, social environment for book lovers to connect and thrive.
+
+Join us today and explore a world where books are exchanged, friendships are formed, and new adventures are just a swap away!
+
 ## Featured In
 
 <table>
@@ -67,6 +95,11 @@ SwapReads.com is the solution to common challenges faced by book enthusiasts in
       <td>GirlScript Summer of Code 2024</td>
       <td>GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.</td>
    </tr>
+   <tr>
+      <td><img src="./assets/hacktoberfest.png" width="200" height="auto" loading="lazy" alt="Hacktoberfest 2024"/></td>
+      <td>Hacktoberfest 2024</td>
+      <td>Hacktoberfest is a month-long celebration of open source software run by DigitalOcean, GitHub, and Twilio. It encourages contributions to open source projects and promotes a global community of developers.</td>
+      </tr>
 
 </table>
 
@@ -121,9 +154,15 @@ SwapReads.com is the solution to common challenges faced by book enthusiasts in
 
 <hr>
 
-<div>
-  <h2><img src="https://github.com/Meetjain1/wanderlust/assets/133582566/90f3930e-5a12-4a4e-8ac9-0dc7d5396adb" width="35" height="35"> Ready to Contribute?</h2>
-</div>
+ ## <img src="https://github.com/Meetjain1/wanderlust/assets/133582566/90f3930e-5a12-4a4e-8ac9-0dc7d5396adb" width="35" height="35"> Contribution
+
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- If you have any suggestions for the project, such as reporting a bug, improving the UI, or enhancing the README.md file, feel free to **open an issue** to discuss it or directly create a pull request with the necessary changes.
+- Please make sure to check your spelling and grammar.
+- Create individual pull requests for each suggestion to keep changes focused and manageable.
+
+Your involvement helps to improve the project and make it better for everyone. Thank you for your contributions!
 
 Kindly go through [CONTRIBUTING.md](CONTRIBUTING.md) to understand everything from setup to contributing guidelines.
 
@@ -131,16 +170,14 @@ If you would like to contribute to the project, please follow our contribution g
 
 <hr>
 
-### **Open Innovation Challenge:**
+## Open Innovation Challenge
 
 SwapReads.com actively participates in the Open Innovation Challenge by cultivating a global community of readers. Our platform champions open access to a wide range of books, promotes sustainable reading habits through book swapping, and harnesses user-generated content to offer personalized recommendations. With community-driven discussions and data-driven optimizations, SwapReads.com is committed to advancing the goals of inclusivity, sustainability, and collaborative innovation in the world of literature.
 
 Join SwapReads.com today and embark on a literary journey like never before!
 
-<hr>
-<div>
-  <h2>🔗 Contact Us</h2>
-</div>
+
+##  <h2>🔗 Contact Us</h2>
 
 <table>
     <tr>
@@ -184,11 +221,17 @@ Join SwapReads.com today and embark on a literary journey like never before!
 <hr>
 
 <!-- Code of conduct -->
-<div>
-<h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct</h2>
-</div>
 
-Please note that this project is released with a [Contributor Code of Conduct](./CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+## <h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct</h2>
+
+We are committed to fostering a welcoming and inclusive environment for everyone. All contributors and participants are expected to uphold the following values:
+
+- Be respectful of different viewpoints and experiences.
+- Show empathy toward others.
+- Use inclusive language.
+
+Please read and follow our [Code of Conduct](Code_of_Conduct.md) to foster an inclusive community.
+If anyone violates these standards, they may be banned from the community.
 
 <hr>
 
@@ -197,13 +240,37 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
 
 <hr>
 
-<div>
-  <h2 align = "center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35">Our Contributors</h2>
-  <div align = "center">
+##  <h2 align = "center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35">Our Contributors</h2>
  <h3>Thank you for contributing to our repository</h3>
 
 ![Contributors](https://contrib.rocks/image?repo=anuragverma108/SwapReads)
 
-### Show some ❤️ by starring this awesome repository!
+# 📸 Website Preview
+<img src="./home.png" />
+<img src="./benefits.png" />
+<img src="./genre.png" />
+
+🌐 **Visit our website:** [SwapReads](https://swapreadsconnect.netlify.app/#)
+
+## Stargazers
+
+<div align='center'>
+
+[![Stargazers repo roster for @anuragverma108/SwapReads](https://reporoster.com/stars/anuragverma108/SwapReads)](https://github.com/anuragverma108/SwapReads/stargazers)
 
 </div>
+
+## Forkers
+<div align='center'>
+
+[![Forkers repo roster for @anuragverma108/SwapReads](https://reporoster.com/forks/anuragverma108/SwapReads)](https://github.com/anuragverma108/SwapReads/network/members)
+
+</div>
+
+<div align="center">
+    <a href="#top">
+        <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
+    </a>
+</div>
+
+### Show some ❤️ by starring this awesome repository!
diff --git a/assets/css/login.css b/assets/css/login.css
index 353038b4..f5c12a85 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -1037,6 +1037,14 @@ footer {
   font-size: 1.5rem;
 }
 
+.foot-quick:hover {
+  color: #000000; /* Change to white for clear visibility */
+}
+
+.foot-quick:hover i, .foot-quick:hover p {
+  color: #000000; /* White for better visibility on hover */
+}
+
 .foot-middle {
   font-size: 1rem;
   text-align: center;
diff --git a/assets/hacktoberfest.png b/assets/hacktoberfest.png
new file mode 100644
index 00000000..3756d972
Binary files /dev/null and b/assets/hacktoberfest.png differ
diff --git a/audiobook.html b/audiobook.html
index 821e7c07..955cee47 100644
--- a/audiobook.html
+++ b/audiobook.html
@@ -35,6 +35,115 @@
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
     <title>Audio Books</title>
     <style>
+/* Header Styles */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px 40px;
+    background-color: #e28989;
+    border-bottom: 1px solid #ddd;
+}
+
+.header .container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.logo img {
+    width: 500px;
+    
+}
+
+.navbar {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+}
+
+.navbar-list {
+    display: flex;
+    list-style: none;
+    padding: 1;
+    margin: 0;
+}
+
+.navbar-item {
+    margin: 0 40px;
+}
+
+.navbar-link {
+    text-decoration: none;
+    font-size: 18px;
+    color: #333;
+    transition: color 0.3s;
+}
+
+.navbar-link:hover {
+    color: #b44343;
+}
+
+.action {
+    display: flex;
+    align-items: center;
+}
+
+.profile img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.menu {
+    display: none;
+    position: absolute;
+    top: 70px;
+    right: 20px;
+    background-color: #fff;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.profile:hover + .menu, .menu:hover {
+    display: block;
+}
+
+.menu h3 {
+    margin: 0;
+    font-size: 16px;
+    text-align: center;
+}
+
+.menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+    text-align: center;
+}
+
+.menu ul li {
+    margin-bottom: 10px;
+}
+
+.menu ul li a {
+    text-decoration: none;
+    color: #333;
+    font-size: 14px;
+    transition: color 0.3s;
+}
+
+.menu ul li a:hover {
+    color: #b44343;
+}
+
+
+
+
+
+
         body {
             font-family: Arial, sans-serif;
             margin: 0;
@@ -112,6 +221,25 @@
 </head>
 <body>
 
+    <header class="header">
+        <div class="container">
+            <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+                <img src="./assets/images/final.png" class="logopic" style=" width: 4rem; margin:0px 10px 1px 10px;">
+              </a>
+            <nav class="navbar">
+                <ul class="navbar-list">
+                    <li class="navbar-item"><a href="index.html" class="navbar-link">Home</a></li>
+                    <li class="navbar-item"><a href="books.html" class="navbar-link">Books</a></li>
+                    <li class="navbar-item"><a href="../SwapReads/index.html#genre" class="navbar-link">Genres</a></li>
+                    <li class="navbar-item"><a href="../SwapReads/assets/html/about.html" class="navbar-link">About</a></li>
+                </ul>
+            </nav>
+           
+                </div>
+            
+    </header>
+    
+
 <section>
     <h1>Audiobook Haven: Listen Anytime, Anywhere"</h1>
     <p>Expand Your Mind with Every Listen</p>
diff --git a/benefits.png b/benefits.png
new file mode 100644
index 00000000..bb421a63
Binary files /dev/null and b/benefits.png differ
diff --git a/genre.png b/genre.png
new file mode 100644
index 00000000..75fee9ff
Binary files /dev/null and b/genre.png differ
diff --git a/home.png b/home.png
new file mode 100644
index 00000000..0b027c4c
Binary files /dev/null and b/home.png differ
diff --git a/index.html b/index.html
index 3d8ffdf3..910c4aab 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,26 @@
 <title>SwapReads</title>
 
 <head>
+  <style>
+    body {
+        margin: 0;
+        height: 100vh;
+        background-color: #fff; /* White background */
+        overflow: hidden;
+        cursor: default; /* Show default cursor */
+    }
+
+    .cursor {
+        position: absolute;
+        width: 15px; /* Circle size */
+        height: 15px; /* Circle size */
+        background-color: rgba(255, 165, 0, 0.8); /* Orange color */
+        border-radius: 50%; /* Circular shape */
+        pointer-events: none; /* Prevent interaction */
+        transform: translate(-50%, -50%); /* Center the circle */
+        transition: transform 0.1s ease-out; /* Smooth movement */
+    }
+</style>
   <script type="text/javascript">
     (function () {
       emailjs.init({
@@ -664,7 +684,7 @@
   }
 }
 .navbar-item {
-  /* Increase the top margin of each item */
+  margin-top: 1rem; /* Increase the top margin of each item */
   
 }
 .card-sty {
@@ -750,7 +770,7 @@
   /* Add transition for smooth animation */
 }
 
-{
+
 .footer-icons .icon:hover {
   transform: scale(1.5);
   /* Scale the icon on hover */
@@ -925,7 +945,8 @@
   background-color: var(--secondary-color);
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 10px rgba(83, 18, 18, 0.1);
+  width: 75%;
 }
 
 .contact-card {
@@ -969,16 +990,6 @@
   border-radius: 10px;
 }
 
-.contact-info {
-  width: 400px; /* Adjust the width as needed */
-  display: inline-block;
-}
-
-.contact-info {
-  width: 500px; /* Adjust the width as needed */
-  display: inline-block;
-}
-
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .flexi {
@@ -1049,7 +1060,18 @@
 
 
 <body>
-  
+  <div class="cursor"></div>
+
+  <script>
+      const cursor = document.querySelector('.cursor');
+
+      // Update mouse position and move the cursor element
+      document.addEventListener('mousemove', (e) => {
+          const mouseX = e.clientX;
+          const mouseY = e.clientY;
+          cursor.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
+      });
+  </script>
   <style>
     /* Fixed translate button */
     *{
@@ -1187,7 +1209,7 @@
   margin-right: 3rem;
 }
 .mobile-container-styles{
-  
+  margin-left: 5rem;
 }
 .nav{
   justify-content: space-around;
@@ -1206,7 +1228,8 @@
 }
 
 .contact {
-  width: 52%; /* Adjust width for the contact form */
+  
+  width: 1000px;  /* Adjust width for the contact form */
 }
 
 .cardi {
@@ -1221,6 +1244,10 @@
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+}
+.contact-container:hover{
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.386);
 }
 
 .contact-card {
@@ -1439,7 +1466,7 @@
 
         <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 0px;">
+            <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px 1.8rem;">
           </a>
           <li class="navbar-item">
             <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
@@ -1485,7 +1512,8 @@
 
           <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 Books </a>
+                  <i class="ri-bar-chart-fill"></i> Audio<br> Books
+              </a>
           </li>
             
           <li>
@@ -3005,47 +3033,145 @@ <h3 class="card-sty" style="text-align: center;">Organizations</h3>
   }
 </style>
 
+
 <!-- rate us -->
-<!-- Rate Us Component -->
-<div id="rate-us">
-  <div class="heading">
-    <h3>Rate Us</h3>
-    <p>Tell us about your experience!</p>
-  </div>
+      <style>
+#rate-us {
+  transition: background-color 0.3s ease;  
+}
 
-  <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>
+#rate-us:hover {
+  background-color: #fde2e2;  
+  color: white;  
+} /* Closing brace for #rate-us:hover */
 
-  <div class="feedback-container">
-    <textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
-  </div>
+/* Additional styles */
+.toast-message {
+  display: none;  
+  padding: 10px;
+  border-radius: 5px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 
-  <div class="button">
-    <center><button id="submit-btn">Submit</button></center>
-  </div>
-</div>
+.modal {
+  display: none;  
+}
+</style>
 
-<div id="toastMessage" class="toast-message"></div>
 
-<!-- Confirmation Modal -->
-<div id="confirmationModal" class="modal">
-  <div class="modal-content">
-    <span class="close" onclick="closeConfirmationModal()">&times;</span>
-    <p id="confirmationMessage"></p>
-  </div>
+
+
+      <!-- rate us -->
+
+
+       <!-- Rate Us Component -->
+       <div id="rate-us">
+        <div class="heading">
+            <h3>Rate Us</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() {
+    const toastMessage = document.getElementById("toastMessage");
+
+    document.getElementById("submit-btn").addEventListener("click", function(event) {
+        event.preventDefault(); // Prevent default form submission
+
+        let selectedEmoji = document.querySelector('input[name="rate"]:checked');
+        let feedback = document.getElementById("feedback").value.trim();
+        
+        if (selectedEmoji && feedback !== "") {
+            // Show success toast message
+            toastMessage.textContent = "Feedback submitted successfully :)";
+            toastMessage.style.backgroundColor = "green"; // Green color for success
+            toastMessage.style.color = "white";
+            toastMessage.style.borderRadius = "0.5rem";
+            toastMessage.style.position = "fixed";
+                      toastMessage.style.display = "block";
+
+            // Hide toast message after 3 seconds (adjust as needed)
+            setTimeout(function() {
+                toastMessage.style.display = "none";
+            }, 3000);
+
+            // Reset form fields
+            document.getElementById("feedback").value = "";
+            let starInputs = document.querySelectorAll('input[name="rate"]');
+            starInputs.forEach(input => {
+                input.checked = false;
+            });
+        } else {
+            // Show failure toast message
+            toastMessage.textContent = "Select Emoji and give Feedback :(";
+            toastMessage.style.backgroundColor = "red"; // Red color for failure
+            toastMessage.style.color = "white";
+            toastMessage.style.borderRadius = "0.5rem";
+            toastMessage.style.position = "fixed";
+            
+            toastMessage.style.display = "block";
+
+            // Hide toast message after 3 seconds (adjust as needed)
+            setTimeout(function() {
+                toastMessage.style.display = "none";
+            }, 3000);
+            
+            document.getElementById("feedback").value = "";
+            let starInputs = document.querySelectorAll('input[name="rate"]');
+            starInputs.forEach(input => {
+                input.checked = false;
+            });
+        }
+    });
+});
+
+  </script>
+  <div id="toastMessage"></div>
+
+    <!-- Confirmation Modal -->
+    <div id="confirmationModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeConfirmationModal()">&times;</span>
+            <p id="confirmationMessage"></p>
+        </div>
+    </div>
 </div>
 
-<script src="/assets/js/rate.js"></script>
+    <!-- Confirmation Message Popup -->
+    <div id="confirmationModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeConfirmationModal()">&times;</span>
+            <p id="confirmationMessage"></p>
+        </div>
+    </div>
+
+    <script src="/assets/js/rate.js"></script>
 
 
   <!-- --Contact Us -->
@@ -3057,10 +3183,10 @@ <h1 class="h1 section-title has-underline" style="margin-top: 15px;">
   </h1>
   <p class="p">Have a Question?</p> 
   <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
-  <div class="flexi common-width">
-    <div class="contact">
+  <div class="flexi">
+    <div class="contact" >
       <div class="contact-container">
-        <form class="contact-form" id="contactForm">
+        <form class="contact-form" id="contactForm" style=" width: 500px;">
           <label for="name">Name</label>
           <input type="text" id="name" name="name" placeholder="Your Name" required>
 
@@ -3088,7 +3214,7 @@ <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
     </div>
 
     <!-- Contact Information Section -->
-    <div class="contact">
+ <div class="contact">
       <div class="contact-container">
         <ul class="flex-container">
           <li>
@@ -3096,10 +3222,9 @@ <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
               <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
               Address:
             </p>
-            <address class="address contact-info">
-              <span>12, Nayabad<br>
-                Kolkata, India 700054
-              </span>
+            <address class="address">
+              12, Nayabad<br>
+              Kolkata, India 700054
             </address>
           </li>
           <li>