diff --git a/assets/css/style.css b/assets/css/style.css
index e3802eb9c..9731aaf2c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -528,6 +528,8 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 80px;
+  /* width:200px; */
 }
 
 .logo {
diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index 9ed939ae4..2a1cd6266 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -212,23 +212,23 @@
 
                   <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">
-                      <a href="./../html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
+                      <a href="./booklistswap.html" class="navbar-link">Booklist for Swapping</a>
                     </li>
                     <li class="dropdown-menu-item">
-                      <a href="./../html/book_recommend.html" class="navbar-link" data-nav-link>
+                      <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="./../html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                      <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">
diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
index 154a91c53..01daeeb31 100644
--- a/assets/html/booklistswap.html
+++ b/assets/html/booklistswap.html
@@ -344,12 +344,12 @@
                       <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>
+                      <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="#" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                      <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>
diff --git a/assets/html/forgot-pass.html b/assets/html/forgot-pass.html
index 73b9d84f7..aea25f59b 100644
--- a/assets/html/forgot-pass.html
+++ b/assets/html/forgot-pass.html
@@ -157,6 +157,7 @@
                     <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>
                         <i class="ri-customer-service-2-fill"></i> Book Recommendation
diff --git a/assets/html/freeBooks.html b/assets/html/freeBooks.html
index d778a986a..3b32f9244 100644
--- a/assets/html/freeBooks.html
+++ b/assets/html/freeBooks.html
@@ -308,7 +308,7 @@
                   <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>
+                  <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>
@@ -316,7 +316,7 @@
                   </a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="#" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                  <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>
diff --git a/assets/html/literaryrealms.html b/assets/html/literaryrealms.html
new file mode 100644
index 000000000..9c00d9fb0
--- /dev/null
+++ b/assets/html/literaryrealms.html
@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Literary Realms</title>
+    <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">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <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/Available.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" />
+  
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
+      rel="stylesheet">
+  
+    <link rel="preload" as="image" href="./../images/hero-banner.png">
+    <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="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+  
+    <script src="./../js/rateUsModal.js" defer></script>
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script src="./../js/faq.js"></script>
+    <script src="./../js/tilt.js"></script>
+    <script src="./../js/scroll.js"></script>
+  
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  
+    <!-- Swiper CSS -->
+    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
+  
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="../css/test-style.css">
+  
+    <!-- Preloader CSS-->
+    <link rel="stylesheet" href="./../css/preloader.css">
+    <script src="./../js/preloader.js" defer></script>
+    <style>
+        :root {
+            --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: hsl(357, 37%, 62%);
+            --seashell: hsl(20, 43%, 93%);
+            --charcoal: hsl(203, 30%, 26%);
+            --white: hsl(0, 0%, 100%);
+
+            --ff-philosopher: "Philosopher", sans-serif;
+            --ff-poppins: "Poppins", sans-serif;
+            --ff-roboto: "Philosopher", sans-serif;
+        }
+
+        /* General Styles */
+        body {
+            font-family: var(--ff-philosopher);
+            background-color: var(--seashell);
+            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");
+            /* margin: 0;
+            padding: 0; */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            /* height: 100vh; */
+            /* width: 100%; */
+        }
+        footer{
+            width: 100%;
+        }
+        .navbar5 {
+            width: 50%;
+            padding: 20px 0;
+            text-align: center;
+        }
+        .navbar-header {
+            font-family: var(--ff-poppins);
+            font-size: 2rem;
+            margin: 0;
+            color: var(--old-rose);
+        }
+        .navbar-header a {
+            color: var(--old-rose);
+            text-decoration: none;
+            width: 500px;
+            text-align: center;
+        }
+
+        #container5 {
+            background-color: var(--white);
+            padding: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px var(--chinese-violet_30);
+            width: 500px;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        h2 {
+            color: var(--charcoal);
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid var(--light-gray);
+            border-radius: 3px;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: var(--old-rose);
+            color: var(--white);
+            padding: 10px;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            width: 100%;
+            margin: 10px 0;
+        }
+
+        button:hover {
+            background-color: var(--old-rose_30);
+        }
+
+        .book-list {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .book-item {
+            background-color: var(--ghost-white);
+            margin: 5px 0;
+            padding: 20px;
+            border: 1px solid var(--light-gray);
+            border-radius: 3px;
+            text-align: left;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .book-item h3 {
+            margin: 0 0 5px;
+            color: var(--charcoal);
+        }
+
+        .book-item p {
+            margin: 5px 0;
+            color: var(--sonic-silver);
+        }
+
+        .remove-btn {
+            background: none;
+            border: none;
+            color: var(--old-rose);
+            font-size: 1.5rem;
+            cursor: pointer;
+            align-self: flex-end;
+        }
+
+        .interested-users {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .interested-users form {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .interested-users input[type="text"] {
+            margin-bottom: 5px;
+        }
+
+        .interested-users ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .interested-users li {
+            background-color: var(--light-pink);
+            margin: 3px 0;
+            padding: 5px;
+            border-radius: 3px;
+        }
+
+        .notification {
+            display: none;
+            background-color: var(--old-rose);
+            color: var(--white);
+            padding: 5px;
+            border-radius: 3px;
+            margin-top: 5px;
+            text-align: center;
+        }
+
+        @media only screen and (max-width: 786px) {
+            #container5 {
+                height: 465px;
+            }
+        }
+
+        @media only screen and (max-width: 375px) {
+            #container5 {
+                width: 250px;
+                height: 480px;
+            }
+        }
+    </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="./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>
+                        <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="./about.html" class="navbar-link">About</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              
+              <!-- Google Translate Element -->
+              <li class="navbar-item">
+                <div id="google_element"></div>
+            </li>
+        </ul>
+    </nav>
+    </div>
+    
+    <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>
+                <div class="switch-container">
+                  <input type="checkbox" id="switch" class="switch-checkbox">
+                  <label for="switch" class="switch-label">
+                    <div class="switch-button">
+                      <span class="material-icons sun-icon">wb_sunny</span>
+                      <span class="material-icons moon-icon">brightness_2</span>
+                    </div>
+                  </label>
+                </div>
+    
+              </li>
+            </ul>
+          </nav>
+    
+          <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>
+      <section class="section chapters" id="chapters">
+        <div class="container">
+
+          <p class="section-subtitle">Literary Realms</p>
+
+          <h2 class="h2 section-title has-underline" id="section-title2">
+            Literary Realms we've covered
+            <span class="span has-before"></span>
+          </h2>
+
+          <ul class="grid-list">
+
+            <li>
+              <!---jfdb-->
+              <a class="cardo" href="books.html">
+                <h3 class="lithead">01. &nbsp;Romantic Escapes</h3>
+                <p class="small"> Immerse yourself in the enchanting world of love and passion with our curated
+                  selection of romance
+                  fiction.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">02. &nbsp;Thrilling Adventures</h3>
+                <p class="small"> Dive into heart-pounding tales and gripping narratives that will keep you on the edge
+                  of your seat.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">03. &nbsp;Mindful Living</h3>
+                <p class="small"> Discover the secrets to a fulfilling life with our collection of insightful and
+                  empowering self-help
+                  books.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">04. &nbsp;Mystical Fantasies</h3>
+                <p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction
+                  picks.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow"> →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">05. &nbsp;Historical Chronicles</h3>
+                <p class="small"> Travel back in time and explore the rich tapestry of history through our curated
+                  historical fiction
+                  selection.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">06. &nbsp;Science Fiction Wonders</h3>
+                <p class="small"> Ignite your imagination with mind-bending concepts and futuristic worlds in our
+                  science fiction.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">07. &nbsp;Laugh Out Loud Comedy</h3>
+                <p class="small"> Find joy and laughter in our comedy section, featuring witty and humorous tales that
+                  will brighten
+                  your day.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">08. &nbsp;Intriguing Mysteries</h3>
+                <p class="small"> Unravel gripping mysteries and suspenseful plots that will keep you guessing until the
+                  last page.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
+                <p class="small"> Gain insights into the lives of remarkable individuals through our collection of
+                  inspiring biographies
+                  and memoirs.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+            </li>
+          </ul>
+        </div>
+      </section>
+    <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>
+        document.getElementById('book-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const title = document.getElementById('book-title').value;
+            const author = document.getElementById('book-author').value;
+            const genre = document.getElementById('book-genre').value;
+
+            if (title && author && genre) {
+                const bookList = document.getElementById('book-list');
+                const bookItem = document.createElement('li');
+                bookItem.className = 'book-item';
+
+                bookItem.innerHTML = `
+                    <div>
+                        <h3>${title}</h3>
+                        <p><strong>Author:</strong> ${author}</p>
+                        <p><strong>Genre:</strong> ${genre}</p>
+                    </div>
+                    <button class="remove-btn">-</button>
+                    <div class="interested-users">
+                        <h4>Interested Bookworm</h4>
+                        <form class="interested-form">
+                            <input type="text" placeholder="Your Name" required>
+                            <button type="submit">Add</button>
+                        </form>
+                        <ul class="interested-list"></ul>
+                    </div>
+                    <div class="notification">Paging the Book Owner: You've got a swapper!</div>
+                `;
+
+                bookList.appendChild(bookItem);
+
+                bookItem.querySelector('.remove-btn').addEventListener('click', function() {
+                    bookList.removeChild(bookItem);
+                });
+
+                bookItem.querySelector('.interested-form').addEventListener('submit', function(event) {
+                    event.preventDefault();
+                    const interestedName = this.querySelector('input').value;
+                    if (interestedName) {
+                        const interestedList = bookItem.querySelector('.interested-list');
+                        const interestedItem = document.createElement('li');
+                        interestedItem.textContent = interestedName;
+                        interestedList.appendChild(interestedItem);
+                        this.reset();
+
+                        const notification = bookItem.querySelector('.notification');
+                        notification.style.display = 'block';
+
+                       
+                        setTimeout(() => {
+                            notification.style.display = 'none';
+                        }, 10000);
+                    }
+                });
+
+                document.getElementById('book-form').reset();
+            }
+        });
+    </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';
+                    }
+                }
+            
+                window.addEventListener('scroll', checkButtonVisibility);
+                window.addEventListener('resize', checkButtonVisibility);
+            
+                backToTopButton.addEventListener('click', function () {
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth' 
+                    });
+                });
+                checkButtonVisibility();
+            });
+            
+              </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/assets/html/pricing.html b/assets/html/pricing.html
new file mode 100644
index 000000000..cf1a8222e
--- /dev/null
+++ b/assets/html/pricing.html
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Literary Realms</title>
+    <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">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <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/Available.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" />
+  
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
+      rel="stylesheet">
+  
+    <link rel="preload" as="image" href="./../images/hero-banner.png">
+    <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="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+  
+    <script src="./../js/rateUsModal.js" defer></script>
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script src="./../js/faq.js"></script>
+    <script src="./../js/tilt.js"></script>
+    <script src="./../js/scroll.js"></script>
+  
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  
+    <!-- Swiper CSS -->
+    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
+  
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="../css/test-style.css">
+  
+    <!-- Preloader CSS-->
+    <link rel="stylesheet" href="./../css/preloader.css">
+    <script src="./../js/preloader.js" defer></script>
+    <style>
+        :root {
+            --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: hsl(357, 37%, 62%);
+            --seashell: hsl(20, 43%, 93%);
+            --charcoal: hsl(203, 30%, 26%);
+            --white: hsl(0, 0%, 100%);
+
+            --ff-philosopher: "Philosopher", sans-serif;
+            --ff-poppins: "Poppins", sans-serif;
+            --ff-roboto: "Philosopher", sans-serif;
+        }
+
+        /* General Styles */
+        body {
+            font-family: var(--ff-philosopher);
+            background-color: var(--seashell);
+            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");
+            /* margin: 0;
+            padding: 0; */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            /* height: 100vh; */
+            /* width: 100%; */
+        }
+        #section{
+            padding-top: 50px;
+            margin-top:50px;
+        }
+        footer{
+            width: 100%;
+        }
+        .navbar5 {
+            width: 50%;
+            padding: 20px 0;
+            text-align: center;
+        }
+        .navbar-header {
+            font-family: var(--ff-poppins);
+            font-size: 2rem;
+            margin: 0;
+            color: var(--old-rose);
+        }
+        .navbar-header a {
+            color: var(--old-rose);
+            text-decoration: none;
+            width: 500px;
+            text-align: center;
+        }
+
+        #container5 {
+            background-color: var(--white);
+            padding: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px var(--chinese-violet_30);
+            width: 500px;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        h2 {
+            color: var(--charcoal);
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid var(--light-gray);
+            border-radius: 3px;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: var(--old-rose);
+            color: var(--white);
+            padding: 10px;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            width: 100%;
+            margin: 10px 0;
+        }
+
+        button:hover {
+            background-color: var(--old-rose_30);
+        }
+
+        .book-list {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .book-item {
+            background-color: var(--ghost-white);
+            margin: 5px 0;
+            padding: 20px;
+            border: 1px solid var(--light-gray);
+            border-radius: 3px;
+            text-align: left;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .book-item h3 {
+            margin: 0 0 5px;
+            color: var(--charcoal);
+        }
+
+        .book-item p {
+            margin: 5px 0;
+            color: var(--sonic-silver);
+        }
+
+        .remove-btn {
+            background: none;
+            border: none;
+            color: var(--old-rose);
+            font-size: 1.5rem;
+            cursor: pointer;
+            align-self: flex-end;
+        }
+
+        .interested-users {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .interested-users form {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .interested-users input[type="text"] {
+            margin-bottom: 5px;
+        }
+
+        .interested-users ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .interested-users li {
+            background-color: var(--light-pink);
+            margin: 3px 0;
+            padding: 5px;
+            border-radius: 3px;
+        }
+
+        .notification {
+            display: none;
+            background-color: var(--old-rose);
+            color: var(--white);
+            padding: 5px;
+            border-radius: 3px;
+            margin-top: 5px;
+            text-align: center;
+        }
+
+        @media only screen and (max-width: 786px) {
+            #container5 {
+                height: 465px;
+            }
+        }
+
+        @media only screen and (max-width: 375px) {
+            #container5 {
+                width: 250px;
+                height: 480px;
+            }
+        }
+    </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="./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>
+                        <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="./about.html" class="navbar-link">About</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              
+              <!-- Google Translate Element -->
+              <li class="navbar-item">
+                <div id="google_element"></div>
+            </li>
+        </ul>
+    </nav>
+    </div>
+    
+    <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>
+                <div class="switch-container">
+                  <input type="checkbox" id="switch" class="switch-checkbox">
+                  <label for="switch" class="switch-label">
+                    <div class="switch-button">
+                      <span class="material-icons sun-icon">wb_sunny</span>
+                      <span class="material-icons moon-icon">brightness_2</span>
+                    </div>
+                  </label>
+                </div>
+    
+              </li>
+            </ul>
+          </nav>
+    
+          <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>
+      <!--
+        - #PRICING
+      -->
+      <section class="section pricing" id="pricing" aria-label="pricing">
+        <div class="container">
+
+          <p class="section-subtitle">Pricing</p>
+
+          <h2 class="h2 section-title has-underline">
+            Pricing based on their version
+            <span class="span has-before"></span>
+          </h2>
+
+          <ul class="grid-list">
+
+            <li>
+              <div class="pricing-card">
+
+                <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
+
+                <data class="price" value="5">75% Off</data>
+
+                <ul class="pricing-card-list">
+
+                  <li class="card-item">
+                    <p class="card-text">Exchange any recently released or gently used books, less than a year old, at
+                      75% of the original cost (Limited Offer)</p>
+                  </li>
+                </ul>
+
+                <button class="btn btn-secondary">BUY NOW</button>
+              </div>
+            </li>
+            <li>
+              <div class="pricing-card">
+                <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
+                <data class="price" value="15">50% Off</data>
+                <ul class="pricing-card-list">
+
+                  <li class="card-item">
+                    <p class="card-text">Swap beloved classics or books aged 1 to 5 years at 50% of the original cost,
+                      preserving the magic of timeless stories.</p>
+                  </li>
+                </ul>
+
+                <button class="btn btn-secondary">BUY NOW</button>
+
+              </div>
+            </li>
+
+            <li>
+              <div class="pricing-card">
+                <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
+                <data class="price" value="10">25% Off</data>
+                <ul class="pricing-card-list">
+
+
+                  <li class="card-item">
+                    <p class="card-text">Dive into the past with vintage editions or books over 5 years old, available
+                      for exchange at 25% of their original cost.</p>
+                  </li>
+                </ul>
+
+                <button class="btn btn-secondary">BUY NOW</button>
+
+              </div>
+            </li>
+
+          </ul>
+
+        </div>
+        </section>
+        <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>
+        document.getElementById('book-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const title = document.getElementById('book-title').value;
+            const author = document.getElementById('book-author').value;
+            const genre = document.getElementById('book-genre').value;
+
+            if (title && author && genre) {
+                const bookList = document.getElementById('book-list');
+                const bookItem = document.createElement('li');
+                bookItem.className = 'book-item';
+
+                bookItem.innerHTML = `
+                    <div>
+                        <h3>${title}</h3>
+                        <p><strong>Author:</strong> ${author}</p>
+                        <p><strong>Genre:</strong> ${genre}</p>
+                    </div>
+                    <button class="remove-btn">-</button>
+                    <div class="interested-users">
+                        <h4>Interested Bookworm</h4>
+                        <form class="interested-form">
+                            <input type="text" placeholder="Your Name" required>
+                            <button type="submit">Add</button>
+                        </form>
+                        <ul class="interested-list"></ul>
+                    </div>
+                    <div class="notification">Paging the Book Owner: You've got a swapper!</div>
+                `;
+
+                bookList.appendChild(bookItem);
+
+                bookItem.querySelector('.remove-btn').addEventListener('click', function() {
+                    bookList.removeChild(bookItem);
+                });
+
+                bookItem.querySelector('.interested-form').addEventListener('submit', function(event) {
+                    event.preventDefault();
+                    const interestedName = this.querySelector('input').value;
+                    if (interestedName) {
+                        const interestedList = bookItem.querySelector('.interested-list');
+                        const interestedItem = document.createElement('li');
+                        interestedItem.textContent = interestedName;
+                        interestedList.appendChild(interestedItem);
+                        this.reset();
+
+                        const notification = bookItem.querySelector('.notification');
+                        notification.style.display = 'block';
+
+                       
+                        setTimeout(() => {
+                            notification.style.display = 'none';
+                        }, 10000);
+                    }
+                });
+
+                document.getElementById('book-form').reset();
+            }
+        });
+    </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';
+                    }
+                }
+            
+                window.addEventListener('scroll', checkButtonVisibility);
+                window.addEventListener('resize', checkButtonVisibility);
+            
+                backToTopButton.addEventListener('click', function () {
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth' 
+                    });
+                });
+                checkButtonVisibility();
+            });
+            
+              </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index d1e661bfc..30dadbfbb 100644
--- a/index.html
+++ b/index.html
@@ -538,18 +538,18 @@
 
               <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="./assets/html/literaryrealms.html" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
                       class="ri-medal-fill"></i> Literary Realms</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
