diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..e56cb6b9e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Anurag Verma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 11d511406..7025ce9ba 100644
--- a/README.md
+++ b/README.md
@@ -156,6 +156,12 @@ Join SwapReads.com today and embark on a literary journey like never before!
         <td><a href="https://discordapp.com/users/riti1641" target="_blank" class="discord">Discord</a></td>
         <td>ritichandak@gmail.com</td>
     </tr>
+    <tr>
+        <td>Mentor</td>
+        <td><a href="https://www.linkedin.com/in/rishabhdhawad/" target="_blank">LinkedIn</a></td>
+        <td><a href="https://discordapp.com/users/rishabhdhawad" target="_blank" class="discord">Discord</a></td>
+        <td>rishabhdhawad29@gmail.com</td>
+    </tr>
 </table>
 
 <hr>
diff --git a/assets/css/Available.css b/assets/css/Available.css
index 9a77fac00..4768c82b4 100644
--- a/assets/css/Available.css
+++ b/assets/css/Available.css
@@ -21,7 +21,6 @@ body {
     margin-bottom: 40px;
     margin-top: 40px;
     padding-top: 8%;
-    padding-left: 22%;
     left: 50px;
 }
 
@@ -125,6 +124,26 @@ h2.section-title {
     background-color: var(--btn-bg-hover-color);
 
 }
