diff --git a/README.md b/README.md
index 7d38b84..f251df8 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,13 @@
-# project-library
\ No newline at end of file
+# project-library
+
+On.Book is a dynamic website that displays and interacts with a curated array of books. The project addresses the problem by offering an intuitive interface where users can view, filter, sort, and search for books based on various criteria.
+
+# Technologies Used:
+
+- HTML: Structure the content.
+- CSS: Style the interface.
+- JavaScript: Implement dynamic functionality like filtering, sorting, and random selection of items.
+
+# View it live
+
+https://on-book.netlify.app/
diff --git a/books-images/1984.jpg b/books-images/1984.jpg
deleted file mode 100644
index d3b39aa..0000000
Binary files a/books-images/1984.jpg and /dev/null differ
diff --git a/books-images/alchemist.jpg b/books-images/alchemist.jpg
new file mode 100644
index 0000000..0ba99c5
Binary files /dev/null and b/books-images/alchemist.jpg differ
diff --git a/books-images/book1.jpg b/books-images/book1.jpg
new file mode 100644
index 0000000..42083bb
Binary files /dev/null and b/books-images/book1.jpg differ
diff --git a/books-images/book10.jpg b/books-images/book10.jpg
new file mode 100644
index 0000000..6da806a
Binary files /dev/null and b/books-images/book10.jpg differ
diff --git a/books-images/book11.jpg b/books-images/book11.jpg
new file mode 100644
index 0000000..a21bea5
Binary files /dev/null and b/books-images/book11.jpg differ
diff --git a/books-images/book12.jpg b/books-images/book12.jpg
new file mode 100644
index 0000000..c808759
Binary files /dev/null and b/books-images/book12.jpg differ
diff --git a/books-images/book2.jpg b/books-images/book2.jpg
new file mode 100644
index 0000000..52d6edf
Binary files /dev/null and b/books-images/book2.jpg differ
diff --git a/books-images/book3.jpg b/books-images/book3.jpg
new file mode 100644
index 0000000..a0360d8
Binary files /dev/null and b/books-images/book3.jpg differ
diff --git a/books-images/book4.jpg b/books-images/book4.jpg
new file mode 100644
index 0000000..38c040c
Binary files /dev/null and b/books-images/book4.jpg differ
diff --git a/books-images/book5.jpg b/books-images/book5.jpg
new file mode 100644
index 0000000..02d5a8a
Binary files /dev/null and b/books-images/book5.jpg differ
diff --git a/books-images/book6.jpg b/books-images/book6.jpg
new file mode 100644
index 0000000..d4c84bf
Binary files /dev/null and b/books-images/book6.jpg differ
diff --git a/books-images/book7.jpg b/books-images/book7.jpg
new file mode 100644
index 0000000..5603882
Binary files /dev/null and b/books-images/book7.jpg differ
diff --git a/books-images/book8.jpg b/books-images/book8.jpg
new file mode 100644
index 0000000..ed8cb86
Binary files /dev/null and b/books-images/book8.jpg differ
diff --git a/books-images/book9.jpg b/books-images/book9.jpg
new file mode 100644
index 0000000..3c37b32
Binary files /dev/null and b/books-images/book9.jpg differ
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
deleted file mode 100644
index 05d8a24..0000000
Binary files a/books-images/harry-potter-and-the-sorcerer.jpg and /dev/null differ
diff --git a/books-images/little-women.jpg b/books-images/little-women.jpg
new file mode 100644
index 0000000..52b93fc
Binary files /dev/null and b/books-images/little-women.jpg differ
diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg
deleted file mode 100644
index 20a5ac9..0000000
Binary files a/books-images/moby-dick.jpg and /dev/null differ
diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg
deleted file mode 100644
index 6460748..0000000
Binary files a/books-images/pride-and-prejudice.jpg and /dev/null differ
diff --git a/books-images/road.jpg b/books-images/road.jpg
new file mode 100644
index 0000000..89edc43
Binary files /dev/null and b/books-images/road.jpg differ
diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
deleted file mode 100644
index e1848c2..0000000
Binary files a/books-images/the-chronicles-of-narnia.jpg and /dev/null differ
diff --git a/books-images/the-girl-with-the-dragon-tattoo.jpg b/books-images/the-girl-with-the-dragon-tattoo.jpg
new file mode 100644
index 0000000..5fc0e0e
Binary files /dev/null and b/books-images/the-girl-with-the-dragon-tattoo.jpg differ
diff --git a/books-images/the-giver.jpg b/books-images/the-giver.jpg
new file mode 100644
index 0000000..054f98f
Binary files /dev/null and b/books-images/the-giver.jpg differ
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
deleted file mode 100644
index 04d0aee..0000000
Binary files a/books-images/the-great-gatsby.jpg and /dev/null differ
diff --git a/books-images/the-hitchhikers-guide-to-the-galaxy.jpg b/books-images/the-hitchhikers-guide-to-the-galaxy.jpg
new file mode 100644
index 0000000..4b2723a
Binary files /dev/null and b/books-images/the-hitchhikers-guide-to-the-galaxy.jpg differ
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg
deleted file mode 100644
index bbf7dde..0000000
Binary files a/books-images/the-hobbit.jpg and /dev/null differ
diff --git a/books-images/the-hunger-games-hunger-games.jpg b/books-images/the-hunger-games-hunger-games.jpg
new file mode 100644
index 0000000..5da2eed
Binary files /dev/null and b/books-images/the-hunger-games-hunger-games.jpg differ
diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg
deleted file mode 100644
index 3823218..0000000
Binary files a/books-images/the-lord-of-the-rings.jpg and /dev/null differ
diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg
deleted file mode 100644
index 20fadb4..0000000
Binary files a/books-images/to-kill-a-mockingbird.jpg and /dev/null differ
diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg
deleted file mode 100644
index 3de71e8..0000000
Binary files a/books-images/unknown.jpg and /dev/null differ
diff --git a/index.html b/index.html
index cf5c31a..072685b 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,118 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- Don't forget to change the title and connect the CSS file -->
-  <title>Project Library</title>
-</head>
-<body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>On.Book Library</title>
+    <link rel="stylesheet" href="style.css" />
+    <!-- Preconnect to Google Fonts to optimize font loading -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- Google Font: PT Serif (for typography) -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <header>
+      <div class="navbar">
+        <div class="logo">
+          <h1>On.Book</h1>
+        </div>
+        <!-- Navigation Links -->
+        <nav>
+          <ul>
+            <li><a href="#">Books</a></li>
+            <li><a href="#">Categories</a></li>
+            <li><a href="#">Wishlist</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">About Us</a></li>
+          </ul>
+        </nav>
+        <!-- Search and Sign-in Section -->
+        <div class="search-signin">
+          <div class="search-box">
+            <input type="text" placeholder="Search book..." />
+          </div>
+          <!-- Divider between search and sign-in -->
+          <span class="divider">|</span>
+
+          <a href="javascript:void(0)" class="search-button">Search</a>
+        </div>
+      </div>
+    </header>
+    <!-- Hero Section: Introduction and Featured Books Slider -->
+    <section class="hero">
+      <div class="hero-content">
+        <div class="text-content">
+          <h2>Find Your Next Book</h2>
+          <p>
+            Our most popular and trending <b>On.Book</b> perfect.<br />Not sure
+            what to read now? Read the perfect book to match your mood.
+          </p>
+          <button>Explore Now</button>
+        </div>
+        <div class="book-slider">
+          <!-- First Book -->
+          <div class="book framed">
+            <img src="books-images/book1.jpg" alt="The Stranger" />
+            <p>The Stranger<br /><small>Albert Camus</small></p>
+          </div>
+          <!-- Middle Book (reverse-rounded with title/author above the image) -->
+          <div class="book framed reverse">
+            <p>Der Process<br /><small>Franz Kafka</small></p>
+            <img src="books-images/book2.jpg" alt="Der Process" />
+          </div>
+          <!-- Third Book -->
+          <div class="book framed">
+            <img src="books-images/book3.jpg" alt="The Divine Comedy" />
+            <p>The Divine Comedy<br /><small>Dante</small></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Bestsellers Section: Displays the Bestselling Books -->
+    <section class="bestsellers">
+      <div class="bestsellers-header">
+        <h2>Bestsellers</h2>
+        <!-- Sorting and Filtering Options -->
+        <div class="sort-filter">
+          <!-- Sort Dropdown -->
+          <select id="sort-dropdown">
+            <option value="" disabled selected>Sort by</option>
+            <option value="titleAZ">Title (A-Z)</option>
+            <option value="titleZA">Title (Z-A)</option>
+            <option value="yearNewest">Year (Newest)</option>
+            <option value="yearOldest">Year (Oldest)</option>
+            <option value="ratingHighest">Rating (Highest)</option>
+            <option value="ratingLowest">Rating (Lowest)</option>
+          </select>
+          <!-- Sort Button -->
+          <button class="sort-btn" id="sort-button">Sort</button>
+          <!-- Genre Filter Dropdown -->
+          <div class="genre-filter">
+            <button class="genre-btn" id="genre-button">Genre</button>
+            <div id="dropdown-menu" class="dropdown-content">
+              <select id="filter-dropdown">
+                <option value="" disabled selected>Filter By:</option>
+                <option value="fiction">Fiction</option>
+                <option value="nonfiction">Nonfiction</option>
+                <option value="art-history">Art History</option>
+                <option value="psychology">Psychology</option>
+                <option value="mystery">Mystery</option>
+                <option value="fantasy">Fantasy</option>
+                <option value="crime-fiction">Crime Fiction</option>
+                <option value="dystopian">Dystopian</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Container for Displaying the List of Books -->
+      <div class="book-list" id="book-list"></div>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/instructions.md b/instructions.md
index 977cabc..d2ad7b4 100644
--- a/instructions.md
+++ b/instructions.md
@@ -14,17 +14,14 @@ In order to simplify the execution of this project, we have provided you with tw
 
 ## How to get started
 
