diff --git a/frontend/app/components/BookCard/BookCard.tsx b/frontend/app/components/BookCard/BookCard.tsx
index b8533a6..99283c3 100644
--- a/frontend/app/components/BookCard/BookCard.tsx
+++ b/frontend/app/components/BookCard/BookCard.tsx
@@ -1,5 +1,6 @@
 import { BookCover } from "~/components/BookCover/BookCover";
 import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/Card";
 import type { Book } from "~/api/types";
 import { Link, useSearchParams } from "react-router";
 
@@ -11,27 +12,29 @@ function BookCard({ book }: BookCardProps) {
   const [searchParams] = useSearchParams();
 
   return (
-    <article className="relative flex flex-col h-full box-border bg-card rounded-md border-2 border-transparent hover:border-border">
-      <FavoriteButton book={book} />
-
+    <Card className="group relative h-full bg-card p-0 transition-all duration-200 hover:shadow-xl has-[a:focus-visible]:border-ring has-[a:focus-visible]:ring-[3px] has-[a:focus-visible]:ring-ring/50">
       <Link
         to={{
           pathname: `/book/${book.id}`,
           search: searchParams.toString(),
         }}
-        className="flex flex-1 flex-col h-full w-full cursor-pointer box-border rounded-md p-6"
-
+        className="flex h-full flex-col cursor-pointer p-6 rounded-xl"
         aria-label={`View details for ${book.title}`}
       >
         <BookCover book={book} />
 
-        <section className="mt-4 text-[0.9rem]">
-          <h3 className="mb-2 text-base">{book.title}</h3>
+        <CardHeader className="mt-4">
+          <CardTitle className="font-bold">{book.title}</CardTitle>
+        </CardHeader>
+
+        <CardContent className="mt-2">
           <p>{book.author.join(", ")}</p>
           <p>{book.publishedYear ?? "Unknown"}</p>
-        </section>
+        </CardContent>
       </Link>
-    </article>
+
+      <FavoriteButton book={book} />
+    </Card>
   );
 }
 