+.read_later_button{
+    background-color: var(--btn-bg-color);
+    color: var(--btn-text-color);
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 10px;
+    position: relative;
+    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    width:180px;
+    margin-left: 40px;
+}
+.read_later_button::after,
+.read_later_button::before {
+    content: "";
+    position: absolute;
+    transition: background-color 0.3s ease-in-out;
+}
 
 /* Span for underline effect */
 span {
@@ -134,9 +153,29 @@ span {
 /* Class for the underline effect */
 .has-underline {
     position: relative;
-    margin-block-end: 60px;
     text-align: center; /* Center align the heading */
 }
+.read_later_button::after {
+    width: 100%;
+    height: 6px;
+    background-color: var(--border-color-bottom);
+    bottom: -6px;
+    left: 0;
+}
+
+.read_later_button::before {
+    width: 6px;
+    height: 100%;
+    background-color: var(--border-color-right);
+    top: 0;
+    right: -6px;
+    
+}
+
+.read_later_button:hover {
+    background-color: var(--btn-bg-hover-color);
+
+}
 
 /* Span within the underline class */
 .span {
diff --git a/assets/css/BookRecommend.css b/assets/css/BookRecommend.css
new file mode 100644
index 000000000..763847f4b
--- /dev/null
+++ b/assets/css/BookRecommend.css
@@ -0,0 +1,400 @@
+/* recommendation system */
+.section-subtitle {
+    color: var(--old-rose);
+    text-transform: uppercase;
+    font-weight: var(--fw-700);
+    letter-spacing: 4px;
+    margin-bottom: 20px;
+    font-size: 2.5rem;
+    text-align: center;
+
+  }
+#recommend{
+    margin-top: 160px;
+    justify-content: center;
+    align-items: center;
+}
+#heading{
+    margin-top: 50px;
+    justify-content: center;
+    align-items: center;
+}
+.container00 {
+    max-width: 900px;
+    max-height: 800px;
+    margin: 20px auto;
+    padding: 80px;
+    border: 1px solid #ccc;
+    /* border-radius: 5px; */
+    background-color: var(--seashell);
+    border-radius: var(--radius-5);
+    margin-bottom: 50px;
+  }
+  
+  .container01 {
+    background-color: var(--seashell);
+    border-radius: var(--radius-5);
+    margin-bottom: 50px;
+    margin-left: 310px;
+    margin-right: 310px;
+    padding: 80px;
+    border: 2px solid #b49393;
+    color: black;
+  }
+  
+  .preference-bar {
+    display: flex;
+    justify-content: center;
+    /* Center items horizontally */
+    align-items: center;
+    flex-wrap: wrap;
+    /* Allow items to wrap if they exceed container width */
+  }
+  
+  .preference-bar>* {
+    margin: 0 10px;
+    /* Add spacing between items */
+  }
+  
+  .preference-bar label {
+    font-weight: bold;
+    font-size: 20px;
+    color: #474646;
+  }
+  
+  select {
+    /* Remove default blue background color */
+    background-color: transparent;
+    /* Optional: Remove default blue text color */
+    color: black;
+    /* or whatever color you want */
+  }
+  
+  .preference-bar button {
+    padding: 10px 16px;
+    font-size: 16px;
+    border-radius: 5px;
+    /* background-color: #007bff; */
+    /* color: #fff; */
+    border: none;
+    cursor: pointer;
+  }
+  
+  /* .preference-bar button:hover { */
+  /* background-color: #0056b3; */
+  /* } */
+  
+  .preference-bar select {
+    padding: 8px;
+    font-size: 20px;
+    border-radius: 5px;
+    border: 2px solid #444242;
+    outline: none;
+    background-color: rgb(234, 224, 221);
+    color: #333;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .preference-bar select option {
+    background-color: rgb(242, 227, 227);
+    color: #333;
+    padding: 8px;
+  }
+  
+  .container00 h2 {
+    color: rgb(62, 60, 60);
+    margin-bottom: 50px;
+    margin-left: 230px;
+    font-size: 30px;
+  }
+  
+  .preference-bar select:hover {
+    background-color: var(--old-rose_30);
+  }
+  
+  .preference-bar select:focus {
+    border-color: #1e1e1f;
+    /* Border color when the select element is focused */
+    box-shadow: 0 0 5px rgb(232, 167, 137);
+    /* Adding a shadow for better focus indication */
+  }
+  
+  .dark-mode .preference-bar label,
+  .dark-mode .preference-bar select:hover,
+  .dark-mode .container00 h2 {
+    color: white;
+    /* Color for dark mode */
+  }
+  
+  #heading {
+    margin-top: 50px;
+  }
+  
+  
+  .book {
+    display: flex;
+    margin-bottom: 20px;
+    border: 3px double #7c7b7a;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+  
+  .book .book-info {
+    flex: 1;
+    padding: 20px;
+    background-color: #f9f9f9;
+  }
+  
+  .book .book-info h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  
+  .book .book-info p {
+    margin: 5px 0;
+  }
+  
+  .book .book-info img {
+    width: 120px;
+    /* Adjust the width as needed */
+    height: auto;
+    float: right;
+    margin-left: 20px;
+  }
+  
+  .book .book-info h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+  
+  .recommendationTitle {
+    font-size: larger;
+    margin-left: 200px;
+    margin-bottom: 20px;
+  }
+  
+  body {
+    overflow-x: hidden;
+  }
+  
+  body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+  }
+  
+  body.dark-mode .h1,
+  body.dark-mode .h2,
+  body.dark-mode .h3 {
+    color: #ffffff;
+    margin: 0 10px;
+  }
+  
+  .container00.dark-mode,
+  .container01.dark-mode {
+    background-color: #1e1e1e;
+    color: #ffffff;
+  }
+  
+  .section-subtitle.dark-mode,
+  .h2.section-title.has-underline.dark-mode {
+    color: #ffffff;
+  }
+  
+  .btn-primary.dark-mode {
+    background-color: #333333;
+    color: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  
+  .book-info.dark-mode {
+    background-color: #2c2c2c;
+    color: #ffffff;
+  }
+  
+  .book-image.dark-mode {
+    border: 1px solid #ffffff;
+  }
+  
+  .cards {
+    height: 28rem;
+  }
+  
+  .pricing-card {
+    height: 70rem
+  }
+  
+  .card-title {
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  
+  
+  /* Media Queries for Recommended Books section */
+  
+  
+  /* Extra small devices (phones, 600px and down) */
+  @media only screen and (max-width: 600px) {
+    .container00 {
+      padding: 30px;
+      margin-bottom: 30px;
+    }
+  
+    .container01 {
+      padding: 30px;
+      margin-bottom: 30px;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  
+    .preference-bar {
+      flex-direction: column;
+      /* Stack items vertically */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 16px;
+      /* Reduce font size for better fit */
+    }
+  
+    .container00 h2 {
+      font-size: 24px;
+      margin-left: 0;
+    }
+  }
+  
+  
+  /* Devices between 600px and 768px */
+  @media only screen and (min-width: 600px) and (max-width: 767px) {
+    .container00 {
+      padding: 40px;
+      /* Adjust padding for better spacing */
+      margin-bottom: 40px;
+      /* Adjust margin for better spacing */
+    }
+  
+    .container01 {
+      padding: 40px;
+      /* Adjust padding for better spacing */
+      margin-bottom: 40px;
+      /* Adjust margin for better spacing */
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  
+    .preference-bar {
+      flex-direction: column;
+      /* Stack items vertically */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 16px;
+      /* Reduce font size for better fit */
+    }
+  
+    .container00 h2 {
+      font-size: 26px;
+      /* Increase font size for better readability */
+      margin-left: 0;
+    }
+  }
+  
+  
+  /* Small devices (landscape phones, 768px and up) */
+  @media only screen and (min-width: 768px) {
+  
+    /* No changes needed from the base styles */
+    .container00 {
+      max-width: 700px;
+      /* Adjust the max-width for better layout on landscape phones */
+      padding: 50px;
+      /* Increase padding for better spacing */
+    }
+  
+    .container01 {
+      max-width: 700px;
+      /* Adjust the max-width for better layout on landscape phones */
+      margin-left: auto;
+      margin-right: auto;
+      padding: 50px;
+      /* Increase padding for better spacing */
+    }
+  
+    .preference-bar {
+      justify-content: space-between;
+      /* Maintain space between items */
+      flex-wrap: wrap;
+      /* Allow items to wrap */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 18px;
+      /* Increase font size for better readability */
+    }
+  }
+  
+  
+  /* Medium devices (tablets, 992px and up) */
+  @media only screen and (min-width: 992px) {
+    .container00 {
+      max-width: 800px;
+    }
+  
+    .container01 {
+      max-width: 800px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  
+    .preference-bar {
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 18px;
+    }
+  }
+  
+  /* Large devices (desktops, 1200px and up) */
+  @media only screen and (min-width: 1200px) {
+    .container00 {
+      max-width: 1000px;
+    }
+  
+    .container01 {
+      max-width: 1000px;
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 20px;
+    }
+  }
+  
+  /* media queries for chat widget  */
+  
+  @media screen and (min-width:960px){
+   .bp-widget-web.bp-widget-web{
+    right: calc(3.4% - 23px) ;
+    } 
+  }
+  
+  @media screen and (min-width:1010px) {
+    .bp-widget-web.bp-widget-web{
+    right: calc(2.8% - 23px) ;
+  }
+  }
+  
+  @media only screen and (max-width: 598px) {
+    
+    .bp-widget-web.bp-widget-web{
+      right: calc(4.95% - 23px) ;
+    }
+  }
\ No newline at end of file
diff --git a/assets/css/aboutus.css b/assets/css/aboutus.css
index b23a35f40..94e3aeda1 100644
--- a/assets/css/aboutus.css
+++ b/assets/css/aboutus.css
@@ -110,6 +110,7 @@ h1, h2, h3 {
   
   .navbar-link:is(:hover, :focus) {
     color: var(--old-rose);
+    text-decoration: none;
   }
   
   .dropdown-menu {
diff --git a/assets/css/forgot-pass.css b/assets/css/forgot-pass.css
index 577d5cc8f..96cffcb2a 100644
--- a/assets/css/forgot-pass.css
+++ b/assets/css/forgot-pass.css
@@ -46,14 +46,14 @@ body {
   /* intro to page */
 
   .bookworms{
+    margin-top:200px;
+    margin-bottom: 50px;
     display: flex;
     margin-top:120px;
     margin-left: 50px;
     margin-bottom: 40px;
     align-items: center;
   }
-  
-  
 @media (max-width: 600px) {
   .bookworms {
       display: flex;
diff --git a/assets/css/freeBooks.css b/assets/css/freeBooks.css
index 47b68cd32..ece997807 100644
--- a/assets/css/freeBooks.css
+++ b/assets/css/freeBooks.css
@@ -84,9 +84,10 @@
     background-color: var(--old-rose_30);
     box-shadow: 7px -7px var(--old-rose_30);
   }
-  .book_title{
+  .book_title .dark-mode{
     color:white;
   }
+  
   .section_text1{
     color:white;
   }
\ No newline at end of file
diff --git a/assets/css/login.css b/assets/css/login.css
index d7b8c4f4d..31f761637 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -232,6 +232,17 @@ label {
   border-radius: 4px;
   font-size: 1.5rem;
 }
+.input.dark-mode{
+  width: 100%;
+  height: 40px;
+  background: #121212;
+  padding: 10px;
+  border: none;
+  margin-top: 5%;
+  outline: none;
+  border-radius: 4px;
+  font-size: 1.5rem;
+}
 /* OR separator */
 #or {
   display: flex;
@@ -606,10 +617,6 @@ body.dark-mode {
 .dark-mode.navbar{
   background-color: #1e1c1c;
 }
-.dark-mode.main{
-  box-shadow: 0 0 20px rgba(230, 230, 230, 0.2);
-  background-color: hsl(0, 0%, 16%);
-}
 .dark-mode#login label {
   color:#e6e6e6;
 }
@@ -630,6 +637,9 @@ body.dark-mode {
 #register.dark-mode:hover{
   color: var(--old-rose);
 }
+.dark-mode .input{
+  background: #292626;
+}
 
 .register label.dark-mode{
   color:#373737;
@@ -975,7 +985,9 @@ label[for="email"] {
   text-align: center;
   color: black;
 }
-
+label[for="email"]{
+  color: white;
+}
 input:focus {
   outline: 0;
 }
@@ -1125,13 +1137,13 @@ input[type="submit"]:hover {
       align-items: center;
       gap: 20px;
   }
-  
+
     .foot-middle {
       font-size: 1.4 rem;
       text-align: center;
       margin-left:50px;
   }
-  
+
 }
 
 .footer-link:is(:hover, :focus) {
@@ -1141,4 +1153,13 @@ input[type="submit"]:hover {
 .footer-bottom {
   text-align: center;
   margin-top: 20px;
-}
\ No newline at end of file
+}
+
+.fab.fa-twitter{
+  font-family:sans-serif;
+}
+.fab.fa-twitter::before{
+  content:"𝕏";
+  font-size:1.1em;
+  background-color: transparent;
+}
diff --git a/assets/css/rate.css b/assets/css/rate.css
index c58f9c6ae..95b066869 100644
--- a/assets/css/rate.css
+++ b/assets/css/rate.css
@@ -2,6 +2,7 @@
     margin: 20px;
     padding: 0px;
     box-sizing: border-box;
+    z-index: 0;
 }
 
 body {
diff --git a/assets/css/read_later.css b/assets/css/read_later.css
new file mode 100644
index 000000000..85d163557
--- /dev/null
+++ b/assets/css/read_later.css
@@ -0,0 +1,2588 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+h1 {
+    margin-top: 20px;
+}
+
+.read-later-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    padding: 20px;
+}
+
+.read-later-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    padding: 10px;
+    background-color: #fff;
+    width: 100%;
+    max-width: 500px;
+    box-sizing: border-box;
+}
+
+.read-later-item img {
+    max-width: 100px;
+    height: auto;
+    margin-right: 20px;
+}
+
+.read-later-item p {
+    flex: 1;
+    margin: 0;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+button {
+  padding: 5px 10px;
+  cursor: pointer;
+  background-color: hsl(357, 37%, 62%);
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: hsl(357, 37%, 52%);
+}
+
+
+hr {
+    width: 100%;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 10px 0;
+}
+
+
+
+::-webkit-scrollbar-track {
+    background: var(--grey-white);
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      to bottom,
+      hsl(357, 37%, 62%),
+      hsl(304, 14%, 46%)
+    );
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(357, 37%, 62%);
+  }
+  
+  .container1 {
+    padding: 70px 100px;
+    background-color: var(--seashell);
+    border: 2px solid hsl(20, 43%, 93%);
+    box-shadow: var(--shadow-2);
+    max-width: 1000px;
+    margin: 0 auto;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 750px;
+    gap: 2rem;
+  }
+  
+  .formform-label,
+  .form-label {
+    color: var(--charcoal);
+  }
+  
+  .input-field {
+    margin-top: 5px;
+  }
+  
+  .circle {
+    height: 24px;
+    width: 24px;
+    border-radius: 24px;
+    background-color: black;
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 99999999;
+    /* so that it stays on top of all other elements */
+  }
+  /* media queries for cursor on mobile and tablet */
+  @media only screen and (max-width:998px) {
+   .circle{
+    display: none;
+   } 
+  }
+  
+  .navbar-list {
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .navbar-item {
+    cursor: pointer;
+    padding: none;
+    font-size: 15px;
+  }
+  
+  /* Google Translate Element */
+  #google_element {
+    font-family: var(--ff-poppins);
+    font-size: 1.6rem;
+    color: var(--charcoal);
+  }
+  
+  /* Select options */
+  .goog-te-combo {
+    background-color: var(--seashell);
+    color: var(--charcoal);
+    border: 2px solid hsl(20, 43%, 93%);
+    border-radius: 5px;
+    padding: 8px 8px;
+    cursor: pointer;
+  }
+  
+  /* Change the hover effect of the options */
+  .goog-te-combo option:hover {
+    background-color: lightcoral !important; /* Change to your desired background color for options on hover */
+    color: white; /* Change to your desired text color for options on hover */
+  }
+  .form-label {
+    color: var(--charcoal);
+  }
+  
+  .exchange-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  
+  .form-fields {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    width: 100%;
+  }
+  
+  :root {
+    /**
+     * colors
+     */
+  
+    --chinese-violet_30: hsla(304, 14%, 46%, 0.3);
+    --chinese-violet: hsl(304, 14%, 46%);
+    --sonic-silver: hsl(208, 7%, 46%);
+    --old-rose_30: hsla(357, 37%, 62%, 0.3);
+    --ghost-white: hsl(233, 33%, 95%);
+    --light-pink: hsl(357, 93%, 84%);
+    --light-gray: hsl(0, 0%, 80%);
+    --old-rose: hwb(357 6% 36%);
+    --seashell: hsl(20, 43%, 93%);
+    --charcoal: hsl(203, 30%, 26%);
+    --white: hsl(0, 0%, 100%);
+  
+    /**
+     * typography
+     */
+  
+    --ff-philosopher: "Philosopher", sans-serif;
+    --ff-poppins: "Poppins", sans-serif;
+  
+    --fs-1: 4rem;
+    --fs-2: 3.2rem;
+    --fs-3: 2.7rem;
+    --fs-4: 2.4rem;
+    --fs-5: 2.2rem;
+    --fs-6: 2rem;
+    --fs-7: 1.8rem;
+  
+    --fw-500: 500;
+    --fw-700: 700;
+  
+    /**
+     * spacing
+     */
+  
+    --section-padding: 60px;
+  
+    /**
+     * shadow
+     */
+  
+    --shadow-1: 4px 6px 10px hsla(231, 94%, 7%, 0.06);
+    /* --shadow-2: 2px 0px 15px 5px hsla(231, 94%, 7%, 0.06); */
+    --shadow-2: 0px 1px 7px 5px hsla(231, 94%, 7%, 0.06);
+    --shadow-3: 3px 3px var(--chinese-violet);
+    --shadow-4: 5px 5px var(--chinese-violet);
+  
+    /**
+     * radius
+     */
+  
+    --radius-5: 5px;
+    --radius-10: 10px;
+  
+    /**
+     * clip path
+     */
+  
+    --polygon: polygon(100% 29%, 100% 100%, 19% 99%, 0 56%);
+  
+    /**
+     * transition
+     */
+  
+    --transition-1: all 0.15s ease;
+    --transition-2: 0s ease;
+    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
+  }
+  
+  /* Define the animation */
+  @keyframes float {
+    0% {
+      transform: translateY(0);
+    }
+  
+    50% {
+      transform: translateY(-10px);
+    }
+  
+    100% {
+      transform: translateY(0);
+    }
+  }
+  
+  /* Apply animation to the hero-banner */
+  .hero-banner {
+    position: relative;
+  }
+  
+  .hero-banner img {
+    width: 100%;
+    height: auto;
+    display: block;
+    animation: float 1.5s ease-in-out infinite;
+  }
+  
+  /*-----------------------------------*\
+    #RESET
+  \*-----------------------------------*/
+  
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  li {
+    list-style: none;
+  }
+  
+  a,
+  img,
+  span,
+  data,
+  input,
+  button,
+  textarea,
+  ion-icon {
+    display: block;
+  }
+  
+  a {
+    color: saddlebrown;
+    text-decoration: none;
+  }
+  
+  img {
+    height: auto;
+  }
+  
+  input,
+  button,
+  textarea {
+    background: none;
+    border: none;
+    font: inherit;
+  }
+  
+  input,
+  textarea {
+    width: 100%;
+  }
+  
+  button {
+    cursor: pointer;
+  }
+  
+  address {
+    font-style: normal;
+  }
+  
+  ion-icon {
+    pointer-events: none;
+  }
+  
+  html {
+    font-family: var(--ff-poppins);
+    font-size: 10px;
+  }
+  
+  body {
+    /* background-color: var(--white); */
+    background-color: #FFB2A8;
+    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;
+    color: var(--sonic-silver);
+    /* font-size: 1.6rem; */
+    font-size: 1.55rem;
+    line-height: 1.8;
+  }
+  
+  :focus-visible {
+    outline-offset: 4px;
+  }
+  
+  ::selection {
+    background-color: var(--old-rose);
+    color: var(--white);
+  }
+  
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: var(--grey-white);
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom,
+        hsl(357, 37%, 62%),
+        hsl(304, 14%, 46%));
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(357, 60%, 45%);
+  }
+  
+  
+  
+/*-----------------------------------*\
+  #HEADER
+\*-----------------------------------*/
+
+.header {
+  background-color: var(--white);
+
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  padding-block: 12px;
+  z-index: 4;
+  transition: var(--transition-2);
+}
+
+.header.active {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  filter: drop-shadow(var(--shadow-1));
+  transform: translateY(-100%);
+  transition: none;
+  animation: slideIn 0.5s ease forwards;
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-family: var(--ff-philosopher);
+  font-size: 4rem;
+  color: var(--charcoal);
+  line-height: 1;
+}
+
+.dark-mode .logopic {
+  content: url("./../images/new_logo_banner_light.png");
+}
+
+.nav-toggle-btn {
+  font-size: 40px;
+  color: var(--charcoal);
+}
+
+.nav-toggle-btn ion-icon {
+  --ionicon-stroke-width: 20px;
+}
+
+.nav-toggle-btn.active .open,
+.nav-toggle-btn .close {
+  display: none;
+}
+
+.nav-toggle-btn .open,
+.nav-toggle-btn.active .close {
+  display: block;
+}
+
+.navbar {
+  border: 1px solid #000;
+  display: inline-block;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: var(--white);
+  padding-inline: 15px;
+  max-height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  transition: 0.25s var(--cubic-out);
+}
+
+.navbar.active {
+  max-height: 387px;
+  visibility: visible;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  transition-duration: 0.5s;
+  overflow-y: scroll;
+}
+
+
+.navbar-list {
+  display: flex;
+  justify-content: center;
+  /* Center align the navbar items */
+  align-items: center;
+  /* Vertically center the navbar items */
+  margin: 0;
+  /* Remove default margin */
+  padding: 0;
+  /* Remove default padding */
+}
+
+.navbar-item {
+  margin: 0 10px;
+  /* Adjust the horizontal margin to increase spacing */
+  padding: 0;
+  /* Remove default padding */
+}
+
+
+.navbar-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  color: var(--charcoal);
+  padding: 8px 12px;
+  /* Adjust padding as needed */
+  line-height: 2;
+  transition: var(--transition-1);
+}
+
+.navbar-link:is(:hover, :focus) {
+  color: var(--old-rose);
+}
+
+.dropdown-menu {
+  /* display: none;
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  background-color: var(--white);
+  padding: 10px;
+  border-radius: 5px; */
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  transition: all 0.3s ease;
+  top: 100%;
+  text-align: center;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  border-radius: 8px;
+  background-color: transparent;
+  overflow: hidden;
+  padding: 5px;
+  width: 200px;
+  border: 1px solid #ddd; /* Add a light gray border */
+
+}
+
+.dropdown-menu-item {
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.dropdown-menu-item:last-child {
+  margin-bottom: 0;
+}
+
+.dropdown-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+
+
+.dropdown-menu-item a {
+  text-decoration: none;
+  color: #000;
+  color: #fff; /* White color for links */
+  display: block;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+}
+
+.dropdown-item:first-child {
+  margin-top: 0;
+}
+
+.dropdown-menu.active {
+  display: block;
+}
+
+.navbar-item.dropdown {
+  position: relative;
+  /* Ensure the dropdown menu is positioned relative to the navbar item */
+}
+
+.dropdown-menu-item .navbar-link {
+  display: inline-block;
+  /* Ensure links are inline-block to center them */
+}
+
+.navbar-item.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s ease;
+  /* Smooth transition for rotation */
+}
+
+.navbar-item.dropdown:hover .dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+
+.nav-toggle-btn {
+  font-size: 40px;
+  color: var(--charcoal);
+}
+
+.nav-toggle-btn ion-icon {
+  --ionicon-stroke-width: 20px;
+}
+
+.nav-toggle-btn.active .open,
+.nav-toggle-btn .close {
+  display: none;
+}
+
+.nav-toggle-btn .open,
+.nav-toggle-btn.active .close {
+  display: block;
+}
+
+.navbar {
+  border: 1px solid #000;
+  display: inline-block;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: var(--white);
+  padding-inline: 15px;
+  max-height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  transition: 0.25s var(--cubic-out);
+  padding: 0;
+}
+
+.navbar.active {
+  max-height: 387px;
+  visibility: visible;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  transition-duration: 0.5s;
+  overflow-y: scroll;
+}
+
+.navbar-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-item {
+  margin: 0 10px;
+  padding: 0;
+}
+
+.navbar-link {
+  position: relative;
+  color: var(--charcoal);
+  padding: 8px 12px;
+  line-height: 2;
+  transition: var(--transition-1);
+}
+
+.navbar-link:is(:hover, :focus) {
+  color: var(--old-rose);
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  transition: all 0.3s ease;
+  top: 100%;
+
+}
+
+.dropdown-menu-list {
+  list-style: none;
+  
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-menu-item {
+  padding: 4px 10px;
+}
+
+.dropdown-menu-item a {
+  text-decoration: none;
+  color: #000;
+}
+
+.dropdown-menu.active {
+  display: block;
+}
+
+.navbar-item.dropdown {
+  position: relative;
+}
+  
+  /*-----------------------------------*\
+  #HERO
+\*-----------------------------------*/
+
+.hero {
+  /* border: 1px solid black; */
+  padding-block-start: calc(var(--section-padding) + 60px);
+  text-align: center;
+}
+
+.hero .container {
+  /* border: 1px solid black; */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.hero-content {
+  /* border: 1px solid black; */
+  width: 55%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+
+
+}
+
+.hero .hero-title {
+  margin-block: 10px 25px;
+  font-size: 5rem;
+  text-align: start;
+}
+
+
+.hero .section-text {
+  font-size: 1.5rem;
+  margin-top: 0;
+}
+
+.hero-banner {
+  width: 40%;
+  padding-inline-start: 20px;
+  padding-block-end: 30px;
+  max-width: 400px;
+  margin-top: 2.5rem;
+
+  /* border: 2px solid red; */
+}
+
+.hero-banner .w-100 {
+  border-radius: 10px;
+  height: 100%;
+}
+
+.hero-banner::before {
+  top: 30px;
+  right: 30px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--light-pink);
+  border-radius: var(--radius-10);
+  z-index: -1;
+}
+
+.play-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: hsl(0, 0%, 100%);
+  color: var(--chinese-violet);
+  font-size: 2rem;
+  margin-top: 1.5rem;
+  padding: 10px 15px;
+  border-radius: 10px;
+  transition: all 1s ease;
+  animation: pulse 1s ease infinite;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+    rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.play-btn h2 {
+  font-size: 1.5rem;
+}
+
+.play-btn:is(:hover, :focus) {
+  color: #fff;
+  background-color: var(--old-rose);
+}
+
+@keyframes pulse {
+
+  0%,
+  50% {
+    box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0.5);
+  }
+
+  100% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+}
+/* media queries for hero section on mobile and tablet */
+@media only screen and (max-width:898px){
+  .hero-content{
+    width: 90%;
+  }
+  .hero-banner{
+    width: 90%;
+    order: -1;
+  }
+
+}
+
+  
+  /*-----------------------------------*\
+  #FOOTER
+\*-----------------------------------*/
+
+footer {
+    background-color: var(--seashell);
+    padding: 20px 30px;
+    width: 100vw;
+  }
+  
+  .foot-top {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: flex-start;
+    /* Adjusted alignment */
+    border-bottom: 1px solid black;
+    padding-bottom: 20px;
+    gap: 50px;
+  }
+  
+  .desc{
+    display: flex;
+      flex-direction: column;
+      gap: 21px
+  }
+  
+  .description {
+    color: var(--sonic-silver);
+    text-align: justify;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  .foot-middle {
+    font-size: 1.6rem;
+    text-align: center;
+  }
+  
+  .foot-quick :hover {
+    color: rgb(201, 168, 168);
+  }
+  
+  .foot-middle ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  
+  .foot-middle ul li,
+  .foot-middle h2 {
+    text-align: center;
+  }
+  
+  .nav-links {
+    margin: 0;
+  }
+  
+  .nav-links ul {
+    padding: 0;
+    list-style: none;
+    /* Remove bullet points */
+  }
+  
+  .nav-links ul li {
+    margin-bottom: 10px;
+    /* Add some spacing between list items */
+  }
+  
+  .nav-links ul li a {
+    color: rgb(55, 54, 54);
+    text-decoration: none;
+    /* Remove underline */
+  }
+  
+  .nav-links ul li a:hover {
+    color: rgb(167, 95, 107);
+  }
+  
+  .foot-middle h5 {
+    color: rgb(57, 57, 57);
+    font-size: 2rem;
+    font-weight: 500;
+    text-align: center;
+  }
+  
+  .social-icons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: top;
+    gap: 10px;
+    width: auto;
+  }
+  
+  
+  .row-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  
+  }
+  
+  form[type="newsletter"]:before {
+    content: "";
+    /*   background: rgba(255, 255, 0, 0.8);  */
+    display: flex;
+    width: 200px;
+    height: 100px;
+    position: absolute;
+    z-index: -1;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    top: -500px;
+    left: -60px;
+  }
+  
+  form[type="newsletter"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+    /* Adjusted margin */
+    padding: 20px;
+    /* Adjusted padding */
+  }
+  
+  label[for="email"] {
+    display: block;
+    font-size: 16px;
+    /* Increased font size */
+    font-weight: 700;
+    letter-spacing: 1px;
+    /* Decreased letter spacing */
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  
+  input:focus {
+    outline: 0;
+  }
+  
+  input[type="news"] {
+    width: 100%;
+    /* Adjusted width */
+    max-width: 300px;
+    background: #fff;
+    height: 40px;
+    /* Increased height */
+    padding: 10px;
+    /* Adjusted padding */
+    margin-bottom: 10px;
+    /* Increased margin */
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: var(--radius-1);
+  
+    transition: border-color 0.3s;
+    text-transform: uppercase;
+  }
+  
+  input[type="news"]:focus {
+    border: 2px solid #c27a7e;
+  }
+  
+  input[type="submit"] {
+    width: 100%;
+    /* Adjusted width */
+    max-width: 300px;
+    background: rgb(167, 95, 107);
+    border: 0;
+    height: 40px;
+    /* Increased height */
+    line-height: 40px;
+    /* Adjusted line height */
+    padding: 0;
+    /* Removed padding */
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+  
+  input[type="submit"]:hover {
+    background: linear-gradient(to right, #000 50%, #36363b 50%);
+    background-size: 200% 100%;
+    color: white;
+  
+    background-position: right bottom;
+    -webkit-transition: all 200ms ease;
+    -moz-transition: all 200ms ease;
+    -ms-transition: all 200ms ease;
+    -o-transition: all 200ms ease;
+    transition: all 200ms ease;
+  }
+  
+  .gen-hover:hover {
+    color: rgb(167, 95, 107);
+  }
+  
+  .social-icons h5 {
+    color: rgb(57, 57, 57);
+    padding-top: 35px;
+    font-size: 2rem;
+    font-weight: 500;
+    text-align: center;
+    margin: 20px;
+  }
+  
+  .in-css {
+    background-color: white;
+    border-radius: 4px;
+    padding: 3px;
+  }
+  
+  .btn-signup {
+    padding: 4px;
+    color: white;
+    background-color: var(--old-rose);
+    border-radius: 5px;
+  }
+  
+  .btn-signup:hover {
+    color: white;
+    background-color: var(--chinese-violet);
+  }
+  
+  .icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    /* Increased gap for larger icons */
+  }
+  .icons .icon i {
+    font-size: 24px;
+    /* Set the default font size for icons */
+    transition: all 0.3s ease;
+    /* Add transition for smooth animation */
+  }
+  
+  .icons .icon:hover {
+    transform: scale(1.5);
+    /* Scale the icon on hover */
+  }
+  
+  .icons .icon:hover .fab.fa-facebook-square {
+    color: #1877f2;
+    /* Change to Facebook color on hover */
+  }
+  
+  .icons .icon:hover .fa-brands.fa-square-x-twitter {
+    color: #1da1f3;
+    /* Change to Twitter color on hover */
+  }
+  
+  .icons .icon:hover .fab.fa-instagram-square {
+    color: #c13583;
+    /* Change to Instagram color on hover */
+  }
+  
+  .icons .icon:hover .fab.fa-youtube-square {
+    color: #ff0001;
+    /* Change to YouTube color on hover */
+  }
+  
+  .icon-set {
+    height: 40px;
+    /* Increased icon size */
+    width: 40px;
+    /* Increased icon size */
+  }
+  
+  .icon-set:hover {
+    transform: scale(1.1);
+    /* Added scale effect */
+    filter: grayscale(0%) hue-rotate(0deg) saturate(150%);
+    /* Adjusted hover effect */
+  }
+  
+  .icon-set:active {
+    filter: hue-rotate(50%);
+  }
+  
+  .social-list {
+    display: flex;
+    /* flex-direction: column; */
+    overflow: hidden;
+  }
+  
+  /* .footer-top {
+    padding-block: 50px;
+    border-block-end: 1px solid var(--chinese-violet_30);
+  } */
+  
+  .footer .logo {
+    margin-block-end: 15px;
+  }
+  
+  /* .footer-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    column-gap: 20px;
+  } */
+  
+  /* .footer-link {
+    color: var(--charcoal);
+    transition: var(--transition-1);
+  } */
+  
+  .footer-link:is(:hover, :focus) {
+    color: var(--old-rose);
+  }
+  
+  .footer-bottom {
+    text-align: center;
+    margin-top: 20px;
+  }
+  
+  /*-----------------------------------*\
+    #MEDIA QUERIES
+  \*-----------------------------------*/
+  
+  @media (max-width: 768px) {
+  
+    .foot-left,
+    .foot-right {
+      margin-bottom: 30px;
+      flex: 1 100%;
+    }
+  }
+  
+  /* @media (max-width: 480px) {} */
+  
+  /**
+   * responsive for large than 575px screen
+   */
+  @media (max-width: 575px) {
+    .container1 {
+      max-width: 350px;
+      width: 100%;
+      margin-inline: auto;
+      border-radius: var(--radius-5);
+      padding: 30px;
+    }
+  
+    .container {
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+      padding-left: 0 !important;
+    }
+  
+    html {
+      overflow-x: hidden;
+    }
+    .hero-content{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    .hero .hero-title {
+      font-size: 3rem;
+      line-height: 120%;
+      margin-bottom: 10px;
+      text-align: center;
+    }
+    .section-text{
+      text-align: center;
+    }
+    .section-subtitle{
+      line-height: 120%;
+    }
+  }
+  
+  @media (min-width: 575px) {
+    /**
+     * CUSTOM PROPERTY
+     */
+  
+    :root {
+      /**
+       * typography
+       */
+  
+      --fs-2: 4.5rem;
+      --fs-3: 3.5rem;
+      --fs-5: 2.5rem;
+    }
+  
+    /**
+     * REUSED STYLE
+     */
+  
+    .container,
+    .container1,
+    .header,
+    .navbar {
+      max-width: 540px;
+      width: 100%;
+      margin-inline: auto;
+      padding: 0;
+      /* border-radius: var(--radius-5); */
+    }
+  
+    .section-text {
+      --fs-7: 2rem;
+    }
+  
+    /**
+     * HEADER
+     */
+  
+    .header {
+      top: 30px;
+    }
+  
+    .header.active {
+      max-width: unset;
+      border-radius: 0px;
+    }
+  
+    .navbar {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  
+    /**
+     * PREVIEW
+     */
+  
+    .tab-card.active {
+      height: 50vh;
+    }
+  
+    /**
+     * ACHIEVEMENT
+     */
+  
+    .achievement-card {
+      display: flex;
+    }
+  
+    .achievement-card>* {
+      width: 50%;
+    }
+  
+    .achievement-card .card-content {
+      padding-block: 30px;
+    }
+  
+    .achievement-card .card-title {
+      margin-block-end: 20px;
+    }
+  
+    /**
+     * CONTACT
+     */
+  
+    .social-list-title {
+      --fs-6: 2.2rem;
+    }
+  
+    .social-link {
+      font-size: 25px;
+      padding: 8px;
+    }
+  }
+  
+  /**
+   * responsive for large than 768px screen
+   */
+  
+  @media (min-width: 768px) {
+    /**
+     * CUSTOM PROPERTY
+     */
+  
+    :root {
+      /**
+       * typography
+       */
+  
+      --fs-2: 4.8rem;
+    }
+  
+    /**
+     * REUSED STYLE
+     */
+  
+    .container,
+    .container1,
+    .header,
+    .navbar {
+      max-width: 720px;
+      /* border-radius:61px; */
+    }
+  
+    .grid-list {
+      grid-template-columns: 1fr 1fr;
+    }
+  
+    /**
+     * HERO
+     */
+  
+    .hero {
+      top: 75px;
+      position: relative;
+      padding-block-start: calc(var(--section-padding) + 100px);
+      text-align: left;
+    }
+  
+    .hero .container {
+      grid-template-columns: 1fr 0.8fr;
+      align-items: center;
+    }
+  
+  
+    /**
+     * BENEFITS
+     */
+  
+    .benefits :is(.section-title, .section-text) {
+      text-align: left;
+    }
+  
+    .benefits-content {
+      grid-column: 1 / 3;
+    }
+  
+    /**
+     * CHAPTERS, PRICING
+     */
+  
+    :is(.chapters, .pricing) .grid-list li:last-child {
+      grid-column: 1 / 3;
+      max-width: calc(50% - 12.5px);
+      width: 100%;
+      margin-inline: auto;
+    }
+  
+    /**
+     * PREVIEW
+     */
+  
+    .tab-card.active {
+      height: 70vh;
+    }
+  
+    /**
+     * AUTHOR
+     */
+  
+    .author .h2 {
+      --fs-3: 4.2rem;
+    }
+  
+    /**
+     * ACHIEVEMENT
+     */
+  
+    .achievement-card {
+      flex-direction: column;
+    }
+  
+    .achievement-card>* {
+      width: 100%;
+    }
+  
+    /**
+     * CONTACT
+     */
+  
+    .contact .wrapper {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  
+  @media (max-width: 992px) {
+    .switch-container {
+      /* right: -20px; */
+      bottom: 20px;
+      transform: translateY(-25px) !important;
+      right: 10px !important;
+      /* right: 20px; */
+    }
+  
+    .hero .container {
+      gap: 3rem;
+      justify-content: center;
+    }
+  
+    .hero .container .hero-content,
+    .hero .container .hero-banner {
+      flex: 1 0 25rem;
+    }
+  
+    .benefits .container,
+    .container,
+    .chapters .container,
+    .pricing .container {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+  
+  /**
+   * responsive for large than 992px screen
+   */
+  
+  @media (min-width: 992px) {
+    /**
+     * CUSTOM PROPERTY
+     */
+  
+    :root {
+      /**
+       * typography
+       */
+  
+      --fs-2: 5.4rem;
+      --fs-3: 4rem;
+    }
+  
+    /**
+     * REUSED STYLE
+     */
+  
+    .container,
+    .container1,
+    .header,
+    .navbar {
+      max-width: 987px;
+      border-radius: 10px;
+      padding: 0;
+    }
+  
+    .grid-list {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  
+    /**
+     * HEADER
+     */
+  
+    .header .container {
+      padding-inline: 0px 30px;
+    }
+  
+    .nav-toggle-btn {
+      display: none;
+    }
+  
+    .navbar,
+    .navbar.active {
+      all: unset;
+    }
+  
+    .navbar-list {
+      margin-block-end: 0;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      text-align: center;
+      gap: 12px;
+  
+    }
+  
+    /* .switch-container {
+      right: 0.2rem;
+    } */
+  
+    /**
+     * CHAPTER, PRICING
+     */
+  
+    :is(.chapters, .pricing) .grid-list li:last-child {
+      all: unset;
+    }
+  
+    /**
+     * PREVIEW
+     */
+  
+    .tab-list {
+      flex-direction: row;
+      gap: 20px;
+    }
+  
+    .tab-text {
+      text-orientation: upright;
+      white-space: nowrap;
+      writing-mode: vertical-lr;
+    }
+  
+    .tab-card {
+      height: 70vh;
+      max-width: 60px;
+    }
+  
+    .tab-card.active {
+      max-width: 650px;
+    }
+  
+    /**
+     * AUTHOR
+     */
+  
+    .author .container {
+      grid-template-columns: 0.6fr 1fr;
+      gap: 0;
+    }
+  
+    .author-content {
+      margin-block-start: 40px;
+      margin-inline-start: -30px;
+      padding-block-end: 70px;
+    }
+  
+    /**
+     * ACHIEVEMENT
+     */
+  
+    .achievement .grid-list {
+      grid-template-columns: 1fr 1fr;
+    }
+  
+    .achievement-card {
+      flex-direction: row;
+    }
+  
+    .achievement-card>* {
+      width: 50%;
+    }
+  
+    /**
+     * CONTACT
+     */
+  
+    .contact .wrapper {
+      grid-template-columns: 1fr 0.5fr;
+    }
+  
+    .contact-form {
+      padding: 40px;
+    }
+  }
+  
+  @media (min-width: 992px) {
+    .benefits .grid-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 20px;
+      /* Add gap between cards */
+      align-items: center;
+    }
+  
+    .benefits-card {
+      width: calc(33.33% - 20px);
+      height: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      margin-bottom: 20px;
+      /* Add margin to separate cards vertically */
+      margin: 20px;
+      /* Add margin to provide full spacing for each card */
+    }
+  
+    .benefits-content {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+  
+    .benefits-card .card-text {
+      margin-block-end: 20px;
+    }
+  
+    .container{
+      padding-inline: 5rem;
+    }
+    .hero-button{
+      padding: 0;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  /**
+   * responsive for large than 1200px screen
+   */
+  
+  @media (min-width: 1200px) {
+    /**
+     * CUSTOM PROPERTY
+     */
+  
+    :root {
+      /**
+       * typography
+       */
+  
+      --fs-2: 6rem;
+      --fs-3: 4.5rem;
+      --fs-4: 3rem;
+      --fs-5: 3rem;
+    }
+  
+    /**
+     * REUSED STYLE
+     */
+  
+    .container,
+    .header,
+    .navbar {
+      max-width: 1330px;
+      border-radius: 10px;
+    }
+  
+    .navbar-list {
+      gap: 30px;
+      /* Increase gap between navbar items */
+      justify-content: center;
+      /* Center align navbar items */
+      padding-left: 2rem;
+  
+    }
+  
+    .benefits .grid-list {
+      grid-template-columns: repeat(3, 1fr);
+      /* Display three cards per row */
+      gap: 20px;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    .benefits-card {
+      width: calc(33.33% - 20px);
+      /* Adjust width for three cards per row */
+      margin: 20px;
+    }
+  
+    /**
+     * PREVIEW
+     */
+  
+    .tab-card {
+      max-width: 75px;
+    }
+  
+    .tab-card.active {
+      max-width: 750px;
+    }
+  
+    /**
+     * AUTHOR
+     */
+  
+    .author-content {
+      padding: 85px 60px 115px;
+    }
+  
+    /**
+     * FOOTER
+     */
+  
+    .footer-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  
+    .footer .logo {
+      margin-block-end: 0;
+    }
+  }
+  
+  .social_media_icons {
+    font-size: 30px;
+  }
+  
+  /*Adding Transitions*/
+  
+  .navbar-link {
+    transition: all 0.3s ease;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  
+  /* .navbar-link:hover {
+    transform: scale(1.1);
+    border-radius: 15px;
+    background-color: blanchedalmond; */
+  /* text-shadow: 2px 2px 10px #f39d127e, -2px -2px 4px rgba(175, 142, 25, 0.5); */
+  
+  
+  
+  
+  /* .navbar-link.active,
+  .navbar-link:hover {
+    /* font-size: 1.1em; */
+  /* border-bottom: 2px solid darkred; 
+    color: #fcb0b480;
+  } */
+  
+  .navbar-link::after {
+    content: "";
+    position: absolute;
+    bottom: 1px;
+    left: 0px;
+    height: 3px;
+    background-color: #fcb0b480;
+    width: 0;
+    height: 3px;
+    box-shadow: 0 0 10px #f39d127e;
+    transition: all 0.6s;
+  }
+  
+  .navbar-link:hover::after {
+    width: 100%;
+  }
+  
+  /* Faq Section */
+  .faq-section {
+    padding: 20px;
+    background-color: var(--seashell);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .faq {
+    font-weight: 700;
+    color: var(--sonic-silver);
+    text-align: center;
+    font-family: var(--ff-philosopher);
+  }
+  
+  .icon {
+    margin-right: 16px;
+    transition: transform 0.5s ease-in-out;
+  }
+  
+  .icon.active {
+    transform: rotate(-180deg);
+  }
+  
+  .answers {
+    color: var(--sonic-silver);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease-in-out;
+  }
+  
+  body.dark-mode {
+    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='%232f2f2f' 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='%233a3a3a' 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='%23454545' 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='%23505050' 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='%235b5b5b' 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='%23666666' 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='%23707070' 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='%237b7b7b' 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='%23858585' 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='%23909090' 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"
+      );
+  }
+  
+  .dark-mode {
+    color: #fff;
+  }
+  
+  .dark-mode .form {
+    /* background-color: #333; */
+    color: #fff;
+  }
+  
+  .dark-mode .navbar {
+    background-color: #333;
+    color: #fff;
+  }
+  
+  .dark-mode .note {
+    color: #fff;
+  }
+  
+  .dark-mode .container {
+    color: #fff;
+    padding-left: 4rem;
+    padding-right: 1rem;
+  
+  }
+  
+  .dark-mode .invert-col {
+    filter: invert(1);
+  }
+  
+  .dark-mode .footer {
+    background-color: #333;
+    color: #fff;
+  }
+  
+  
+  /*
+  .answers.active {
+    max-height: fit-content;
+  } */
+  
+  .question {
+    color: var(--sonic-silver);
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    justify-content: space-between;
+  }
+  
+  .faq-container {
+    background-color: var(--white);
+    margin-bottom: 2rem;
+    border-radius: 4px;
+    box-shadow: 1px 1px 5px #efecea;
+    padding: 4px 16px;
+    line-height: 4rem;
+    cursor: pointer;
+    width: 60%;
+  }
+  
+  .faq-container:hover {
+    background-color: var(--old-rose_30);
+  }
+  
+  /* Dark Mode Switch */
+  .dark-mode .switch-container {
+    right: -4px;
+    top: 5px;
+  }
+  
+  /**
+  * Dark Mode
+  */
+  
+  .dark-mode {
+    --sonic-silver: #fff;
+    --ghost-white: #1e1c1c;
+    --seashell: hsl(20deg 4.72% 15.44%);
+    --seashell: hsl(20deg 2.94% 14.18%);
+    /* --seashell: #1E1C1C; */
+    --charcoal: #fff;
+    --white: #1e1c1c;
+    --black: #fff;
+    --grey-white: #1e1c1c;
+  
+  
+    /* shadow */
+  
+    --shadow-1: 4px 6px 10px hsla(240, 2%, 53%, 0.484);
+    /* --shadow-2: 2px 5px 8px hsla(240, 5%, 62%, 0.545); */
+    --shadow-2: 0px 0px 7px hsla(240, 5%, 62%, 0.545);
+    --shadow-3: 3px 3px var(--seashell);
+    --shadow-4: 5px 5px var(--old-rose);
+  }
+  
+  body.dark-mode .navbar-link:hover,
+  body.dark-mode .navbar-link.active {
+    color: hsl(357, 93%, 84%);
+  }
+  
+  body.dark-mode .navbar-link::after {
+    content: "";
+    background: var(--old-rose);
+    box-shadow: 0 0 10px #fcb0b480;
+  }
+  
+  body.dark-mode .navbar-link:hover::after {
+    box-shadow: 0 0 20px hsl(357, 93%, 84%, 0.7);
+  }
+  
+  footer {
+    position: relative;
+    top: 140px;
+  }
+  
+  #back-to-top-container {
+  
+    /* position: fixed; */
+    top: 83%;
+    right: 2.8%;
+    /* Changed left to right */
+    cursor: pointer;
+    z-index: 1000;
+  }
+  
+  .circle1 {
+   
+    background-color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.3s;
+  }
+  
+  #back-to-top {
+    width: 51px;
+    height: 51px;
+    fill: #d26d6d;
+    transition: fill 0.3s;
+  }
+  
+  .circle1:hover {
+    background-color: white;
+  }
+  
+  #back-to-top:hover {
+    fill: black;
+  }
+  
+  /* Switch Container */
+  .switch-container {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+    right: -4px;
+    top: 15px;
+  }
+  
+  /* Hidden Checkbox */
+  .switch-checkbox {
+    display: none;
+  }
+  
+  /* Switch Label */
+  .switch-label {
+    position: relative;
+    width: 45px;
+    height: 30px;
+    background-color: #ccc;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.5s ease;
+  }
+  
+  .switch-label .sun-icon,
+  .switch-label .moon-icon {
+    font-size: 19px;
+    position: absolute;
+    cursor: pointer;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: opacity 0.5s ease, color 0.5s ease;
+  }
+  
+  .switch-label .sun-icon {
+    color: #f39c12;
+    left: 2px;
+  }
+  
+  .switch-label .moon-icon {
+    color: #bdc3c7;
+    opacity: 0;
+    left: 5px;
+  }
+  
+  /* Switch Button */
+  .switch-button {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 25px;
+    height: 25px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transition: transform 0.5s ease, background-color 0.5s ease;
+  }
+  
+  /* Checkbox Checked State */
+  .switch-checkbox:checked+.switch-label {
+    background-color: #34495e;
+  }
+  
+  .switch-checkbox:checked+.switch-label .sun-icon {
+    opacity: 0;
+  }
+  
+  .switch-checkbox:checked+.switch-label .moon-icon {
+    opacity: 1;
+  }
+  
+  .switch-checkbox:checked+.switch-label .switch-button {
+    transform: translateX(13px);
+    /* background-color: #34495e; */
+  }
+  
+  @media screen and (max-width: 900px) {
+    .faq-container {
+      width: 100%;
+    }
+  }
+  
+  @media (min-width: 320px) {
+    .navbar-list {
+      flex-direction: column;
+    }
+    
+  }
+  
+  @media (min-width: 481px) {
+    .navbar-list {
+      flex-direction: column;
+    }
+    .switch-container{
+      transform: translateY(-20px);
+    }
+  }
+  
+  @media (min-width: 641px) {
+    .navbar-list {
+      flex-direction: column;
+    }
+  }
+  
+  @media (min-width: 961px) {
+    .navbar-list {
+      flex-direction: row;
+    }
+  
+    #back-to-top-container {
+      position: fixed;
+      top: 82%;
+      right: 8%;
+      /* Changed left to right */
+    }
+  }
+  
+  @media (min-width: 1025px) {
+    .navbar-list {
+      flex-direction: row;
+    }
+  }
+  @media (min-width: 1281px) {
+    .navbar-list {
+      flex-direction: row;
+    }
+  }
+  
+  /* genre */
+  #genre .chapter-card {
+    background-color: var(--seashell);
+  }
+  
+  
+  .subscribe-btn {
+    background-color: var(--old-rose);
+    color: var(--white);
+  }
+  
+  .subscribe-btn:is(:hover, :focus) {
+    background-color: var(--chinese-violet);
+  }
+  
+  /* Medium devices (large tablets and small laptops, 768px to 1060px) */
+  @media (min-width: 768px) and (max-width: 1060px) {
+    .foot-top {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  
+    .foot-left {
+      max-width: 50%;
+    }
+  
+    .foot-middle,
+    .social-icons {
+      flex: 1;
+      max-width: 25%;
+      text-align: left;
+    }
+  
+    .foot-left .desc a.logo {
+      font-size: 24px;
+      font-weight: bold;
+      text-decoration: none;
+    }
+  
+    .foot-left .desc p {
+      text-align: justify;
+      max-width: 100%;
+    }
+  
+    .foot-middle h2,
+    .social-icons h5 {
+      font-size: 18px;
+    }
+  
+    .foot-middle ul {
+      list-style-type: none;
+      padding: 0;
+    }
+  
+    .foot-middle ul li {
+      margin-bottom: 10px;
+    }
+  
+    .foot-middle ul li a {
+      text-decoration: none;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .foot-top {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .foot-left,
+    .foot-middle,
+    .social-icons,
+    .description {
+      max-width: 100%;
+      text-align: center;
+    }
+  
+    .foot-left .desc a.logo {
+      display: block;
+      margin-bottom: 10px;
+    }
+  
+    .social-icons .input-newsletter {
+      flex-direction: column;
+    }
+  
+    .social-icons .input-newsletter input,
+    .social-icons .input-newsletter button,
+    .description {
+      width: 100%;
+      margin: 5px 0;
+    }
+  
+    #back-to-top-container {
+      position: fixed;
+      top: 76%;
+      right: 4.95%;
+      /* Changed left to right */
+    }
+  
+  }
+  
+  /* recommendation system */
+  .container00 {
+    max-width: 900px;
+    max-height: 800px;
+    margin: 20px auto;
+    padding: 80px;
+    border: 1px solid #ccc;
+    /* border-radius: 5px; */
+    background-color: var(--seashell);
+    border-radius: var(--radius-5);
+    margin-bottom: 50px;
+  }
+  
+  .container01 {
+    background-color: var(--seashell);
+    border-radius: var(--radius-5);
+    margin-bottom: 50px;
+    margin-left: 310px;
+    margin-right: 310px;
+    padding: 80px;
+    border: 2px solid #b49393;
+    color: black;
+  }
+  
+  .preference-bar {
+    display: flex;
+    justify-content: center;
+    /* Center items horizontally */
+    align-items: center;
+    flex-wrap: wrap;
+    /* Allow items to wrap if they exceed container width */
+  }
+  
+  .preference-bar>* {
+    margin: 0 10px;
+    /* Add spacing between items */
+  }
+  
+  .preference-bar label {
+    font-weight: bold;
+    font-size: 20px;
+    color: #474646;
+  }
+  
+  select {
+    /* Remove default blue background color */
+    background-color: transparent;
+    /* Optional: Remove default blue text color */
+    color: black;
+    /* or whatever color you want */
+  }
+  
+  .preference-bar button {
+    padding: 10px 16px;
+    font-size: 16px;
+    border-radius: 5px;
+    /* background-color: #007bff; */
+    /* color: #fff; */
+    border: none;
+    cursor: pointer;
+  }
+  
+  /* .preference-bar button:hover { */
+  /* background-color: #0056b3; */
+  /* } */
+  
+  .preference-bar select {
+    padding: 8px;
+    font-size: 20px;
+    border-radius: 5px;
+    border: 2px solid #444242;
+    outline: none;
+    background-color: rgb(234, 224, 221);
+    color: #333;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .preference-bar select option {
+    background-color: rgb(242, 227, 227);
+    color: #333;
+    padding: 8px;
+  }
+  
+  .container00 h2 {
+    color: rgb(62, 60, 60);
+    margin-bottom: 50px;
+    margin-left: 230px;
+    font-size: 30px;
+  }
+  
+  .preference-bar select:hover {
+    background-color: var(--old-rose_30);
+  }
+  
+  .preference-bar select:focus {
+    border-color: #1e1e1f;
+    /* Border color when the select element is focused */
+    box-shadow: 0 0 5px rgb(232, 167, 137);
+    /* Adding a shadow for better focus indication */
+  }
+  
+  .dark-mode .preference-bar label,
+  .dark-mode .preference-bar select:hover,
+  .dark-mode .container00 h2 {
+    color: white;
+    /* Color for dark mode */
+  }
+  
+  #heading {
+   padding-top: 18rem;
+  }
+  
+  
+  .book {
+    display: flex;
+    margin-bottom: 20px;
+    border: 3px double #7c7b7a;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+  
+  .book .book-info {
+    flex: 1;
+    padding: 20px;
+    background-color: #f9f9f9;
+  }
+  
+  .book .book-info h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  
+  .book .book-info p {
+    margin: 5px 0;
+  }
+  
+  .book .book-info img {
+    width: 120px;
+    /* Adjust the width as needed */
+    height: auto;
+    float: right;
+    margin-left: 20px;
+  }
+  
+  .book .book-info h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+  
+  .recommendationTitle {
+    font-size: larger;
+    margin-left: 200px;
+    margin-bottom: 20px;
+  }
+  
+  body {
+    overflow-x: hidden;
+  }
+  
+  body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+  }
+  
+  body.dark-mode .h1,
+  body.dark-mode .h2,
+  body.dark-mode .h3 {
+    color: #ffffff;
+    margin: 0 10px;
+  }
+  
+  .container00.dark-mode,
+  .container01.dark-mode {
+    background-color: #1e1e1e;
+    color: #ffffff;
+  }
+  
+  .section-subtitle.dark-mode,
+  .h2.section-title.has-underline.dark-mode {
+    color: #ffffff;
+  }
+  
+  .btn-primary.dark-mode {
+    background-color: #333333;
+    color: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  
+  .book-info.dark-mode {
+    background-color: #2c2c2c;
+    color: #ffffff;
+  }
+  
+  .book-image.dark-mode {
+    border: 1px solid #ffffff;
+  }
+  
+  .cards {
+    height: 28rem;
+  }
+  
+  .pricing-card {
+    height: 70rem
+  }
+  
+  .card-title {
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  
+  
+  /* Media Queries for Recommended Books section */
+  
+  @media only screen and (max-width:574px){
+    .switch-container{
+      transform: translateY(-10px) !important;
+    }
+  }
+  /* Extra small devices (phones, 600px and down) */
+  @media only screen and (max-width: 600px) {
+    .container00 {
+      padding: 30px;
+      margin-bottom: 30px;
+    }
+    
+    .container01 {
+      padding: 30px;
+      margin-bottom: 30px;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  
+    .preference-bar {
+      flex-direction: column;
+      /* Stack items vertically */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 16px;
+      /* Reduce font size for better fit */
+    }
+  
+    .container00 h2 {
+      font-size: 24px;
+      margin-left: 0;
+    }
+  }
+  
+  @media only screen and (max-width: 574px)  {
+  .switch-container{
+    transform: translateY(-10px) !important;
+  }
+  }
+  @media only screen and (min-width:574px) and( max-width:600px){
+    .switch-container{
+      transform: translateY(-25px) !important;
+    }
+  }
+  /* Devices between 600px and 768px */
+  @media only screen and (min-width: 600px) and (max-width: 767px) {
+    .container00 {
+      padding: 40px;
+      /* Adjust padding for better spacing */
+      margin-bottom: 40px;
+      /* Adjust margin for better spacing */
+    }
+    
+    .container01 {
+      padding: 40px;
+      /* Adjust padding for better spacing */
+      margin-bottom: 40px;
+      /* Adjust margin for better spacing */
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  
+    .preference-bar {
+      flex-direction: column;
+      /* Stack items vertically */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 16px;
+      /* Reduce font size for better fit */
+    }
+  
+    .container00 h2 {
+      font-size: 26px;
+      /* Increase font size for better readability */
+      margin-left: 0;
+    }
+  }
+  
+  
+  /* Small devices (landscape phones, 768px and up) */
+  @media only screen and (min-width: 768px) {
+  
+    /* No changes needed from the base styles */
+    .container00 {
+      max-width: 700px;
+      /* Adjust the max-width for better layout on landscape phones */
+      padding: 50px;
+      /* Increase padding for better spacing */
+    }
+  
+    .container01 {
+      max-width: 700px;
+      /* Adjust the max-width for better layout on landscape phones */
+      margin-left: auto;
+      margin-right: auto;
+      padding: 50px;
+      /* Increase padding for better spacing */
+    }
+  
+    .preference-bar {
+      justify-content: space-between;
+      /* Maintain space between items */
+      flex-wrap: wrap;
+      /* Allow items to wrap */
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 18px;
+      /* Increase font size for better readability */
+    }
+  }
+  
+  
+  /* Medium devices (tablets, 992px and up) */
+  @media only screen and (min-width: 992px) {
+    .container00 {
+      max-width: 800px;
+    }
+  
+    .container01 {
+      max-width: 800px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  
+    .preference-bar {
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 18px;
+    }
+  }
+  
+  /* Large devices (desktops, 1200px and up) */
+  @media only screen and (min-width: 1200px) {
+    .container00 {
+      max-width: 1000px;
+    }
+  
+    .container01 {
+      max-width: 1000px;
+    }
+  
+    .preference-bar label,
+    .preference-bar select {
+      font-size: 20px;
+    }
+  }
+  
+  /* media queries for chat widget  */
+  
+  @media screen and (min-width:960px){
+   .bp-widget-web.bp-widget-web{
+      right: calc(3.4% - 23px) ;
+    } 
+  }
+  
+    @media screen and (min-width:1010px) {
+      .bp-widget-web.bp-widget-web{
+        right: calc(2.8% - 23px) ;
+      }
+    }
+  
+    @media only screen and (max-width: 598px) {
+      
+      .bp-widget-web.bp-widget-web{
+        right: calc(4.95% - 23px) ;
+      }
+    }
+  
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 763bb820b..9731aaf2c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -65,7 +65,7 @@
 @media only screen and (max-width:998px) {
  .circle{
   display: none;
- } 
+ }
 }
 
 .navbar-list {
@@ -376,7 +376,7 @@ body {
 .section-text {
   font-size: var(--fs-7);
   text-align: start;
-  margin: 0 30px; /*added margin to align the text*/
+  margin: 10 50px; /*added margin to align the text*/
 }
 
 .booktext {
@@ -450,7 +450,7 @@ body {
 
 .btn-primary {
   background-color: var(--old-rose);
-  color: var(--white);
+  color: white;
   border-radius: var(--radius-5);
   margin-left: 0px;
   text-align: center;
@@ -600,7 +600,7 @@ body {
 }
 
 .navbar-item {
-  margin: 0 10px;
+  margin: 0 5px;
   /* Adjust the horizontal margin to increase spacing */
   padding: 0;
   /* Remove default padding */
@@ -762,7 +762,7 @@ body {
 }
 
 .navbar-item {
-  margin: 0 10px;
+  margin: 0 5px;
   padding: 0;
 }
 
@@ -786,11 +786,12 @@ body {
   z-index: 1;
   transition: all 0.3s ease;
   top: 100%;
-  
+
 }
 
 .dropdown-menu-list {
   list-style: none;
+  
   margin: 0;
   padding: 0;
 }
@@ -836,7 +837,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: start;
-  
+
 
 }
 
@@ -922,7 +923,7 @@ body {
     width: 90%;
     order: -1;
   }
-  
+
 }
 
 /*-----------------------------------*\
@@ -933,25 +934,39 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 }
 
-.benefits .grid-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+.benefits .flex {
+  display: flex;
   gap: 20px;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+}
+
+#benefits .benefits-canvas-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center ;
+  align-items: center;
+}
+
+#benefits .benefits-canvas-container .canvas
+{
+  margin: 10px;
+  width: 300px;
 }
 
+
 .benefits-card {
-  width: calc(50% - 20px);
+  position: relative;
   height: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
-  /* Center text within cards */
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
 }
 
@@ -965,6 +980,7 @@ body {
 }
 
 .benefits-card {
+  width: 100%;
   padding: 25px;
   background-color: #FFD6CE 0.9px;
   height: 500px;
@@ -972,12 +988,11 @@ body {
   border-radius: var(--radius-5);
   overflow: hidden;
   transition: var(--transition-2);
-  height: 500px;
-  width: 260px;
 }
 
 .benefits-card::before,
 .benefits-card::after {
+  content:"";
   bottom: 0;
   right: 0;
   clip-path: var(--polygon);
@@ -1039,10 +1054,6 @@ body {
   color: rgb(205, 168, 168);
 }
 
-.canvas:hover{
-  transform: scale(1.05);
-  box-shadow: 3px 3px #e36e5c;
-}
 
 /*-----------------------------------*\
   #CHAPTERS
@@ -1095,7 +1106,7 @@ body.dark-mode .chapter-card:hover {
 }
 
 /* .chapter-card:hover::before {
-  width: 100%;       
+  width: 100%;
 }  */
 /* Expand line width on hover */
 
@@ -1107,40 +1118,40 @@ body.dark-mode .chapter-card:hover {
 
 #benefits .grid-list
 {
-  margin-top: 20px; 
-  margin-bottom: 20px; 
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 #genre .container {
-  margin-top: 20px; 
-  margin-bottom: 20px; 
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 #genre .section-subtitle
 {
-  margin-top: 20px; 
-  margin-bottom: 20px; 
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 #genre .grid-list
 {
-  margin-top: 30px; 
-  margin-bottom: 30px; 
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
 #section-title1 {
   margin-top: 20px;
-  margin-bottom: 20px; 
+  margin-bottom: 20px;
 }
 #chapters .grid-list
 {
-  margin-top: 30px; 
-  margin-bottom: 30px; 
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
 #section-title2 {
-  margin-top: 20px; 
-  margin-bottom: 20px; 
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 #chapters .section-subtitle
 {
-  margin-top: 20px; 
-  margin-bottom: 20px; 
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 
@@ -1628,6 +1639,7 @@ textarea.input-field {
 
 
 
+
 /*-----------------------------------*\
   #FOOTER
 \*-----------------------------------*/
@@ -2542,7 +2554,7 @@ input[type="submit"]:hover {
 /* .navbar-link.active,
 .navbar-link:hover {
   /* font-size: 1.1em; */
-/* border-bottom: 2px solid darkred; 
+/* border-bottom: 2px solid darkred;
   color: #fcb0b480;
 } */
 
@@ -2590,6 +2602,7 @@ input[type="submit"]:hover {
 
 .answers {
   color: var(--sonic-silver);
+  line-height: 28px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease-in-out;
@@ -2605,12 +2618,12 @@ body.dark-mode {
 }
 
 .dark-mode .form {
-  /* background-color: #333; */
+  background-color: #333;
   color: #fff;
 }
 
 .dark-mode .navbar {
-  background-color: #333;
+  /* background-color: #333; */
   color: #fff;
 }
 
@@ -2618,12 +2631,16 @@ body.dark-mode {
   color: #fff;
 }
 
-.dark-mode .container {
+.dark-mode .container .section-text{
   color: #fff;
-  padding-left: 4rem;
+  padding-left: 2rem;
   padding-right: 1rem;
+  padding-top: 3rem;
 
 }
+.dark-mode .container button{
+  margin-left: 2rem;
+}
 
 .dark-mode .invert-col {
   filter: invert(1);
@@ -2665,8 +2682,8 @@ body.dark-mode {
 
 /* Dark Mode Switch */
 .dark-mode .switch-container {
-  right: -4px;
-  top: 5px;
+  right: 14px;
+  top: -16px;
 }
 
 /**
@@ -2696,7 +2713,7 @@ body.dark-mode {
 
 body.dark-mode .navbar-link:hover,
 body.dark-mode .navbar-link.active {
-  color: hsl(357, 93%, 84%);
+  color:var(--old-rose);
 }
 
 body.dark-mode .navbar-link::after {
@@ -2723,18 +2740,28 @@ footer {
   top: 140px;
 }
 
-#back-to-top-container {
-
-  /* position: fixed; */
-  top: 83%;
-  right: 2.8%;
-  /* Changed left to right */
+#back-to-top-container{
+  position: fixed;
+  top: 75% !important;
+  right: 2.8% !important;
   cursor: pointer;
   z-index: 1000;
 }
 
+@media(max-width : 900px){
+  #back-to-top-container{
+    position: fixed;
+    top: 65% !important;
+    right: 9% !important;
+    cursor: pointer;
+    z-index: 1000;
+  }
+}
+
+
+
 .circle1 {
- 
+
   background-color: white;
   border-radius: 50%;
   display: flex;
@@ -2796,7 +2823,7 @@ footer {
   font-size: 19px;
   position: absolute;
   cursor: pointer;
-   top: 50%; 
+   top: 50%;
   transform: translateY(-50%);
   transition: opacity 0.5s ease, color 0.5s ease;
 }
@@ -2853,7 +2880,7 @@ footer {
   .navbar-list {
     flex-direction: column;
   }
-  
+
 }
 
 @media (min-width: 481px) {
@@ -2878,7 +2905,7 @@ footer {
 
   #back-to-top-container {
     position: fixed;
-    top: 82%;
+    top: 84.1%;
     right: 8%;
     /* Changed left to right */
   }
@@ -2963,7 +2990,7 @@ footer {
     flex-direction: column;
     align-items: center;
   }
-  
+
   .foot-left,
   .foot-middle,
   .social-icons,
@@ -2994,53 +3021,66 @@ footer {
     right: 4.95%;
     /* Changed left to right */
   }
+}
 
+select {
+  /* Remove default blue background color */
+  background-color: transparent;
+  /* Optional: Remove default blue text color */
+  color: black;
+  /* or whatever color you want */
 }
 
-/* recommendation system */
-.container00 {
-  max-width: 900px;
-  max-height: 800px;
-  margin: 20px auto;
-  padding: 80px;
-  border: 1px solid #ccc;
-  /* border-radius: 5px; */
-  background-color: var(--seashell);
-  border-radius: var(--radius-5);
-  margin-bottom: 50px;
+.preference-bar button {
+  padding: 10px 16px;
+  font-size: 16px;
+  border-radius: 5px;
+  /* background-color: #007bff; */
+  /* color: #fff; */
+  border: none;
+  cursor: pointer;
 }
 
-.container01 {
-  background-color: var(--seashell);
-  border-radius: var(--radius-5);
-  margin-bottom: 50px;
-  margin-left: 310px;
-  margin-right: 310px;
-  padding: 80px;
-  border: 2px solid #b49393;
-  color: black;
+/* .preference-bar button:hover { */
+/* background-color: #0056b3; */
+/* } */
+
+.preference-bar select {
+  padding: 8px;
+  font-size: 20px;
+  border-radius: 5px;
+  border: 2px solid #444242;
+  outline: none;
+  background-color: rgb(234, 224, 221);
+  color: #333;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.preference-bar {
-  display: flex;
-  justify-content: center;
-  /* Center items horizontally */
-  align-items: center;
-  flex-wrap: wrap;
-  /* Allow items to wrap if they exceed container width */
+.preference-bar select option {
+  background-color: rgb(242, 227, 227);
+  color: #333;
+  padding: 8px;
 }
 
-.preference-bar>* {
-  margin: 0 10px;
-  /* Add spacing between items */
+.container00 h2 {
+  color: rgb(62, 60, 60);
+  margin-bottom: 50px;
+  margin-left: 280px;
+  font-size: 30px;
 }
 
-.preference-bar label {
-  font-weight: bold;
-  font-size: 20px;
-  color: #474646;
+.preference-bar select:hover {
+  background-color: var(--old-rose_30);
+}
+
+.preference-bar select:focus {
+  border-color: #1e1e1f;
+  /* Border color when the select element is focused */
+  box-shadow: 0 0 5px rgb(232, 167, 137);
+  /* Adding a shadow for better focus indication */
 }
 
+
 select {
   /* Remove default blue background color */
   background-color: transparent;
@@ -3083,7 +3123,7 @@ select {
 .container00 h2 {
   color: rgb(62, 60, 60);
   margin-bottom: 50px;
-  margin-left: 230px;
+  margin-left: 280px;
   font-size: 30px;
 }
 
@@ -3098,6 +3138,7 @@ select {
   /* Adding a shadow for better focus indication */
 }
 
+
 .dark-mode .preference-bar label,
 .dark-mode .preference-bar select:hover,
 .dark-mode .container00 h2 {
@@ -3175,6 +3216,10 @@ body.dark-mode .h3 {
   color: #ffffff;
 }
 
+.recommendationTitle-heading {
+  color: white;
+}
+
 .section-subtitle.dark-mode,
 .h2.section-title.has-underline.dark-mode {
   color: #ffffff;
@@ -3224,7 +3269,7 @@ body.dark-mode .h3 {
     padding: 30px;
     margin-bottom: 30px;
   }
-  
+
   .container01 {
     padding: 30px;
     margin-bottom: 30px;
@@ -3267,7 +3312,7 @@ body.dark-mode .h3 {
     margin-bottom: 40px;
     /* Adjust margin for better spacing */
   }
-  
+
   .container01 {
     padding: 40px;
     /* Adjust padding for better spacing */
@@ -3375,7 +3420,7 @@ body.dark-mode .h3 {
 @media screen and (min-width:960px){
  .bp-widget-web.bp-widget-web{
     right: calc(3.4% - 23px) ;
-  } 
+  }
 }
 
   @media screen and (min-width:1010px) {
@@ -3385,8 +3430,28 @@ body.dark-mode .h3 {
   }
 
   @media only screen and (max-width: 598px) {
-    
+
     .bp-widget-web.bp-widget-web{
       right: calc(4.95% - 23px) ;
     }
   }
+
+  .fab.fa-twitter{
+    font-family:sans-serif;
+  }
+  .fab.fa-twitter::before{
+    content:"𝕏";
+    font-size:1.1em;
+    background-color: transparent;
+  }
+
+
+/* Adding media queries for benifits */
+
+@media screen and(min-width: ) {
+  .benefits .grid-list
+  {
+
+  }
+  
+}
\ No newline at end of file
diff --git a/assets/css/test-style.css b/assets/css/test-style.css
index 2fe2e539a..f064126dd 100644
--- a/assets/css/test-style.css
+++ b/assets/css/test-style.css
@@ -27,7 +27,7 @@ display: flex;
 }
 
 .benefits-card{
-  width: 255px;
+  width: 100%;
   height: 550.200px;
 }
 
diff --git a/assets/favicon_package_v0.16/android-chrome-192x192.png b/assets/favicon_package_v0.16/android-chrome-192x192.png
index 6a440af48..a8090de14 100644
Binary files a/assets/favicon_package_v0.16/android-chrome-192x192.png and b/assets/favicon_package_v0.16/android-chrome-192x192.png differ
diff --git a/assets/favicon_package_v0.16/android-chrome-256x256.png b/assets/favicon_package_v0.16/android-chrome-256x256.png
index 88d4768a6..db031f05d 100644
Binary files a/assets/favicon_package_v0.16/android-chrome-256x256.png and b/assets/favicon_package_v0.16/android-chrome-256x256.png differ
diff --git a/assets/favicon_package_v0.16/apple-touch-icon.png b/assets/favicon_package_v0.16/apple-touch-icon.png
index b344e39f5..f753b3ab6 100644
Binary files a/assets/favicon_package_v0.16/apple-touch-icon.png and b/assets/favicon_package_v0.16/apple-touch-icon.png differ
diff --git a/assets/favicon_package_v0.16/favicon-16x16.png b/assets/favicon_package_v0.16/favicon-16x16.png
index ba0045d26..e13f23630 100644
Binary files a/assets/favicon_package_v0.16/favicon-16x16.png and b/assets/favicon_package_v0.16/favicon-16x16.png differ
diff --git a/assets/favicon_package_v0.16/favicon-32x32.png b/assets/favicon_package_v0.16/favicon-32x32.png
index 78a608bfe..1c2b94f24 100644
Binary files a/assets/favicon_package_v0.16/favicon-32x32.png and b/assets/favicon_package_v0.16/favicon-32x32.png differ
diff --git a/assets/favicon_package_v0.16/mstile-150x150.png b/assets/favicon_package_v0.16/mstile-150x150.png
index a876f40cd..f973c1c1e 100644
Binary files a/assets/favicon_package_v0.16/mstile-150x150.png and b/assets/favicon_package_v0.16/mstile-150x150.png differ
diff --git a/assets/html/about.html b/assets/html/about.html
index 8c46a1a79..410a3d851 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -4,24 +4,28 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" sizes="32x32" href="../favicon_package_v0.16/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../favicon_package_v0.16/favicon-16x16.png">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
-    rel="stylesheet" />
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-  <link rel="stylesheet" href="../css/login.css" />
-  
+  <link 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="assets/css/test-style.css">
-
+  <link rel="apple-touch-icon" sizes="180x180" href="../favicon_package_v0.16/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="../favicon_package_v0.16/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../favicon_package_v0.16/favicon-16x16.png">
+  <link rel="manifest" href="../favicon_package_v0.16/site.webmanifest">
+  <link rel="mask-icon" href="../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">
   <!-- <link rel="stylesheet" href="../css/login.css" /> -->
   <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/aboutus.css">
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="../js/script.js" defer></script>
   <script src="../js/scroll-reveal.js"></script>
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
   <title>About Us</title>
-  <link rel="stylesheet" href="../css/aboutus.css">
+  
   <style>
     body {
       font-family: 'Poppins', sans-serif;
@@ -47,7 +51,7 @@
     }
 
     .about h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
@@ -55,7 +59,7 @@
     }
 
     .about p {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
       line-height: 1.6;
       margin-bottom: 20px;
@@ -71,7 +75,7 @@
     }
 
     .stats-box h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
@@ -85,19 +89,19 @@
     }
 
     .stat {
-      
+
       text-align: center;
     }
 
     .stat h3 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 36px;
       font-weight: bold;
       margin-bottom: 5px;
     }
 
     .stat p {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
     }
 
@@ -111,19 +115,21 @@
     }
 
     .mission-values h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
       text-align: center;
     }
+
     .about-us-heading {
-  text-align: center;
-  margin-bottom: 5rem;
-  margin-top: 160px; /* Adjust this value to position it below the header */
-  color: var(--charcoal);
-  
-}
+      text-align: center;
+      margin-bottom: 5rem;
+      margin-top: 160px;
+      /* Adjust this value to position it below the header */
+      color: var(--charcoal);
+
+    }
 
 
     .about-us-block {
@@ -146,14 +152,14 @@
     }
 
     .about-us-blk-text {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 10px;
     }
 
     .about-us-blk-para {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
       line-height: 1.6;
     }
@@ -199,7 +205,7 @@
               <a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
             </li>
             <li class="navbar-item" id="logout-r">
-              <a href="../html/login.html" class="navbar-link">Logout</a>
+              <a href="../html/login.html" class="navbar-link">Login/Signup</a>
             </li>
 
 
@@ -232,6 +238,9 @@
                     <a href="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="./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="about.html" class="navbar-link">About</a>
                   </li>
@@ -280,8 +289,10 @@ <h1 class="about-us-heading">About Us</h1>
     <div class="container">
       <section class="about">
 
-          <h2>About SwapReads</h2>
-          <p>SwapReads is an online platform dedicated to connecting book lovers and facilitating the exchange of books. Our mission is to promote reading culture and make it easier for readers to discover new books, share their favorites, and connect with fellow book enthusiasts.</p>
+        <h2>About SwapReads</h2>
+        <p>
+          SwapReads is an online platform dedicated to connecting book lovers and facilitating the exchange of books. Our mission is to promote a vibrant reading culture by making it easier for readers to discover new titles, share their favorite books, and connect with fellow enthusiasts. Users can list books they want to swap, browse available titles, and engage in discussions and reviews. SwapReads also offers personalized recommendations to help users find their next great read. By encouraging sustainable reading habits and reducing the need for new book purchases, SwapReads supports eco-friendly practices. Join SwapReads to share your passion for books, discover new reads, and become part of a community that celebrates the joy of reading.
+        </p>
       </section>
       <section class="stats-box">
         <div class="stats-container">
@@ -301,386 +312,618 @@ <h3 id="stat3">0</h3>
             </div>
           </div>
         </div>
-        
-    </section>
-    <section class="mission-values">
-      <h2>Our Mission and Values</h2>
-    <div class="about-us-block">
-      <div class="about-us-community">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="community-img" src="../images/book.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Book Swapping</div>
-        </div>
-        <p class="about-us-blk-para">Easily list the books you’re willing to exchange and browse through a vast
-          collection of available titles, facilitating smooth and hassle-free book swaps with other members.</p>
-      </div>
-      <div class="about-us-product">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="product-img" src="../images/community.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Community Engagement</div>
-        </div>
-        <p class="about-us-blk-para">Join a vibrant community of book lovers through discussion forums, reading groups,
-          and event participation, fostering a collaborative and engaging literary environment.</p>
-      </div>
-    </div>
-    <div class="about-us-block">
-      <div class="about-us-location">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="location-img" src="../images/read.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Reading Recommendations</div>
+
+      </section>
+      <section class="mission-values">
+        <h2>Our Mission and Values</h2>
+        <div class="about-us-block">
+          <div class="about-us-community">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="community-img" src="../images/book.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Book Swapping</div>
+            </div>
+            <p class="about-us-blk-para">Easily list the books you’re willing to exchange and browse through a vast
+              collection of available titles, facilitating smooth and hassle-free book swaps with other members.</p>
+          </div>
+          <div class="about-us-product">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="product-img" src="../images/community.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Community Engagement</div>
+            </div>
+            <p class="about-us-blk-para">Join a vibrant community of book lovers through discussion forums, reading
+              groups,
+              and event participation, fostering a collaborative and engaging literary environment.</p>
+          </div>
         </div>
-        <p class="about-us-blk-para">Receive personalized book suggestions based on your reading history and
-          preferences, ensuring you always have a new and exciting read lined up for your next literary adventure.</p>
-      </div>
-      <div class="about-us-event">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="event-img" src="../images/bookshelf.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Virtual Bookshelf</div>
+        <div class="about-us-block">
+          <div class="about-us-location">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="location-img" src="../images/read.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Reading Recommendations</div>
+            </div>
+            <p class="about-us-blk-para">Receive personalized book suggestions based on your reading history and
+              preferences, ensuring you always have a new and exciting read lined up for your next literary adventure.
+            </p>
+          </div>
+          <div class="about-us-event">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="event-img" src="../images/bookshelf.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Virtual Bookshelf</div>
+            </div>
+            <p class="about-us-blk-para">Organize and manage your virtual bookshelf, keeping track of books you've read,
+              want to read, and are currently reading. Easily access your collection and track your reading progress.
+            </p>
+          </div>
         </div>
-        <p class="about-us-blk-para">Organize and manage your virtual bookshelf, keeping track of books you've read,
-          want to read, and are currently reading. Easily access your collection and track your reading progress.</p>
-      </div>
     </div>
-  </div>
-</section>
-  <section class="team">
-    <h2>Meet Our Team</h2>
-    <div class="team-cards">
+    </section>
+    <section class="team">
+      <h2>Meet Our Team</h2>
+      <div class="team-cards">
         <!-- Team member cards will go here -->
         <div class="team-member">
-            <img src="../images/pic1.jpeg" alt="Team Member 1">
-            <div class="member-info">
-                <h3>Anurag Verma</h3>
-                <p>Project Admin</p>
-            </div>
+          <img src="../images/pic1.jpeg" alt="Team Member 1">
+          <div class="member-info">
+            <h3>Anurag Verma</h3>
+            <p>Project Admin</p>
+          </div>
         </div>
         <div class="team-member">
-            <img src="../images/pic2.jpeg" alt="Team Member 2">
-            <div class="member-info">
-                <h3>Aman Raj</h3>
-                <p>Mentor</p>
-            </div>
+          <img src="../images/pic2.jpeg" alt="Team Member 2">
+          <div class="member-info">
+            <h3>Aman Raj</h3>
+            <p>Mentor</p>
+          </div>
         </div>
         <div class="team-member">
-          <img src="../images/pic3.jpeg" alt="Team Member 2">
+          <img src="../images/pic3.jpeg" alt="Team Member 3">
           <div class="member-info">
-              <h3>Riti Chandak</h3>
-              <p>Mentor</p>
+            <h3>Riti Chandak</h3>
+            <p>Mentor</p>
           </div>
-      </div>
-        <!-- Add more team member cards as needed -->
-    </div>
-</section>
-  <footer>
-    <div class="foot-top">
-      <div class="foot-left">
-        <div class="desc">
-
-          <div><a href="#" class="logo">SwapReads</a></div>
-          <div>
-            <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-              lovers
-              seeking to swap and
-
-              discover new literary gems.
-              Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
-              the
-              world of literature—all on one convenient platform. Join us and dive into a universe of endless
-              possibilities!
-            </p>
+        </div>
+        <div class="team-member">
+          <img src="../images/pic4.jpeg" alt="Team Member 4">
+          <div class="member-info">
+            <h3>Rishabh Dhawad</h3>
+            <p>Mentor</p>
           </div>
         </div>
+        <!-- Add more team member cards as needed -->
       </div>
-      <div class="foot-middle">
-        <h2>Quick Links</h2>
-        <ul>
-          <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
-          <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-          <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-          <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-          <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-          <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
-        </ul>
-      </div>
-      <div class="social-icons">
-        <!-- <h5>Newsletter</h5> -->
-        <!-- <div class="input-newletter">
+    </section>
+
+    </head>
+
+    <body>
+      <section class="contributors">
+        <h2>Our Contributors</h2>
+        <div class="contributor-cards" id="contributor-cards">
+          <!-- Contributor cards will be inserted here -->
+        </div>
+        <div class="pagination" id="pagination">
+          <!-- Pagination buttons will be inserted here -->
+        </div>
+      </section>
+
+    <style>
+      .contributors {
+        margin: 0 auto;
+        background: var(--seashell);
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border: 1px solid #ddd;
+        max-width: 1200px;
+      }
+
+      .contributor-cards {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .contributor-member {
+        color: var(--sonic-silver);
+        text-align: center;
+        background-color: var(--seashell);
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        max-width: 250px;
+        margin: 10px;
+        flex: 1 1 calc(33.333% - 40px);
+        box-sizing: border-box;
+      }
+
+      .contributor-member:hover {
+        scale: 1.1;
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+      }
+
+      .contributor-member img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        display: block;
+        margin: 0 auto 10px auto;
+      }
+
+      .contributor-member h3 {
+        font-size: 1rem;
+        margin: 10px 0 5px;
+      }
+
+      .contributor-member p {
+        font-size: 0.9rem;
+        margin: 0;
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+      }
+
+      .pagination button {
+        margin: 0 5px;
+        padding: 10px 15px;
+        border: 1px solid #ccc;
+        background-color: #f9f9f9;
+        cursor: pointer;
+      }
+
+      .pagination button.active {
+        background-color: #ddd;
+      }
+    </style>
+
+      <footer>
+        <div class="foot-top">
+          <div class="foot-left">
+            <div class="desc">
+
+              <div><a href="#" class="logo">SwapReads</a></div>
+              <div>
+                <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+                  lovers
+                  seeking to swap and
+
+                  discover new literary gems.
+                  Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures
+                  in
+                  the
+                  world of literature—all on one convenient platform. Join us and dive into a universe of endless
+                  possibilities!
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="foot-middle">
+            <h2>Quick Links</h2>
+            <ul>
+              <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
+              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
+            </ul>
+          </div>
+          <div class="social-icons">
+            <!-- <h5>Newsletter</h5> -->
+            <!-- <div class="input-newletter">
           <label for="newsletter"><h5>Newsletter</h5></label>
           <input placeholder="Enter your email" type="email" ></input>
           <button class="btn-subs">Subscribe</button>
         </div> -->
 
-        <form type="newsletter">
-          <label for="email">Subscribe to our Newsletter</label>
-          <div class="row-flex">
+            <form type="newsletter">
+              <label for="email">Subscribe to our Newsletter</label>
+              <div class="row-flex">
 
 
 
-            <!--email write-->
-            <input type="news" value="" name="email" placeholder="email address" required>
-            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
-          </div>
-        </form>
-        <style>
-          .icons .icon i {
-            font-size: 24px;
-            /* Set the default font size for icons */
-            transition: all 0.3s ease;
-            /* Add transition for smooth animation */
-          }
+                <!--email write-->
+                <input type="news" value="" name="email" placeholder="email address" required>
+                <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
+              </div>
+            </form>
+            <style>
+              .icons .icon i {
+                font-size: 24px;
+                /* Set the default font size for icons */
+                transition: all 0.3s ease;
+                /* Add transition for smooth animation */
+              }
+
+              .icons .icon:hover i {
+                transform: scale(1.2);
+                /* Scale the icon on hover */
+              }
+
+              .icons .icon:hover .fab.fa-facebook {
+                color: #3B5998;
+                /* Change to Facebook color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-twitter {
+                color: #090e11;
+                /* Change to Twitter color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-instagram {
+                background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+                background-clip: text;
+                border-radius: 20%;
+                transform: scale(1.5);
+                color: transparent;
+                /* Change to Instagram color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-youtube {
+                color: #C31A1E;
+                /* Change to YouTube color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-github {
+                color: #333;
+              }
+            </style>
+
+            <div class="icons">
+              <a href="#">
+                <div class="icon">
+                  <i class="fab fa-facebook" title="Facebook" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="#">
+                <div class="icon">
+                  <i class="fab fa-twitter" title="X" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="#">
+                <div class="icon">
+                  <i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
+                <div class="icon">
+                  <i class="fab fa-youtube" style="cursor: pointer;"></i>
+                </div>
+              </a>
+              <a href="https://github.com/anuragverma108">
+                <div class="icon">
+                  <i class="fab fa-github" style="cursor: pointer;"></i>
+                </div>
+              </a>
+            </div>
+            <div class="footer-bottom">
+              <p class="copyright" style="text-align: center">
+                &copy;
+                <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
+                Hackers.
+              </p>
+            </div>
 
-          .icons .icon:hover i {
-            transform: scale(1.2);
-            /* Scale the icon on hover */
-          }
+            <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
+              <div class="circle1">
+                <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
+                  class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                  <path
+                    d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+                </svg>
+              </div>
+            </div>
 
-          .icons .icon:hover .fab.fa-facebook-square {
-            color: #3B5998;
-            /* Change to Facebook color on hover */
-          }
+      </footer>
 
-          .icons .icon:hover .fa-brands.fa-square-x-twitter {
-            color: #090e11;
-            /* Change to Twitter color on hover */
-          }
+      <script>
+        // Function to animate counting from 0 to a target number
+        function countUp(target, elementId) {
+          let count = 0;
+          const increment = target / 100; // Increment by a fraction of the target number
+
+          const interval = setInterval(() => {
+            count += increment;
+            document.getElementById(elementId).textContent = Math.round(count) + "+"; // Add the "+" sign
+
+            // Stop the interval when count reaches or exceeds the target number
+            if (count >= target) {
+              clearInterval(interval);
+              document.getElementById(elementId).textContent = target + "+"; // Ensure final value is exact with the "+"
+              // Start counting animation again after a delay
+              setTimeout(() => {
+                countUp(target, elementId);
+              }, 3000); // Delay before restarting the animation (adjust as needed)
+            }
+          }, 20); // Adjust interval speed as needed
+        }
 
-          .icons .icon:hover .fab.fa-instagram-square {
-            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-            background-clip: text;
-            border-radius: 20%;
-            transform: scale(1.5);
-            color: transparent;
-            /* Change to Instagram color on hover */
-          }
+        // Start counting animation for each stat
+        countUp(150, 'stat1'); // Example target number for stat 1
+        countUp(100, 'stat2'); // Example target number for stat 2
+        countUp(500, 'stat3'); // Example target number for stat 3
 
-          .icons .icon:hover .fab.fa-youtube-square {
-            color: #C31A1E;
-            /* Change to YouTube color on hover */
-          }
-        </style>
 
-        <div class="icons">
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-facebook-square" title="Facebook" style="cursor: pointer;"></i>
-            </div>
-          </a>
-
-          <a href="#">
-            <div class="icon">
-              <i class="fa-brands fa-square-x-twitter" title="X" style="cursor: pointer;"></i>
-            </div>
-          </a>
+        // JavaScript for hover effects
+        document.querySelectorAll('.about-us-community').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/book.png';
+          });
+        });
 
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-instagram-square" title="Instagram" style="cursor: pointer;"></i>
-            </div>
-          </a>
+        document.querySelectorAll('.about-us-event').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookshelfhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/bookshelf.png';
+          });
+        });
 
-          <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
-            <div class="icon">
-              <i class="fab fa-youtube-square" style="cursor: pointer;"></i>
-            </div>
-          </a>
-        </div>
-        <div class="footer-bottom">
-          <p class="copyright" style="text-align: center">
-            &copy;
-            <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
-            Hackers.
-          </p>
-        </div>
+        document.querySelectorAll('.about-us-product').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/communityhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/community.png';
+          });
+        });
 
-        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
-          <div class="circle1">
-            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
-              class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-              <path
-                d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-            </svg>
-          </div>
-        </div>
+        document.querySelectorAll('.about-us-location').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/readhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/read.png';
+          });
+        });
 
-  </footer>
+        //Custom Cursor
+
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        const colors = [
+          "#ffb56b",
+          "#fdaf69",
+          "#f89d63",
+          "#f59761",
+          "#ef865e",
+          "#ec805d",
+          "#e36e5c",
+          "#df685c",
+          "#d5585c",
+          "#d1525c",
+          "#c5415d",
+          "#c03b5d",
+          "#b22c5e",
+          "#ac265e",
+          "#9c155f",
+          "#950f5f",
+          "#830060",
+          "#7c0060",
+          "#680060",
+          "#60005f",
+          "#48005f",
+          "#3d005e"
+        ];
+
+        circles.forEach(function (circle, index) {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];
+        });
 
-  <script>
-    // Function to animate counting from 0 to a target number
-function countUp(target, elementId) {
-  let count = 0;
-  const increment = target / 100; // Increment by a fraction of the target number
-  
-  const interval = setInterval(() => {
-    count += increment;
-    document.getElementById(elementId).textContent = Math.round(count) + "+"; // Add the "+" sign
-    
-    // Stop the interval when count reaches or exceeds the target number
-    if (count >= target) {
-      clearInterval(interval);
-      document.getElementById(elementId).textContent = target + "+"; // Ensure final value is exact with the "+"
-      // Start counting animation again after a delay
-      setTimeout(() => {
-        countUp(target, elementId);
-      }, 3000); // Delay before restarting the animation (adjust as needed)
-    }
-  }, 20); // Adjust interval speed as needed
-}
-
-// Start counting animation for each stat
-countUp(150, 'stat1'); // Example target number for stat 1
-countUp(100, 'stat2'); // Example target number for stat 2
-countUp(500, 'stat3'); // Example target number for stat 3
-
-
-    // JavaScript for hover effects
-    document.querySelectorAll('.about-us-community').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/bookhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/book.png';
-      });
-    });
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
 
-    document.querySelectorAll('.about-us-event').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/bookshelfhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/bookshelf.png';
-      });
-    });
+        });
 
-    document.querySelectorAll('.about-us-product').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/communityhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/community.png';
-      });
-    });
+        function animateCircles() {
 
-    document.querySelectorAll('.about-us-location').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/readhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/read.png';
-      });
-    });
+          let x = coords.x;
+          let y = coords.y;
 
-      //Custom Cursor
-      
-      const coords = { x: 0, y: 0 };
-          const circles = document.querySelectorAll(".circle");
-      
-          const colors = [
-            "#ffb56b",
-            "#fdaf69",
-            "#f89d63",
-            "#f59761",
-            "#ef865e",
-            "#ec805d",
-            "#e36e5c",
-            "#df685c",
-            "#d5585c",
-            "#d1525c",
-            "#c5415d",
-            "#c03b5d",
-            "#b22c5e",
-            "#ac265e",
-            "#9c155f",
-            "#950f5f",
-            "#830060",
-            "#7c0060",
-            "#680060",
-            "#60005f",
-            "#48005f",
-            "#3d005e"
-          ];
-      
           circles.forEach(function (circle, index) {
-            circle.x = 0;
-            circle.y = 0;
-            circle.style.backgroundColor = colors[index % colors.length];
-          });
-      
-          window.addEventListener("mousemove", function (e) {
-            coords.x = e.clientX;
-            coords.y = e.clientY;
-      
+            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;
+
+            const nextCircle = circles[index + 1] || circles[0];
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
           });
-      
-          function animateCircles() {
-      
-            let x = coords.x;
-            let y = coords.y;
-      
-            circles.forEach(function (circle, index) {
-              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;
-      
-              const nextCircle = circles[index + 1] || circles[0];
-              x += (nextCircle.x - x) * 0.3;
-              y += (nextCircle.y - y) * 0.3;
-            });
-      
-            requestAnimationFrame(animateCircles);
+
+          requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+
+      // Function to toggle dark mode
+    function toggleDarkMode() {
+      const isDarkMode = isDarkModePreferred();
+      setDarkModePreference(!isDarkMode);
+      applyDarkModePreference();
+    }
+     // Function to apply dark mode preference
+     function applyDarkModePreference() {
+      const isDarkMode = isDarkModePreferred();
+      if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        document.getElementById('theme-icon').src = '../images/icons8-sun.svg';
+      } else {
+        document.body.classList.remove('dark-mode');
+        document.getElementById('theme-icon').src = '../images/moon_solid.svg';
+      }
+    }
+      // Function to set dark mode preference
+      document.addEventListener('DOMContentLoaded', () => {
+      const currentTheme = localStorage.getItem('theme');
+      const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
+   
+      if (switchCheckbox) { // Check if switchCheckbox is not null
+        function applyDarkModeStyles() {
+          document.body.classList.remove('light-mode');
+          document.body.classList.add('dark-mode');
+          
+        }
+        function applyLightModeStyles() {
+          document.body.classList.remove('dark-mode');
+          document.body.classList.add('light-mode');
+          // starRating.style.backgroundColor = 'white';
+          // thankYouMessage.style.backgroundColor = 'white';
+        }
+        if (currentTheme) {
+          if (currentTheme === 'dark-mode') {
+            applyDarkModeStyles();
+            switchCheckbox.checked = true;
+          } else {
+            applyLightModeStyles();
+          }
+        }
+
+        switchCheckbox.addEventListener('change', () => {
+          if (switchCheckbox.checked) {
+            applyDarkModeStyles();
+            localStorage.setItem('theme', 'dark-mode');
+          } else {
+            applyLightModeStyles();
+            localStorage.setItem('theme', 'light-mode');
           }
-      
-          animateCircles();
-      
-          document.addEventListener('DOMContentLoaded', function () {
-          var switchCheckbox = document.querySelector('.switch-checkbox');
-          var body = document.body;
-          var navbar = document.querySelector('.navbar');
-      
-          switchCheckbox.addEventListener('change', function () {
-            if (switchCheckbox.checked) {
-              body.classList.add('dark-mode');
-              navbar.classList.add('dark-mode');
+        });
+      } else {
+        console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
+      }
+    });
+      </script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const backToTopButton = document.getElementById('back-to-top-container');
+
+          function checkButtonVisibility() {
+            if (window.innerWidth > 100 && window.scrollY > 100) {
+              backToTopButton.style.display = 'block';
             } else {
-              body.classList.remove('dark-mode');
-              navbar.classList.remove('dark-mode');
+              backToTopButton.style.display = 'none';
             }
+          }
+
+          window.addEventListener('scroll', checkButtonVisibility);
+          window.addEventListener('resize', checkButtonVisibility);
+
+          backToTopButton.addEventListener('click', function () {
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth'
+            });
           });
+          checkButtonVisibility();
         });
       </script>
+
       <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            const backToTopButton = document.getElementById('back-to-top-container');
-        
-            function checkButtonVisibility() {
-                if (window.innerWidth > 100 && window.scrollY > 100) {
-                    backToTopButton.style.display = 'block';
-                } else {
-                    backToTopButton.style.display = 'none';
-                }
+
+        // Function for the contributors section
+
+        const owner = 'anuragverma108';
+        const repo = 'SwapReads';
+        const contributorsPerPage = 8;
+        let contributors = [];
+        let currentPage = 1;
+
+        async function fetchContributors() {
+          const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+          if (!response.ok) {
+            console.error('Failed to fetch contributors:', response.statusText);
+            return;
+          }
+          contributors = await response.json();
+          displayContributors();
+          createPaginationButtons();
+        }
+
+        function displayContributors() {
+          const container = document.getElementById('contributor-cards');
+          container.innerHTML = '';
+          const start = (currentPage - 1) * contributorsPerPage;
+          const end = start + contributorsPerPage;
+          const currentContributors = contributors.slice(start, end);
+
+          currentContributors.forEach(contributor => {
+            const card = document.createElement('div');
+            card.className = 'contributor-member';
+
+            const img = document.createElement('img');
+            img.src = contributor.avatar_url;
+            img.alt = contributor.login;
+
+            const name = document.createElement('h3');
+            name.textContent = contributor.login;
+
+            const contributions = document.createElement('p');
+            contributions.textContent = `${contributor.contributions} contributions`;
+
+            card.appendChild(img);
+            card.appendChild(name);
+            card.appendChild(contributions);
+            container.appendChild(card);
+          });
+        }
+
+        function createPaginationButtons() {
+          const paginationContainer = document.getElementById('pagination');
+          paginationContainer.innerHTML = '';
+          const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+
+          for (let i = 1; i <= totalPages; i++) {
+            const button = document.createElement('button');
+            button.textContent = i;
+            button.classList.add('pagination-button');
+            if (i === currentPage) {
+              button.classList.add('active');
             }
-        
-            window.addEventListener('scroll', checkButtonVisibility);
-            window.addEventListener('resize', checkButtonVisibility);
-        
-            backToTopButton.addEventListener('click', function () {
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth' 
-                });
+            button.addEventListener('click', () => {
+              currentPage = i;
+              displayContributors();
+              updatePaginationButtons();
             });
-            checkButtonVisibility();
-        });
-        
+            paginationContainer.appendChild(button);
+          }
+        }
+
+        function updatePaginationButtons() {
+          const buttons = document.querySelectorAll('.pagination-button');
+          buttons.forEach(button => {
+            button.classList.remove('active');
+            if (parseInt(button.textContent) === currentPage) {
+              button.classList.add('active');
+            }
+          });
+        }
+
+        fetchContributors();
       </script>
 
-</body>
+    </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index aa7b07f9d..75ae8b214 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -14,6 +14,8 @@
     <meta name="theme-color" content="#ffffff">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/BookRecommend.css">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -149,22 +151,22 @@
               <img src="./../images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
     
               <li class="navbar-item">
-                <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
+                <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="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
+                <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="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
+                <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="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+                <a href="/assets/html/index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                     class="ri-customer-service-2-fill"></i> Contact</a>
               </li>
     
@@ -205,6 +207,9 @@
                       <a href="./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="./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/about.html" class="navbar-link">About</a>
                     </li>
@@ -274,7 +279,7 @@ <h1 class="rating_heading">Rate Us</h1>
         <article>
     
     <div id="recommend">
-        <p class="section-subtitle" id="heading">Book Recommendation</p>
+        <p class="section-subtitle" id="heading" >Book Recommendation</p>
         <h2 class="h2 section-title has-underline">
             Discover Your Next Read
         </h2>
@@ -304,7 +309,7 @@ <h2>User Preference Bar</h2>
 
         <!-- Recommendation Results Section -->
         <div id="recommendationResults" class="container01" style="display: none;">
-            <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Recommended Books</h1>
+            <h1 id="recommendationTitle" class="recommendationTitle-heading" style="font-family: 'Philosopher', sans-serif;">Recommended Books</h1>
             <div id="booksContainer" class="books-container">
                 <!-- Book recommendations will be displayed here -->
             </div>
@@ -446,7 +451,7 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                         {
                             title: 'The Alchemist',
                             author: 'Paulo Coelho',
-                            image: 'https://tse1.mm.bing.net/th?id=OIP.CP_1Cu_o_riUJ-gnUWz6DwHaLX&pid=Api&P=0&h=180',
+                            image: 'https://m.media-amazon.com/images/I/61HAE8zahLL._AC_UF1000,1000_QL80_.jpg',
                             genre: 'Fiction',
                             year: 1988,
                             description: 'A novel about Santiago, an Andalusian shepherd boy, who journeys to Egypt in search of a treasure buried in the Pyramids.'
@@ -462,6 +467,22 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                             year: 2008,
                             description: "A guide to writing clean, readable, and maintainable code. It provides principles and best practices for software development, emphasizing the importance of code quality."
                         },
+                        {
+                            title: "The Age of AI: And Our Human Future",
+                            author: "Henry A. Kissinger, Eric Schmidt, Daniel Huttenlocher",
+                            genre: "Technology",
+                            image: "https://m.media-amazon.com/images/I/41PLbUTNN1L.jpg",
+                            year: 2021,
+                            description: "Three experts explore the rise of Artificial Intelligence, its impact on society, and the ethical considerations that come with this powerful technology."
+                        },
+                        {
+                            title: "Factfulness: Ten Reasons We're Wrong About the World – And Why Things Are Better Than You Think",
+                            author: "Hans Rosling",
+                            genre: "Technology (Societal Impact)",
+                            image: "https://m.media-amazon.com/images/I/71sQyS8-M-L._AC_UF1000,1000_QL80_.jpg",
+                            year: 2018,
+                            description: "This book challenges our perception of the world, using statistics to show how technology has improved living standards globally. It encourages a more fact-based and optimistic view of human progress."
+                        },
                         {
                             title: "Web Programming with HTML5, CSS, and JavaScript",
                             author: "Dean",
@@ -490,7 +511,7 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                             title: "The Soul of a New Machine",
                             author: "Tracy Kidder",
                             genre: "Technology",
-                            image: "https://tse2.mm.bing.net/th?id=OIF.ZsUtQZsp0mscrnCh6gn3DA&pid=Api&P=0&h=180",
+                            image: "https://upload.wikimedia.org/wikipedia/en/2/28/The_soul_of_a_new_machine_--_book_cover.jpg",
                             year: 1981,
                             description: "It is a gripping tale of a team of engineers racing to build a revolutionary computer in the 1970s, highlighting their dedication, challenges, and the spirit of innovation.",
                         }
@@ -627,7 +648,7 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                             title: "Snow Crash",
                             author: "Neal Stephenson",
                             genre: "Science Fiction",
-                            image: "https://tse3.mm.bing.net/th?id=OIP.WxHDBDfquK85C7OGRwuuygAAAA&pid=Api&P=0&h=180",
+                            image: "https://m.media-amazon.com/images/I/71+c-NTaA6L._AC_UF1000,1000_QL80_.jpg",
                             year: 1992,
                             description: "A cyberpunk novel set in a future America where the internet, virtual reality, and the mafia dominate society. The story follows Hiro Protagonist, a computer hacker and pizza delivery driver.",
                         }
@@ -791,6 +812,14 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                             year: 1997,
                             description: "Follows the journey of a young wizard, Harry Potter, who discovers his magical heritage and attends Hogwarts School of Witchcraft and Wizardry, where he uncovers dark secrets and battles the dark wizard Voldemort."
                         },
+                        {
+                            title: "A Wizard of Earthsea",
+                            author: "Ursula K. Le Guin",
+                            genre: "Fantasy",
+                            image: "https://m.media-amazon.com/images/I/61OKh0zgqeL._AC_UF1000,1000_QL80_.jpg",
+                            year: 1968,
+                            description: "The first book in the Earthsea Cycle, this classic coming-of-age story follows Ged, a powerful young wizard who loses control of his magic and sets off on a journey to restore balance."
+                        },
                         {
                             title: "The Hobbit",
                             author: "J.R.R. Tolkien",
@@ -799,6 +828,14 @@ <h1 id="recommendationTitle" style="font-family: 'Philosopher', sans-serif;">Rec
                             year: 1937,
                             description: "Bilbo Baggins, a hobbit, is swept into an epic quest by the wizard Gandalf and a company of dwarves. They journey to the Lonely Mountain to reclaim a treasure guarded by the dragon Smaug."
                         },
+                        {
+                            title: "Neverwhere",
+                            author: "Neil Gaiman",
+                            image: "https://m.media-amazon.com/images/I/41fC-yQ6-fL.jpg",
+                            year: 1996,
+                            genre: "Fantasy",
+                            description: "A contemporary fantasy novel about a young man named Richard Mayhew who stumbles into an underground world of London, known as Neverwhere.  There, he encounters a colorful cast of characters and must find his way back to his own world."
+                        },
                         {
                             title: "A Game of Thrones",
                             author: "George R.R. Martin",
diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
index 63b5e7103..1f93f99e7 100644
--- a/assets/html/booklistswap.html
+++ b/assets/html/booklistswap.html
@@ -297,6 +297,9 @@
                     <li class="dropdown-menu-item">
                       <a href="./freeBooks.html" 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="./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="./about.html" class="navbar-link">About</a>
                     </li>
diff --git a/assets/html/forgot-pass.html b/assets/html/forgot-pass.html
index 461202698..aea25f59b 100644
--- a/assets/html/forgot-pass.html
+++ b/assets/html/forgot-pass.html
@@ -138,7 +138,7 @@
                 <a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
               </li>
               <li class="navbar-item" id="logout-r">
-                <a href="../html/login.html" class="navbar-link">Logout</a>
+                <a href="../html/login.html" class="navbar-link">Login/Signup</a>
               </li>
     
               
@@ -166,6 +166,9 @@
                     <li class="dropdown-menu-item">
                       <a href="./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="./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="./about.html" class="navbar-link">About</a>
                     </li>
diff --git a/assets/html/freeBooks.html b/assets/html/freeBooks.html
index 6b61156ea..e0c0e1b2e 100644
--- a/assets/html/freeBooks.html
+++ b/assets/html/freeBooks.html
@@ -5,7 +5,7 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link rel="apple-touch-icon" sizes="180x180" href="./../favicon_package_v0.16/apple-touch-icon.png"> 
+  <link rel="apple-touch-icon" sizes="180x180" href="./../favicon_package_v0.16/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="./../favicon_package_v0.16/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="./../favicon_package_v0.16/favicon-16x16.png">
   <link rel="manifest" href="./../favicon_package_v0.16/site.webmanifest">
@@ -59,7 +59,7 @@
   <link rel="stylesheet" href="../css/Available.css">
 
 
- 
+
 
 
 </head>
@@ -86,8 +86,8 @@
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-    
-    
+
+
     <div id="preloader">
       <div class="loader">
         <div class="book-wrapper">
@@ -138,7 +138,7 @@
               d="M110 30L76 30"
             ></path>
           </svg>
-      
+
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="#ffffff74"
@@ -165,7 +165,7 @@
           </svg>
         </div>
       </div>
-      
+
     </div>
 
   <header class="header header-anim" data-header>
@@ -197,7 +197,7 @@
 
           <li class="navbar-item">
 
-            <a href="/assets/html/index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+            <a href="./index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                 class="ri-customer-service-2-fill"></i> Contact</a>
           </li>
 
@@ -208,7 +208,7 @@
             <a href="./login.html" class="navbar-link">Login/Signup</a>
           </li>
           <li class="navbar-item dropdown" id="more-dropdown">
-            <a href="#" class="navbar-link" id="more-link">More 
+            <a href="#" class="navbar-link" id="more-link">More
             <svg  class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" 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">
 
@@ -230,13 +230,16 @@
                 <li class="dropdown-menu-item">
                   <a href="./freeBooks.html" 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="./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="./about.html" class="navbar-link">About</a>
                 </li>
               </ul>
             </div>
           </li>
-          
+
           <!-- Google Translate Element -->
           <li class="navbar-item">
             <div id="google_element"></div>
@@ -276,7 +279,12 @@
     </div>
   </header>
 
-
+<style>
+   .dark-mode .book_title{
+    color:white;
+  text-shadow: 3px 3px 20px #d1c4c4;
+  }
+</style>
 
 
 
@@ -293,121 +301,145 @@ <h2 class="h2 section-title has-underline" data-sr-id="2" style="visibility: vis
                 <img src="https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg" alt="Alice's Adventures in Wonderland" class="book-cover">
                 <h3 class="book_title">Alice's Adventures in Wonderland</h3>
                 <a href="https://www.gutenberg.org/ebooks/11" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(1)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
                 <h3 class="book_title">Pride and Prejudice</h3>
                 <a href="https://www.gutenberg.org/ebooks/1342" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(2)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Frankenstein" class="book-cover">
                 <h3 class="book_title">Frankenstein</h3>
                 <a href="https://www.gutenberg.org/ebooks/84" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(3)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg" alt="Metamorphosis" class="book-cover">
                 <h3 class="book_title">Metamorphosis</h3>
                 <a href="https://www.gutenberg.org/ebooks/5200" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(4)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg" alt="The Adventures of Sherlock Holmes" class="book-cover">
                 <h3 class="book_title">The Adventures of Sherlock Holmes</h3>
                 <a href="https://www.gutenberg.org/ebooks/1661" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(5)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg" alt="Alice's Adventures in Wonderland" class="book-cover">
                 <h3 class="book_title">Alice's Adventures in Wonderland</h3>
                 <a href="https://www.gutenberg.org/ebooks/11" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(6)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
                 <h3 class="book_title">Pride and Prejudice</h3>
                 <a href="https://www.gutenberg.org/ebooks/1342" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(7)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Frankenstein" class="book-cover">
                 <h3 class="book_title">Frankenstein</h3>
                 <a href="https://www.gutenberg.org/ebooks/84" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(8)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg" alt="Metamorphosis" class="book-cover">
                 <h3 class="book_title">Metamorphosis</h3>
                 <a href="https://www.gutenberg.org/ebooks/5200" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(9)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg" alt="The Adventures of Sherlock Holmes" class="book-cover">
                 <h3 class="book_title">The Adventures of Sherlock Holmes</h3>
                 <a href="https://www.gutenberg.org/ebooks/1661" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(10)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg" alt="Alice's Adventures in Wonderland" class="book-cover">
                 <h3 class="book_title">Alice's Adventures in Wonderland</h3>
                 <a href="https://www.gutenberg.org/ebooks/11" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(11)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
                 <h3 class="book_title">Pride and Prejudice</h3>
                 <a href="https://www.gutenberg.org/ebooks/1342" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(12)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Frankenstein" class="book-cover">
                 <h3 class="book_title">Frankenstein</h3>
                 <a href="https://www.gutenberg.org/ebooks/84" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(13)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg" alt="Metamorphosis" class="book-cover">
                 <h3 class="book_title">Metamorphosis</h3>
                 <a href="https://www.gutenberg.org/ebooks/5200" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(14)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg" alt="The Adventures of Sherlock Holmes" class="book-cover">
                 <h3 class="book_title">The Adventures of Sherlock Holmes</h3>
                 <a href="https://www.gutenberg.org/ebooks/1661" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(15)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg" alt="Alice's Adventures in Wonderland" class="book-cover">
                 <h3 class="book_title">Alice's Adventures in Wonderland</h3>
                 <a href="https://www.gutenberg.org/ebooks/11" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(16)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
                 <h3 class="book_title">Pride and Prejudice</h3>
                 <a href="https://www.gutenberg.org/ebooks/1342" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(17)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Frankenstein" class="book-cover">
                 <h3 class="book_title">Frankenstein</h3>
                 <a href="https://www.gutenberg.org/ebooks/84" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(18)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg" alt="Metamorphosis" class="book-cover">
                 <h3 class="book_title">Metamorphosis</h3>
                 <a href="https://www.gutenberg.org/ebooks/5200" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(19)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg" alt="The Adventures of Sherlock Holmes" class="book-cover">
                 <h3 class="book_title">The Adventures of Sherlock Holmes</h3>
                 <a href="https://www.gutenberg.org/ebooks/1661" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(20)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg" alt="Alice's Adventures in Wonderland" class="book-cover">
                 <h3 class="book_title">Alice's Adventures in Wonderland</h3>
                 <a href="https://www.gutenberg.org/ebooks/11" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(21)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
                 <h3 class="book_title">Pride and Prejudice</h3>
                 <a href="https://www.gutenberg.org/ebooks/1342" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(22)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg" alt="Frankenstein" class="book-cover">
                 <h3 class="book_title">Frankenstein</h3>
                 <a href="https://www.gutenberg.org/ebooks/84" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(23)" class="read_later_button">Add to Read Later</button>
             </div>
             <div class="book-item">
                 <img src="https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg" alt="Metamorphosis" class="book-cover">
                 <h3 class="book_title">Metamorphosis</h3>
                 <a href="https://www.gutenberg.org/ebooks/5200" class="btn btn-secondary">Download</a>
+                <button onclick="addToReadLater(24)" class="read_later_button">Add to Read Later</button>
             </div>
         </div>
     </div>
@@ -418,103 +450,193 @@ <h3 class="book_title">Metamorphosis</h3>
 
 
 
-  <!-- 
+  <!--
     - #FOOTER
   -->
 
-  <footer>
-    <div class="foot-top">
-      <div class="foot-left">
-        <div class="desc">
 
-          <a href="#" class="logo">SwapReads</a>
-          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
-            seeking to swap and
+    <footer>
+      <div class="foot-top">
+        <div class="foot-left">
+
+          <div class="desc">
+  <!--google translate-->
+            <div id="google_translate_element"></div>
+
+            <script type="text/javascript">
+                function googleTranslateElementInit() {
+                    new google.translate.TranslateElement(
+                        {pageLanguage: 'en'},
+                        'google_translate_element'
+                    );
+                }
+            </script>
+
+            <script type="text/javascript"
+                    src=
+        "https://translate.google.com/translate_a/element.js?
+        cb=googleTranslateElementInit">
+            </script>
+            <div><a href="#" class="logo">SwapReads</a></div>
+            <div>
+              <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+                lovers
+                seeking to swap and
+
+                discover new literary gems.
+                Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+                the
+                world of literature—all on one convenient platform. Join us and dive into a universe of endless
+                possibilities!
+              </p>
+            </div>
 
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p>
+          </div>
         </div>
-      </div>
-      <div class="foot-middle">
-        <h2>Quick Links</h2>
-        <ul>
-          <li class="foot-quick"><a href="./index.html" onclick="lenis.scrollTo('#home')">Home</a></li>
-          <li class="foot-quick"><a href="./index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-          <li class="foot-quick"><a href="./index.html#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-          <li class="foot-quick"><a href="./index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-          <li class="foot-quick"><a href="./index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-          <li class="foot-quick"><a href="./index.html#faqq" onclick="lenis.scrollTo('#faqq')">Faq</a></li>
-        </ul>
-      </div>
-      <div class="social-icons">
-        <!-- <h5>Newsletter</h5> -->
-        <!-- <div class="input-newletter">
-          <label for="newsletter"><h5>Newsletter</h5></label>
-          <input placeholder="Enter your email" type="email" ></input>
-          <button class="btn-subs">Subscribe</button>
-        </div> -->
-
-        <form type="newsletter">
-          <label for="email">Subscribe to our Newsletter</label>
-          <div class="row-flex">
+        <div class="foot-middle">
+          <h2>Quick Links</h2>
+          <div id="quicklinks">
+            <div>
+            <ul>
+              <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
+              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+              <li class="foot-quick">
+                <a href="./assets/html/book_recommend.html" onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
+            </ul>
+          </div>
+          <div>
+            <ul>
+              <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
+                  BookList</a></li>
+              <li class="foot-quick"><a href="./assets/html/freeBooks.html"
+                  onclick="lenis.scrollTo('#contact')">E-Book</a></li>
+              <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
+              </li>
+              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
+            </ul>
+          </div>
+          </div>
+        </div>
+        <div class="social-icons">
 
+          <form action="/subscribe" method="post">
+            <label for="email">Subscribe to our Newsletter</label>
+            <div class="row-flex">
 
+            <input type="news" value="" name="email" placeholder="email address" id="newsletter-email">
+            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
 
-            <!--email write-->
-            <input type="news" value="" name="email" placeholder="email address" required>
-            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn" >
-          </div>
-        </form>
-        <div class="icons">
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-facebook-square"></i>
             </div>
-          </a>
-    
-          <a href="#">
-            <div class="icon">
-              <i class="fa-brands fa-square-x-twitter"></i>
-            </div>
-          </a>
-    
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-instagram-square"></i>
-            </div>
-          </a>
-    
-          <a href="https://www.youtube.com/@anuragbytes">
-            <div class="icon">
-              <i class="fab fa-youtube-square"></i>
-            </div>
-          </a>
-      <!-- </div> -->
-    </div>
-    <div class="footer-bottom">
-      <p class="copyright" style="text-align: center">
-        &copy;
-        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
-      </p>
-    </div>
+          </form>
+          <style>
+            .icons .icon i {
+              font-size: 24px;
+              /* Set the default font size for icons */
+              transition: all 0.3s ease;
+              /* Add transition for smooth animation */
+              margin-top: 10px;
+            }
+
+            .icons .icon:hover i {
+              transform: scale(1.2);
+              /* Scale the icon on hover */
+            }
+
+            .icons .icon:hover .fab.fa-facebook {
+              color: #3B5998;
+              /* Change to Facebook color on hover */
+            }
+
+            .icons .icon:hover .fab.fa-twitter{
+              color: #090e11;
+              /* Change to Twitter color on hover */
+            }
+
+            .icons .icon:hover .fab.fa-instagram {
+              background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+              background-clip: text;
+              border-radius: 20%;
+              transform: scale(1.5);
+              color:transparent;
+              /* Change to Instagram color on hover */
+            }
+
+            .icons .icon:hover .fab.fa-youtube {
+              color: #C31A1E;
+              /* Change to YouTube color on hover */
+            }
+            .icons .icon:hover .fab.fa-github {
+              color: #333;
+            }
+            .icons .icon:hover .fab.fa-linkedin {
+              color: #285AEB;
+            }
+          </style>
+
+          <div class="icons">
+            <a href="https://www.linkedin.com/in/anurag-verma-b91417253/">
+              <div class="icon">
+                <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+              </div>
+            </a>
+
+            <a href="https://x.com/anuragverma_108">
+              <div class="icon">
+                <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+              </div>
+            </a>
+
+            <a href="#">
+              <div class="icon">
+                <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+              </div>
+            </a>
+            <a href="https://github.com/anuragverma108/SwapReads" title="Github">
+              <div class="icon">
+                <i class="fab fa-github" style="cursor: pointer;"></i>
+              </div>
+            </a>
+
+            <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
+              <div class="icon">
+                <i class="fab fa-youtube" style="cursor: pointer;"></i>
+              </div>
+            </a>
+            <a href="https://github.com/anuragverma108" title="GitHub">
+              <div class="icon">
+                  <i class="fab fa-github" style="cursor: pointer;"></i>
+              </div>
+            </a>
+          </div>
 
-    <div id="back-to-top-container">
-      <div class="circle1">
-        <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
-          class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-          <path
-            d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-        </svg>
+          <div id="back-to-top-container" onclick="lenis.scrollTo('#chapters')">
+            <div class="circle1">
+              <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
+                class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                <path
+                  d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+      <!-- adding privacy policy and copyright popup-->
+      <div style="text-align: center; align-items: center;">
+        <p style="text-align: center">
+          &copy;
+          <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+        </p>
+      </div>
+
+
+    </footer>
 
-  </footer>
   <!-- Footer ended-->
 
- 
+
   <!--Dark Mode-->
 
   <script>
@@ -604,7 +726,7 @@ <h2>Quick Links</h2>
 <script>
   document.addEventListener("DOMContentLoaded", function () {
       const backToTopButton = document.getElementById('back-to-top-container');
-  
+
       function checkButtonVisibility() {
           if (window.innerWidth > 100 && window.scrollY > 100) {
               backToTopButton.style.display = 'block';
@@ -612,20 +734,20 @@ <h2>Quick Links</h2>
               backToTopButton.style.display = 'none';
           }
       }
-  
+
       window.addEventListener('scroll', checkButtonVisibility);
       window.addEventListener('resize', checkButtonVisibility);
-  
+
       backToTopButton.addEventListener('click', function () {
           window.scrollTo({
               top: 0,
-              behavior: 'smooth' 
+              behavior: 'smooth'
           });
       });
       checkButtonVisibility();
   });
-  
-    </script>
 
+    </script>
+    <script src="../js/freeBooks.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/html/index.html b/assets/html/index.html
index fe9b51652..4acac06a4 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -37,6 +37,7 @@
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 
   <script src="../js/rateUsModal.js" defer></script>
+  
 
 </head>
 <script src="https://unpkg.com/scrollreveal"></script>
@@ -199,7 +200,7 @@
             <a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
           </li>
           <li class="navbar-item" id="logout-r">
-            <a href="../html/login.html" class="navbar-link">Logout</a>
+            <a href="../html/login.html" class="navbar-link">Login/Signup</a>
           </li>
 
           
@@ -226,6 +227,9 @@
                 <li class="dropdown-menu-item">
                   <a href="./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="./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/about.html" class="navbar-link">About</a>
                 </li>
@@ -250,7 +254,6 @@
             </div>
           </label>
         </div>
-        <img src="../images/new_logo_banner_dark.png" alt="" class="logopic-mobile"  />
         <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
           <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
 
@@ -1131,63 +1134,40 @@ <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
 
       <section class="section contact" id="contact" aria-label="contact">
         <div class="container">
-
           <p class="section-subtitle">Contact</p>
-
           <h2 class="h2 section-title has-underline">
             Write me anything
             <span class="span has-before"></span>
           </h2>
-
-          <iframe
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
             style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-
           <div class="wrapper">
             <div class="contact-card">
-              <form action="" id="contact-form ">
-
-                <input type="text" name="name" id="name" placeholder="Your Name" required class="input-field"
-                  size="60px">
-
-                <input type="email" name="email_address" id="email" placeholder="Your Email" required
-                  class="input-field">
-
+              <form id="contact-form">
+                <input type="text" name="name" id="name" placeholder="Your Name" required class="input-field" size="60px">
+                <input type="email" name="email" id="email" placeholder="Your Email" required class="input-field">
                 <input type="text" name="subject" id="subject" placeholder="Subject" required class="input-field">
                 <div id="subject-count" class="character-count">0/100</div>
-                <!-- Element to display character count for subject -->
-
-                <textarea name="message" id="message" placeholder="Your Message" class="input-field"></textarea>
+                <textarea name="message" id="message" placeholder="Your Message" required class="input-field"></textarea>
                 <div id="message-count" class="character-count">0/250</div>
-                <!-- Element to display character count for message -->
-
-                <button type="submit1" id="sendMessageBtn" class="btn btn-primary">Send Now</button>
+                <button type="submit" id="sendMessageBtn" class="btn btn-primary">Send Now</button>
+              </form>
             </div>
-            <ul class="contact-card ">
+            <ul class="contact-card">
               <li>
                 <p class="card-title">Address:</p>
-                <address class="address">
-                  12, Nayabad <br>
-                  Kolkata, India 700054
-                </address>
+                <address class="address">12, Nayabad <br>Kolkata, India 700054</address>
               </li>
-
               <li>
                 <p class="card-title">Phone:</p>
                 <a href="tel:1234567890" class="card-link">+91 9124421980</a>
               </li>
-
               <li>
                 <p class="card-title">Email:</p>
                 <a href="mailto:support@support.com" class="card-link">support@swapreads.com</a>
               </li>
             </ul>
-            </li>
-
-            </ul>
-
           </div>
-
         </div>
       </section>
 
@@ -1451,7 +1431,7 @@ <h2>Quick Links</h2>
       </p>
     </div>
 
-    <div id="back-to-top-container">
+    <div  id="back-to-top-container">
       <div class="circle1">
         <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
           class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
@@ -1511,74 +1491,46 @@ <h2>Quick Links</h2>
     </div>
   </footer> -->
   <!--Dark Mode-->
-
   <script>
-
-    //Custom Cursor
-
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e"
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-
-    });
-
-    function animateCircles() {
-
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        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;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
+    document.getElementById('contact-form').addEventListener('submit', function(event) {
+      event.preventDefault(); // Prevent the default form submission
+
+      const name = document.getElementById('name').value;
+      const email = document.getElementById('email').value;
+      const subject = document.getElementById('subject').value;
+      const message = document.getElementById('message').value;
+
+      const data = {
+        name: name,
+        email: email,
+        subject: subject,
+        message: message
+      };
+
+      fetch('http://localhost:3000/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          alert('Message sent successfully');
+        } else {
+          alert('Error sending message');
+        }
+      })
+      .catch((error) => {
+        console.error('Error:', error);
       });
+    });
+  </script>
 
-      requestAnimationFrame(animateCircles);
-    }
+  <script>
 