-
 ## Requirements
+
 - Your page should display all of the elements (and their information) in the chosen array when the website is loaded
 - Your page should have at least one `filter`, e.g. on genre or cuisine type
 - Your page should be able to `sort` on at least one property, e.g.:
-  - *for books*:
+  - _for books_:
     - from newest to oldest and vice versa
     - from the highest to lowest rating and vice versa
-  - *for recipes*:
-    - from most to least ingredients and vice versa
-    - from longest to shortest cooking time and vice versa
 - Your page should feature a button that selects a random book/recipe, and your page should display the selected item
 
 ## Stretch Goals
@@ -32,6 +29,7 @@ In order to simplify the execution of this project, we have provided you with tw
 So you’ve completed all the steps above? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.
 
 ### Intermediate stretch goals
+
 - Go wild with the filtering. Add a filter to:
   - only show the recipes with less than 5 or 10 ingredients
   - only show the books from the 21st century
@@ -39,5 +37,6 @@ So you’ve completed all the steps above? Great job! Make sure you've committed
   - Alphabetical order
 
 ### Advanced stretch goals
+
 - Create a search bar where the user can search for specific keywords
 - Recreate the same design as the one provided in the example on Figma
diff --git a/pull_request_template.md b/pull_request_template.md
index d92c89b..afd7a7d 100644
--- a/pull_request_template.md
+++ b/pull_request_template.md
@@ -1,7 +1,8 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://on-book.netlify.app/
 
 ## Collaborators
-Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
+
+- [https://github.com/zoe-lindqvist]
+- [https://github.com/jacquelinekellyhunt]
+- [https://github.com/Fannyhenriques]
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
deleted file mode 100644
index b580fdc..0000000
Binary files a/recipe-images/baked-chicken.jpg and /dev/null differ
diff --git "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" "b/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg"
deleted file mode 100644
index 4a6128e..0000000
Binary files "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" and /dev/null differ
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
deleted file mode 100644
index 361e5fe..0000000
Binary files a/recipe-images/chicken-paprikash.jpg and /dev/null differ
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
deleted file mode 100644
index d9ed554..0000000
Binary files a/recipe-images/deep-fried-fish-bones.jpg and /dev/null differ
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
deleted file mode 100644
index 4166fb7..0000000
Binary files a/recipe-images/fish-dish.jpg and /dev/null differ
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
deleted file mode 100644
index fe7a433..0000000
Binary files a/recipe-images/grilled.jpg and /dev/null differ
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
deleted file mode 100644
index 58fab20..0000000
Binary files a/recipe-images/individual-vegetarian-lasagnes.jpg and /dev/null differ
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
deleted file mode 100644
index b1896d9..0000000
Binary files a/recipe-images/meat.jpg and /dev/null differ
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
deleted file mode 100644
index a6d811a..0000000
Binary files a/recipe-images/vegetarian-shepherd's-pie.jpg and /dev/null differ
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg
deleted file mode 100644
index 86babc8..0000000
Binary files a/recipe-images/vegetarian-stir-fried-garlic-s.jpg and /dev/null differ
diff --git a/script.js b/script.js
index 6a61c06..c0d4161 100644
--- a/script.js
+++ b/script.js
@@ -1,406 +1,330 @@
-/*Here we have created two different arrays that you can work with if you want.
-If you choose to create your own arrays with elements, just make sure that some
-of the properties make sense to filter on, and some to sort on.*/
-
 const books = [
   {
-    title: 'The Great Gatsby',
-    author: 'F. Scott Fitzgerald',
+    title: "Journeying with Faith",
+    author: "Sophia Gracewood",
     year: 1925,
-    genre: 'Fiction',
+    genre: "nonfiction",
     rating: 4.2,
     description:
-      'A classic novel set in the Roaring Twenties, it explores themes of wealth, love, and the American Dream through the enigmatic Jay Gatsby.',
-    image: './books-images/the-great-gatsby.jpg'
+      "A beautifully crafted journal to inspire your spiritual journey, guiding you through daily reflections and prayers to deepen your faith, one moment of devotion at a time.",
+    image: "./books-images/book1.jpg",
   },
   {
-    title: 'To Kill a Mockingbird',
-    author: 'Harper Lee',
-    year: 1960,
-    genre: 'Fiction',
-    rating: 4.5,
+    title: "The Invisible Man",
+    author: "Olivia Wilson",
+    year: 1925,
+    genre: "sience-fiction",
+    rating: 2.8,
     description:
-      'Set in the American South, this novel tackles issues of racism and injustice through the eyes of young Scout Finch.',
-    image: './books-images/to-kill-a-mockingbird.jpg'
+      "A haunting tale of a man lost in the shadows of his own existence, struggling with the power of invisibility and the price of being unseen in a world that demands recognition.",
+    image: "./books-images/book2.jpg",
   },
   {
-    title: '1984',
-    author: 'George Orwell',
-    year: 1949,
-    genre: 'Science Fiction',
-    rating: 4.4,
+    title: "Art History",
+    author: "Lars Peeters",
+    year: 1925,
+    genre: "nonfiction",
+    rating: 4.0,
     description:
-      'A dystopian classic that explores totalitarianism and the consequences of a surveillance state in a bleak future.',
-    image: './books-images/1984.jpg'
+      "A comprehensive exploration of the timeless masterpieces that shaped the course of art, examining the cultural and historical significance of iconic works from antiquity to the modern era.",
+    image: "./books-images/book3.jpg",
   },
   {
-    title: 'Pride and Prejudice',
-    author: 'Jane Austen',
-    year: 1813,
-    genre: 'Fiction',
-    rating: 4.25,
+    title: "Modish",
+    author: "Harper Russo",
+    year: 2024,
+    genre: "fiction",
+    rating: 2.5,
     description:
-      'A timeless romance novel that examines societal expectations and the misunderstandings that can arise from pride and prejudice.',
-    image: './books-images/pride-and-prejudice.jpg'
+      "An avant-garde exploration of modern fashion, design, and culture, capturing the essence of contemporary style through striking visuals and thought-provoking commentary on the trends that shape our world.",
+    image: "./books-images/book4.jpg",
   },
   {
-    title: 'The Catcher in the Rye',
-    author: 'J.D. Salinger',
-    year: 1951,
-    genre: 'Fiction',
-    rating: 4,
+    title: "Eyes",
+    author: "Drew Feig",
+    year: 1925,
+    genre: "mystery",
+    rating: 3.5,
     description:
-      'Narrated by the teenage Holden Caulfield, the novel explores themes of alienation and the search for authenticity.',
-    image: './books-images/unknown.jpg'
+      "A captivating exploration of perception, identity, and the hidden truths we choose to see or ignore, where the lines between reality and illusion blur in a world constantly watched.",
+    image: "./books-images/book5.jpg",
   },
   {
-    title: 'The Hobbit',
-    author: 'J.R.R. Tolkien',
-    year: 1937,
-    genre: 'Fantasy',
-    rating: 4.6,
+    title: "Memory Book",
+    author: "Alex Renfield",
+    year: 2004,
+    genre: "fiction",
+    rating: 4.3,
     description:
-      'A fantasy adventure novel that follows Bilbo Baggins on a quest to help a group of dwarves reclaim their homeland from a dragon.',
-    image: './books-images/the-hobbit.jpg'
+      "A heartfelt memory book designed to capture and preserve the most cherished moments of your life, filled with personal reflections and meaningful snapshots that tell your unique story.",
+    image: "./books-images/book6.jpg",
   },
   {
-    title: "Harry Potter and the Sorcerer's Stone",
-    author: 'J.K. Rowling',
-    year: 1997,
-    genre: 'Fantasy',
-    rating: 4.7,
+    title: "Venus",
+    author: "Margarita Perez",
+    year: 2021,
+    genre: "sience-fiction",
+    rating: 4.8,
     description:
-      'The first book in the beloved Harry Potter series, it introduces readers to the magical world of Hogwarts and the young wizard Harry Potter.',
-    image: "./books-images/harry-potter-and-the-sorcerer'.jpg"
+      "A mesmerizing journey to the mysterious planet of Venus, where love, beauty, and the unknown intertwine, revealing a world both enchanting and perilous in the depths of the cosmos.",
+    image: "./books-images/book7.jpg",
   },
   {
-    title: 'Moby-Dick',
-    author: 'Herman Melville',
-    year: 1851,
-    genre: 'Adventure',
-    rating: 4.1,
+    title: "The Power of Positive",
+    author: "Drew Feig",
+    year: 2000,
+    genre: "nonfiction",
+    rating: 5.0,
     description:
-      'An epic tale of obsession, revenge, and the relentless pursuit of the great white whale, Moby Dick.',
-    image: './books-images/moby-dick.jpg'
+      "A transformative guide to unlocking your potential and breaking through barriers, it empowers you with actionable strategies to harness the power of positive thinking and achieve your dreams.",
+    image: "./books-images/book8.jpg",
   },
   {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    author: 'J.R.R. Tolkien',
-    year: 1954,
-    genre: 'Fantasy',
-    rating: 4.55,
+    title: "Classic Painting",
+    author: "Donna Stroupe",
+    year: 1999,
+    genre: "art-history",
+    rating: 4.4,
     description:
-      'The first volume of the epic fantasy trilogy follows Frodo Baggins and the Fellowship on their quest to destroy the One Ring.',
-    image: './books-images/the-lord-of-the-rings.jpg'
+      "A captivating exploration of timeless masterpieces from the Renaissance to the Baroque, it delves into the rich history and techniques of the greatest artists who shaped Western art.",
+    image: "./books-images/book9.jpg",
   },
   {
-    title: 'The Shining',
-    author: 'Stephen King',
-    year: 1977,
-    genre: 'Horror',
-    rating: 4.3,
+    title: "Puzzles",
+    author: "Harper Russo",
+    year: 2005,
+    genre: "fiction",
+    rating: 4.2,
     description:
-      "A psychological horror novel that tells the story of the Torrance family's terrifying experiences at the haunted Overlook Hotel.",
-    image: './books-images/unknown.jpg'
+      "A gripping exploration of identity, relationships, and the fragmented nature of human experience, it pieces together the complexities of life, offering a thought-provoking narrative that challenges how we see ourselves and others.",
+    image: "./books-images/book10.jpg",
   },
+
   {
-    title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe',
-    author: 'C.S. Lewis',
+    title: "Classic Literature",
+    author: "Shawn Garcia",
     year: 1950,
-    genre: 'Fantasy',
-    rating: 4.15,
+    genre: "psychology",
+    rating: 4.6,
     description:
-      'The first book in the Chronicles of Narnia series, it follows the adventures of children who discover the magical land of Narnia.',
-    image: './books-images/the-chronicles-of-narnia.jpg'
+      "An engaging collection of timeless literary masterpieces, it revisits the most influential works that have shaped the world of storytelling, offering deep insights into the human experience through the lens of history’s greatest writers.",
+    image: "./books-images/book11.jpg",
   },
   {
-    title: 'The Da Vinci Code',
-    author: 'Dan Brown',
-    year: 2003,
-    genre: 'Mystery',
-    rating: 3.8,
+    title: "The Eye",
+    author: "Morgan Maxwell",
+    year: 2021,
+    genre: "mystery",
+    rating: 4.4,
     description:
-      'A gripping mystery thriller that follows Harvard symbologist Robert Langdon as he unravels the secrets of the Da Vinci Code.',
-    image: './books-images/unknown.jpg'
+      "A thought-provoking journey into the depths of consciousness, it invites you to unlock the hidden potential of your mind and explore the mysteries that shape your perception of reality.",
+    image: "./books-images/book12.jpg",
   },
   {
-    title: 'The Alchemist',
-    author: 'Paulo Coelho',
+    title: "The Alchemist",
+    author: "Paulo Coelho",
     year: 1988,
-    genre: 'Fiction',
+    genre: "fantasy",
     rating: 4.25,
     description:
-      'A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.',
-    image: './books-images/unknown.jpg'
+      "A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.",
+    image: "./books-images/alchemist.jpg",
   },
   {
-    title: 'The Hunger Games',
-    author: 'Suzanne Collins',
+    title: "The Hunger Games",
+    author: "Suzanne Collins",
     year: 2008,
-    genre: 'Science Fiction',
+    genre: "dystopian",
     rating: 4.3,
     description:
       "In a dystopian future, Katniss Everdeen becomes a symbol of rebellion when she volunteers to take her sister's place in the brutal Hunger Games.",
-    image: './books-images/unknown.jpg'
+    image: "./books-images/the-hunger-games-hunger-games.jpg",
   },
   {
-    title: 'The Girl with the Dragon Tattoo',
-    author: 'Stieg Larsson',
+    title: "The Girl with...",
+    author: "Stieg Larsson",
     year: 2005,
-    genre: 'Mystery',
+    genre: "crime-fiction",
     rating: 4.1,
     description:
-      'A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.',
-    image: './books-images/unknown.jpg'
+      "A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.",
+    image: "./books-images/the-girl-with-the-dragon-tattoo.jpg",
   },
   {
-    title: 'The Road',
-    author: 'Cormac McCarthy',
+    title: "The Road",
+    author: "Cormac McCarthy",
     year: 2006,
-    genre: 'Dystopian',
+    genre: "dystopian",
     rating: 4,
     description:
       "Set in a post-apocalyptic world, it follows a father and son's harrowing journey to survive and find safety.",
-    image: './books-images/unknown.jpg'
+    image: "./books-images/road.jpg",
   },
   {
-    title: "The Hitchhiker's Guide to the Galaxy",
-    author: 'Douglas Adams',
-    year: 1979,
-    genre: 'Science Fiction',
-    rating: 4.35,
+    title: "Little Women",
+    author: "Louisa May Alcott",
+    year: 1868,
+    genre: "fiction",
+    rating: 4.65,
     description:
-      "A comedic science fiction series that follows the misadventures of Arthur Dent after Earth's destruction.",
-    image: './books-images/unknown.jpg'
+      "With their father away at the Civil War,times are hard for the March sisters - Meg, Jo,Beth and Amy - and their mother, Marmee.",
+    image: "./books-images/little-women.jpg",
   },
   {
-    title: 'The Giver',
-    author: 'Lois Lowry',
+    title: "The Giver",
+    author: "Lois Lowry",
     year: 1993,
-    genre: 'Dystopian',
+    genre: "dystopian",
     rating: 4.12,
     description:
-      'A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.',
-    image: './books-images/unknown.jpg'
+      "A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.",
+    image: "./books-images/the-giver.jpg",
+  },
+];
+
+// Function to display books in the HTML
+// Takes an array of book objects and displays them in the #book-list element
+const displayBooks = (books) => {
+  const bookList = document.getElementById("book-list");
+  bookList.innerHTML = ""; // Clear existing content
+  // Iterate through each book object in the books array
+  books.forEach((book) => {
+    // Create an HTML template for each book and add it to the bookList
+    const bookItem = `
+      <div class="book-item">
+        <img src="${book.image}" alt="${book.title}" />
+        <p>${book.title}<br /><small>${book.author}</small></p>
+        <p>${book.year}</p>
+        <p>${book.genre}</p>
+        <p>Rating: ${book.rating}</p>
+      </div>
+    `;
+    // Append the book item to the bookList
+    bookList.innerHTML += bookItem;
+  });
+};
+
+// Function to sort books based on the selected sort option
+// Takes a sort option string and sorts the books array accordingly
+const sortBooks = (sortOption) => {
+  let sortedBooks = [...books]; // Create a copy of the books array
+  // Sort books alphabetically by title (A-Z)
+  if (sortOption === "titleAZ") {
+    sortedBooks.sort((a, b) => a.title.localeCompare(b.title));
+    // Sort books alphabetically by title (Z-A)
+  } else if (sortOption === "titleZA") {
+    sortedBooks.sort((a, b) => b.title.localeCompare(a.title));
+    // Sort books by publication year (Newest to Oldest)
+  } else if (sortOption === "yearNewest") {
+    sortedBooks.sort((a, b) => b.year - a.year);
+    // Sort books by publication year (Oldest to Newest)
+  } else if (sortOption === "yearOldest") {
+    // Sort books by rating (Highest to Lowest)
+    sortedBooks.sort((a, b) => a.year - b.year);
+  } else if (sortOption === "ratingHighest") {
+    // Sort books by rating (Lowest to Highest)
+    sortedBooks.sort((a, b) => b.rating - a.rating);
+  } else if (sortOption === "ratingLowest") {
+    sortedBooks.sort((a, b) => a.rating - b.rating);
   }
-]
 
-const recipes = [
-  {
-    name: 'Individual vegetarian lasagnes',
-    cuisineType: ['italian'],
-    ingredients: [
-      '1.2 kg cherry tomatoes',
-      '5 sprigs of fresh thyme',
-      'extra virgin olive oil',
-      '2 shallots',
-      '2 cloves of garlic',
-      '500 g baby spinach',
-      '8-12 fresh or dried lasagne sheets',
-      '350 g ricotta cheese',
-      'WHITE SAUCE',
-      '600 ml milk',
-      '25 g unsalted butter',
-      '2 heaped tablespoons flour',
-      '150 g vegetarian sharp, mature cheese',
-      '100 g mozzarella'
-    ],
-    source: 'Jamie Oliver',
-    totalTime: 130,
-    url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/',
-    image: './recipe-images/individual-vegetarian-lasagnes.jpg'
-  },
-  {
-    name: 'Vegetarian Stir-Fried Garlic Scape',
-    cuisineType: ['Balanced'],
-    ingredients: [
-      '8 oz. garlic scapes',
-      '3 oz. baby corn',
-      '3 oz. carrots',
-      '1 oz. dried shiitake mushrooms',
-      '1 clove of garlic sliced thinly',
-      '3 slices of fresh ginger root',
-      '2 tablespoons vegetable oil',
-      '1/4 cup shaoxing cooking wine',
-      '1/4 vegetarian stock or water',
-      '1 tablespoon light soy sauce',
-      '1 teaspoon sugar',
-      '1 teaspoon cornstarch',
-      '1/4 teaspoon ground white pepper'
-    ],
-    source: 'Red Cook',
-    totalTime: null,
-    url: 'http://redcook.net/2010/06/16/garlic-scape-an-off-menu-treat/',
-    image: './recipe-images/vegetarian-stir-fried-garlic-s.jpg'
-  },
-  {
-    name: 'Cheat’s cheesy focaccia',
-    cuisineType: ['Italian'],
-    ingredients: [
-      '500g pack bread mix',
-      '2 tbsp olive oil , plus a little extra for drizzling',
-      '25g parmesan (or vegetarian alternative), grated',
-      '75g dolcelatte cheese (or vegetarian alternative)'
-    ],
-    source: 'BBC Good Food',
-    totalTime: 40,
-    url: 'https://www.bbcgoodfood.com/recipes/cheats-cheesy-focaccia',
-    image: './recipe-images/cheat’s-cheesy-focaccia.jpg'
-  },
-  {
-    name: "Vegetarian Shepherd's Pie",
-    cuisineType: ['Balanced', 'High-Fiber'],
-    ingredients: [
-      '2 tablespoons extra-virgin olive oil',
-      '1 large onion, finely diced',
-      '2 carrots, peeled and thinly sliced',
-      '2 celery stalks, thinly sliced',
-      '10 ounces cremini mushrooms, trimmed and sliced',
-      '1 tablespoon tomato paste',
-      "1 tablespoon vegetarian Worcestershire sauce, such as Annie's Naturals",
-      '1 dried bay leaf',
-      '1 cup French green lentils, picked over',
-      'Kosher salt and freshly ground pepper',
-      '1 cup frozen peas',
-      '2 pounds Yukon Gold potatoes, scrubbed and cut into 1 1/2-inch pieces',
-      '4 cloves garlic',
-      '4 tablespoons unsalted butter',
-      '1/2 cup whole milk, warmed'
-    ],
-    source: 'Martha Stewart',
-    totalTime: 120,
-    url: 'https://www.marthastewart.com/1535235/vegetarian-shepherds-pie',
-    image: "./recipe-images/vegetarian-shepherd's-pie.jpg"
-  },
-  {
-    name: 'Chicken Paprikash',
-    cuisineType: ['Low-Carb'],
-    ingredients: [
-      '640 grams chicken - drumsticks and thighs ( 3 whole chicken legs cut apart)',
-      '1/2 teaspoon salt',
-      '1/4 teaspoon black pepper',
-      '1 tablespoon butter – cultured unsalted (or olive oil)',
-      '240 grams onion sliced thin (1 large onion)',
-      '70 grams Anaheim pepper chopped (1 large pepper)',
-      '25 grams paprika (about 1/4 cup)',
-      '1 cup chicken stock',
-      '1/2 teaspoon salt',
-      '1/2 cup sour cream',
-      '1 tablespoon flour – all-purpose'
-    ],
-    source: 'No Recipes',
-    totalTime: 80,
-    url: 'http://norecipes.com/recipe/chicken-paprikash/',
-    image: './recipe-images/chicken-paprikash.jpg'
-  },
-  {
-    name: 'Baked Chicken',
-    cuisineType: ['american'],
-    ingredients: [
-      '6 bone-in chicken breast halves, or 6 chicken thighs and wings, skin-on',
-      '1/2 teaspoon coarse salt',
-      '1/2 teaspoon Mrs. Dash seasoning',
-      '1/4 teaspoon freshly ground black pepper'
-    ],
-    source: 'Martha Stewart',
-    totalTime: 90,
-    url: 'http://www.marthastewart.com/318981/baked-chicken',
-    image: './recipe-images/baked-chicken.jpg'
-  },
-  {
-    name: 'Deep Fried Fish Bones',
-    cuisineType: ['south east asian'],
-    ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'],
-    source: 'Serious Eats',
-    totalTime: 31,
-    url: 'http://www.seriouseats.com/recipes/2011/03/deep-fried-fish-bones-recipe.html',
-    image: './recipe-images/deep-fried-fish-bones.jpg'
-  },
-  {
-    name: 'Burnt-Scallion Fish',
-    cuisineType: ['chinese'],
-    ingredients: [
-      '2 bunches scallions',
-      '8 tbsp. butter',
-      '2 8-oz. fish filets'
-    ],
-    source: 'Saveur',
-    totalTime: 70,
-    url: 'http://www.saveur.com/article/Recipes/Burnt-Scallion-Fish',
-    image: './recipe-images/fish-dish.jpg'
-  },
-  {
-    name: 'Curry-Crusted Fish',
-    cuisineType: ['south east asian'],
-    ingredients: [
-      '3 slices bread , about 85g/3oz in total',
-      '1 lime',
-      '1.0 tbsp Korma curry paste',
-      '4 thick white fish fillets'
-    ],
-    source: 'BBC Good Food',
-    totalTime: 80,
-    url: 'http://www.bbcgoodfood.com/recipes/4717/',
-    image: './recipe-images/fish-dish.jpg'
-  },
-  {
-    name: 'Meat Stock',
-    cuisineType: 'american',
-    ingredients: [
-      '2.5 pounds beef marrow bones',
-      '1 large onion, quartered',
-      '2 carrots, sliced',
-      '1 leek, cleaned and sliced',
-      '2 celery stalks, sliced',
-      '2.5 pounds organic beef stew meat, cubed',
-      '2 tablespoons tomato paste',
-      '5 cloves garlic',
-      '2 bay leaves',
-      '3 sprigs thyme',
-      '3 sprigs Italian parsley',
-      '1/2 teaspoon black peppercorns'
-    ],
-    source: 'Food52',
-    totalTime: 60,
-    url: 'https://food52.com/recipes/3712-meat-stock',
-    image: './recipe-images/meat.jpg'
-  },
-  {
-    name: 'Homemade Meat Broth',
-    cuisineType: 'american',
-    ingredients: [
-      '1 teaspoon salt',
-      '1 carrot, peeled',
-      '1 medium onion, peeled',
-      '2 or 3 celery stalks',
-      '¼ red or yellow bell pepper, stripped of all its seeds',
-      '1 small boiling potato, peeled',
-      '1 ripe, fresh tomato, or 1 canned Italian plum tomato, drained of juice',
-      '5 pounds assorted pieces of meat and bones (see meat suggestions above), of which no less than 1½ pounds is all meat'
-    ],
-    source: 'Cookstr',
-    totalTime: 60,
-    url: 'http://www.cookstr.com/recipes/il-brodo-homemade-meat-broth',
-    image: './recipe-images/meat.jpg'
-  },
-  {
-    name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe',
-    cuisineType: 'south-american',
-    ingredients: [
-      '1 tablespoon whole black peppercorns, toasted',
-      '1 teaspoon coriander seed, toasted',
-      '1 teaspoon fennel seed, toasted',
-      '1 teaspoon cumin pods, toasted',
-      '1 teaspoon red pepper flakes',
-      '1/2 teaspoon dried oregano',
-      '2 medium cloves garlic, minced (about 2 teaspoons)',
-      '2 tablespoons vegetable or canola oil',
-      '1 whole flap meat steak, 2 to 2 1/2 pounds',
-      'Kosher salt'
-    ],
-    source: 'Serious Eats',
-    totalTime: 240,
-    url: 'http://www.seriouseats.com/recipes/2012/05/spice-rubbed-grilled-flap-meat-sirloin-tip-recipe.html',
-    image: './recipe-images/grilled.jpg'
+  // Display the sorted books
+  displayBooks(sortedBooks);
+};
+
+const toggleDropdown = () => {
+  const dropdown = document.getElementById("sort-dropdown");
+
+  if (dropdown.style.display === "none" || dropdown.style.display === "") {
+    dropdown.style.display = "block"; // Show the dropdown
+  } else {
+    dropdown.style.display = "none"; // Hide the dropdown
   }
-]
+};
+
+// Set up event listeners
+document.addEventListener("DOMContentLoaded", () => {
+  const sortButton = document.getElementById("sort-button");
+  const sortDropdown = document.getElementById("sort-dropdown");
+
+  // Show/hide the dropdown on button click
+  sortButton.addEventListener("click", toggleDropdown);
+
+  // Listen for changes in the dropdown
+  sortDropdown.addEventListener("change", () => {
+    const selectedOption = sortDropdown.value;
+    sortBooks(selectedOption); // Sort and display books
+    sortDropdown.style.display = "none"; // Hide the dropdown after selection
+  });
+
+  // Display the initial unsorted list of books
+  displayBooks(books);
+});
+
+// Function to filter books by genre
+const filterBooks = () => {
+  const selectedGenre = genreDropdown.value;
+
+  // Filter the books based on the selected genre
+  const filteredList = books.filter(
+    (book) => book.genre.toLowerCase() === selectedGenre.toLowerCase()
+  );
+
+  // Display the filtered list
+  displayBooks(filteredList);
+
+  // Hides dropdown after a genre has been selected
+  dropdownMenu.classList.remove("show");
+};
+
+const genreButton = document.getElementById("genre-button");
+const dropdownMenu = document.getElementById("dropdown-menu");
+const genreDropdown = document.getElementById("filter-dropdown");
+
+// Eventlistener for the "Genre" button to toggle the dropdown
+genreButton.addEventListener("click", () => {
+  dropdownMenu.classList.toggle("show");
+});
+
+// Eventlistener for the genre dropdown to filter books
+genreDropdown.addEventListener("change", filterBooks);
+
+displayBooks(books);
+
+// Function to filter books by title based on user input
+const searchBooksByTitle = (searchTerm) => {
+  const filteredBooks = books.filter((book) =>
+    book.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Hide the hero section, the bestsellers title and the buttons when searched
+  document.querySelector(".hero").style.display = "none";
+  document.querySelector(".bestsellers-header h2").style.display = "none";
+  document.querySelector(".sort-btn").style.display = "none";
+  document.querySelector(".genre-btn").style.display = "none";
+
+  if (filteredBooks.length === 0) {
+    // Clear the book list and display a message while keeping the header
+    const bookList = document.getElementById("book-list");
+    bookList.innerHTML = `
+      <div style=
+        "display: flex; 
+        justify-content: center; 
+        align-items: center; 
+        height: 300px; 
+        width: 100%; 
+        background-color: white;">
+        <p>No books with such search term</p>
+      </div>
+    `;
+  } else {
+    // Display filtered books in the bestsellers list
+    displayBooks(filteredBooks);
+  }
+};
+
+// Adding event listener for the search button click
+document.querySelector(".search-button").addEventListener("click", () => {
+  const searchInput = document.querySelector(".search-box input").value;
+  searchBooksByTitle(searchInput);
+});
diff --git a/style.css b/style.css
index e69de29..19adde9 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,935 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "PT Serif", serif;
+}
+
+body {
+  background-color: #ffffff;
+  color: #333;
+  overflow-x: hidden;
+  /* Disable horizontal scrolling */
+}
+
+header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #ffffff;
+  padding: 20px 50px;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar ul {
+  list-style-type: none;
+  display: flex;
+  gap: 20px;
+}
+
+.navbar ul li a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+}
+
+.search-signin {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  /* Space between elements */
+}
+
+/* Style for the search button to match the Explore Now button */
+.search-button {
+  padding: 10px 20px;
+  background-color: #333;
+  color: #f8efe4;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+}
+
+.search-button:hover {
+  background-color: #555;
+  color: #fff;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #333;
+  /* Bottom border for search input */
+  padding-bottom: 5px;
+  /* Space below the input */
+}
+
+.search-box input {
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-family: "PT Serif", serif;
+  /* Consistent font */
+  width: 200px;
+  /* Adjust width of input field */
+}
+
+.search-box input::placeholder {
+  color: #333;
+  /* Placeholder color */
+  background-color: transparent;
+}
+
+.search-signin span {
+  color: #333;
+}
+
+.signin-link {
+  text-decoration: none;
+  font-size: 14px;
+  font-family: "PT Serif", serif;
+  color: #333;
+  font-weight: bold;
+}
+
+.hero {
+  background-color: #f8efe4;
+  padding: 50px;
+  overflow: hidden;
+  /* Hide any overflow caused by child elements */
+  margin: 0;
+}
+
+.hero-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  margin: 0;
+}
+
+.text-content {
+  max-width: 40%;
+}
+
+.text-content h2 {
+  font-size: 3em;
+  font-family: "PT Serif", serif;
+  /* Make sure it's PT Serif */
+  font-weight: 700;
+  /* Bold the h2 */
+}
+
+.text-content p {
+  margin: 20px 0;
+  font-size: 1.2em;
+  font-family: "PT Serif", serif;
+  font-weight: 400;
+  /* Regular for paragraphs */
+}
+
+.text-content button {
+  padding: 10px 20px;
+  background-color: #333;
+  color: #f8efe4;
+  border: none;
+}
+
+.text-content button:hover {
+  background-color: #555;
+  /* Darker hover effect */
+  color: #fff;
+}
+
+.book-slider {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.book-slider .book {
+  text-align: center;
+  position: relative;
+}
+
+.book-slider .book img {
+  width: 180px;
+  height: 300px;
+  object-fit: cover;
+  border: 1px solid #ddd;
+  display: block;
+  margin: 0 auto;
+}
+
+.book-slider .book p {
+  margin-top: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+  font-family: "PT Serif", serif;
+  /* Regular for book titles */
+  font-weight: 400;
+}
+
+.book-slider .framed img {
+  border-radius: 100px 100px 0 0;
+}
+
+/* Middle book (reverse-rounded, bottom-rounded) */
+.book-slider .framed.reverse img {
+  border-radius: 0 0 100px 100px;
+}
+
+.book-slider .book.reverse p {
+  position: static;
+  margin-bottom: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+  font-family: "PT Serif", serif;
+}
+
+.bestsellers {
+  background-color: #f4f4f4;
+  padding: 50px;
+}
+
+.bestsellers-header {
+  display: flex;
+  justify-content: center;
+  /* Center the "Bestsellers" heading */
+  position: relative;
+  /* Allows for absolute positioning of buttons */
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.bestsellers h2 {
+  margin: 0;
+  font-size: 2em;
+  font-family: "PT Serif", serif;
+  font-weight: 700;
+  text-align: center;
+  /* Center the heading */
+}
+
+.sort-filter {
+  position: absolute;
+  /* Position the buttons to the right */
+  right: 0;
+  /* Align the buttons to the right side */
+  display: flex;
+  gap: 15px;
+  /* Space between the buttons */
+}
+
+.sort-filter button {
+  padding: 10px 20px;
+  /* Same padding as "Explore Now" button */
+  background-color: #333;
+  color: #f8efe4;
+  border: none;
+}
+
+.sort-filter button:hover {
+  background-color: #555;
+  /* Darker background on hover */
+  color: #fff;
+  /* White text on hover */
+}
+
+.book-list {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 30px;
+  overflow-x: auto;
+  /* Enable horizontal scrolling */
+  white-space: nowrap;
+  /* Prevent items from wrapping */
+  padding-bottom: 10px;
+  /* Space below items */
+  flex-wrap: wrap;
+  /* Allows items to wrap to the next line if necessary */
+}
+
+.book-item {
+  flex: 1 1 calc(25% - 10px);
+  /* 4 columns on larger screens with reduced gap */
+  text-align: center;
+  margin: 5px 0;
+  /* Reduced margin */
+}
+
+.book-item img {
+  width: 150px;
+  height: 220px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.book-item button {
+  padding: 5px 15px;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.book-item button:hover {
+  background-color: #555;
+  /* Darker background on hover */
+}
+
+.dropdown-button {
+  position: relative;
+  /* Ensures that dropdown menu is positioned relative to this button */
+}
+
+.dropdown-menu {
+  display: none;
+  /* Hidden by default */
+  position: absolute;
+  top: 100%;
+  /* Align below the button */
+  right: 0;
+  /* Align with the right edge of the button */
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  width: 200px;
+  /* Adjust width to match button */
+}
+
+.dropdown-menu select {
+  width: 100%;
+  padding: 10px;
+  border: none;
+}
+
+#sort-dropdown {
+  position: absolute;
+  top: 100%;
+  /* Ensures the dropdown appears right below the button */
+  left: 0;
+  /* Aligns the dropdown with the left side of the button */
+  background-color: #fff;
+  /* Sets a white background for the dropdown */
+
+  border: 1px solid #ccc;
+  /* Adds a light border for visibility */
+  display: none;
+  /* Hidden by default, shown when the button is clicked */
+  width: 100px;
+  /* Ensures the dropdown has a fixed width */
+  padding: 10px;
+  /* Adds padding inside the dropdown for spacing */
+  appearance: none;
+  /* Remove the default styling */
+  -webkit-appearance: none;
+  /* For Safari */
+  -moz-appearance: none;
+  /* For Firefox */
+  cursor: pointer;
+}
+
+#sort-dropdown:focus {
+  outline: none;
+  color: #555;
+  /* Custom focus border */
+  background-color: #fff;
+  /* Prevent background color change */
+}
+
+#sort-dropdown option:checked {
+  background-color: #555;
+  /* Background color for the selected option */
+  color: #fff;
+  /* Text color for the selected option */
+}
+
+/* Sort button */
+.sort-btn,
+.genre-btn {
+  padding: 10px 20px;
+  background-color: #333;
+  color: #f8efe4;
+  border: none;
+  width: 100px;
+  /* Same width for both the button and the dropdown */
+  text-align: center;
+  cursor: pointer;
+}
+
+.sort-btn:hover,
+.genre-btn:hover {
+  background-color: #555;
+  /* Darker background on hover */
+}
+
+/* Custom arrow for the dropdown */
+#sort-dropdown {
+  appearance: none;
+
+  background-repeat: no-repeat;
+  background-position: right 10px top 50%;
+  padding-right: 30px;
+  /* Adjust to make space for the arrow */
+}
+
+/* Hover effect for options */
+#sort-dropdown option:hover {
+  background-color: #ddd;
+  /* Add hover effect on options */
+}
+
+.dropdown-item {
+  padding: 8px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.dropdown-item:hover {
+  background-color: #f0f0f0;
+}
+
+.book-item p.title {
+  max-width: 150px;
+  /* Set a maximum width for the title */
+  height: 50px;
+  /* Fixed height */
+  overflow: hidden;
+  /* Hide the overflowed text */
+  text-overflow: ellipsis;
+  /* Add ellipsis (...) if text is too long */
+  white-space: nowrap;
+  /* Ensure text remains in a single line */
+  text-align: center;
+  /* Center the text */
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bestsellers {
+  background-color: #f4f4f4;
+  padding: 20px;
+  /* Adjust this value to reduce padding */
+  margin: 0;
+  /* Ensure there's no margin */
+}
+
+.bestsellers-header {
+  margin: 0;
+  /* Remove any margin around the header */
+  padding: 0;
+  /* Ensure there's no extra padding */
+}
+
+.sort-filter {
+  margin-top: 0;
+  /* Remove top margin for the button container */
+}
+
+/* Genre Button and Dropdown */
+.genre-filter {
+  position: relative;
+}
+
+.genre-btn {
+  padding: 10px 20px;
+  background-color: #333;
+  color: #f8efe4;
+  border: none;
+  width: 100px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.genre-btn:hover {
+  background-color: #555;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.dropdown-content.show {
+  display: block;
+  /* Show dropdown when 'show' class is added */
+}
+
+.dropdown-content select {
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+  width: 100px;
+}
+
+.dropdown-content select:focus {
+  outline: none;
+  color: #555;
+  background-color: #fff;
+}
+
+.dropdown-content option:hover {
+  background-color: #ddd;
+}
+
+.dropdown-content option:checked {
+  background-color: #555;
+  color: #fff;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Small devices (Mobile phones) -----------------------------------------*/
+@media (max-width: 600px) {
+  .hero-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .text-content {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .book-slider .book img {
+    width: 120px;
+    height: 180px;
+  }
+
+  .book-item img {
+    width: 100px;
+    height: 150px;
+  }
+
+  .hero-content {
+    flex-direction: row;
+  }
+
+  .book-slider .book img {
+    width: 150px;
+    height: 220px;
+  }
+
+  .book-item img {
+    width: 120px;
+    height: 180px;
+  }
+
+  .book-item {
+    flex: 1 1 calc(50% - 20px);
+    /* 2 columns on small screens (600px and below) */
+    margin: 0;
+    /* Adjust margin to prevent overflow */
+  }
+}
+
+/* Large devices (Desktops) */
+@media (min-width: 1024px) {
+  .hero-content {
+    flex-direction: row;
+  }
+
+  .book-slider .book img {
+    width: 180px;
+    height: 300px;
+  }
+
+  .book-item img {
+    width: 150px;
+    height: 220px;
+  }
+}
+
+.book-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: space-between;
+}
+
+.book-item {
+  flex: 1 1 calc(16.66% - 20px);
+  /* 6 columns on larger screens */
+  text-align: center;
+  margin: 0;
+}
+
+/* Medium devices (Tablets, iPads) */
+@media (max-width: 1024px) {
+  .book-item {
+    flex: 1 1 calc(25% - 20px);
+    /* 4 columns on tablets */
+  }
+}
+
+/* 1 column for screens smaller than or equal to 400px */
+@media (max-width: 400px) {
+  .divider {
+    display: none;
+    /* Hides the element */
+  }
+
+  .book-item {
+    flex: 1 1 100%;
+    /* 1 column on very small screens (400px and below) */
+  }
+}
+
+/* ------------------------------------------------------------ */
+@media (max-width: 740px) {
+  .divider {
+    display: none;
+    /* Hides the element */
+  }
+
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+    /* Align logo and menu items to the left */
+    padding-left: 0;
+    /* Remove excessive padding */
+  }
+
+  .navbar ul {
+    flex-direction: column;
+    /* Stack the navigation links vertically */
+    gap: 10px;
+    /* Reduce the gap */
+    margin-top: 20px;
+    /* Add space below the logo */
+  }
+
+  .logo {
+    margin-bottom: 10px;
+    /* Space between logo and wishlist/search */
+  }
+
+  /* Search and sign-in button alignment */
+  .search-signin {
+    flex-direction: column;
+    align-items: flex-start;
+    /* Align search bar and sign-in vertically */
+    margin-top: 10px;
+  }
+
+  .search-box {
+    width: 100%;
+    /* Full width for the search input */
+  }
+
+  .search-box input {
+    width: 80%;
+    /* Adjust input field width for smaller screens */
+  }
+
+  .search-button {
+    width: 100%;
+    /* Full width for search button */
+    margin-top: 10px;
+  }
+
+  .hero {
+    padding: 20px;
+    /* Reduce padding */
+  }
+
+  .hero-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .text-content {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .text-content h2 {
+    font-size: 2em;
+    /* Smaller font for heading */
+  }
+
+  .text-content p {
+    font-size: 1em;
+    /* Adjust paragraph font size */
+  }
+
+  .book-slider .book img {
+    width: 120px;
+    height: 180px;
+  }
+
+  .book-item img {
+    width: 100px;
+    height: 150px;
+  }
+
+  .sort-filter {
+    display: block;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .sort-filter button,
+  .sort-filter select {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .book-item {
+    flex: 1 1 calc(50% - 20px);
+    /* 2 columns on small screens */
+  }
+}
+
+@media (max-width: 400px) {
+  .hero-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .text-content h2 {
+    font-size: 1.8em;
+    /* Further reduce font size */
+  }
+
+  .book-item img {
+    width: 80px;
+    height: 120px;
+    /* Smaller book images */
+  }
+
+  .book-item {
+    flex: 1 1 100%;
+    /* 1 column on very small screens */
+  }
+
+  .sort-filter {
+    display: flex;
+    flex-direction: column;
+    /* Stack buttons in a column * /
+    justify-content: center; /* Center them horizontally */
+    gap: 1px;
+    padding: 0;
+    margin: 0;
+    /* Add space above the buttons */
+  }
+
+  .sort-filter button {
+    width: auto;
+    /* Auto width for the buttons */
+    padding: 10px 20px;
+  }
+
+  .bestsellers-header {
+    text-align: center;
+    /* Center align the "Bestsellers" heading */
+    padding-top: 20px;
+    /* Add space above the heading if necessary */
+  }
+
+  .bestsellers {
+    text-align: center;
+    /* Center align the content in the section */
+  }
+}
+
+/* -------------------------------------------------- */
+/* Medium-small screens (600px to 868px) */
+@media (min-width: 600px) and (max-width: 970px) {
+
+  .divider,
+  .search-box {
+    display: none;
+    /* Hide the divider and search-box */
+  }
+
+  .sort-filter {
+    display: flex;
+    flex-direction: row;
+    /* Keep them side by side */
+    justify-content: center;
+    /* Center horizontally */
+    gap: 10px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    /* Add some space above */
+  }
+
+  .bestsellers-header {
+    flex-direction: column;
+    /* Stack the buttons and heading vertically */
+    align-items: center;
+  }
+}
+
+/* ---------------------------------------------------------- */
+@media (max-width: 950px) and (min-width: 678px) {
+  .hero-content {
+    flex-direction: column;
+    /* Stack the heading and images vertically */
+    align-items: center;
+  }
+
+  .text-content {
+    text-align: center;
+    /* Center the heading text */
+    margin-bottom: 20px;
+    /* Add spacing below the heading */
+  }
+}
+
+/* ----------------------- */
+
+/* Keep buttons horizontal for screens between 500px and 600px */
+@media (max-width: 600px) and (min-width: 535px) {
+  .sort-filter {
+    display: flex;
+    flex-direction: row;
+    /* Keep buttons in a row */
+    justify-content: center;
+    /* Center them horizontally */
+    gap: 10px;
+    /* Adjust the gap between buttons */
+    margin-bottom: 20px;
+    margin-top: 10px;
+  }
+
+  .sort-filter button {
+    padding: 10px 20px;
+    font-size: 13px;
+    /* Adjust font size for small screens */
+  }
+}
+
+/* ------------------------------------------------ */
+/* One column layout with larger images for screens 535px and below */
+@media (max-width: 535px) {
+  .book-item {
+    flex: 1 1 100%;
+    /* Display images in one column */
+    margin: 0;
+  }
+
+  .book-item img {
+    width: 100%;
+    /* Set image width to 100% of its container */
+    height: auto;
+    /* Allow height to adjust automatically */
+    max-width: 300px;
+    /* Optionally, set a maximum width for the images */
+    object-fit: cover;
+    /* Ensure the images cover their containers */
+  }
+
+  .sort-filter {
+    flex-direction: column;
+    /* Stack buttons vertically */
+    gap: 10px;
+  }
+
+  .sort-filter button {
+    width: 100%;
+    /* Make buttons full width */
+    padding: 10px 20px;
+    /* Adjust padding */
+  }
+}
+
+/* ----------------------------------------- */
+/* Hide book images in the hero section for screens between 320px and 410px */
+@media (max-width: 410px) and (min-width: 320px) {
+  .hero-content .book-slider {
+    display: none;
+    /* Hide the book images */
+  }
+
+  .hero-content {
+    flex-direction: column;
+    /* Stack the remaining content vertically */
+    align-items: center;
+    padding: 20px;
+    /* Adjust padding for the hero section */
+  }
+
+  .text-content {
+    max-width: 100%;
+    /* Ensure the text takes full width */
+    text-align: center;
+    /* Center-align the text */
+  }
+
+  .text-content h2 {
+    font-size: 2em;
+    /* Adjust heading size for smaller screens */
+    margin-bottom: 10px;
+    /* Add some spacing */
+  }
+
+  .text-content p {
+    font-size: 1em;
+    /* Adjust paragraph font size */
+    margin-bottom: 10px;
+  }
+
+  .text-content button {
+    padding: 10px 20px;
+    /* Adjust button padding */
+    font-size: 1em;
+  }
+}
+
+/* -------------------------------- */
+/* Hide Sort and Genre buttons for screens 535px and below */
+@media (max-width: 740px) {
+  .sort-filter {
+    display: none;
+    /* Hides the Sort and Genre buttons */
+  }
+}
+
+/* ------------------------------------ */
+/* Medium screens: 740px to 600px */
+@media (max-width: 740px) and (min-width: 600px) {
+  .book-list {
+    display: flex;
+    flex-wrap: wrap;
+    /* Ensure items can wrap to the next line */
+    justify-content: space-between;
+    /* Distribute space evenly */
+  }
+
+  .book-item {
+    flex: 1 1 calc(33.33% - 20px);
+    /* 3 columns with space between */
+    margin: 10px 0;
+    /* Optional: Add margin for spacing */
+  }
+}
+
+@media screen and (max-width: 500px) {
+  nav {
+    display: none;
+    /* This hides the navigation bar */
+  }
+}
\ No newline at end of file