diff --git a/frontend/app/components/BookCover/BookCover.tsx b/frontend/app/components/BookCover/BookCover.tsx
index 50559bc..63bb816 100644
--- a/frontend/app/components/BookCover/BookCover.tsx
+++ b/frontend/app/components/BookCover/BookCover.tsx
@@ -6,11 +6,15 @@ interface BookCoverProps {
 
 function BookCover({ book }: BookCoverProps) {
   return book.coverImage ? (
-    <img
-      src={book.coverImage}
-      alt={`Book cover of ${book.title}`}
-      className="w-full object-contain px-6 py-3"
-    />
+    <figure className="px-6 py-3 contain-content">
+      <picture className="block overflow-hidden">
+        <img
+          src={book.coverImage}
+          alt={`Book cover of ${book.title}`}
+          className="w-full object-contain transition-transform duration-200 group-hover:scale-103"
+        />
+      </picture>
+    </figure>
   ) : (
     <p className="flex items-center justify-center mx-6 my-3 aspect-2/3 rounded-md bg-background text-center text-sm">
       No cover available
diff --git a/frontend/app/components/BookDescription/BookDescription.tsx b/frontend/app/components/BookDescription/BookDescription.tsx
new file mode 100644
index 0000000..14a26bc
--- /dev/null
+++ b/frontend/app/components/BookDescription/BookDescription.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { Button } from "~/components/ui/Button";
+import { cn } from "~/lib/utils";
+
+const DESCRIPTION_PREVIEW_LENGTH = 650;
+
+interface BookDescriptionProps {
+  description?: string | null;
+}
+
+function BookDescription({ description }: BookDescriptionProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const text = description ?? "No description available";
+  const isLong = text.length > DESCRIPTION_PREVIEW_LENGTH;
+
+  return (
+    <>
+      <p className={cn("leading-relaxed", isLong && !expanded && "line-clamp-8")}>{text}</p>
+      {isLong && (
+        <Button
+          type="button"
+          variant="link"
+          className="px-0 text-foreground/80 hover:text-foreground"
+          aria-expanded={expanded}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Read less" : "Read more"}
+        </Button>
+      )}
+    </>
+  );
+}
+
+export { BookDescription };
diff --git a/frontend/app/components/Pagination/Pagination.test.tsx b/frontend/app/components/BookPagination/BookPagination.test.tsx
similarity index 90%
rename from frontend/app/components/Pagination/Pagination.test.tsx
rename to frontend/app/components/BookPagination/BookPagination.test.tsx
index 52f2a94..2995348 100644
--- a/frontend/app/components/Pagination/Pagination.test.tsx
+++ b/frontend/app/components/BookPagination/BookPagination.test.tsx
@@ -1,18 +1,18 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Pagination } from "~/components/Pagination/Pagination";
+import { BookPagination } from "~/components/BookPagination/BookPagination";
 import { createRoutesStub } from "react-router";
 
 // Pagination reads and writes the current page in the "page" search param.
 const Stub = createRoutesStub([
   {
     path: "/",
-    Component: () => <Pagination totalPages={5} />,
+    Component: () => <BookPagination totalPages={5} />,
   },
 ]);
 
-describe("Pagination", () => {
+describe("BookPagination", () => {
   it("disables Previous on the first page and Next on the last page", () => {
     const { unmount } = render(<Stub />);
 
diff --git a/frontend/app/components/BookPagination/BookPagination.tsx b/frontend/app/components/BookPagination/BookPagination.tsx
new file mode 100644
index 0000000..569195a
--- /dev/null
+++ b/frontend/app/components/BookPagination/BookPagination.tsx
@@ -0,0 +1,109 @@
+import { useSearchParams } from "react-router";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "~/components/ui/Pagination";
+
+const DISABLED_STYLE = "pointer-events-none opacity-50";
+
+function BookPagination({ totalPages }: { totalPages: number }) {
+  const [searchParams] = useSearchParams();
+  const currentPage = parseInt(searchParams.get("page") ?? "1");
+
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  // Pages around the current page (one before, current, one after)
+  // For each page in the list, keep only page numbers larger than 1 and less than the last page
+  const middlePages = [currentPage - 1, currentPage, currentPage + 1].filter(
+    (page) => page > 1 && page < totalPages,
+  );
+
+  // Show ellipsis when there is a gap between the first/last page and the middle pages
+  const showStartEllipsis = currentPage > 3;
+  const showEndEllipsis = currentPage < totalPages - 2;
+
+  // Only show the last page separately if there is more than 1 page, so page 1 is not rendered twice
+  const showLastPage = totalPages > 1;
+
+  const getValidPage = (page: number) => {
+    if (page < 1) return 1;
+    if (page > totalPages) return totalPages;
+    return page;
+  };
+
+  // Copy the current search params and update only the page parameter
+  const getPageLink = (page: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", getValidPage(page).toString());
+    return { search: params.toString() };
+  };
+
+  const handlePageChange = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const renderPageLink = (page: number) => (
+    <PaginationItem key={page}>
+      <PaginationLink
+        to={getPageLink(page)}
+        onClick={handlePageChange}
+        isActive={page === currentPage}
+        className="min-w-8 w-auto px-3"
+      >
+        {page}
+      </PaginationLink>
+    </PaginationItem>
+  );
+
+  return (
+    <Pagination className="py-3 mb-10">
+      <PaginationContent>
+        <PaginationItem className="mr-2">
+          <PaginationPrevious
+            to={getPageLink(currentPage - 1)}
+            onClick={handlePageChange}
+            aria-disabled={isFirstPage}
+            tabIndex={isFirstPage ? -1 : undefined} // -1 means the link is skipped when tabbing
+            className={isFirstPage ? DISABLED_STYLE : undefined}
+          />
+        </PaginationItem>
+
+        {renderPageLink(1)}
+
+        {showStartEllipsis && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+
+        {middlePages.map((page) => renderPageLink(page))}
+
+        {showEndEllipsis && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+
+        {showLastPage && renderPageLink(totalPages)}
+
+        <PaginationItem className="ml-2">
+          <PaginationNext
+            to={getPageLink(currentPage + 1)}
+            onClick={handlePageChange}
+            aria-disabled={isLastPage}
+            tabIndex={isLastPage ? -1 : undefined} // -1 means the link is skipped when tabbing
+            className={isLastPage ? DISABLED_STYLE : undefined}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+
+export { BookPagination };
diff --git a/frontend/app/components/FavoriteButton/FavoriteButton.tsx b/frontend/app/components/FavoriteButton/FavoriteButton.tsx
index 26e9aee..20bc2f8 100644
--- a/frontend/app/components/FavoriteButton/FavoriteButton.tsx
+++ b/frontend/app/components/FavoriteButton/FavoriteButton.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
 import { Link } from "react-router";
 import { authClient } from "~/api/auth";
 import { useFavoriteStatus } from "~/api/useFavoriteBooks";
-import { CheckIcon } from "~/components/icons/CheckIcon";
+import { Button } from "~/components/ui/Button";
+import { CheckIcon } from "lucide-react";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -15,6 +16,7 @@ import {
 import { buttonVariants } from "~/components/ui/Button";
 import { toast } from "~/components/ui/Toast";
 import type { Book } from "~/api/types";
+import { cn } from "~/lib/utils";
 
 interface FavoriteButtonProps {
   book: Book;
@@ -51,9 +53,16 @@ function FavoriteButton({ book }: FavoriteButtonProps) {
 
   return (
     <>
-      <button
+      <Button
         type="button"
-        className={`absolute right-2 top-2 flex items-center justify-center h-8 w-8 cursor-pointer text-2xl rounded-md border ${favorite ? "border-primary text-primary" : ""}`}
+        variant="outline"
+        size="icon"
+        className={cn(
+          "absolute right-2 top-2 z-10 bg-favorite-button text-xl",
+          {
+            isFavorite: "border-primary text-primary",
+          },
+        )}
         onClick={() => void toggleFavorite()}
         disabled={saving}
         aria-label={
@@ -65,7 +74,7 @@ function FavoriteButton({ book }: FavoriteButtonProps) {
         aria-pressed={favorite}
       >
         {favorite ? <CheckIcon /> : "+"}
-      </button>
+      </Button>
       <AlertDialog open={loginDialogOpen} onOpenChange={setLoginDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
diff --git a/frontend/app/components/FilterBooksSection/FilterBooksSection.tsx b/frontend/app/components/FilterBooksSection/FilterBooksSection.tsx
index e3651fe..7f2fd0b 100644
--- a/frontend/app/components/FilterBooksSection/FilterBooksSection.tsx
+++ b/frontend/app/components/FilterBooksSection/FilterBooksSection.tsx
@@ -1,6 +1,21 @@
 import type { BookFilters } from "~/api/types";
 import { languageCodes } from "~/api/languageCodes";
-import { CircleQuestionMark } from "~/components/icons/CircleQuestionMark";
+import { CircleQuestionMark } from "lucide-react";
+import { Input } from "~/components/ui/Input";
+import { Label } from "~/components/ui/Label";
+import { Button } from "~/components/ui/Button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/Select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/Tooltip";
 import { useSearchParams } from "react-router";
 import { useBookSearchParams } from "~/api/useBookSearchParams";
 import { useDebounce } from "~/api/useDebounce";
@@ -38,6 +53,19 @@ const FILTER_INPUTS: {
   },
 ];
 
+const FILTER_KEYS = [...FILTER_INPUTS.map((input) => input.name), "language"];
+
+const LANGUAGE_ITEMS = [
+  {
+    value: "none",
+    label: "Select a language",
+  },
+  ...languageCodes.map((lang) => ({
+    value: lang.code,
+    label: lang.name,
+  })),
+];
+
 function FilterBooksSection() {
   const [, setSearchParams] = useSearchParams();
   const { filters: rawFilters } = useBookSearchParams();
@@ -69,18 +97,46 @@ function FilterBooksSection() {
     newFiltersFromInputRef.current = false;
   }, [debouncedFilters, rawFilters, setSearchParams]);
 
+  const hasActiveFilters = Object.values(rawFilters).some(Boolean);
+
+  const clearFilters = () => {
+    // Cancel any filter change that are currently being typed but not yet debounced
+    newFiltersFromInputRef.current = false;
+
+    setSearchParams((searchParams) => {
+      FILTER_KEYS.forEach((key) => searchParams.delete(key));
+
+      // Reset the page to 1 when clearing filters. A missing "page" means page 1
+      searchParams.delete("page");
+
+      return searchParams;
+    });
+  };
+
   return (
-    <section className="flex flex-col items-center mb-8">
-      <h2 className="my-4 text-2xl font-bold">Filter Books</h2>
-      <ul className="grid grid-cols-2 gap-4 max-[900px]:grid-cols-1">
+    <section className="flex flex-col gap-4">
+      <header className="flex items-center justify-between">
+        <h2 className="text-lg font-bold">Filter Books</h2>
+        <Button
+          type="button"
+          variant="link"
+          onClick={clearFilters}
+          disabled={!hasActiveFilters}
+          className="text-foreground hover:text-foreground/85"
+        >
+          Reset
+        </Button>
+      </header>
+
+      <ul className="flex flex-col gap-4">
         {FILTER_INPUTS.map((input) => (
           <li key={input.name} className="flex flex-col gap-2">
-            <label htmlFor={input.name} className="flex items-center gap-2">
+            <Label htmlFor={input.name}>
               {input.name.charAt(0).toUpperCase() + input.name.slice(1)}
-            </label>
-            <input
+            </Label>
+            <Input
+              id={input.name}
               type="text"
-              className="bg-white rounded-md border p-2 text-base h-full hover:border-primary"
               name={input.name}
               aria-label={input.ariaLabel}
               placeholder={input.placeholder}
@@ -92,34 +148,50 @@ function FilterBooksSection() {
             />
           </li>
         ))}
+
         <li className="flex flex-col gap-2">
-          <label htmlFor="language" className="flex items-center gap-2">
-            Language
-            <span
-              className="flex items-center"
-              title="Only show books that have an edition in the selected language"
-              role="tooltip"
-            >
-              <CircleQuestionMark />
-            </span>
-          </label>
-          <select
-            className="bg-white rounded-md border p-2 text-base h-full hover:border-primary"
-            name="language"
-            aria-label="Search for language"
-            value={filters.language ?? ""}
-            onChange={(e) => {
+          <span className="flex items-center gap-2">
+            <Label htmlFor="language">Language</Label>
+            <Tooltip>
+              <TooltipTrigger
+                render={<button type="button" aria-label="More information" />}
+              >
+                <CircleQuestionMark aria-hidden="true" className="size-5" />
+              </TooltipTrigger>
+              <TooltipContent>
+                Only show books that have an edition in the selected language
+              </TooltipContent>
+            </Tooltip>
+          </span>
+
+          <Select
+            items={LANGUAGE_ITEMS}
+            value={
+              filters.language === "" ? "none" : (filters.language ?? "none")
+            }
+            onValueChange={(value) => {
               newFiltersFromInputRef.current = true;
-              setFilters({ ...filters, language: e.target.value });
+              setFilters({
+                ...filters,
+                language: value === "none" ? undefined : (value ?? undefined),
+              });
             }}
           >
-            <option value="">Select a language</option>
-            {languageCodes.map((lang) => (
-              <option key={lang.code} value={lang.code}>
-                {lang.name}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger
+              id="language"
+              aria-label="Search for language"
+              className="w-full"
+            >
+              <SelectValue placeholder="Select a language" />
+            </SelectTrigger>
+            <SelectContent>
+              {LANGUAGE_ITEMS.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </li>
       </ul>
     </section>
diff --git a/frontend/app/components/Footer/Footer.tsx b/frontend/app/components/Footer/Footer.tsx
index d71c254..576b1e7 100644
--- a/frontend/app/components/Footer/Footer.tsx
+++ b/frontend/app/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 function Footer() {
   return (
-    <footer className="flex items-center justify-between bg-zinc-800 text-white px-10 py-8 text-sm max-[800px]:flex-col max-[800px]:justify-center max-[800px]:gap-1">
-      <p>IT2810 Webutvikling - Gruppe 37 - Prosjekt 1</p>
+    <footer className="flex items-center justify-between bg-zinc-800 text-white px-10 py-16 text-sm max-[800px]:flex-col max-[800px]:justify-center max-[800px]:gap-1">
+      <p>IT2810 Webutvikling - Gruppe 37 - Prosjekt 2</p>
       <p>2026</p>
     </footer>
   );
diff --git a/frontend/app/components/PageBreadcrumb/PageBreadcrumb.tsx b/frontend/app/components/PageBreadcrumb/PageBreadcrumb.tsx
new file mode 100644
index 0000000..82ebe92
--- /dev/null
+++ b/frontend/app/components/PageBreadcrumb/PageBreadcrumb.tsx
@@ -0,0 +1,44 @@
+import { Fragment } from "react";
+import { Link, type To } from "react-router";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/Breadcrumb";
+
+interface BreadcrumbProps {
+  items: {
+    label: string;
+    to?: To; // No "to" means that this is the current page, shown as plain text
+  }[];
+}
+
+function PageBreadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <Breadcrumb className="mx-auto w-full max-w-300 px-10 pt-6">
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          <Fragment key={item.label}>
+            {index > 0 && <BreadcrumbSeparator />}
+            <BreadcrumbItem>
+              {item.to ? (
+                <BreadcrumbLink render={<Link to={item.to} />}>
+                  {item.label}
+                </BreadcrumbLink>
+              ) : (
+                <BreadcrumbPage className="max-w-60 truncate">
+                  {item.label}
+                </BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+export { PageBreadcrumb };
diff --git a/frontend/app/components/Pagination/Pagination.tsx b/frontend/app/components/Pagination/Pagination.tsx
deleted file mode 100644
index 814376c..0000000
--- a/frontend/app/components/Pagination/Pagination.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useSearchParams } from "react-router";
-
-function Pagination({ totalPages }: { totalPages: number }) {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = parseInt(searchParams.get("page") ?? "1");
-
-  const handlePageChange = (newPage: number) => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-
-    setSearchParams((prev) => {
-      prev.set("page", newPage.toString());
-      return prev;
-    });
-  };
-
-  return (
-    <section className="flex items-center justify-center gap-4 py-3 mb-10">
-      <button
-        type="button"
-        className="flex items-center justify-center w-24 cursor-pointer rounded-md border px-5 py-2 transition duration-150 ease-in-out hover:not-disabled:bg-accent disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
-        onClick={() => handlePageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-      >
-        Previous
-      </button>
-      <span className="w-20 text-center font-medium">
-        {currentPage} of {totalPages}
-      </span>
-      <button
-        type="button"
-        className="flex items-center justify-center w-24 cursor-pointer rounded-md border px-5 py-2 transition duration-150 ease-in-out hover:not-disabled:bg-accent disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
-        onClick={() => handlePageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-      >
-        Next
-      </button>
-    </section>
-  );
-}
-
-export { Pagination };
diff --git a/frontend/app/components/SearchBar/SearchBar.tsx b/frontend/app/components/SearchBar/SearchBar.tsx
index a4345d9..e1c44b5 100644
--- a/frontend/app/components/SearchBar/SearchBar.tsx
+++ b/frontend/app/components/SearchBar/SearchBar.tsx
@@ -1,13 +1,31 @@
 import { useEffect, useRef, useState } from "react";
-import { FilterIcon } from "~/components/icons/FilterIcon";
+import { FilterIcon } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import { FilterBooksSection } from "~/components/FilterBooksSection/FilterBooksSection";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "~/components/ui/InputGroup";
+import { Button } from "~/components/ui/Button";
+import { Badge } from "~/components/ui/Badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/Popover";
 import { useSearchParams } from "react-router";
 import { useDebounce } from "~/api/useDebounce";
 import { useBookSearchParams } from "~/api/useBookSearchParams";
 
 const SEARCH_DEBOUNCE_MS = 500;
 
-function SearchBar() {
+interface SearchBarProps {
+  resultCount?: number;
+}
+
+function SearchBar({ resultCount }: SearchBarProps) {
   const { rawQuery: query, filters } = useBookSearchParams();
   const [, setSearchParams] = useSearchParams();
 
@@ -33,12 +51,14 @@ function SearchBar() {
       } else {
         searchParams.delete("q");
       }
+      // A new search starts on page 1
+      searchParams.delete("page");
+
       return searchParams;
     });
     newQueryFromInputRef.current = false;
   }, [debouncedQuery, inputField, query, setSearchParams]);
 
-  const [filtersOpen, setFiltersOpen] = useState(false);
   const filtersCount = Object.values(filters).filter(
     (value) => value !== undefined,
   ).length;
@@ -46,13 +66,16 @@ function SearchBar() {
   const filtersDescription = `${filtersCount} ${filtersCount === 1 ? "filter" : "filters"} active`;
 
   return (
-    <>
-      <section className="flex items-center justify-center gap-4 mx-auto mt-20 w-full max-[600px]:mx-10 max-[600px]:mt-10 max-[600px]:w-[calc(100%-80px)]">
-        <input
+    <section className="flex items-center justify-center gap-4 mx-auto mt-20 w-full max-[1000px]:mx-10 max-[600px]:mt-10 max-[1000px]:w-[calc(100%-80px)]">
+      <InputGroup className="h-10 max-w-150 bg-card">
+        <InputGroupAddon align="inline-start">
+          <SearchIcon />
+        </InputGroupAddon>
+
+        <InputGroupInput
           type="search"
           name="search"
           aria-label="Search for books"
-          className="bg-white h-12 w-125 px-4 rounded-md border text-base hover:border-primary"
           placeholder="Search books..."
           value={inputField}
           onChange={(e) => {
@@ -60,25 +83,43 @@ function SearchBar() {
             setInputField(e.target.value);
           }}
         />
-        <button
-          type="button"
-          onClick={() => setFiltersOpen(!filtersOpen)}
-          className="bg-white relative h-12 px-4 cursor-pointer rounded-md border text-base hover:border-primary"
-          aria-label="Filter books"
+
+        {resultCount !== undefined && (
+          <InputGroupAddon align="inline-end">
+            <InputGroupText aria-live="polite">
+              {resultCount} {resultCount === 1 ? "result" : "results"}
+            </InputGroupText>
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              size="icon-xl"
+              className="relative bg-card"
+              aria-label="Filter books"
+            />
+          }
         >
           <FilterIcon />
           {filtersCount > 0 && (
-            <span
-              className="absolute bottom-0 right-0 flex items-center justify-center min-h-8 min-w-8 translate-x-1/2 translate-y-1/2 rounded-full bg-primary text-primary-foreground"
+            <Badge
+              className="absolute -right-2 -bottom-2 rounded-full"
               aria-label={filtersDescription}
             >
               {filtersCount}
-            </span>
+            </Badge>
           )}
-        </button>
-      </section>
-      {filtersOpen && <FilterBooksSection />}
-    </>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-80">
+          <FilterBooksSection />
+        </PopoverContent>
+      </Popover>
+    </section>
   );
 }
 
diff --git a/frontend/app/components/icons/CheckIcon.tsx b/frontend/app/components/icons/CheckIcon.tsx
deleted file mode 100644
index 5a98bc1..0000000
--- a/frontend/app/components/icons/CheckIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Found as a part of Lucide:
-// https://lucide.dev/icons/check
-
-function CheckIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}
-
-export { CheckIcon };
diff --git a/frontend/app/components/icons/CircleQuestionMark.tsx b/frontend/app/components/icons/CircleQuestionMark.tsx
deleted file mode 100644
index cc7f3e0..0000000
--- a/frontend/app/components/icons/CircleQuestionMark.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// Found as a part of Lucide:
-// https://lucide.dev/icons/circle-question-mark
-
-function CircleQuestionMark() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-5"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-      <path d="M12 17h.01" />
-    </svg>
-  );
-}
-
-export { CircleQuestionMark };
diff --git a/frontend/app/components/icons/FilterIcon.tsx b/frontend/app/components/icons/FilterIcon.tsx
deleted file mode 100644
index 5548a64..0000000
--- a/frontend/app/components/icons/FilterIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Found as a part of Lucide:
-// https://lucide.dev/icons/funnel
-
-function FilterIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" />
-    </svg>
-  );
-}
-
-export { FilterIcon };
diff --git a/frontend/app/components/ui/Button.tsx b/frontend/app/components/ui/Button.tsx
index 4212cbb..204c65c 100644
--- a/frontend/app/components/ui/Button.tsx
+++ b/frontend/app/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "cn";
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 not-disabled:cursor-pointer",
   {
     variants: {
       variant: {
@@ -30,6 +30,7 @@ const buttonVariants = cva(
         "icon-sm":
           "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "size-9",
+        "icon-xl": "size-10",
       },
     },
     defaultVariants: {
diff --git a/frontend/app/components/ui/Pagination.tsx b/frontend/app/components/ui/Pagination.tsx
index b2c7ab1..a3fcda4 100644
--- a/frontend/app/components/ui/Pagination.tsx
+++ b/frontend/app/components/ui/Pagination.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import { cn } from "cn";
+import { Link } from "react-router";
 
-import { Button } from "~/components/ui/Button";
+import { Button, buttonVariants } from "~/components/ui/Button";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -40,7 +41,7 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 type PaginationLinkProps = {
   isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">;
+  React.ComponentProps<typeof Link>;
 
 function PaginationLink({
   className,
@@ -49,19 +50,16 @@ function PaginationLink({
   ...props
 }: PaginationLinkProps) {
   return (
-    <Button
-      variant={isActive ? "outline" : "ghost"}
-      size={size}
-      className={cn(className)}
-      nativeButton={false}
-      render={
-        <a
-          aria-current={isActive ? "page" : undefined}
-          data-slot="pagination-link"
-          data-active={isActive}
-          {...props}
-        />
-      }
+    <Link
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({ variant: isActive ? "outline" : "ghost", size }),
+        "transition-colors duration-200 hover:bg-hover-surface hover:text-foreground/90",
+        className,
+      )}
+      {...props}
     />
   );
 }
diff --git a/frontend/app/components/ui/Popover.tsx b/frontend/app/components/ui/Popover.tsx
new file mode 100644
index 0000000..904781c
--- /dev/null
+++ b/frontend/app/components/ui/Popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { cn } from "cn"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/frontend/app/index.css b/frontend/app/index.css
index d17f6d2..78add90 100644
--- a/frontend/app/index.css
+++ b/frontend/app/index.css
@@ -26,7 +26,7 @@
   }
 
   main {
-    @apply flex-1;
+    @apply flex-1 min-h-[calc(100svh-4rem)] pt-5;
   }
 
   footer {
@@ -37,6 +37,8 @@
 @theme inline {
   --font-heading: var(--font-sans);
   --font-sans: "Inter Variable", sans-serif;
+  --color-hover-surface: var(--hover-surface);
+  --color-favorite-button: var(--favorite-button);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -75,6 +77,7 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+  --text-md: 0.9375rem;
 }
 
 :root {
@@ -110,6 +113,8 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --favorite-button: oklch(0.985 0 0);
+  --hover-surface: oklch(0.985 0 0);
 }
 
 .dark {
@@ -144,4 +149,6 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --favorite-button: oklch(0.22 0 0);
+  --hover-surface: oklch(0.22 0 0);
 }
diff --git a/frontend/app/routes/book/selectedBook.tsx b/frontend/app/routes/book/selectedBook.tsx
index ddc7879..cf9c0a5 100644
--- a/frontend/app/routes/book/selectedBook.tsx
+++ b/frontend/app/routes/book/selectedBook.tsx
@@ -1,10 +1,25 @@
 import type { Route } from "./+types/selectedBook";
+import { PageBreadcrumb } from "~/components/PageBreadcrumb/PageBreadcrumb";
 import { BookCover } from "~/components/BookCover/BookCover";
 import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
+import { BookDescription } from "~/components/BookDescription/BookDescription";
+import { Button } from "~/components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/Card";
+import { Separator } from "~/components/ui/Separator";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "~/components/ui/Pagination";
 import { Link, useSearchParams } from "react-router";
 import { useBook } from "~/api/useBook";
 import { SEARCH_LIMIT, useSearchBooks } from "~/api/useSearchBooks";
 import { useBookSearchParams } from "~/api/useBookSearchParams";
+import { cn } from "~/lib/utils";
+
+const DISABLED_STYLE = "pointer-events-none opacity-50";
 
 export default function SelectedBookPage({ params }: Route.ComponentProps) {
   const [searchParams] = useSearchParams();
@@ -44,55 +59,104 @@ export default function SelectedBookPage({ params }: Route.ComponentProps) {
 
   return (
     <main>
-      <article className="flex flex-row gap-2 px-10 py-10 mx-auto mt-15 max-w-300 max-[900px]:flex-col">
-        <section className="relative flex flex-[0_0_40%] items-center justify-center rounded-md border bg-card p-7.5 max-[1000px]:min-[901px]:p-3.75 max-[900px]:min-[750px]:[&>img]:m-12.5">
-          <Link
-            to={{
+      <PageBreadcrumb
+        items={[
+          {
+            label: "Home",
+            to: {
               pathname: "/",
               search: searchParams.toString(),
-            }}
-            aria-label="Go back to search results"
-            className="absolute left-0 -top-11 cursor-pointer rounded-md border bg-card px-4 py-2 text-[0.925rem] hover:border-primary"
-          >
-            Go back
-          </Link>
-          <nav
-            className="absolute right-0 -top-11 flex gap-2"
-            aria-label="Browse books"
-          >
-            <Link
-              to={{
-                pathname: previousBook ? `/book/${previousBook.id}` : "",
-                search: searchParams.toString(),
-              }}
-              className={`cursor-pointer rounded-md border bg-card px-4 py-2 text-[0.925rem] ${previousBook ? "hover:border-primary" : "cursor-not-allowed bg-muted text-muted-foreground"}`}
-              aria-disabled={!previousBook}
-              aria-label="Previous book"
-            >
-              Previous
-            </Link>
+            },
+          },
+          { label: book.title },
+        ]}
+      />
+
+      <article className="flex flex-col gap-4 mx-auto max-w-300 px-10 py-10">
+        <Button
+          variant="outline"
+          size="lg"
+          className="w-fit bg-card"
+          aria-label="Go back to search results"
+          nativeButton={false}
+          render={
             <Link
               to={{
-                pathname: nextBook ? `/book/${nextBook.id}` : "",
+                pathname: "/",
                 search: searchParams.toString(),
               }}
-              className={`cursor-pointer rounded-md border bg-card px-4 py-2 text-[0.925rem] ${nextBook ? "hover:border-primary" : "cursor-not-allowed bg-muted text-muted-foreground"}`}
-              aria-disabled={!nextBook}
-              aria-label="Next book"
-            >
-              Next
-            </Link>
-          </nav>
-          <FavoriteButton book={book} />
-          <BookCover book={book} />
-        </section>
-        <section className="flex-1 p-7.5 rounded-md border bg-card">
-          <h3 className="mb-2 text-2xl">{book.title}</h3>
-          <p>{book.author.join(", ")}</p>
-          <p>{book.publishedYear ?? "Unknown"}</p>
-          <h4 className="mt-4 pt-4 border-t leading-normal">Description</h4>
-          <p>{description ?? "No description available"}</p>
+            />
+          }
+        >
+          Go back
+        </Button>
+
+        <section className="grid grid-cols-1 gap-2 min-[901px]:grid-cols-[2fr_3fr]">
+          <Card className="relative min-h-96 items-center justify-center p-7.5 min-[901px]:sticky min-[901px]:top-4 min-[901px]:h-144 min-[901px]:self-start max-[1000px]:min-[901px]:p-3.75 max-[900px]:min-[750px]:[&>img]:m-12.5">
+            <FavoriteButton book={book} />
+            <BookCover book={book} />
+          </Card>
+
+          <section className="flex flex-col gap-2">
+            <Card className="p-7.5 min-h-116">
+              <CardHeader className="px-0">
+                <CardTitle className="text-2xl font-bold">
+                  {book.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-0 text-md">
+                <p>{book.author.join(", ")}</p>
+                <p>{book.publishedYear ?? "Unknown"}</p>
+                <Separator className="my-4" />
+                <h2 className="text-lg font-bold leading-normal">
+                  Description
+                </h2>
+                <BookDescription key={book.id} description={description} />
+              </CardContent>
+            </Card>
+
+            <Card className="p-7.5">
+              <CardHeader className="px-0">
+                <CardTitle className="text-xl">More info</CardTitle>
+              </CardHeader>
+              <CardContent className="px-0">
+                {/* Add extra details */}
+              </CardContent>
+            </Card>
+          </section>
         </section>
+
+        <Pagination aria-label="Browse books" className="mt-8">
+          <PaginationContent className="gap-8">
+            <PaginationItem>
+              <PaginationPrevious
+                to={{
+                  pathname: `/book/${(previousBook ?? book).id}`,
+                  search: searchParams.toString(),
+                }}
+                aria-label="Go to previous book"
+                aria-disabled={!previousBook}
+                tabIndex={!previousBook ? -1 : undefined} // -1 means the link is skipped when tabbing
+                className={cn(
+                  "[&>span]:block",
+                  !previousBook && DISABLED_STYLE,
+                )}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                to={{
+                  pathname: `/book/${(nextBook ?? book).id}`,
+                  search: searchParams.toString(),
+                }}
+                aria-label="Go to next book"
+                aria-disabled={!nextBook}
+                tabIndex={!nextBook ? -1 : undefined} // -1 means the link is skipped when tabbing
+                className={cn("[&>span]:block", !nextBook && DISABLED_STYLE)}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
       </article>
     </main>
   );
diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
index 76983a4..56ef996 100644
--- a/frontend/app/routes/home.tsx
+++ b/frontend/app/routes/home.tsx
@@ -1,4 +1,4 @@
-import { Pagination } from "~/components/Pagination/Pagination";
+import { BookPagination } from "~/components/BookPagination/BookPagination";
 import { useSearchBooks, SEARCH_LIMIT } from "~/api/useSearchBooks";
 import { SearchBar } from "~/components/SearchBar/SearchBar";
 import { BookCard } from "~/components/BookCard/BookCard";
@@ -53,7 +53,7 @@ export default function HomePage() {
   if (books.length === 0) {
     return (
       <main>
-        <SearchBar />
+        <SearchBar resultCount={0} />
         <p
           role="status"
           className="grid place-items-center min-h-[50svh] px-10 text-center"
@@ -66,7 +66,7 @@ export default function HomePage() {
 
   return (
     <main>
-      <SearchBar />
+      <SearchBar resultCount={totalCount} />
       <ul className="grid grid-cols-4 justify-center gap-4 mx-auto px-10 py-10 max-w-300  max-[1200px]:grid-cols-3 max-[1000px]:grid-cols-2 max-[600px]:grid-cols-1">
         {books.map((book) => (
           <li key={book.id}>
@@ -74,7 +74,7 @@ export default function HomePage() {
           </li>
         ))}
       </ul>
-      <Pagination totalPages={Math.ceil(totalCount / SEARCH_LIMIT)} />
+      <BookPagination totalPages={Math.ceil(totalCount / SEARCH_LIMIT)} />
     </main>
   );
 }