-    animateCircles();
+    
 
 
     // Function to toggle dark mode
@@ -1645,8 +1597,7 @@ <h2>Quick Links</h2>
     });
   </script>
 
-
-
+ 
   <!-- 
     - custom js link
   -->
diff --git a/assets/html/login.html b/assets/html/login.html
index 1b7b4c12d..47ccdfd53 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
+    rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../css/login.css" />
@@ -12,11 +15,17 @@
   <link rel="icon" type="image/png" sizes="16x16" href="../favicon_package_v0.16/favicon-16x16.png">
   <link rel="manifest" href="../favicon_package_v0.16/site.webmanifest">
   <link rel="mask-icon" href="../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">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.27/bundled/lenis.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
   <script src="../js/script.js" defer></script>
-  
+
 
   <script src="../js/scroll-reveal.js"></script>
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
@@ -33,6 +42,27 @@
 
 <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>
+  <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="rate-us-modal-wrapper">
     <div class="rate-us-modal">
       <a onclick="closeRateUsModal()" class="home_button"></a>
@@ -50,14 +80,14 @@ <h1 class="rating_heading">Rate Us</h1>
       <p class="thank_you_message">Thank you for rating us!</p>
     </div>
   </div>
-  
+
   <header class="header header-anim" data-header>
-      
+
     <div class="container">
 
       <nav class="navbar" data-navbar>
         <a href="SwapReads\index.html" class="logo" style="display:flex;">
