diff --git a/help.html b/help.html
index 3ee03de7..cbdb3bf1 100644
--- a/help.html
+++ b/help.html
@@ -23,6 +23,10 @@
       href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
     <title>Help Center</title>
     <style>
       body {
@@ -40,80 +44,69 @@
       }
 
       .container {
-        background: rgba(225, 223, 225, 0.3);
+        background: rgba(240, 248, 255, 0.5); /* Light, cool background */
         padding: 40px;
         margin-top: 20px;
         margin-bottom: 20px;
         border-radius: 15px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Softer shadow */
         max-width: 800px;
         width: 90%;
       }
 
-      h1,
-      h2,
-      p,
-      .btn-custom,
-      .card-link {
-        opacity: 0;
-        transform: translateX(-100%);
-        animation: slideIn 1.3s forwards;
-      }
-
       h1 {
         text-align: center;
-        color: #333;
+        color: #2c3e50; /* Darker, elegant color */
         font-family: "Philosopher", sans-serif;
         font-weight: 700;
         margin-bottom: 30px;
       }
 
       p {
-        color: #666;
-        line-height: 1.6;
+        color: #4f5b66; /* Subtle dark gray */
+        line-height: 1.7;
       }
 
       .btn-home {
-        background-color: #aeadad;
-        color: rgb(250, 246, 249);
+        background-color: #7f8c8d; /* Warm, muted gray */
+        color: #fdfefe; /* Soft white */
         border: none;
         border-radius: 5px;
         padding: 15px 20px;
         font-weight: 700;
-        transition: all 0.3s ease;
         font-size: 0.9em;
         position: absolute;
         top: 20px;
         left: 20px;
+        transition: all 0.3s ease;
       }
 
       .btn-home:hover {
-        background-color: #f5baf1;
-        color: rgb(18, 17, 17);
+        background-color: #85c1e9; /* Soft blue on hover */
+        color: #2c3e50; /* Darker color for contrast */
         transform: translateY(-2px);
-        border: 1px solid black;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       }
 
       .btn-custom {
-        background-color: #f3acd0;
+        background-color: #ff6b81; /* Vibrant coral */
         color: white;
-        border: none;
-        border: 2px solid rgb(253, 13, 193);
+        border: 2px solid #ff3b4d; /* Deep coral border */
         border-radius: 25px;
         padding: 10px 25px;
         font-weight: 600;
+        font-size: 1em;
         transition: all 0.3s ease;
       }
 
       .btn-custom:hover {
         background: linear-gradient(
           to top left,
-          rgb(246, 128, 148),
-          rgb(250, 219, 249)
-        );
+          #ff8b94,
+          #ffced4
+        ); /* Softer pink gradient */
         transform: translateY(-2px);
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       }
 
       .contact-card {
@@ -129,26 +122,24 @@
         margin-bottom: 20px;
       }
 
-      .contact-card .card-title {
-        margin-right: 10px;
-      }
-
       .card-title {
         font-weight: 600;
+        color: #34495e; /* Rich blue-gray */
         margin-bottom: 5px;
       }
 
       .address {
         font-style: normal;
+        color: #4f5b66;
       }
 
       .card-link {
-        color: #ff69b4;
+        color: #ff6b81;
         text-decoration: none;
       }
 
       .card-link:hover {
-        color: #ff1493;
+        color: #ff3b4d; /* Darker coral on hover */
       }
 
       @keyframes slideIn {
@@ -158,36 +149,46 @@
         }
       }
 
+      .section-1 h2,
+      .section-1 p,
+      .section-1 .btn-custom,
+      .section-2 h2,
+      .section-2 p,
+      .section-2 .btn-custom,
+      .section-3 h2,
+      .section-3 ul,
+      .section-4 h2,
+      .section-4 p,
+      .section-4 .btn-custom {
+        opacity: 0;
+        transform: translateX(-100%);
+        animation: slideIn 1.3s forwards;
+      }
+
+      /* Animation delay for staggered effect */
       .section-1 h2 {
         animation-delay: 0.2s;
       }
-
       .section-1 p,
       .section-1 .btn-custom {
         animation-delay: 0.4s;
       }
-
       .section-2 h2 {
         animation-delay: 0.6s;
       }
-
       .section-2 p,
       .section-2 .btn-custom {
         animation-delay: 0.8s;
       }
-
       .section-3 h2 {
         animation-delay: 1s;
       }
-
       .section-3 ul {
         animation-delay: 1.2s;
       }
-
       .section-4 h2 {
         animation-delay: 1.4s;
       }