+                  <a href="./assets/html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
                       class="ri-price-tag-3-fill"></i> Pricing</a>
                 </li>
                 <li class="dropdown-menu-item">
                   <a href="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
+                  <a href="./assets/html/bookrecommend.html" class="navbar-link" data-nav-link>
                     <i class="ri-customer-service-2-fill"></i> Book Recommendation
                   </a>
                 </li>
@@ -885,10 +885,228 @@ <h3 class="h3 card-title">Personalized Reading Experience</h3>
 
         </div>
       </section>
+      <!--Chapters -->
+      <section class="section chapters" id="chapters">
+        <div class="container">
+
+          <p class="section-subtitle">Literary Realms</p>
+
+          <h2 class="h2 section-title has-underline" id="section-title2">
+            Literary Realms we've covered
+            <span class="span has-before"></span>
+          </h2>
+
+          <ul class="grid-list">
+
+            <li>
+              <!---jfdb-->
+              <a class="cardo" href="books.html">
+                <h3 class="lithead">01. &nbsp;Romantic Escapes</h3>
+                <p class="small"> Immerse yourself in the enchanting world of love and passion with our curated
+                  selection of romance
+                  fiction.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">02. &nbsp;Thrilling Adventures</h3>
+                <p class="small"> Dive into heart-pounding tales and gripping narratives that will keep you on the edge
+                  of your seat.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">03. &nbsp;Mindful Living</h3>
+                <p class="small"> Discover the secrets to a fulfilling life with our collection of insightful and
+                  empowering self-help
+                  books.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">04. &nbsp;Mystical Fantasies</h3>
+                <p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction
+                  picks.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow"> →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">05. &nbsp;Historical Chronicles</h3>
+                <p class="small"> Travel back in time and explore the rich tapestry of history through our curated
+                  historical fiction
+                  selection.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">06. &nbsp;Science Fiction Wonders</h3>
+                <p class="small"> Ignite your imagination with mind-bending concepts and futuristic worlds in our
+                  science fiction.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">07. &nbsp;Laugh Out Loud Comedy</h3>
+                <p class="small"> Find joy and laughter in our comedy section, featuring witty and humorous tales that
+                  will brighten
+                  your day.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">08. &nbsp;Intriguing Mysteries</h3>
+                <p class="small"> Unravel gripping mysteries and suspenseful plots that will keep you guessing until the
+                  last page.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+            </li>
+
+            <li>
+
+              <a class="cardo" href="#">
+                <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
+                <p class="small"> Gain insights into the lives of remarkable individuals through our collection of
+                  inspiring biographies
+                  and memoirs.</p>
+                <div class="go-corner" href="#">
+                  <div class="go-arrow">
+                    →
+                  </div>
+                </div>
+              </a>
+
+            </li>
+          </ul>
+        </div>
+      </section>
+
+
+
+<!--
+        - #PRICING
+      -->
+      <section class="section pricing" id="pricing" aria-label="pricing">
+        <div class="container">
+
+          <p class="section-subtitle">Pricing</p>
+
+          <h2 class="h2 section-title has-underline">
+            Pricing based on their version
+            <span class="span has-before"></span>
+          </h2>
+
+          <ul class="grid-list">
+
+            <li>
+              <div class="pricing-card">
 