-        <img src="../images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
+          <img src="../images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
         </a>
 
         <ul class="navbar-list">
@@ -65,13 +95,12 @@ <h1 class="rating_heading">Rate Us</h1>
             <img src="../images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
           </a>
           <li class="navbar-item">
-            <a href="../../index.html#home" class="navbar-link" data-nav-link><i
-                class="ri-home-fill"></i> Home</a>
+            <a href="../../index.html#home" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> Home</a>
           </li>
 
           <li class="navbar-item">
-            <a href="../../index.html#benefits" class="navbar-link" data-nav-link><i
-                class="ri-bar-chart-fill"></i> Benefits</a>
+            <a href="../../index.html#benefits" class="navbar-link" data-nav-link><i class="ri-bar-chart-fill"></i>
+              Benefits</a>
           </li>
 
           <li class="navbar-item">
@@ -102,22 +131,27 @@ <h1 class="rating_heading">Rate Us</h1>
 
               <ul class="dropdown-menu-list">
                 <li class="dropdown-menu-item">
-                  <a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
+                  <a href="index.html#chapters" 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="index.html#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
+                  <a href="index.html#pricing" 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="./booklistswap.html" class="navbar-link">Booklist for Swapping</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="./book_recommend.html" class="navbar-link" data-nav-link>
+                  <a href="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="./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>
+                  <a href="./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="./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="./about.html" class="navbar-link">About</a>
@@ -197,13 +231,14 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
 
           <div>
             <div class="progress">