-
       .section-4 p,
       .section-4 .btn-custom {
         animation-delay: 1.6s;
@@ -206,174 +207,75 @@
           font-size: 0.85em;
         }
       }
-      .faq-section {
-        display: none; /* Hidden by default */
-        margin-top: 20px;
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
       }
 
-      .faq-question {
-        font-weight: 600;
-        cursor: pointer;
-      }
-
-      .faq-answer {
-        display: none; /* Hidden by default */
-        margin-top: 5px;
-        padding-left: 20px;
-      }
-
-
-
-
-
-      *, *:before, *:after {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 100%;
-}
-
-/* body {
-  font-family: acumin-pro, system-ui, sans-serif;
-  margin: 0;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  font-size: 14px;
-  background-color: #f4f4f4;
-  align-items: start;
-  min-height: 100vh;
-} */
-
-.footer {
-  position: absolute;
-  top: 130%;
-  width: 100%;
-  display: flex;
-  flex-flow: row wrap;
-  padding: 30px 30px 20px 30px;
-  color: #2f2f2f;
-  background-color: pink;
-  border-top: 1px solid #e5e5e5;
-}
-
-.footer > * {
-  flex:  1 100%;
-}
-
-.footer__addr {
-  margin-right: 1.25em;
-  margin-bottom: 2em;
-}
-
-.footer__logo {
-  font-family: 'Pacifico', cursive;
-  font-weight: 400;
-  text-transform: lowercase;
-  font-size: 1.5rem;
-}
-
-.footer__addr h2 {
-  margin-top: 1.3em;
-  font-size: 15px;
-  font-weight: 400;
-}
-
-.nav__title {
-  font-weight: 400;
-  font-size: 15px;
-}
-
-.footer address {
-  font-style: normal;
-  color: #999;
-}
-
-.footer__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  max-width: max-content;
-  background-color: rgb(33, 33, 33, 0.07);
-  border-radius: 100px;
-  color: #2f2f2f;
-  line-height: 0;
-  margin: 0.6em 0;
-  font-size: 1rem;
-  padding: 0 1.3em;
-}
-
-.footer ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-.footer li {
-  line-height: 2em;
-}
-
-.footer a {
-  text-decoration: none;
-}
-
-.footer__nav {
-  display: flex;
-	flex-flow: row wrap;
-}
-
-.footer__nav > * {
-  flex: 1 50%;
-  margin-right: 1.25em;
-}
-
-.nav__ul a {
-  color: #999;
-}
-
-.nav__ul--extra {
-  column-count: 2;
-  column-gap: 1.25em;
-}
-
-.legal {
-  display: flex;
-  flex-wrap: wrap;
-  color: #999;
-}
-  
-.legal__links {
-  display: flex;
-  align-items: center;
-}
-
-.heart {
-  color: #2f2f2f;
-}
-
-@media screen and (min-width: 24.375em) {
-  .legal .legal__links {
-    margin-left: auto;
-  }
-}
-
-@media screen and (min-width: 40.375em) {
-  .footer__nav > * {
-    flex: 1;
-  }
-  
-  .nav__item--extra {
-    flex-grow: 2;
-  }
-  
-  .footer__addr {
-    flex: 1 0px;
-  }
-  
-  .footer__nav {
-    flex: 2 0px;
-  }
-}
+      html {
+        font-size: 100%;
+      }
+
+      .nav__ul a {
+        color: #999;
+      }
+
+      .nav__ul--extra {
+        column-count: 2;
+        column-gap: 1.25em;
+      }
+
+      .legal {
+        display: flex;
+        flex-wrap: wrap;
+        color: #999;
+      }
+
+      .legal__links {
+        display: flex;
+        align-items: center;
+      }
+
+      .heart {
+        color: #2f2f2f;
+      }
+
+      @media screen and (min-width: 24.375em) {
+        .legal .legal__links {
+          margin-left: auto;
+        }
+      }
+
+      @media screen and (min-width: 40.375em) {
+        .footer__nav > * {
+          flex: 1;
+        }
+
+        .nav__item--extra {
+          flex-grow: 2;
+        }
+
+        .footer__addr {
+          flex: 1 0px;
+        }
+
+        .footer__nav {
+          flex: 2 0px;
+        }
+      }
+      .fa-home {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        font-size: 30px;
+        color: #f57d7d;
+        transition: color 0.3s ease;
+      }
+
+      .fa-home:hover {
+        color: maroon; /* Pink on hover */
+      }
     </style>
     <style>
       /* Circle styles */