+                <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
+
+                <data class="price" value="5">75% Off</data>
+
+                <ul class="pricing-card-list">
+
+                  <li class="card-item">
+                    <p class="card-text">Exchange any recently released or gently used books, less than a year old, at
+                      75% of the original cost (Limited Offer)</p>
+                  </li>
+                </ul>
+
+                <button class="btn btn-secondary">BUY NOW</button>
+              </div>
+            </li>
+            <li>
+              <div class="pricing-card">
+                <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
+                <data class="price" value="15">50% Off</data>
+                <ul class="pricing-card-list">
 
+                  <li class="card-item">
+                    <p class="card-text">Swap beloved classics or books aged 1 to 5 years at 50% of the original cost,
+                      preserving the magic of timeless stories.</p>
+                  </li>
+                </ul>
 
+                <button class="btn btn-secondary">BUY NOW</button>
 
+              </div>
+            </li>
+
+            <li>
+              <div class="pricing-card">
+                <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
+                <data class="price" value="10">25% Off</data>
+                <ul class="pricing-card-list">
+
+
+                  <li class="card-item">
+                    <p class="card-text">Dive into the past with vintage editions or books over 5 years old, available
+                      for exchange at 25% of their original cost.</p>
+                  </li>
+                </ul>
+
+                <button class="btn btn-secondary">BUY NOW</button>
+
+              </div>
+            </li>
+
+          </ul>
+
+        </div>
+        </section>
 
       <!-- Genre -->
 