-              <div id="password-strength" class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+              <div id="password-strength" class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0"
+                aria-valuemax="100"></div>
             </div>
             <ul class="list-unstyled">
-              <li><span class="low-upper-case"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;Lowercase &amp; Uppercase</span></li>
-              <li><span class="one-number"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;Number (0-9)</span></li>
-              <li><span class="one-special-char"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;Special Character (!@#$%^&*)</span></li>
-              <li><span class="eight-character"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;At least 8 Character</span></li>
+              <li><span class="low-upper-case">&nbsp;Lowercase &amp; Uppercase</span></li>
+              <li><span class="one-number">&nbsp;Number (0-9)</span></li>
+              <li><span class="one-special-char">&nbsp;Special Character (!@#$%^&*)</span></li>
+              <li><span class="eight-character">&nbsp;At least 8 Character</span></li>
             </ul>
           </div>
 
@@ -221,25 +256,32 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
         <div class="desc">
 
           <div><a href="#" class="logo">SwapReads</a></div>
-          <div><p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
-            seeking to swap and
-
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p>
-        </div>
+          <div>
+            <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+              lovers
+              seeking to swap and
+
+              discover new literary gems.
+              Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+              the
+              world of literature—all on one convenient platform. Join us and dive into a universe of endless
+              possibilities!
+            </p>
+          </div>
         </div>
       </div>
       <div class="foot-middle">
         <h2>Quick Links</h2>
         <ul>
           <li class="foot-quick"><a href="../../index.html#home" onclick="lenis.scrollTo('#home')">Home</a></li>
-          <li class="foot-quick"><a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-          <li class="foot-quick"><a href="../../index.html#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-          <li class="foot-quick"><a href="../../index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-          <li class="foot-quick"><a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+          <li class="foot-quick"><a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a>
+          </li>
+          <li class="foot-quick"><a href="../../index.html#chapters" onclick="lenis.scrollTo('#chapters')">Literary
+              Realms</a></li>
+          <li class="foot-quick"><a href="../../index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a>
+          </li>
+          <li class="foot-quick"><a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a>
+          </li>
           <li class="foot-quick"><a href="../../index.html#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
         </ul>
       </div>
@@ -275,59 +317,74 @@ <h2>Quick Links</h2>
             /* Scale the icon on hover */
           }
 
-          .icons .icon:hover .fab.fa-facebook-square {
+          .icons .icon:hover .fab.fa-facebook {
             color: #1877f2;
             /* Change to Facebook color on hover */
           }
 
-          .icons .icon:hover .fab.fa-twitter-square {
-            color: #1da1f3;
+
+          .icons .icon:hover .fa-brands .fa-square-x-twitter {
+            color: #555;
             /* Change to Twitter color on hover */
           }
 
-          .icons .icon:hover .fab.fa-instagram-square {
-            color: #c13583;
+          .icons .icon:hover .fab.fa-instagram {
+            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+            background-clip: text;
+            border-radius: 20%;
+            transform: scale(1.5);
+            color: transparent;
             /* Change to Instagram color on hover */
           }
 
-          .icons .icon:hover .fab.fa-youtube-square {
+          .icons .icon:hover .fab.fa-youtube {
             color: #ff0001;
             /* Change to YouTube color on hover */
           }
+
+          .icons .icon:hover .fab.fa-github {
+            color: #333;
+          }
         </style>
 
         <div class="icons">
           <a href="#">
             <div class="icon">
-              <i class="fab fa-facebook-square" style="cursor: pointer;"></i>
+              <i class="fab fa-facebook" style="cursor: pointer;"></i>
             </div>
           </a>
 
           <a href="#">
             <div class="icon">
-              <i class="fab fa-twitter-square" style="cursor: pointer;"></i>
+              <i class="fa-brands fa-square-x-twitter" title="X"style="cursor: pointer;"></i>
             </div>
           </a>
 
           <a href="#">
             <div class="icon">
-              <i class="fab fa-instagram-square" style="cursor: pointer;"></i>
+              <i class="fab fa-instagram" style="cursor: pointer;"></i>
             </div>
           </a>
 
           <a href="https://www.youtube.com/@anuragbytes">
             <div class="icon">
-              <i class="fab fa-youtube-square" style="cursor: pointer;"></i>
+              <i class="fab fa-youtube" style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+          <a href="https://github.com/anuragverma108">
+            <div class="icon">
+              <i class="fab fa-github" style="cursor: pointer;"></i>
             </div>
           </a>
         </div>
-          <div class="footer-bottom">
-            <p class="copyright" style="text-align: center">
-              &copy;
-              <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
-              Hackers.
-            </p>
-          </div>
+        <div class="footer-bottom">
+          <p class="copyright" style="text-align: center">
+            &copy;
+            <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
+            Hackers.
+          </p>
+        </div>
 
   </footer>
   <!-- <footer class="footer">
@@ -341,6 +398,70 @@ <h2>Quick Links</h2>
   </footer> -->
 
   <script>
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+
+    const colors = [
+      "#ffb56b",
+      "#fdaf69",
+      "#f89d63",
+      "#f59761",
+      "#ef865e",
+      "#ec805d",
+      "#e36e5c",
+      "#df685c",
+      "#d5585c",
+      "#d1525c",
+      "#c5415d",
+      "#c03b5d",
+      "#b22c5e",
+      "#ac265e",
+      "#9c155f",
+      "#950f5f",
+      "#830060",
+      "#7c0060",
+      "#680060",
+      "#60005f",
+      "#48005f",
+      "#3d005e"
+    ];
+
+    circles.forEach(function (circle, index) {
+      circle.x = 0;
+      circle.y = 0;
+      circle.style.backgroundColor = colors[index % colors.length];
+    });
+
+    window.addEventListener("mousemove", function (e) {
+      coords.x = e.clientX;
+      coords.y = e.clientY;
+
+    });
+
+    function animateCircles() {
+
+      let x = coords.x;
+      let y = coords.y;
+
+      circles.forEach(function (circle, index) {
+        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;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+
+      requestAnimationFrame(animateCircles);
+    }
+
+    animateCircles();
+
     let eyeIcon = document.getElementById("eyeicon");
     let password = document.getElementById("password");
     let eyeIconLogin = document.getElementById("eyeicon-login");
@@ -356,112 +477,110 @@ <h2>Quick Links</h2>
     eyeIcon.src = "../images/eye-close.png"; // Set the initial eye icon as closed
 
     eyeIcon.onclick = function () {
-        if (password.type === "password") {
-            password.type = "text";
-            eyeIcon.src = "../images/eye-open.png";
-        } else {
-            password.type = "password";
-            eyeIcon.src = "../images/eye-close.png";
-        }
+      if (password.type === "password") {
+        password.type = "text";
+        eyeIcon.src = "../images/eye-open.png";
+      } else {
+        password.type = "password";
+        eyeIcon.src = "../images/eye-close.png";
+      }
     };
 
     passwordLogin.type = "password";
     eyeIconLogin.src = "../images/eye-close.png"; // Set the initial eye icon as closed
 
     eyeIconLogin.onclick = function () {
-        if (passwordLogin.type === "password") {
-            passwordLogin.type = "text";
-            eyeIconLogin.src = "../images/eye-open.png";
-        } else {
-            passwordLogin.type = "password";
-            eyeIconLogin.src = "../images/eye-close.png";
-        }
+      if (passwordLogin.type === "password") {
+        passwordLogin.type = "text";
+        eyeIconLogin.src = "../images/eye-open.png";
+      } else {
+        passwordLogin.type = "password";
+        eyeIconLogin.src = "../images/eye-close.png";
+      }
     };
 
-    password.addEventListener("keyup", function(){
-        let pass = document.getElementById("password").value;
-        checkStrength(pass);
+    password.addEventListener("keyup", function () {
+      let pass = document.getElementById("password").value;
+      checkStrength(pass);
     });
 
     function checkStrength(password) {
-        let strength = 0;
-
-        //If password contains both lower and uppercase characters
-        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
-            strength += 1;
-            lowUpperCase.classList.remove('fa-circle');
-            lowUpperCase.classList.add('fa-check');
-        } else {
-            lowUpperCase.classList.add('fa-circle');
-            lowUpperCase.classList.remove('fa-check');
-        }
-        //If it has numbers and characters
-        if (password.match(/([0-9])/)) {
-            strength += 1;
-            number.classList.remove('fa-circle');
-            number.classList.add('fa-check');
-        } else {
-            number.classList.add('fa-circle');
-            number.classList.remove('fa-check');
-        }
-        //If it has one special character
-        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
-            strength += 1;
-            specialChar.classList.remove('fa-circle');
-            specialChar.classList.add('fa-check');
-        } else {
-            specialChar.classList.add('fa-circle');
-            specialChar.classList.remove('fa-check');
-        }
-        //If password is greater than 7
-        if (password.length > 7) {
-            strength += 1;
-            eightChar.classList.remove('fa-circle');
-            eightChar.classList.add('fa-check');
-        } else {
-            eightChar.classList.add('fa-circle');
-            eightChar.classList.remove('fa-check');   
-        }
+      let strength = 0;
 
-        // If value is less than 2
-        if (strength < 2) {
-            passwordStrength.classList.remove('progress-bar-warning');
-            passwordStrength.classList.remove('progress-bar-success');
-            passwordStrength.classList.add('progress-bar-danger');
-            passwordStrength.style = 'width: 10%';
-        } else if (strength == 3) {
-            passwordStrength.classList.remove('progress-bar-success');
-            passwordStrength.classList.remove('progress-bar-danger');
-            passwordStrength.classList.add('progress-bar-warning');
-            passwordStrength.style = 'width: 60%';
-        } else if (strength == 4) {
-            passwordStrength.classList.remove('progress-bar-warning');
-            passwordStrength.classList.remove('progress-bar-danger');
-            passwordStrength.classList.add('progress-bar-success');
-            passwordStrength.style = 'width: 100%';
-        }
+      //If password contains both lower and uppercase characters
+      if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
+        strength += 1;
+        lowUpperCase.classList.remove('fa-circle');
+        lowUpperCase.classList.add('fa-check');
+      } else {
+        lowUpperCase.classList.add('fa-circle');
+        lowUpperCase.classList.remove('fa-check');
+      }
+      //If it has numbers and characters
+      if (password.match(/([0-9])/)) {
+        strength += 1;
+        number.classList.remove('fa-circle');
+        number.classList.add('fa-check');
+      } else {
+        number.classList.add('fa-circle');
+        number.classList.remove('fa-check');
+      }
+      //If it has one special character
+      if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
+        strength += 1;
+        specialChar.classList.remove('fa-circle');
+        specialChar.classList.add('fa-check');
+      } else {
+        specialChar.classList.add('fa-circle');
+        specialChar.classList.remove('fa-check');
+      }
+      //If password is greater than 7
+      if (password.length > 7) {
+        strength += 1;
+        eightChar.classList.remove('fa-circle');
+        eightChar.classList.add('fa-check');
+      } else {
+        eightChar.classList.add('fa-circle');
+        eightChar.classList.remove('fa-check');
+      }
+
+      // If value is less than 2
+      if (strength < 2) {
+        passwordStrength.classList.remove('progress-bar-warning');
+        passwordStrength.classList.remove('progress-bar-success');
+        passwordStrength.classList.add('progress-bar-danger');
+        passwordStrength.style = 'width: 10%';
+      } else if (strength == 3) {
+        passwordStrength.classList.remove('progress-bar-success');
+        passwordStrength.classList.remove('progress-bar-danger');
+        passwordStrength.classList.add('progress-bar-warning');
+        passwordStrength.style = 'width: 60%';
+      } else if (strength == 4) {
+        passwordStrength.classList.remove('progress-bar-warning');
+        passwordStrength.classList.remove('progress-bar-danger');
+        passwordStrength.classList.add('progress-bar-success');
+        passwordStrength.style = 'width: 100%';
+      }
     }
 
-    document.addEventListener('DOMContentLoaded', function() {
-    applyThemePreferenceOnLoginPage();
-});
+    document.addEventListener('DOMContentLoaded', function () {
+      applyThemePreferenceOnLoginPage();
+    });
 
-function applyThemePreferenceOnLoginPage() {
-    let currentTheme = localStorage.getItem('currentTheme');
-    let themeClass = localStorage.getItem('theme');
+    function applyThemePreferenceOnLoginPage() {
+      let currentTheme = localStorage.getItem('currentTheme');
+      let themeClass = localStorage.getItem('theme');
 
-    if (currentTheme === 'dark' && themeClass) {
+      if (currentTheme === 'dark' && themeClass) {
         document.body.classList.add(themeClass);
-
+        
         document.querySelectorAll('.note h1, .note h2, .navbar, .main, .login, .register input, #register, .register label').forEach(element => {
-            element.classList.add('dark-mode');
+          element.classList.add('dark-mode');
         });
+
+
     } else {
         document.body.classList.remove(themeClass);
-
-        document.querySelectorAll('.note h1, .note h2, .navbar, .main, .login, .register input, #register, .register label').forEach(element => {
-            element.classList.remove('dark-mode');
-        });
     }
 }
 
@@ -495,38 +614,73 @@ <h2>Quick Links</h2>
       document.body.classList.add('dark-mode');
       starRating.style.backgroundColor = '#2d2828';
       thankYouMessage.style.backgroundColor = '#2d2828';
+
     }
 
-    function applyLightModeStyles() {
-      document.body.classList.remove('dark-mode');
-      document.body.classList.add('light-mode');
-      starRating.style.backgroundColor = 'white';
-      thankYouMessage.style.backgroundColor = 'white';
+    function toggleDarkMode() {
+      const isDarkMode = isDarkModePreferred();
+      setDarkModePreference(!isDarkMode);
+      applyDarkModePreference();
     }
 
-    if (currentTheme) {
-      if (currentTheme === 'dark-mode') {
-        applyDarkModeStyles();
-        switchCheckbox.checked = true;
+    // Function to apply dark mode preference
+    function applyDarkModePreference() {
+      const isDarkMode = isDarkModePreferred();
+      if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        document.getElementById('theme-icon').src = './assets/images/icons8-sun.svg';
       } else {
-        applyLightModeStyles();
+        document.body.classList.remove('dark-mode');
+        document.getElementById('theme-icon').src = './assets/images/moon_solid.svg';
       }
     }
+  }
+});
+    // Function to set dark mode preference
+    document.addEventListener('DOMContentLoaded', () => {
+      const currentTheme = localStorage.getItem('theme');
+      const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
+      const starRating = document.querySelector('.star_rating');
+      const thankYouMessage = document.querySelector(".thank_you_message");
+      if (switchCheckbox) { // Check if switchCheckbox is not null
+        function applyDarkModeStyles() {
+          document.body.classList.remove('light-mode');
+          document.body.classList.add('dark-mode');
+          starRating.style.backgroundColor = '#2d2828';
+          thankYouMessage.style.backgroundColor = '#2d2828';
+        }
 
-    switchCheckbox.addEventListener('change', () => {
-      if (switchCheckbox.checked) {
-        applyDarkModeStyles();
-        localStorage.setItem('theme', 'dark-mode');
+        function applyLightModeStyles() {
+          document.body.classList.remove('dark-mode');
+          document.body.classList.add('light-mode');
+          starRating.style.backgroundColor = 'white';
+          thankYouMessage.style.backgroundColor = 'white';
+        }
+
+        if (currentTheme) {
+          if (currentTheme === 'dark-mode') {
+            applyDarkModeStyles();
+            switchCheckbox.checked = true;
+          } else {
+            applyLightModeStyles();
+          }
+        }
+
+        switchCheckbox.addEventListener('change', () => {
+          if (switchCheckbox.checked) {
+            applyDarkModeStyles();
+            localStorage.setItem('theme', 'dark-mode');
+          } else {
+            applyLightModeStyles();
+            localStorage.setItem('theme', 'light-mode');
+          }
+          applyDarkModePreference(); // Call the applyDarkModePreference function after updating the dark mode preference
+        });
       } else {
-        applyLightModeStyles();
-        localStorage.setItem('theme', 'light-mode');
+        console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
       }
-      applyDarkModePreference(); // Call the applyDarkModePreference function after updating the dark mode preference
     });
-  } else {
-    console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
-  }
-});
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/assets/html/mylogin.html b/assets/html/mylogin.html
index df52e4316..586e8127b 100644
--- a/assets/html/mylogin.html
+++ b/assets/html/mylogin.html
@@ -58,7 +58,7 @@
                   <a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
                 </li>
                 <li class="navbar-item" id="logout-r">
-                  <a href="../html/login.html" class="navbar-link">Logout</a>
+                  <a href="../html/login.html" class="navbar-link">Login/Signup</a>
                 </li>
       
                 
@@ -85,6 +85,9 @@
                       <li class="dropdown-menu-item">
                         <a href="./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="./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="./about.html" class="navbar-link">About</a>
                       </li>
@@ -200,6 +203,7 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
                     alert("Registration successful!");
                     document.getElementById("email").value = "";
                     document.getElementById("password").value = "";
+                    window.location.href = "index.html/assets/html/login.html";
                 })
                 .catch((error) => {
                     const errorMessage = error.message;
diff --git a/assets/html/read_later.html b/assets/html/read_later.html
new file mode 100644
index 000000000..19ccd8822
--- /dev/null
+++ b/assets/html/read_later.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Read Later</title>
+    <link rel="stylesheet" href="../css/read_later.css"></style>
+</head>
+<body>
+    <header class="header header-anim" data-header>
+
+        <div class="container">
+    
+          <nav class="navbar" data-navbar>
+            <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
+            <img src="./../images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
+            </a>
+    
+            <ul class="navbar-list">
+              <img src="./../images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
+    
+              <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="./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="/assets/html/index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+                    class="ri-customer-service-2-fill"></i> Contact</a>
+              </li>
+    
+              <li class="navbar-item">
+                <a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+              </li>
+              <li class="navbar-item" id="login-signup-link">
+                <a href="./login.html" class="navbar-link">Login/Signup</a>
+              </li>
+              <li class="navbar-item dropdown" id="more-dropdown">
+                <a href="#" class="navbar-link" id="more-link">More 
+                <svg  class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" 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 class="dropdown-menu-item">
+                      <a href="./index.html#chapters" 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="./index.html#pricing" 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="./addremovebook.html" class="navbar-link">Booklist for Swapping</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../../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="./freeBooks.html" 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="#" 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="./about.html" class="navbar-link">About</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              
+              
+          <!-- Google Translate Element -->
+          <!-- <li class="navbar-item">
+            <div id="google_element"></div>
+          </li> -->
+          
+    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+    <script>
+      function loadGoogleTranslate() {
+        new google.translate.TranslateElement({
+          pageLanguage: 'en'
+        }, 'google_element');
+      }
+    </script>
+
+
+
+    </li>
+    </ul>
+    </nav>
+
+    <div class="switch-toggle-container">
+      <div class="switch-container switch-container-mobile">
+        <input type="checkbox" id="switch" class="switch-checkbox">
+        <label for="switch" class="switch-label">
+          <div class="switch-button">
+            <span class="material-icons sun-icon"></span>
+            <span class="material-icons moon-icon"></span>
+          </div>
+        </label>
+      </div>
+    
+          <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
+            <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
+    
+            <ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
+          </button>
+    
+        </div>
+      </header>
+    
+    
+    <!--books added here in this MAIN-->
+    <br><br><br><br><br>
+    <h1>Read Later</h1>
+    <div class="read-later-list">
+        <!-- This is where the books will be added dynamically -->
+    </div>
+
+
+    <!--- #FOOTER-->
+
+  <footer>
+    <div class="foot-top">
+      <div class="foot-left">
+        <div class="desc">
+
+          <a href="#" class="logo">SwapReads</a>
+          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
+            seeking to swap and
+
+            discover new literary gems.
+            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
+            world of literature—all on one convenient platform. Join us and dive into a universe of endless
+            possibilities!
+          </p>
+        </div>
+      </div>
+      <div class="foot-middle">
+        <h2>Quick Links</h2>
+        <ul>
+          <li class="foot-quick"><a href="./index.html" onclick="lenis.scrollTo('#home')">Home</a></li>
+          <li class="foot-quick"><a href="./index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+          <li class="foot-quick"><a href="./index.html#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+          <li class="foot-quick"><a href="./index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+          <li class="foot-quick"><a href="./index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+          <li class="foot-quick"><a href="./index.html#faqq" onclick="lenis.scrollTo('#faqq')">Faq</a></li>
+        </ul>
+      </div>
+      <div class="social-icons">
+        <!-- <h5>Newsletter</h5> -->
+        <!-- <div class="input-newletter">
+          <label for="newsletter"><h5>Newsletter</h5></label>
+          <input placeholder="Enter your email" type="email" ></input>
+          <button class="btn-subs">Subscribe</button>
+        </div> -->
+
+        <form type="newsletter">
+          <label for="email">Subscribe to our Newsletter</label>
+          <div class="row-flex">
+
+
+
+            <!--email write-->
+            <input type="news" value="" name="email" placeholder="email address" required>
+            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn" >
+          </div>
+        </form>
+        <div class="icons">
+          <a href="#">
+            <div class="icon">
+              <i class="fab fa-facebook-square"></i>
+            </div>
+          </a>
+    
+          <a href="#">
+            <div class="icon">
+              <i class="fa-brands fa-square-x-twitter"></i>
+            </div>
+          </a>
+    
+          <a href="#">
+            <div class="icon">
+              <i class="fab fa-instagram-square"></i>
+            </div>
+          </a>
+    
+          <a href="https://www.youtube.com/@anuragbytes">
+            <div class="icon">
+              <i class="fab fa-youtube-square"></i>
+            </div>
+          </a>
+      <!-- </div> -->
+    </div>
+    <div class="footer-bottom">
+      <p class="copyright" style="text-align: center">
+        &copy;
+        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+      </p>
+    </div>
+
+    <div id="back-to-top-container">
+      <div class="circle1">
+        <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
+          class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+          <path
+            d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+        </svg>
+      </div>
+    </div>
+
+  </footer>
+  <!-- Footer ended-->
+
+ 
+ 
+<script src="../js/read_later.js"></script>
+</body>
+</html>
diff --git a/assets/images/pic4.jpeg b/assets/images/pic4.jpeg
new file mode 100644
index 000000000..1c905e682
Binary files /dev/null and b/assets/images/pic4.jpeg differ
diff --git a/assets/js/freeBooks.js b/assets/js/freeBooks.js
new file mode 100644
index 000000000..61f909dd0
--- /dev/null
+++ b/assets/js/freeBooks.js
@@ -0,0 +1,163 @@
+//adding books with unique ID's..
+const books = [
+    {
+        id: 1,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg',
+        title: 'Alice\'s Adventures in Wonderland',
+        readLink: 'https://www.gutenberg.org/ebooks/11'
+    },
+    {
+        id: 2,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg',
+        title: 'Pride and Prejudice',
+        readLink: 'https://www.gutenberg.org/ebooks/1342'
+    },
+    {
+        id: 3,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg',
+        title: 'Frankenstein',
+        readLink: 'https://www.gutenberg.org/ebooks/84'
+    },
+    {
+        id: 4,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg',
+        title: 'Metamorphosis',
+        readLink: 'https://www.gutenberg.org/ebooks/5200'
+    },
+    {
+        id: 5,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg',
+        title: 'The Adventures of Sherlock Holmes',
+        readLink: 'https://www.gutenberg.org/ebooks/1661'
+    },
+    {
+        id: 6,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg',
+        title: 'Alice\'s Adventures in Wonderland',
+        readLink: 'https://www.gutenberg.org/ebooks/11'
+    },
+    {
+        id: 7,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg',
+        title: 'Pride and Prejudice',
+        readLink: 'https://www.gutenberg.org/ebooks/1342'
+    },
+    {
+        id: 8,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg',
+        title: 'Frankenstein',
+        readLink: 'https://www.gutenberg.org/ebooks/84'
+    },
+    {
+        id: 9,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg',
+        title: 'Metamorphosis',
+        readLink: 'https://www.gutenberg.org/ebooks/5200'
+    },
+    {
+        id: 10,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg',
+        title: 'The Adventures of Sherlock Holmes',
+        readLink: 'https://www.gutenberg.org/ebooks/1661'
+    },
+    {
+        id: 11,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg',
+        title: 'Alice\'s Adventures in Wonderland',
+        readLink: 'https://www.gutenberg.org/ebooks/11'
+    },
+    {
+        id: 12,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg',
+        title: 'Pride and Prejudice',
+        readLink: 'https://www.gutenberg.org/ebooks/1342'
+    },
+    {
+        id: 13,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg',
+        title: 'Frankenstein',
+        readLink: 'https://www.gutenberg.org/ebooks/84'
+    },
+    {
+        id: 14,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg',
+        title: 'Metamorphosis',
+        readLink: 'https://www.gutenberg.org/ebooks/5200'
+    },
+    {
+        id: 15,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg',
+        title: 'The Adventures of Sherlock Holmes',
+        readLink: 'https://www.gutenberg.org/ebooks/1661'
+    },
+    {
+        id: 16,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg',
+        title: 'Alice\'s Adventures in Wonderland',
+        readLink: 'https://www.gutenberg.org/ebooks/11'
+    },
+    {
+        id: 17,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg',
+        title: 'Pride and Prejudice',
+        readLink: 'https://www.gutenberg.org/ebooks/1342'
+    },
+    {
+        id: 18,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg',
+        title: 'Frankenstein',
+        readLink: 'https://www.gutenberg.org/ebooks/84'
+    },
+    {
+        id: 19,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg',
+        title: 'Metamorphosis',
+        readLink: 'https://www.gutenberg.org/ebooks/5200'
+    },
+    {
+        id: 20,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1661/pg1661.cover.medium.jpg',
+        title: 'The Adventures of Sherlock Holmes',
+        readLink: 'https://www.gutenberg.org/ebooks/1661'
+    },
+    {
+        id: 21,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/11/pg11.cover.medium.jpg',
+        title: 'Alice\'s Adventures in Wonderland',
+        readLink: 'https://www.gutenberg.org/ebooks/11'
+    },
+    {
+        id: 22,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/1342/pg1342.cover.medium.jpg',
+        title: 'Pride and Prejudice',
+        readLink: 'https://www.gutenberg.org/ebooks/1342'
+    },
+    {
+        id: 23,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/84/pg84.cover.medium.jpg',
+        title: 'Frankenstein',
+        readLink: 'https://www.gutenberg.org/ebooks/84'
+    },
+    {
+        id: 24,
+        imageSrc: 'https://www.gutenberg.org/cache/epub/5200/pg5200.cover.medium.jpg',
+        title: 'Metamorphosis',
+        readLink: 'https://www.gutenberg.org/ebooks/5200'
+    }
+
+    // Add more books as needed
+];
+
+function addToReadLater(bookId) {
+    const readLaterBooks = JSON.parse(localStorage.getItem('readLaterBooks')) || [];
+
+    if (readLaterBooks.some(book => book.id === bookId)) {
+        alert('This book is already in your Read Later list.');
+        return;
+    }
+
+    const book = books.find(book => book.id === bookId);
+    readLaterBooks.push(book);
+    localStorage.setItem('readLaterBooks', JSON.stringify(readLaterBooks));
+    alert(`${book.title} has been added to your Read Later list.`);
+}
diff --git a/assets/js/read_later.js b/assets/js/read_later.js
new file mode 100644
index 000000000..5e81563e8
--- /dev/null
+++ b/assets/js/read_later.js
@@ -0,0 +1,160 @@
+function removeFromReadLater(bookId) {
+    let readLaterBooks = JSON.parse(localStorage.getItem('readLaterBooks')) || [];
+    readLaterBooks = readLaterBooks.filter(book => book.id !== bookId);
+    localStorage.setItem('readLaterBooks', JSON.stringify(readLaterBooks));
+    alert('The book has been removed from your Read Later list.');
+    displayReadLaterBooks();
+}
+
+function displayReadLaterBooks() {
+    const readLaterBooks = JSON.parse(localStorage.getItem('readLaterBooks')) || [];
+    const readLaterListDiv = document.querySelector('.read-later-list');
+    readLaterListDiv.innerHTML = ''; // Clear existing content
+
+    readLaterBooks.forEach(book => {
+        const bookDiv = document.createElement('div');
+        bookDiv.className = 'read-later-item';
+
+        const img = document.createElement('img');
+        img.src = book.imageSrc;
+        img.alt = book.title;
+
+        const title = document.createElement('p');
+        title.textContent = book.title;
+
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'button-container';
+
+        const readButton = document.createElement('button');
+        readButton.textContent = 'Read Now';
+        readButton.onclick = () => window.open(book.readLink, '_blank');
+
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'Remove from Wishlist';
+        removeButton.onclick = () => removeFromReadLater(book.id);
+
+        buttonContainer.appendChild(readButton);
+        buttonContainer.appendChild(removeButton);
+
+        bookDiv.appendChild(img);
+        bookDiv.appendChild(title);
+        bookDiv.appendChild(buttonContainer);
+
+        readLaterListDiv.appendChild(bookDiv);
+
+        const lineSeparator = document.createElement('hr');
+        readLaterListDiv.appendChild(lineSeparator);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (document.querySelector('.read-later-list')) {
+        displayReadLaterBooks();
+    }
+});
+
+
+//Dark Mode
+//Custom Cursor
+
+const coords = { x: 0, y: 0 };
+  const circles = document.querySelectorAll(".circle");
+
+  const colors = [
+    "#ffb56b",
+    "#fdaf69",
+    "#f89d63",
+    "#f59761",
+    "#ef865e",
+    "#ec805d",
+    "#e36e5c",
+    "#df685c",
+    "#d5585c",
+    "#d1525c",
+    "#c5415d",
+    "#c03b5d",
+    "#b22c5e",
+    "#ac265e",
+    "#9c155f",
+    "#950f5f",
+    "#830060",
+    "#7c0060",
+    "#680060",
+    "#60005f",
+    "#48005f",
+    "#3d005e"
+  ];
+
+  circles.forEach(function (circle, index) {
+    circle.x = 0;
+    circle.y = 0;
+    circle.style.backgroundColor = colors[index % colors.length];
+  });
+
+  window.addEventListener("mousemove", function (e) {
+    coords.x = e.clientX;
+    coords.y = e.clientY;
+
+  });
+
+  function animateCircles() {
+
+    let x = coords.x;
+    let y = coords.y;
+
+    circles.forEach(function (circle, index) {
+      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;
+
+      const nextCircle = circles[index + 1] || circles[0];
+      x += (nextCircle.x - x) * 0.3;
+      y += (nextCircle.y - y) * 0.3;
+    });
+
+    requestAnimationFrame(animateCircles);
+  }
+
+  animateCircles();
+
+  document.addEventListener('DOMContentLoaded', function () {
+  var switchCheckbox = document.querySelector('.switch-checkbox');
+  var body = document.body;
+  var navbar = document.querySelector('.navbar');
+
+  switchCheckbox.addEventListener('change', function () {
+    if (switchCheckbox.checked) {
+      body.classList.add('dark-mode');
+      navbar.classList.add('dark-mode');
+    } else {
+      body.classList.remove('dark-mode');
+      navbar.classList.remove('dark-mode');
+    }
+  });
+});
+document.addEventListener("DOMContentLoaded", function () {
+    const backToTopButton = document.getElementById('back-to-top-container');
+
+    function checkButtonVisibility() {
+        if (window.innerWidth > 100 && window.scrollY > 100) {
+            backToTopButton.style.display = 'block';
+        } else {
+            backToTopButton.style.display = 'none';
+        }
+    }
+
+    window.addEventListener('scroll', checkButtonVisibility);
+    window.addEventListener('resize', checkButtonVisibility);
+
+    backToTopButton.addEventListener('click', function () {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth' 
+        });
+    });
+    checkButtonVisibility();
+});
diff --git a/books.html b/books.html
index 7c076f952..bcc8c16c8 100644
--- a/books.html
+++ b/books.html
@@ -36,7 +36,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 
-      
+
   <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
 
   <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
@@ -61,7 +61,7 @@
 
   <header class="header header-anim" data-header>
 
-    <div class="container">
+    <div class="container" style="padding-left: 0;">
 
       <nav class="navbar" data-navbar>
         <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
@@ -72,22 +72,22 @@
           <img src="./assets/images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
 
           <li class="navbar-item">
-            <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
+            <a href="index.html#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="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
+            <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="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
+            <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="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+            <a href="index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                 class="ri-customer-service-2-fill"></i> Contact</a>
           </li>
 
@@ -109,11 +109,11 @@
 
               <ul class="dropdown-menu-list">
                 <li class="dropdown-menu-item">
-                  <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
+                  <a href="index.html#chapters" 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="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
+                  <a href="index.html#pricing" 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">
@@ -128,6 +128,9 @@
                   <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="././read_later.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
                 <li class="dropdown-menu-item">
                   <a href="./assets/html/about.html" class="navbar-link">About</a>
                 </li>
@@ -151,7 +154,7 @@
         }, 'google_element');
       }
     </script>
-    <div class="switch-container">
+    <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">
@@ -184,20 +187,20 @@
     .work-sans {
         font-family: 'Work Sans', sans-serif;
     }
-            
+
     #menu-toggle:checked + #menu {
         display: block;
     }