@@ -393,29 +295,29 @@
   </head>
 
   <body>
-      <!-- Circles -->
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-    <a href="/index.html" class="btn btn-home">
-      <i class="fas fa-home mr-2"></i>Home
+    <!-- Circles -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <a href="/index.html">
+      <i class="fas fa-home"></i>
     </a>
 
     <div class="container">
@@ -429,72 +331,9 @@ <h1>Help Center</h1>
         <h2 class="mb-4">Frequently Asked Questions</h2>
         <p>For answers to common questions, please visit our FAQ section:</p>
         <div class="text-center">
-           <button id="faqButton" class="btn btn-custom">View FAQ</button>
+          <a href="/index.html#faqq" class="btn btn-custom">View FAQ</a>
         </div>
       </div>
-      <div class="faq-section" id="faqSection">
-  <h2 class="mb-4">FAQs</h2>
-  <div class="faq-question" onclick="toggleAnswer('faq1')">
-    What is SwapReads.com?
-  </div>
-  <div class="faq-answer" id="faq1">
-    SwapReads.com is a platform that connects users globally to exchange books, making reading more accessible and sustainable.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq2')">
-    How does the book swapping process work?
-  </div>
-  <div class="faq-answer" id="faq2">
-    Users can list their books and browse other users' books. They can then initiate swaps directly through the platform.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq3')">
-    Is there a fee to use SwapReads.com?
-  </div>
-  <div class="faq-answer" id="faq3">
-    No, using SwapReads.com for swapping books is free. Users only need to cover shipping costs if applicable.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq4')">
-    How do I create an account?
-  </div>
-  <div class="faq-answer" id="faq4">
-    You can create an account by clicking on the "Sign Up" button on the homepage and filling out the registration form.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq5')">
-    What types of books can I swap?
-  </div>
-  <div class="faq-answer" id="faq5">
-    You can swap any book, including novels, textbooks, and children's books, as long as they are in good condition.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq6')">
-    How do I find books to swap?
-  </div>
-  <div class="faq-answer" id="faq6">
-    Use the search feature on the platform to find specific titles or browse categories to discover new books.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq7')">
-    What if the book I receive is damaged?
-  </div>
-  <div class="faq-answer" id="faq7">
-    If you receive a damaged book, you can report the issue through our support team, and we will assist you in resolving it.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq8')">
-    Can I swap e-books?
-  </div>
-  <div class="faq-answer" id="faq8">
-    Currently, SwapReads.com focuses on physical books. E-book swapping is not supported at this time.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq9')">
-    How do I communicate with other users?
-  </div>
-  <div class="faq-answer" id="faq9">
-    You can send private messages to other users through the platform to discuss swaps or ask questions.
-  </div>
-  <div class="faq-question" onclick="toggleAnswer('faq10')">
-    What should I do if I forget my password?
-  </div>
-        <div class="faq-answer" id="faq10">
-    Click on the "Forgot Password?" link on the login page, and follow the instructions to reset your password.
-  </div>
-</div>
 
       <div class="mt-5 section-2">
         <h2 class="mb-4">Need More Help?</h2>
@@ -552,97 +391,6 @@ <h2 class="mb-4">If Your Issue is Resolved</h2>
       </div>
     </div>
 