@@ -1105,153 +1323,6 @@ <h3 class="h3 card-title">Adventure Fiction</h3>
         - #CHAPTERS
       -->
 
-      <section class="section chapters" id="chapters">
-        <div class="container">
-
-          <p class="section-subtitle">Literary Realms</p>
-
-          <h2 class="h2 section-title has-underline" id="section-title2">
-            Literary Realms we've covered
-            <span class="span has-before"></span>
-          </h2>
-
-          <ul class="grid-list">
-
-            <li>
-              <!---jfdb-->
-              <a class="cardo" href="books.html">
-                <h3 class="lithead">01. &nbsp;Romantic Escapes</h3>
-                <p class="small"> Immerse yourself in the enchanting world of love and passion with our curated
-                  selection of romance
-                  fiction.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-            </li>
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">02. &nbsp;Thrilling Adventures</h3>
-                <p class="small"> Dive into heart-pounding tales and gripping narratives that will keep you on the edge
-                  of your seat.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-            </li>
-
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">03. &nbsp;Mindful Living</h3>
-                <p class="small"> Discover the secrets to a fulfilling life with our collection of insightful and
-                  empowering self-help
-                  books.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-            </li>
-
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">04. &nbsp;Mystical Fantasies</h3>
-                <p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction
-                  picks.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow"> →
-                  </div>
-                </div>
-              </a>
-
-
-            </li>
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">05. &nbsp;Historical Chronicles</h3>
-                <p class="small"> Travel back in time and explore the rich tapestry of history through our curated
-                  historical fiction
-                  selection.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-
-
-            </li>
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">06. &nbsp;Science Fiction Wonders</h3>
-                <p class="small"> Ignite your imagination with mind-bending concepts and futuristic worlds in our
-                  science fiction.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-
-
-            </li>
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">07. &nbsp;Laugh Out Loud Comedy</h3>
-                <p class="small"> Find joy and laughter in our comedy section, featuring witty and humorous tales that
-                  will brighten
-                  your day.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-            </li>
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">08. &nbsp;Intriguing Mysteries</h3>
-                <p class="small"> Unravel gripping mysteries and suspenseful plots that will keep you guessing until the
-                  last page.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-            </li>
-
-            <li>
-
-              <a class="cardo" href="#">
-                <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
-                <p class="small"> Gain insights into the lives of remarkable individuals through our collection of
-                  inspiring biographies
-                  and memoirs.</p>
-                <div class="go-corner" href="#">
-                  <div class="go-arrow">
-                    →
-                  </div>
-                </div>
-              </a>
-
-            </li>
-          </ul>
-        </div>
-      </section>
-
       <!-- Exchange Exchnage Exchange -->
       <section class="section preview" aria-label="preview">
         <div class="container1">