-    
+
     .hover\:grow {
         transition: all 0.3s;
         transform: scale(1);
     }
-    
+
     .hover\:grow:hover {
         transform: scale(1.02);
     }
-    
+
 
 
 </style>
@@ -235,14 +238,14 @@ <h3 class="h3 card-title"> "Fall in love on every page"</h3>
 
         <li>
             <a href="books.html" class="chapter-card">
-  
+
               <p class="card-subtitle"></p>
-  
+
               <h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>
-  
+
               <p class="card-text">
               </p>
-  
+
             </a>
           </li>
 
@@ -294,7 +297,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\1.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">The RomCom Agenda</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -307,7 +310,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\9.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">The Big Four</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -320,7 +323,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\10.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">Atomic Habits</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -333,7 +336,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\4.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">The Forty Rules of Love</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -346,7 +349,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\5.jpeg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">Silver Linings Playbook</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -359,7 +362,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\6.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">2 States</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -372,7 +375,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\7.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">A Man Called Ove</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -385,7 +388,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 <img class="hover:grow hover:shadow-lg" src="assets\images\genres\8.jpg">
                 <div class="pt-3 flex items-center justify-between">
                     <p class="">The Fault In Our Stars</p>
-                    <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="h-6 w-6 fill-current text-white-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
                     </svg>
                 </div>