-
-    <footer class="footer">
-      <div class="footer__addr">
-        <h1 class="footer__logo"><img src="https://swapreadsconnect.netlify.app/assets/images/final.png" alt="" style="height: 180px;"></h1>
-            
-        <h2>Contact</h2>
-        
-        <address>
-          5684569445 SwapReads<br>
-              
-          <a class="footer__btn" href="mailto:example@gmail.com">Email Us</a>
-        </address>
-      </div>
-      
-      <ul class="footer__nav">
-        <li class="nav__item">
-          <h2 class="nav__title">Other</h2>
-    
-          <ul class="nav__ul">
-            <li>
-              <a href="index.html">Home</a>
-            </li>
-    
-            <li>
-              <a href="./assets/html/about.html">About</a>
-            </li>
-                
-            <li>
-              <a href="index.html#contact">Contact US</a>
-            </li>
-          </ul>
-        </li>
-        
-        <li class="nav__item nav__item--extra">
-          <h2 class="nav__title">Explore</h2>
-          
-          <ul class="nav__ul nav__ul--extra">
-            <li>
-              <a href="#">Inspiring Biography</a>
-            </li>
-            
-            <li>
-              <a href="#">Laugh Out Loud Comedy</a>
-            </li>
-            
-            <li>
-              <a href="#">Intriguing Mysteries   </a>
-            </li>
-            
-            <li>
-              <a href="#">Romance</a>
-            </li>
-            
-            <li>
-              <a href="#">Horror</a>
-            </li>
-            
-            <li>
-              <a href="#">Classic Literature</a>
-            </li>
-          </ul>
-        </li>
-        
-        <li class="nav__item">
-          <h2 class="nav__title">Legal</h2>
-          
-          <ul class="nav__ul">
-            <li>
-              <a href="#">Privacy Policy</a>
-            </li>
-            
-            <li>
-              <a href="#">Terms of Use</a>
-            </li>
-            
-            <li>
-              <a href="#"></a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      
-      <div class="legal">
-        <p>&copy; 2024 Pranjal. All rights reserved.</p>
-        
-        <div class="legal__links">
-          <span>Made with <span class="heart">♥</span> SwapReads</span>
-        </div>
-      </div>
-    </footer>
-
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script src="https://cdn.lordicon.com/libs/mssddfmo/lord-icon-2.1.0.js"></script>
@@ -655,14 +403,14 @@ <h2 class="nav__title">Legal</h2>
         });
       });
       $(document).ready(function () {
-    $("#faqButton").click(function () {
-      $("#faqSection").toggle(); // Show or hide the FAQ section
-    });
-  });
+        $("#faqButton").click(function () {
+          $("#faqSection").toggle(); // Show or hide the FAQ section
+        });
+      });
 
       function toggleAnswer(faqId) {
-  $("#" + faqId).toggle(); // Toggle visibility of the specific answer
-}
+        $("#" + faqId).toggle(); // Toggle visibility of the specific answer
+      }
     </script>
     <script>
       // Coordinates for the cursor
@@ -671,10 +419,28 @@ <h2 class="nav__title">Legal</h2>
 
       // Colors for the circles
       const colors = [
-        "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-        "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-        "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-        "#680060", "#60005f", "#48005f", "#3d005e"
+        "#ffb56b",
+        "#fdaf69",
+        "#f89d63",
+        "#f59761",
+        "#ef865e",
+        "#ec805d",
+        "#e36e5c",
+        "#df685c",
+        "#d5585c",
+        "#d1525c",
+        "#c5415d",
+        "#c03b5d",
+        "#b22c5e",
+        "#ac265e",
+        "#9c155f",
+        "#950f5f",
+        "#830060",
+        "#7c0060",
+        "#680060",
+        "#60005f",
+        "#48005f",
+        "#3d005e",
       ];
 
       // Assign colors and initial position to each circle
diff --git a/wishlist.css b/wishlist.css
index 77bc72ce..17c1143b 100644
--- a/wishlist.css
+++ b/wishlist.css
@@ -1,162 +1,364 @@
+/* Global Styling */
 body {
-    font-family: Arial, sans-serif;
-    position: relative;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-    background-size: cover;
+  font-family: "Roboto", sans-serif;
+  position: relative;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 
+h1,
+h2 {
+  text-align: center;
+  color: #fff;
+  font-size: 3rem;
+  margin-top: 80px;
+  font-weight: 600;
+  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
+  letter-spacing: 2px;
+  padding: 20px 0;
+}
+h2 {
+  font-size: 2rem;
+}
+
+/* Home Icon */
 .fa-home {
-    position: absolute;
-    left: 5px;
-    top: 0px;
-    font-size: 25px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  font-size: 30px;
+  color: #f57d7d;
+  transition: color 0.3s ease;
 }
 
 .fa-home:hover {
-    color: #f57d7d; 
+  color: maroon; /* Pink on hover */
 }
 
+/* Circular Elements (Floating Circles) */
 .circle {
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-    background-color: black;
-    position: fixed;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    z-index: 99999999;
-    transition: transform 0.1s ease-out;
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  background-color: black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 9999;
+  animation: float 5s ease-in-out infinite;
 }
 
-h1 {
-    text-align: center; 
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
+/* Top Image Styling */
 #top-right-image {
-    position: absolute; 
-    top: 5px; 
-    right: 50px; 
-    width: 180px; 
-    height: auto; 
-    border-radius: 50%;
+  position: absolute; /* Keeps it at the top-right on scroll */
+  top: 20px;
+  right: 20px;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  border: 5px solid #fff;
+  z-index: 1000; /* Ensures it stays on top of other elements */
 }
 
-#book-title , #author-name {
-    width: 15%; 
-    height: 30px;
-    font-size: 16px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    display: block; 
-    margin: 20px auto; 
-    border-radius: 10px;
-    transition: ease-in-out 500ms;
-    cursor: pointer;
+/* Input Fields */
+#book-title,
+#author-name {
+  width: 60%; /* Reduced width */
+  height: 40px; /* Reduced height */
+  font-size: 16px; /* Smaller font */
+  padding: 10px;
+  border: 1.5px solid #ccc;
+  margin: 15px auto;
+  border-radius: 6px;
+  background-color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+  display: block;
+  box-sizing: border-box;
 }
 