@@ -1339,83 +1410,7 @@ <h2 class="h2 section-title has-underline">
 
 
           </div>
-      </section>
-
-
-
-      <!--
-        - #PRICING
-      -->
-      <section class="section pricing" id="pricing" aria-label="pricing">
-        <div class="container">
-
-          <p class="section-subtitle">Pricing</p>
-
-          <h2 class="h2 section-title has-underline">
-            Pricing based on their version
-            <span class="span has-before"></span>
-          </h2>
-
-          <ul class="grid-list">
-
-            <li>
-              <div class="pricing-card">
-
-                <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
-
-                <data class="price" value="5">75% Off</data>
-
-                <ul class="pricing-card-list">
-
-                  <li class="card-item">
-                    <p class="card-text">Exchange any recently released or gently used books, less than a year old, at
-                      75% of the original cost (Limited Offer)</p>
-                  </li>
-                </ul>
-
-                <button class="btn btn-secondary">BUY NOW</button>
-              </div>
-            </li>
-            <li>
-              <div class="pricing-card">
-                <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
-                <data class="price" value="15">50% Off</data>
-                <ul class="pricing-card-list">
-
-                  <li class="card-item">
-                    <p class="card-text">Swap beloved classics or books aged 1 to 5 years at 50% of the original cost,
-                      preserving the magic of timeless stories.</p>
-                  </li>
-                </ul>
-
-                <button class="btn btn-secondary">BUY NOW</button>
-
-              </div>
-            </li>
-
-            <li>
-              <div class="pricing-card">
-                <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
-                <data class="price" value="10">25% Off</data>
-                <ul class="pricing-card-list">
-
-
-                  <li class="card-item">
-                    <p class="card-text">Dive into the past with vintage editions or books over 5 years old, available
-                      for exchange at 25% of their original cost.</p>
-                  </li>
-                </ul>
-
-                <button class="btn btn-secondary">BUY NOW</button>
-
-              </div>
-            </li>
-
-          </ul>
-
-        </div>
-      </section>
-
+        </section>
 
       <!-- - #CONTACT -->
 
@@ -1808,6 +1803,8 @@ <h2>Quick Links</h2>
             <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/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>