@@ -393,7 +396,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
             </a>
         </div>
 
-        </div> 
+        </div>
 
 
 
@@ -446,7 +449,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
   </main>
 
   <!-- --Testimonials -->
- 
+
   <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
     Acclaimed Authors
     <span class="span has-before"></span>
@@ -458,16 +461,16 @@ <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
 <div class="card-wrapper swiper-wrapper">
     <div class="card swiper-slide">
         <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
-          
+
         <div class="image-content" >
-        
-          
+
+
             <div class="card-image">
                 <img src="assets\images\genres\auth1.jpg" alt="" class="card-img">
             </div>
             <h2 style="font-size: 20px;">Nicholas Sparks</h2>
         </div>
-        
+
         <div class="rating" >
             <i class="fas fa-star"></i>
                 <i class="fas fa-star"></i>
@@ -475,15 +478,15 @@ <h2 style="font-size: 20px;">Nicholas Sparks</h2>
                 <i class="fas fa-star"></i>
                 <i class="fas fa-star"></i>
         </div>
-        </div>               
+        </div>
         <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">
-         
+
           SwapReads has completely transformed my reading experience! Not only have I discovered new books I never would have picked up otherwise, but I've also connected with fellow book lovers who share my passion. It's like having a personalized library with endless possibilities. Highly recommend! </div>
-          
+
     </div>
     <div class="card swiper-slide">
         <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
-          
+
           <div class="image-content" >
                 <div class="card-image">
                     <img src="assets\images\genres\auth2.jpg" alt="" class="card-img">
@@ -515,8 +518,8 @@ <h2 style="font-size: 20px;">Rainbow Rowell</h2>
                     <i class="fas fa-star"></i>
                     <i class="fas fa-star"></i>
             </div>
-            </div>                   
-            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads is a bookworm's paradise! With its user-friendly interface, welcoming community, and vast variety of books for swapping, I've embarked on countless new literary adventures. It's like an ever-active book club where I've connected with fellow literature lovers. I'm completely hooked!</div>                
+            </div>
+            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads is a bookworm's paradise! With its user-friendly interface, welcoming community, and vast variety of books for swapping, I've embarked on countless new literary adventures. It's like an ever-active book club where I've connected with fellow literature lovers. I'm completely hooked!</div>
     </div>
     <div class="card swiper-slide">
         <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
@@ -533,7 +536,7 @@ <h2 style="font-size: 20px;">Sonal K</h2>
                     <i class="fas fa-star"></i>
                     <i class="fas fa-star"></i>
             </div>
-            </div>                   
+            </div>
             <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads revolutionized my reading life! I've decluttered my shelf, discovered hidden gems, and connected with a passionate community. Thank you, SwapReads, for stealing my heart! </div>
     </div>
 </div>
@@ -548,7 +551,7 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 
 <!-- Testimonials -->
 
-  
+
   <div class="faq-section">
     <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
   </br>
@@ -603,7 +606,7 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
   </div>
   <br /><br />
 
-  <!-- 
+  <!--
     - #FOOTER
   -->
 
@@ -632,10 +635,12 @@ <h2>Quick Links</h2>
         </ul>
       </div>
       <div class="social-icons">
-        <h5>Newsletter</h5>
+        <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
         <div class="input-newletter">
-          <input placeholder="Enter your email" type="email" class="in-css"></input>
-          <button class="btn-signup">Subscribe</button>
+          <input placeholder="EMAIL ADDRESS" type="email" class="in-css"></input> <br>
+          <button class="btn-signup">Subscribe</button> <br>
+          <input placeholder="EMAIL ADDRESS" type="email" class="in-css"></input> <br>
+          <button class="btn-signup">Subscribe</button> <br>
         </div>
         <div class="icons">
           <a href=""><img class="icon-set" src="./assets/images/FB icon.png" alt=""></a>
@@ -736,12 +741,12 @@ <h5>Newsletter</h5>
           document.body.classList.remove('light-mode');
           document.body.classList.add('dark-mode');
         }
-    
+
         function applyLightModeStyles() {
           document.body.classList.remove('dark-mode');
           document.body.classList.add('light-mode');
         }
-    
+
         if (currentTheme) {
           if (currentTheme === 'dark-mode') {
             applyDarkModeStyles();
@@ -750,7 +755,7 @@ <h5>Newsletter</h5>
             applyLightModeStyles();
           }
         }
-    
+
         switchCheckbox.addEventListener('change', () => {
           if (switchCheckbox.checked) {
             applyDarkModeStyles();
@@ -768,12 +773,12 @@ <h5>Newsletter</h5>
 
 
 
-  <!-- 
+  <!--
     - custom js link
   -->
   <script src="./assets/js/script.js" defer></script>
 
-  <!-- 
+  <!--
     - ionicon link
   -->
   <script src="./assets/js/scroll-reveal.js"></script>
@@ -925,6 +930,7 @@ <h5>Newsletter</h5>
 <!-- Custom JavaScript -->
 
 <script src="assets/js/test-script.js"></script>
+<script src="scroll.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 990ba1a8e..fd165e29e 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 
   <link rel="stylesheet" href="./assets/css/style.css">
   <link rel="stylesheet" href="./assets/font-6/css/all.css">
+  <link rel="stylesheet" href="header.css">
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -39,8 +40,10 @@
   <script src="./assets/js/faq.js"></script>
   <script src="./assets/js/tilt.js"></script>
   <script src="./assets/js/scroll.js"></script>
+  <link rel="stylesheet" href="./scrollbar.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="stylesheet" href="modals(privacy policy).css">
 
   <!-- Swiper CSS -->
   <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
@@ -55,7 +58,7 @@
   <style>
     swiper-container {
       width: 100%;
-      height: 70%;
+      height: 75%;
     }
 
     /* Theme Change Button Style */
@@ -63,16 +66,16 @@
       margin-right: 2rem;
       margin-top: 3.5rem;
     }
-    @media (max-width: 989px) {
+    @media (max-width: 990px) {
       .switch-container {
-        margin-top: 3rem;
+        margin-top: 3.2rem;
         margin-right: -0.5rem;
       }
     }
     @media (max-width: 575px) {
       .switch-container {
-        margin-top: 4.2rem;
-        margin-right: 1rem;
+        margin-top: 2.4rem;
+        margin-right: -0.5rem;
       }
       /* Navbar Toggle Button placed in center */
       .nav-toggle-btn{
@@ -84,12 +87,12 @@
 /* testimonal card fix by harshcodesit */
     swiper-slide {
       text-align: center;
-      font-size: 18px;
+      font-size: 15;
       background: transparent;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-bottom: 55px;
+      margin-bottom: 50px;
     }
     /* ########### */
 
@@ -102,8 +105,9 @@
     }
 
     swiper-container {
-      margin-left: auto;
-      margin-right: auto;
+
+       margin: auto;
+      
     }
 
     .flip-card {
@@ -122,7 +126,7 @@
       width: 100%;
       height: 100%;
       text-align: center;
-      transition: transform 0.8s;
+      transition: transform 0.7s;
       transform-style: preserve-3d;
       padding: 10px;
     }
@@ -168,7 +172,65 @@
       letter-spacing: 1px;
       transition: ease-in-out;
     }
-  
+
+.cta {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: auto;
+  padding: 20px 24px;
+  color:  hsl(357, 37%, 62%);
+  font-family: Avenir, sans-serif;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    border-radius: 28px;
+    background: rgba(255, 171, 157, 0.5);
+    width: 56px;
+    height: 56px;
+    transition: all 0.3s ease;
+  }
+  span {
+    position: relative;
+    font-size: 8px;
+    line-height: 18px;
+    font-weight: 900;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    vertical-align: middle;
+  }
+  svg {
+    position: relative;
+    top: 0;
+    margin-left: 5px;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: hsl(357, 37%, 62%);
+    stroke-width: 2;
+    transform: translateX(-5px);
+    transition: all 0.3s ease;
+  }
+  &:hover {
+    &:before {
+      width: 9%;
+      background: #ffab9d;
+    }
+    svg {
+      transform: translateX(0);
+    }
+    .active {
+      transform: scale(0.96);
+    }
+  }
+}
+
 
 
     /* Dark Mode Styles */
@@ -188,59 +250,170 @@
       transition: ease-in-out;
     }
 
+    .dark-mode .header.scrolled {
+      background-color: #232222; /* Change to a darker color when scrolled */
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+    }
+
     /* pankaj bind */
     #cookie-consent {
       position: fixed;
       bottom: 10px;
       left: 10px;
       background-color: #f1f1f1;
-      padding: 10px;
+      padding: 20px;
+
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
       width: 300px;
-      height: 250px;
+      height: fit-content;
       z-index: 100;
       border-radius: 10px;
       margin-bottom: 5px;
+      margin: 20px;
+      border-right: 4px solid transparent; 
+      border-bottom: 4px solid transparent; 
+      transition: border-color 0.3s; 
+    }
+    #cookie-consent:hover {
+      border-right-color: #A30F17; 
+      border-bottom-color: #A30F17; 
     }
 
     #cookie-consent button {
       padding: 5px 10px;
-      border: none;
       border-radius: 5px;
       cursor: pointer;
+      display: none;
     }
 
-    #accept-cookies {
+    .accept-cookies {
       width: 280px;
       height: 40px;
+      color: white;
       background-color: #A30F17;
+    }
+    .reject-cookies {
+      margin-top: 10px;
+ padding-top: 5px;
+      height: 40px;
+      width: 280px;
       color: white;
+      background-color: #A30F17;
+
+    }
+    #accept-cookies:hover, #reject-cookies:hover {
+     transform: scale(0.9);
+    box-shadow: 0 0 20px rgb(249, 212, 212);
+    }
+    .accept-cookies:hover {
+      width: 280px;
+      height: 40px;
+      background-color: white;
+      color: red;
     }
 
-    #reject-cookies {
+    .reject-cookies:hover{
       margin-top: 10px;
       height: 40px;
       width: 280px;
-      background-color: #A30F17;
-      color: white;
+      background-color: white;
+      color: red;
+    }
+
+    #back-to-top-container {
+      position: fixed;
     }
+
+    
+
+        #cookie-content {
+            display: none;
+            margin-top: 10px;
+        }
+    
+
+    
+    /* Basic navbar styling */
+.header {
+  position: fixed;
+  width: 100%;
+  top: 10;
+  z-index: 1000;
+  transition: top 0.3s;
+}
+
+/* Hide the navbar */
+.header.hidden {
+  top: -93px; /* Adjust according to your header height */
+}
+
+/* Navbar styling when scrolled */
+.header.scrolled {
+  background-color: #efefef; /* Change to a darker color when scrolled */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+}
+
+
   </style>
 </head>
 
 
 <body>
+  <div class="nav-wrapper">
+    <div class="progress-bar"></div>
+  </div>
 
   <div id="cookie-consent">
-    <p style="color: black;">We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with
-      our Cookie Policy. <a href="#">Learn More</a></p>
+
+    <p>We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with
+      our Cookie Policy. <a href="#" id="learn-more-link">Learn More</a></p>
+      <div id="cookie-content">
+        <p>Our Cookie Policy explains how we use cookies to enhance your experience. Cookies are small text files that are stored on your device when you visit a website. They help us to remember your preferences, track website usage, and provide personalized content. You can control your cookie preferences through your browser settings. By continuing to use our website, you agree to the use of cookies as described in our Cookie Policy.</p>
+      </div>
+  
     <button id="accept-cookies">Accept</button>
     <button id="reject-cookies">Reject</button>
 
+    <p style="color: black;">We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with
+      our Cookie Policy. <a href="#">Learn More</a></p>
+    <button class="accept-cookies">Accept</button>
+    <button class="reject-cookies">Reject</button>
+
+
+   
+    
+
 
     <script>
+
+     document.addEventListener('DOMContentLoaded', function() {
+  const header = document.querySelector('.header');
+  let lastScrollY = window.scrollY;
+
+  window.addEventListener('scroll', function() {
+    const currentScrollY = window.scrollY;
+
+    if (currentScrollY > lastScrollY) {
+      // Scrolling down
+      header.classList.add('hidden');
+    } else {
+      // Scrolling up
+      header.classList.remove('hidden');
+    }
+
+    if (currentScrollY > 50) { // Adjust the scroll distance as needed
+      header.classList.add('scrolled');
+    } else {
+      header.classList.remove('scrolled');
+    }
+
+    lastScrollY = currentScrollY;
+  });
+});
+
       const cookieConsent = document.getElementById('cookie-consent');
       const acceptButton = document.getElementById('accept-cookies');
       const rejectButton = document.getElementById('reject-cookies');
@@ -255,6 +428,17 @@
       rejectButton.addEventListener('click', hideCookieConsent);
 
     </script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+      document.getElementById('learn-more-link').addEventListener('click', function(event) {
+          event.preventDefault();
+          document.getElementById('cookie-content').style.display = 'block';
+          var learnMoreLink = document.getElementById('learn-more-link');
+                learnMoreLink.style.display = 'none';
+      });
+  });
+</script>
   </div>
 
   <div class="circle"></div>