+#book-title:focus,
+#author-name:focus {
+  outline: none;
+  border-color: #f57d7d;
+  background-color: rgba(255, 255, 255, 1);
+}
 
-#book-title:hover , #author-name:hover {
-width: 50%;
-transition: ease-in-out 500ms;
+/* Button Styling */
+button {
+  background-color: #c44f4f;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.3s ease;
+  display: block;
+  width: 200px;
+  text-transform: uppercase;
 }
 
-#book-title:focus , #author-name:focus {
-    width: 50%;
-    transition: ease-in-out 500ms;
+button:hover {
+  background-color: #5e1f1f;
 }
 
-#add-book-btn {
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    display: block; 
-    margin: 20px auto; 
-    border-radius: 5px;
+/* Back Button */
+#back-button {
+  background-color: #f57d7d;
+}
 
+#back-button:hover {
+  background-color: #c44f4f;
 }
 
+/* Book List */
+#book-list {
+  list-style: none;
+  padding: 0;
+  margin: 20px auto;
+  width: 80%;
+}
 
-#add-book-btn:hover , #back-button:hover{
-    background-color: #0663c6;
+.book-item {
+  padding: 15px;
+  border-bottom: 1px solid #ddd;
+  background-color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 10px;
+  border-radius: 8px;
+  transition: transform 0.2s ease, background-color 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
+.book-item:hover {
+  transform: scale(1.03);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
-#back-button {
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    display: block; 
-    margin: 20px auto; 
-    border-radius: 5px;
+.book-item:last-child {
+  border-bottom: none;
 }
 
-#book-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+/* Action Buttons */
+.actions {
+  display: flex;
+  gap: 10px;
 }
 
-.author-space {
-    margin-left: 10%; /* Adjust the value as needed */
+/* Mark as Read/Unread Button */
+.mark-as-read-btn,
+.mark-as-unread-btn {
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.3s ease;
 }
-.book-item {
-    padding: 10px;
-    border-bottom: 1px solid #b7b1b1;
+
+.mark-as-read-btn {
+  background-color: #f57d7d;
+  color: white;
 }
 
-.book-item:last-child {
-    border-bottom: none;
+.mark-as-read-btn:hover {
+  background-color: #d96c6c;
 }
 
-.read {
-    text-decoration: line-through;
+.mark-as-unread-btn {
+  background-color: #66bb6a;
+  color: white;
 }
 
-.actions {
-    float: right;
+.mark-as-unread-btn:hover {
+  background-color: #4b8f47;
 }
 
-.actions button {
-    background-color: #fff;
-    border: none;
-    padding: 5px 10px;
-    font-size: 14px;
-    cursor: pointer;
+/* Strikethrough effect for read books */
+.read {
+  text-decoration: line-through;
+  color: #a9a9a9;
 }
 
-.actions button:hover {
-    background-color: #ddd;
+/* Delete Button */
+.delete-btn {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.3s ease;
 }
 
-.read {
-    text-decoration: line-through;
-    color: #666;
+.delete-btn:hover {
+  background-color: #d32f2f;
 }
 
-.read::before {
-    /* content: "\2713";  */
-    color: #3e8e41;
-    margin-right: 10px;
+/* Ensure both buttons have consistent styling if needed */
+#add-book-btn,
+#back-button {
+  flex: none; /* Prevents buttons from stretching */
+  width: auto; /* Let buttons take up only as much space as needed */
 }
 
-.mark-as-read-btn {
-    background-color: #3e8e41;
-    padding: 5px 10px;
+/* Responsive Design */
+@media (max-width: 768px) {
+  #book-title,
+  #author-name {
+    width: 85%;
+    height: 40px;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  button {
+    width: 100%;
+  }
+
+  #back-button {
+    margin-top: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  #book-title,
+  #author-name {
+    width: 90%;
+  }
+
+  button {
+    font-size: 14px;
+    width: 100%;
+  }
+
+  #back-button {
     font-size: 14px;
-    cursor: pointer;
+  }
 }
 
-.mark-as-unread-btn {
-    background-color: #ccc;
-    color: #66666694;
-    padding: 5px 10px;
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  #book-title,
+  #author-name {
+    width: 85%;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  button,
+  #add-book-btn,
+  #back-button,
+  .delete-btn {
+    width: 50%;
+    font-size: 15px;
+    padding: 8px 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  #book-title,
+  #author-name {
+    width: 90%;
+  }
+
+  button,
+  #add-book-btn,
+  #back-button,
+  .delete-btn {
     font-size: 14px;
-    cursor: pointer;
-}
\ No newline at end of file
+    width: 50%;
+    padding: 6px 12px;
+  }
+
+  #back-button {
+    margin-top: 15px;
+  }
+}
+/* Button Container */
+.button-container {
+  display: flex;
+  flex-wrap: wrap; /* Allows buttons to wrap onto new lines if needed */
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+  .button-container {
+    flex-direction: column; /* Stacks buttons vertically */
+    align-items: center; /* Centers each button */
+    gap: 15px; /* Reduces the gap slightly */
+    margin-top: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .button-container {
+    gap: 10px; /* Further reduce the gap */
+    margin-top: 10px;
+  }
+}
+#top-right-image {
+  position: absolute; /* Keeps it only at the top-right without scrolling */
+  top: 15px;
+  right: 20px;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  border: 5px solid #fff;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #top-right-image {
+    width: 120px;
+    height: 120px;
+    top: -70px;
+    right: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  #top-right-image {
+    width: 75px;
+    height: 75px;
+    top: -75px;
+    right: 10px;
+  }
+}
diff --git a/wishlist.html b/wishlist.html
index 21fa546b..23a80b79 100644
--- a/wishlist.html
+++ b/wishlist.html
@@ -1,30 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Book Wishlist</title>
-    <link rel="stylesheet" href="wishlist.css">
+    <link rel="stylesheet" href="wishlist.css" />
     <script src="wishlist.js" defer></script>
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
-    <link rel="manifest" href="./assets/favicon_package_v0.16/site.webmanifest">
-    <link rel="mask-icon" href="./assets/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-</head>
-<body>
-
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./assets/favicon_package_v0.16/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/favicon_package_v0.16/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./assets/favicon_package_v0.16/favicon-16x16.png"
+    />
+    <link
+      rel="manifest"
+      href="./assets/favicon_package_v0.16/site.webmanifest"
+    />
+    <link
+      rel="mask-icon"
+      href="./assets/favicon_package_v0.16/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+  </head>
+  <body>
+    <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-    <div class="circle"></div> 
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
@@ -59,21 +84,29 @@
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-
 
     <a href="/index.html">
-        <i class="fas fa-home"></i>
+      <i class="fas fa-home"></i>
     </a>
     <h1>Book Wishlist</h1>
-    <img src="/book.jpg" alt="Description" id="top-right-image">
-    <input type="text" id="book-title" placeholder="Enter book title" required>
-    <input type="text" id="author-name" placeholder="Enter Author name" required>
+    <img src="/book.jpg" alt="Description" id="top-right-image" />
+    <input
+      type="text"
+      id="book-title"
+      placeholder="Enter book title"
+      required
+    />
+    <input
+      type="text"
+      id="author-name"
+      placeholder="Enter Author name"
+      required
+    />
     <div class="button-container">
-        <button id="add-book-btn">Add Book</button>
-        <button id="back-button" onclick="goBack()">Back</button>
+      <button id="add-book-btn">Add Book</button>
+      <button id="back-button" onclick="goBack()">Back</button>
     </div>
-    <h2 style="text-decoration: underline;">My Bookish Corner 😌</h2>
+    <h2>My Bookish Corner 😌</h2>
     <ul id="book-list"></ul>
-
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/wishlist.js b/wishlist.js
index bb9b75c8..bc5b3a00 100644
--- a/wishlist.js
+++ b/wishlist.js
@@ -1,181 +1,165 @@
-const bookTitleInput = document.getElementById('book-title');
-const authorTitleInput = document.getElementById('author-name');
-const addBookBtn = document.getElementById('add-book-btn');
-const bookList = document.getElementById('book-list');
+const bookTitleInput = document.getElementById("book-title");
+const authorTitleInput = document.getElementById("author-name");
+const addBookBtn = document.getElementById("add-book-btn");
+const bookList = document.getElementById("book-list");
 
-let books = JSON.parse(localStorage.getItem('books')) || [];
+let books = JSON.parse(localStorage.getItem("books")) || [];
 
-addBookBtn.addEventListener('click', addBook);
+addBookBtn.addEventListener("click", addBook);
 
 function addBook() {
-    const title = bookTitleInput.value.trim();
-    const author = authorTitleInput.value.trim();
-    ('error-message');
-    if (!title || !author) {
-        alert('Both Title and Author fields are required.');
-        return;
-    }
-
-    // Capitalize the first letter of the author's and Book name
-    const formattedAuthor = author.charAt(0).toUpperCase() + author.slice(1);
-
-    const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
-
-
-    // Add the book to the list of books
-    const book = { title: formattedTitle, author: formattedAuthor, read: false };
-    books.push(book);
-    localStorage.setItem('books', JSON.stringify(books));
-    renderBookList();
-    resetInputFields();
-
-    // Refresh the page (Important to update the input box animation)
-    location.reload();
-    
-}
-
-// Function to reset the input fields
-function resetInputFields() {
-    bookTitleInput.value = '';
-    authorTitleInput.value = '';
-    bookTitleInput.style.width = '15%';
-    authorTitleInput.style.width = '15%';
+  const title = bookTitleInput.value.trim();
+  const author = authorTitleInput.value.trim();
+  ("error-message");
+  if (!title || !author) {
+    alert("Both Title and Author fields are required.");
+    return;
+  }
+
+  // Capitalize the first letter of the author's and Book name
+  const formattedAuthor = author.charAt(0).toUpperCase() + author.slice(1);
+
+  const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
+
+  // Add the book to the list of books
+  const book = { title: formattedTitle, author: formattedAuthor, read: false };
+  books.push(book);
+  localStorage.setItem("books", JSON.stringify(books));
+  renderBookList();
+  resetInputFields();
+
+  // Refresh the page (Important to update the input box animation)
+  location.reload();
 }
 
 function renderBookList() {
-    bookList.innerHTML = '';
-    books.forEach((book, index) => {
-        const bookItem = document.createElement('li');
-        bookItem.classList.add('book-item');
-        const readClass = book.read ? 'read' : '';
-        bookItem.innerHTML = `
-                <span class="${readClass}">${index + 1}. ${book.title} <span class="author-space">By - ${book.author}</span></span>
+  bookList.innerHTML = "";
+  books.forEach((book, index) => {
+    const bookItem = document.createElement("li");
+    bookItem.classList.add("book-item");
+    const readClass = book.read ? "read" : "";
+    bookItem.innerHTML = `
+                <span class="${readClass}">${index + 1}. ${
+      book.title
+    } <span class="author-space">By - ${book.author}</span></span>
                 <div class="actions">
-                    ${book.read ?
-                `<button class="mark-as-unread-btn" onclick="toggleRead(${index})">Mark as Unread</button>` :
-                `<button class="mark-as-read-btn" onclick="toggleRead(${index})">Mark as Read</button>`
-            }
+                    ${
+                      book.read
+                        ? `<button class="mark-as-unread-btn" onclick="toggleRead(${index})">Mark as Unread</button>`
+                        : `<button class="mark-as-read-btn" onclick="toggleRead(${index})">Mark as Read</button>`
+                    }
                     <button onclick="deleteBook(${index})">Delete</button>
                 </div>
             `;
-        bookList.appendChild(bookItem);
-    });
+    bookList.appendChild(bookItem);
+  });
 }
 function toggleRead(index) {
-    books[index].read = !books[index].read;
-    localStorage.setItem('books', JSON.stringify(books));
-    renderBookList();
+  books[index].read = !books[index].read;
+  localStorage.setItem("books", JSON.stringify(books));
+  renderBookList();
 }
 
 // Function to delete a book
 function deleteBook(index) {
-    books.splice(index, 1);
-    localStorage.setItem('books', JSON.stringify(books));
-    renderBookList();
+  books.splice(index, 1);
+  localStorage.setItem("books", JSON.stringify(books));
+  renderBookList();
 }
 
 renderBookList();
 
-
-
 // Function to go back to the previous page
 function goBack() {
-    window.history.back();
+  window.history.back();
 }
 
+// Select all "Mark as Read" buttons
+const markAsReadButtons = document.querySelectorAll(".mark-as-read-btn");
 
+markAsReadButtons.forEach((button) => {
+  button.addEventListener("click", function () {
+    const bookItem = this.closest(".book-item");
+    const bookText = bookItem.querySelector(".book-text");
 
-//title input field width
+    // Toggle the "read" class on the book text
+    bookText.classList.toggle("read");
 
-bookTitleInput.addEventListener('input', function () {
-    if (this.value.length > 0) {
-        this.style.width = '50%';
+    // Optional: Change button text to "Mark as Unread" when marked as read
+    if (bookText.classList.contains("read")) {
+      this.textContent = "Mark as Unread";
     } else {
-        this.style.width = '15%';
+      this.textContent = "Mark as Read";
     }
+  });
 });
 
-// Optional: Add focus and blur events
-bookTitleInput.addEventListener('focus', function () {
-    this.style.width = '50%';
+// Coordinates for the cursor
+const coords = { x: 0, y: 0 };
+const circles = document.querySelectorAll(".circle");
+
+// Colors for the circles
+const colors = [
+  "#ffb56b",
+  "#fdaf69",
+  "#f89d63",
+  "#f59761",
+  "#ef865e",
+  "#ec805d",
+  "#e36e5c",
+  "#df685c",
+  "#d5585c",
+  "#d1525c",
+  "#c5415d",
+  "#c03b5d",
+  "#b22c5e",
+  "#ac265e",
+  "#9c155f",
+  "#950f5f",
+  "#830060",
+  "#7c0060",
+  "#680060",
+  "#60005f",
+  "#48005f",
+  "#3d005e",
+];
+
+// Assign colors and initial position to each circle
+circles.forEach(function (circle, index) {
+  circle.x = 0;
+  circle.y = 0;
+  circle.style.backgroundColor = colors[index % colors.length];
 });
 
-bookTitleInput.addEventListener('blur', function () {
-    if (this.value.length === 0) {
-        this.style.width = '15%';
-    }
+// Update the coordinates when the mouse moves
+window.addEventListener("mousemove", function (e) {
+  coords.x = e.clientX;
+  coords.y = e.clientY;
 });
 
+// Animation function to move the circles
+function animateCircles() {
+  let x = coords.x;
+  let y = coords.y;
 
-// Input field width for author
-authorTitleInput.addEventListener('input', function () {
-    if (this.value.length > 0) {
-        this.style.width = '50%';
-    } else {
-        this.style.width = '15%';
-    }
-});
+  circles.forEach(function (circle, index) {
+    // Update the position and scale of each circle
+    circle.style.left = x - 12 + "px";
+    circle.style.top = y - 12 + "px";
+    circle.style.scale = (circles.length - index) / circles.length;
 
-// Optional: Add focus and blur events for author input
-authorTitleInput.addEventListener('focus', function () {
-    this.style.width = '50%';
-});
+    circle.x = x;
+    circle.y = y;
 
-authorTitleInput.addEventListener('blur', function () {
-    if (this.value.length === 0) {
-        this.style.width = '15%';
-    }
-});
+    // Get the next circle in the sequence
+    const nextCircle = circles[index + 1] || circles[0];
+    x += (nextCircle.x - x) * 0.15;
+    y += (nextCircle.y - y) * 0.15;
+  });
 
+  // Repeat the animation
+  requestAnimationFrame(animateCircles);
+}
 
- // Coordinates for the cursor
- const coords = { x: 0, y: 0 };
- const circles = document.querySelectorAll(".circle");
-
- // Colors for the circles
- const colors = [
-   "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-   "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-   "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-   "#680060", "#60005f", "#48005f", "#3d005e"
- ];
-
- // Assign colors and initial position to each circle
- circles.forEach(function (circle, index) {
-   circle.x = 0;
-   circle.y = 0;
-   circle.style.backgroundColor = colors[index % colors.length];
- });
-
- // Update the coordinates when the mouse moves
- window.addEventListener("mousemove", function (e) {
-   coords.x = e.clientX;
-   coords.y = e.clientY;
- });
-
- // Animation function to move the circles
- function animateCircles() {
-   let x = coords.x;
-   let y = coords.y;
-
-   circles.forEach(function (circle, index) {
-     // Update the position and scale of each circle
-     circle.style.left = x - 12 + "px";
-     circle.style.top = y - 12 + "px";
-     circle.style.scale = (circles.length - index) / circles.length;
-
-     circle.x = x;
-     circle.y = y;
-
-     // Get the next circle in the sequence
-     const nextCircle = circles[index + 1] || circles[0];
-     x += (nextCircle.x - x) * 0.15;
-     y += (nextCircle.y - y) * 0.15;
-   });
-
-   // Repeat the animation
-   requestAnimationFrame(animateCircles);
- }
-
- // Start the animation
- animateCircles();
\ No newline at end of file
+// Start the animation
+animateCircles();