@@ -307,7 +491,7 @@
     <div class="container mobile-container-styles" style="padding-left: 0;">
 
       <nav class="navbar" data-navbar>
-       
+
 
         <ul class="navbar-list">
           <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
@@ -318,7 +502,7 @@
                 class="ri-home-fill"></i> Home</a>
           </li>
            <li class="navbar-item">
-                <a href="./assets/html/about1.html"  class="navbar-link" data-nav-link><i
+                <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">
@@ -373,6 +557,9 @@
                   <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/about.html" class="navbar-link">About</a>
                 </li>
@@ -409,7 +596,7 @@
       }
     </script>
 
-    
+
 
     </li>
     </ul>
@@ -425,7 +612,7 @@
           </div>
         </label>
       </div>
-      
+
       <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
         <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
 
@@ -433,7 +620,7 @@
       </button>
     </div>
 
-    
+
 
     </div>
   </header>
@@ -510,13 +697,14 @@ <h2>Play Now</h2>
 
       <section class="section benefits" id="benefits" aria-label="benefits">
         <div class="container">
-          <div class="grid-list">
+          <div class="flex">
             <div class="benefits-content">
               <h2 class="h2 section-title" style="text-align: center;">Unleash the Magic of Book Swapping!</h2>
               <p class="section-text" style="text-align: center;">"SwapReads.com - Where Every Book is a Portal to a New
                 Adventure!"</p>
             </div>
 
+            <ul class="benefits-canvas-container">
             <li class="canvas">
               <div class="benefits-card has-before has-after ">
                 <div class="card-icon">
@@ -529,11 +717,17 @@ <h3 class="h3 card-title">Diverse Literary Adventures</h3>
                   to new and exciting literary adventures.
                 </p>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
-
               </div>
             </li>
 
@@ -552,10 +746,17 @@ <h3 class="h3 card-title">Cost-Efficient Reading</h3>
                 </p>
                 <br>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
 
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
 
               </div>
@@ -575,12 +776,18 @@ <h3 class="h3 card-title">Connect with Like-Minded Readers</h3>
                   forming a community bonded by a love for literature.
                 </p>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
 
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
-
               </div>
             </li>
 
@@ -599,12 +806,18 @@ <h3 class="h3 card-title">Revitalize Your Bookshelf</h3>
                 </p>
                 <br>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
 
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
-
               </div>
             </li>
 
@@ -623,12 +836,18 @@ <h3 class="h3 card-title">Environmental Impact</h3>
                 </p>
                 <br>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
 
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
-
               </div>
             </li>
 
@@ -646,15 +865,22 @@ <h3 class="h3 card-title">Personalized Reading Experience</h3>
                   creating a personalized and curated reading experience that suits you.
                 </p>
 
-                <a href="#" class="btn-link">
+                <!-- <a href="#" class="btn-link">
                   <span class="span readmore-anim">Read more</span>
-
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
+                </a> -->
+
+                <a href="#" class="cta style-9">
+                  <span>Read More</span>
+                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                    <path d="M1,5 L11,5"></path>
+                    <polyline points="8 1 12 5 8 9"></polyline>
+                  </svg>
                 </a>
-
               </div>
             </li>
 
+          </ul>
           </div>
 
         </div>
@@ -1199,19 +1425,30 @@ <h2 class="h2 section-title has-underline">
             <div class="contact-card">
               <form action="" id="contact-form">
                 <input type="text" name="name" id="name" placeholder="Your Name" required class="input-field" size="60px">
-          
+
                 <input type="email" name="email_address" id="email" placeholder="Your Email" required class="input-field">
-          
+
                 <input type="text" name="subject" id="subject" placeholder="Subject" required class="input-field">
                 <div id="subject-count" class="character-count">0/100</div>
-          
+
                 <textarea name="message" id="message" placeholder="Your Message" class="input-field"></textarea>
                 <div id="message-count" class="character-count">0/250</div>
-          
+
                 <button type="submit" id="sendMessageBtn" class="btn btn-primary">Send Now</button>
                 <div id="success-message" style="display:none">Message sent successfully!</div>
               </form>
             </div>
+            <script>
+              document.addEventListener('DOMContentLoaded', function() {
+              var form = document.getElementById('contact-form');
+              var message = document.getElementById('message');
+
+              form.addEventListener('submit', function(event) {
+              if (message.value.length < 50) {
+              alert("Message length can't be less than 50 characters.");
+              event.preventDefault(); // Prevent the form from being submitted
+            }});});
+            </script>
 
             <ul class="contact-card">
             <ul class="contact-card ">
@@ -1227,23 +1464,23 @@ <h2 class="h2 section-title has-underline">
                   Kolkata, India 700054
                 </address>
               </li>
-          
+
               <li>
                 <p class="card-title"><lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon> Phone:</p>
                 <a href="tel:1234567890" class="card-link">+91 9124421980</a>
               </li>
-          
+
               <li>
                 <p class="card-title"><lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon> Email:</p>
                 <a href="mailto:support@support.com" class="card-link">support@swapreads.com</a>
               </li>
             </ul>
-          </div>          
+          </div>
           <iframe
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
           style="border:0; margin-bottom:30px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
       </iframe>
-      
+
         </div>
 
       </section>
@@ -1257,7 +1494,7 @@ <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
     Testimonials
     <span class="span has-before"></span>
   </h2>
-  <p class="section-subtitle">Know what our customers say</p>
+  <p class="section-subtitle" style="text-align: center;">Know what our customers say</p>
 
   <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" navigation="true" space-between="40"
     loop="true" >
@@ -1458,7 +1695,7 @@ <h2 style="font-size: 20px;">Maya Verma</h2>
 
   <!-- FAQ section start-->
 
- 
+
   <div class="faq-section">
     <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
     </br>
@@ -1522,11 +1759,11 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
   <footer>
     <div class="foot-top">
       <div class="foot-left">
-  
+
         <div class="desc">
 <!--google translate-->
           <div id="google_translate_element"></div>
- 
+
           <script type="text/javascript">
               function googleTranslateElementInit() {
                   new google.translate.TranslateElement(
@@ -1535,23 +1772,12 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
                   );
               }
           </script>
-       
+
           <script type="text/javascript"
                   src=
       "https://translate.google.com/translate_a/element.js?
       cb=googleTranslateElementInit">
           </script>
-          <!-- <a href="#" class="logo">SwapReads</a>
-          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
-            seeking to swap and
-
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p> -->
-
-
           <div><a href="#" class="logo">SwapReads</a></div>
           <div>
             <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
@@ -1579,6 +1805,8 @@ <h2>Quick Links</h2>
             <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
             <li class="foot-quick"><a href="./assets/html/bookrecommend.html"
               onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
+            <li class="foot-quick">
+              <a href="./assets/html/book_recommend.html" onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
           </ul>
         </div>
         <div>
@@ -1603,20 +1831,37 @@ <h2>Quick Links</h2>
           <button class="btn-subs">Subscribe</button>
         </div> -->
 
-        <form type="newsletter">
+
+        <form id="newsletterForm" type="newsletter">
+
+        <form action="/subscribe" method="post">
+
           <label for="email">Subscribe to our Newsletter</label>
           <div class="row-flex">
+            <input type="email" name="email" id="email" placeholder="  email address" style="background-color: white; margin-left: 20px; height: 40px;">
+
+
+              <button type="submit" class="subscribe-btn">Subscribe</button>
 
 
 
             <!--email write-->
-            <input type="news" value="" name="email" placeholder="email address">
-            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
-            <input type="news" value="" name="email" placeholder="email address" id="newsletter-email">
-            <button type="submit" class="subscribe-btn">subscribe</button>
             
+            <!-- <input type="news" value="" name="email" placeholder="email address">
+            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn"> 
+            <input type="news" value="" name="email" placeholder="email address" id="newsletter-email" style="width:270px;">
+            <button type="submit" class="subscribe-btn">subscribe</button> -->
+
+            <input type="news" value="" name="email" placeholder="email address" id="newsletter-email">
+            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
+
+
+
+
           </div>
-        </form>
+      </form>
+      <div id="confirmationMessage" style="display: none;">Thank you for subscribing!</div>
+      
         <style>
           .icons .icon i {
             font-size: 24px;
@@ -1630,18 +1875,17 @@ <h2>Quick Links</h2>
             /* Scale the icon on hover */
           }
 
-          .icons .icon:hover .fab.fa-facebook-square {
+          .icons .icon:hover .fab.fa-facebook {
             color: #3B5998;
             /* Change to Facebook color on hover */
           }
 
-          .icons .icon:hover .fa-brands.fa-square-x-twitter{
+          .icons .icon:hover .fab.fa-twitter{
             color: #090e11;
-            background-color: white;
             /* Change to Twitter color on hover */
           }
 
-          .icons .icon:hover .fab.fa-instagram-square {
+          .icons .icon:hover .fab.fa-instagram {
             background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
             background-clip: text;
             border-radius: 20%;
@@ -1650,34 +1894,47 @@ <h2>Quick Links</h2>
             /* Change to Instagram color on hover */
           }
 
-          .icons .icon:hover .fab.fa-youtube-square {
+          .icons .icon:hover .fab.fa-youtube {
             color: #C31A1E;
             /* Change to YouTube color on hover */
           }
+          .icons .icon:hover .fab.fa-github {
+                    color: #333;
+                }
         </style>
 
         <div class="icons">
-          <a href="#">
+          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/">
             <div class="icon">
-              <i class="fab fa-facebook-square" title="Facebook" style="cursor: pointer;"></i>
+              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
             </div>
           </a>
 
-          <a href="#">
+          <a href="https://x.com/anuragverma_108">
             <div class="icon">
-              <i class="fa-brands fa-square-x-twitter" title="X"style="cursor: pointer;"></i>
+              <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
             </div>
           </a>
 
           <a href="#">
             <div class="icon">
-              <i class="fab fa-instagram-square" title="Instagram"style="cursor: pointer;"></i>
+              <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+            </div>
+          </a>
+          <a href="https://github.com/anuragverma108/SwapReads" title="Github">
+            <div class="icon">
+              <i class="fab fa-github" style="cursor: pointer;"></i>
             </div>
           </a>
 
           <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
             <div class="icon">
-              <i class="fab fa-youtube-square" style="cursor: pointer;"></i>
+              <i class="fab fa-youtube" style="cursor: pointer;"></i>
+            </div>
+          </a>
+          <a href="https://github.com/anuragverma108" title="GitHub">
+            <div class="icon">
+                <i class="fab fa-github" style="cursor: pointer;"></i>
             </div>
           </a>
         </div>
@@ -1687,10 +1944,10 @@ <h2>Quick Links</h2>
             <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
             Hackers.
           </p>
-          
+
         </div> -->
 
-        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
+        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
           <div class="circle1">
             <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
               class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
@@ -1699,23 +1956,123 @@ <h2>Quick Links</h2>
             </svg>
           </div>
         </div>
+        
       </div>
     </div>
+
         <div style="text-align: center; align-items: center;">
           <p style="text-align: center">
             &copy;
             <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
             Hackers.
           </p>
-          
+
         </div>
 
-       
+
+    <!-- adding privacy policy and copyright popup-->
+    <div style="text-align: center; align-items: center;">
+      <p style="text-align: center">
+        &copy;
+        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+      </p>
+      <a href="#" id="copyrightPolicyLink">Copyright Policy</a> |
+      <a href="#" id="privacyNoticeLink">Privacy Notice</a>
+    </div>
+    
+    <!-- Copyright Policy Modal -->
+    <div id="copyrightPolicyModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closeCopyright">&times;</span>
+        <h1>Copyright Policy</h1>
+        <p>Welcome to SwapReads. Here is our copyright policy:</p>
+        <ul>
+          <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
+          <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
+          <li>Users may download and print content for personal use only.</li>
+          <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
+          <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
+        </ul>
+      </div>
+    </div>
+    
+    <!-- Privacy Notice Modal -->
+    <div id="privacyNoticeModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closePrivacy">&times;</span>
+        <h1>Privacy Notice</h1>
+        <p>Welcome to SwapReads. Here is our privacy notice:</p>
+        <ul>
+          <li>We collect personal information when you register, buy, or sell books.</li>
+          <li>We use this information to provide and improve our services.</li>
+          <li>We do not share your personal information with third parties without your consent.</li>
+          <li>We take reasonable measures to protect your data from unauthorized access.</li>
+          <li>You can contact us to update or delete your personal information.</li>
+          <li>By using our site, you consent to our privacy practices.</li>
+        </ul>
+      </div>
+    </div>
+    
+    <script>
+      // Get the modal elements
+      var copyrightModal = document.getElementById("copyrightPolicyModal");
+      var privacyModal = document.getElementById("privacyNoticeModal");
+    
+      // Get the link elements
+      var copyrightLink = document.getElementById("copyrightPolicyLink");
+      var privacyLink = document.getElementById("privacyNoticeLink");
+    
+      // Get the <span> elements that close the modals
+      var closeCopyright = document.getElementById("closeCopyright");
+      var closePrivacy = document.getElementById("closePrivacy");
+    
+      // When the user clicks the link, open the modal 
+      copyrightLink.onclick = function() {
+        copyrightModal.style.display = "block";
+      }
+      privacyLink.onclick = function() {
+        privacyModal.style.display = "block";
+      }
+    
+      // When the user clicks on <span> (x), close the modal
+      closeCopyright.onclick = function() {
+        copyrightModal.style.display = "none";
+      }
+      closePrivacy.onclick = function() {
+        privacyModal.style.display = "none";
+      }
+    
+      // When the user clicks anywhere outside of the modal, close it
+      window.onclick = function(event) {
+        if (event.target == copyrightModal) {
+          copyrightModal.style.display = "none";
+        }
+        if (event.target == privacyModal) {
+          privacyModal.style.display = "none";
+        }
+      }
+    </script>
+
+
 
   </footer>
-  
+
   <!-- Footer ended-->
   <script src="./assets/js/script.js" defer></script>
+  <script>
+    document.getElementById("newsletterForm").addEventListener("submit", function(event) {
+      event.preventDefault(); 
+  
+    
+      var email = document.getElementById("email").value;
+  
+      document.getElementById("confirmationMessage").style.display = "block";
+  
+
+      document.getElementById("email").value = '';
+  });
+  
+  </script>
 
   <script>
 
@@ -1733,74 +2090,6 @@ <h2>Quick Links</h2>
 
 
     // document.querySelector('subscribe-btn').addEventListener('submit', sendMail());
-
-    //Custom Cursor
-
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e"
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-
-    });
-
-    function animateCircles() {
-
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        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;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-
-    animateCircles();
-
-
     // Function to toggle dark mode
     function toggleDarkMode() {
       const isDarkMode = isDarkModePreferred();
@@ -2043,7 +2332,7 @@ <h2>Quick Links</h2>
 <!-- Fot Contact Send Now Button -->
   <script>
     document.getElementById("contact-form").addEventListener("submit", function(event) {
-      event.preventDefault(); 
+      event.preventDefault();
       var successMessage = document.getElementById("success-message");
       successMessage.style.display = "block";
       document.getElementById("contact-form").reset();
@@ -2055,7 +2344,7 @@ <h2>Quick Links</h2>
 
   <script src="./assets/js/test-script.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
-
+  <script src="./scrollbar.js"></script>
 </body>
 
 </html>
diff --git a/modals(privacy policy).css b/modals(privacy policy).css
new file mode 100644
index 000000000..24db5fbbc
--- /dev/null
+++ b/modals(privacy policy).css	
@@ -0,0 +1,32 @@
+ /* Modal styles */
+ .modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+  }
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/mylogin.html b/mylogin.html
new file mode 100644
index 000000000..3cdfd934c
--- /dev/null
+++ b/mylogin.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <!-- Bootstrap theme -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <title>How to create Firebase login and register?</title>
+    <link rel="stylesheet" href="./assets/css/login.css" />
+    <style>
+        .remember-me-label {
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .remember-me-label input {
+            margin-right: 8px;
+            /* Adjusted margin */
+            margin-top: 1px;
+            /* Added margin-top for better alignment */
+        }
+    </style>
+</head>
+
+<body>
+    <div class="navbar">
+        <div class="navbar-header">
+            <a href="index.html">
+                <img class="close-icon" src="./assets/images/close.png" alt="Close">
+            </a>
+        </div>
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="#" id="logout" style="display: none">Log Out</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="note">
+        <h1>
+            Hey !! Welcome to SwapReads. Please get yourself Registered or verify your credentials to get started.
+        </h1>
+    </div>
+    <br />
+    <div class="container">
+        <div class="main">
+            <input type="checkbox" id="chk" aria-hidden="true" />
+
+            <div class="login">
+                <form class="form">
+                    <label for="chk" aria-hidden="true">Log in</label>
+                    <input class="input" type="email" name="email" id="login_email" placeholder="Email" required="" />
+                    <input class="input" type="password" name="pswd" id="login_password" placeholder="Password"
+                        required="" />
+                    <label class="remember-me-label">
+                        <input type="checkbox" id="rememberMe"> Remember Me
+                    </label>
+                    <button type="button" name="Login" id="login">Log in</button>
+                </form>
+            </div>
+
+            <div class="register">
+                <form class="form">
+                    <label for="chk" aria-hidden="true">Register</label>
+                    <input class="input" type="email" name="email" id="email" placeholder="Email" required="" />
+                    <input class="input" type="password" name="pswd" id="password" placeholder="Password" required="" />
+                    <button type="button" name="register" id="register">Register</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-bottom">
+                <p class="copyright">
+                    &copy; <span id="copyright-year"></span> All right reserved. Made with ❤ by Guardian Hackers.
+                </p>
+            </div>
+        </div>
+    </footer>
+    <script>document.getElementById("copyright-year").textContent = new Date().getFullYear();</script>
+    <script type="module">
+        // Import the functions you need from the SDKs you need
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
+        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js";
+        import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
+
+        // Your web app's Firebase configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyCu2WXknNce_49J5BLuR1DyHm319hu6dWc",
+            authDomain: "login-13127.firebaseapp.com",
+            projectId: "login-13127",
+            storageBucket: "login-13127.appspot.com",
+            messagingSenderId: "151656578300",
+            appId: "1:151656578300:web:c67208ab6ec437c844ab79",
+            measurementId: "G-L3PPD58MZ8"
+        };
+
+        // Initialize Firebase
+        const app = initializeApp(firebaseConfig);
+        const analytics = getAnalytics(app);
+        const auth = getAuth();
+
+        // Remember Me functionality
+        window.onload = function () {
+            if (localStorage.getItem('rememberMe') === 'true') {
+                document.getElementById('login_email').value = localStorage.getItem('email');
+                document.getElementById('login_password').value = localStorage.getItem('password');
+                document.getElementById('rememberMe').checked = true;
+            }
+        };
+
+        document.getElementById("register").addEventListener("click", function () {
+            let email = document.getElementById("email").value;
+            let password = document.getElementById("password").value;
+
+            // For new registration
+            createUserWithEmailAndPassword(auth, email, password)
+                .then((userCredential) => {
+                    // Signed in
+                    const user = userCredential.user;
+                    console.log(user);
+                    alert("Registration successful!");
+                    document.getElementById("email").value = "";
+                    document.getElementById("password").value = "";
+                })
+                .catch((error) => {
+                    const errorMessage = error.message;
+                    console.log(errorMessage);
+                    alert(errorMessage);
+                });
+        });
+
+        document.getElementById("login").addEventListener("click", function () {
+            let email = document.getElementById("login_email").value;
+            let password = document.getElementById("login_password").value;
+            let rememberMe = document.getElementById("rememberMe").checked;
+
+            signInWithEmailAndPassword(auth, email, password)
+                .then((userCredential) => {
+                    // Signed in
+                    if (rememberMe) {
+                        localStorage.setItem('email', email);
+                        localStorage.setItem('password', password);
+                        localStorage.setItem('rememberMe', true);
+                    } else {
+                        localStorage.removeItem('email');
+                        localStorage.removeItem('password');
+                        localStorage.removeItem('rememberMe');
+                    }
+                    window.location.href = "index.html";
+                    document.getElementById("logout").style.display = "block";
+                })
+                .catch((error) => {
+                    const errorMessage = error.message;
+                    console.log(errorMessage);
+                    alert(errorMessage);
+                });
+        });
+
+        document.getElementById("logout").addEventListener("click", function () {
+            signOut(auth)
+                .then(() => {
+                    console.log("Sign-out successful.");
+                })
+                .catch((error) => {
+                    console.log("An error happened.");
+                });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index b16878772..a84c3e117 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "f.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon server.js"
   },
   "repository": {
     "type": "git",
diff --git a/scrollbar.css b/scrollbar.css
new file mode 100644
index 000000000..23a7b1d2f
--- /dev/null
+++ b/scrollbar.css
@@ -0,0 +1,12 @@
+.nav-wrapper{
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 1;
+}
+.progress-bar{
+  height: 5px;
+  width: 0;
+  background-color: red;
+  
+}
\ No newline at end of file
diff --git a/scrollbar.js b/scrollbar.js
new file mode 100644
index 000000000..0c1f59dc2
--- /dev/null
+++ b/scrollbar.js
@@ -0,0 +1,7 @@
+let progressBar = document.querySelector(".progress-bar");
+let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ 
+window.onscroll = function(){
+   let progress = (scrollY / documentHeight) * 100;
+   progressBar.style.width = progress + "%";
+}
\ No newline at end of file
diff --git a/server.js b/server.js
index c35637568..66852beee 100644
--- a/server.js
+++ b/server.js
@@ -1,20 +1,22 @@
 const express = require("express");
 const bodyParser = require("body-parser");
 const mongoose = require("mongoose");
+const nodemailer = require("nodemailer");
 const RegisterSchema = require("./assets/validation/zodschema");
 const validate = require("./assets/validation/validate.schema");
-const nodemailer = require("nodemailer");
+const cors=require("cors")
 const app = express();
 
 app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true })); // For parsing application/x-www-form-urlencoded
+app.use(cors()); 
+
+const MONGO_URI = "mongodb+srv://nishantkaushal0708:jhn14300@cluster0.vye07az.mongodb.net/";
 
-const MONGO_URI = "mongodb://localhost:27017/swapread";
 
 const dbConnect = async () => {
   try {
     await mongoose.connect(MONGO_URI, {
-      // useNewUrlParser: true,
-      // useUnifiedTopology: true,
       serverSelectionTimeoutMS: 30000, // 30 seconds timeout
     });
     console.log("DB connected");
@@ -90,4 +92,57 @@ dbConnect().then(() => {
         res.json({ success: false, message: "Internal Server Error" });
       });
   });
+
+  // Contact form endpoint
+  app.post("/contact", async (req, res) => {
+    const { name, email, subject, message } = req.body;
+
+    const transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user: "enter_you_mail",
+        pass: "Enter_YOUR_APP_PASSWORD",
+      },
+    });
+
+    const mailOptions = {
+      from: email,
+      to: "enter_you_mail",
+      subject: `You Have New Query from ${name} Regarding ${subject}`,
+      html: `Hey there is query from is  ${name} Email: ${email}  &nbsp; Message:<p style="color: red;"> ${message}</p>`,
+    };
+
+    const acknowledgmentOptions = {
+      from: "enter_you_mail",
+      to: email,
+      subject: "Acknowledgment of your message",
+      html: `<div style="font-family: Arial, sans-serif; line-height: 1.6;">
+      <p>Dear <strong>${name}</strong>,</p>
+      <p>Thank you for reaching out to us. We have received your message and will get back to you shortly.</p>
+      <p style="margin-top: 20px;">Best regards,<br><strong>SwapReads.com</strong></p>
+    </div>`,
+    };
+
+    try {
+      await transporter.sendMail(mailOptions);
+      await transporter.sendMail(acknowledgmentOptions);
+      res.json({ success: true, message: "Message sent successfully" });
+    } catch (err) {
+      console.error("Error sending email:", err);
+      res.json({ success: false, message: "Error sending message" });
+    }
+  });
+
+  const PORT = process.env.PORT || 3000;
+  app.listen(PORT, () => {
+    console.log(`Server running on port ${PORT}`);
+  });
 });
+
+
+app.post('/subscribe',(req,res)=>{
+  let email = req.body;
+  console.log(email);
+})
+
+app.listen(3000, () => console.log("Server is running on port 3000"));