diff --git a/src/App.tsx b/src/App.tsx
index 2e500c4..385ecc3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,25 @@
+import { useState } from "react";
 import { Header } from "./components/Header/Header.tsx";
 import { Footer } from "./components/Footer/Footer.tsx";
 import { BookGrid } from "./components/BookGrid/BookGrid.tsx";
+import { BookDetails } from "./components/BookDetails/BookDetails.tsx";
+import type { Book } from "./api/types.ts";
 
 function App() {
+  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
+
   return (
     <>
       <Header />
       <main>
-        <BookGrid />
+        {selectedBook ? (
+          <BookDetails
+            book={selectedBook}
+            onGoBack={() => setSelectedBook(null)}
+          />
+        ) : (
+          <BookGrid onBookSelect={setSelectedBook} />
+        )}
       </main>
       <Footer />
     </>
diff --git a/src/components/BookCard/BookCard.module.css b/src/components/BookCard/BookCard.module.css
index b6519bf..10c239c 100644
--- a/src/components/BookCard/BookCard.module.css
+++ b/src/components/BookCard/BookCard.module.css
@@ -3,58 +3,30 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  box-sizing: border-box;
   background-color: white;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
-  padding: 24px;
 }
 
-.favoriteButton {
-  position: absolute;
+.bookCardButton {
+  all: unset;
+  cursor: pointer;
+
   display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 8px;
-  right: 8px;
-  background-color: white;
-  color: var(--theme-color);
-  border: 1px solid var(--border-color);
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+
+  box-sizing: border-box;
+  padding: 24px;
   border-radius: var(--border-radius);
-  width: 32px;
-  height: 32px;
-  font-size: 1.5rem;
-  cursor: pointer;
 
   &:hover {
     border: 1px solid var(--theme-color);
   }
 }
 
-.favoriteButtonActive {
-  border-color: var(--theme-color);
-  color: green;
-  border: 1px solid green;
-}
-
-.coverImage {
-  width: 100%;
-  padding: 12px 24px;
-  object-fit: contain;
-}
-
-.coverPlaceholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 2 / 3;
-  margin: 12px 24px;
-  background-color: var(--background-color);
-  border-radius: var(--border-radius);
-  color: var(--theme-color);
-  font-size: 0.875rem;
-  text-align: center;
-}
-
 .info {
   margin-top: 16px;
   font-size: 0.9rem;
diff --git a/src/components/BookCard/BookCard.tsx b/src/components/BookCard/BookCard.tsx
index 5d7b299..81da63a 100644
--- a/src/components/BookCard/BookCard.tsx
+++ b/src/components/BookCard/BookCard.tsx
@@ -1,55 +1,35 @@
-import { useState } from "react";
 import styles from "./BookCard.module.css";
-import { CheckIcon } from "../icons/CheckIcon";
+import { BookCover } from "../BookCover/BookCover";
+import { FavoriteButton } from "../FavoriteButton/FavoriteButton";
 import type { Book } from "../../api/types";
 
 interface BookCardProps {
   book: Book;
+  onBookSelect: (book: Book) => void;
 }
 
-function BookCard({ book }: BookCardProps) {
-  const [favorites, setFavorites] = useState<string[]>(() => {
-    const rawFavorites = localStorage.getItem("favorites");
-    return JSON.parse(rawFavorites ?? "[]");
-  });
-
-  const saveFavorite = () => {
-    const rawFavorites = localStorage.getItem("favorites");
-    let savedFavorites: string[] = JSON.parse(rawFavorites ?? "[]");
-
-    if (savedFavorites.includes(book.id)) {
-      // Remove from favorites if already present
-      savedFavorites = savedFavorites.filter((id) => id !== book.id);
-    } else {
-      savedFavorites.push(book.id);
-    }
-
-    localStorage.setItem("favorites", JSON.stringify(savedFavorites));
-    setFavorites(savedFavorites);
+function BookCard({ book, onBookSelect }: BookCardProps) {
+  const selectBook = () => {
+    onBookSelect(book);
   };
 
   return (
     <article className={styles.bookCard}>
+      <FavoriteButton book={book} />
+
       <button
-        className={`${styles.favoriteButton} ${favorites.includes(book.id) ? styles.favoriteButtonActive : ""}`}
-        onClick={saveFavorite}
+        onClick={selectBook}
+        className={styles.bookCardButton}
+        aria-label={`View details for ${book.title}`}
       >
-        {favorites.includes(book.id) ? <CheckIcon /> : "+"}
+        <BookCover book={book} />
+
+        <section className={styles.info}>
+          <h3 className={styles.title}>{book.title}</h3>
+          <p>{book.author.join(", ")}</p>
+          <p>{book.publishedYear ?? "Unknown"}</p>
+        </section>
       </button>
-      {book.coverImage ? (
-        <img
-          src={book.coverImage}
-          alt={`Book cover of ${book.title}`}
-          className={styles.coverImage}
-        />
-      ) : (
-        <div className={styles.coverPlaceholder}>No cover available</div>
-      )}
-      <section className={styles.info}>
-        <h3 className={styles.title}>{book.title}</h3>
-        <p className={styles.author}>{book.author.join(", ")}</p>
-        <p>{book.publishedYear ?? "Unknown"}</p>
-      </section>
     </article>
   );
 }
diff --git a/src/components/BookCover/BookCover.module.css b/src/components/BookCover/BookCover.module.css
new file mode 100644
index 0000000..272f503
--- /dev/null
+++ b/src/components/BookCover/BookCover.module.css
@@ -0,0 +1,18 @@
+.coverImage {
+  width: 100%;
+  padding: 12px 24px;
+  object-fit: contain;
+}
+
+.coverPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 2 / 3;
+  margin: 12px 24px;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  color: var(--theme-color);
+  font-size: 0.875rem;
+  text-align: center;
+}
diff --git a/src/components/BookCover/BookCover.tsx b/src/components/BookCover/BookCover.tsx
new file mode 100644
index 0000000..6468650
--- /dev/null
+++ b/src/components/BookCover/BookCover.tsx
@@ -0,0 +1,20 @@
+import styles from "./BookCover.module.css";
+import type { Book } from "../../api/types";
+
+interface BookCoverProps {
+  book: Book;
+}
+
+function BookCover({ book }: BookCoverProps) {
+  return book.coverImage ? (
+    <img
+      src={book.coverImage}
+      alt={`Book cover of ${book.title}`}
+      className={styles.coverImage}
+    />
+  ) : (
+    <p className={styles.coverPlaceholder}>No cover available</p>
+  );
+}
+
+export { BookCover };
diff --git a/src/components/BookDetails/BookDetails.module.css b/src/components/BookDetails/BookDetails.module.css
new file mode 100644
index 0000000..78a7b2e
--- /dev/null
+++ b/src/components/BookDetails/BookDetails.module.css
@@ -0,0 +1,72 @@
+.bookDetails {
+  display: flex;
+  flex-direction: row;
+  max-width: 1200px;
+  margin: 0 auto;
+  margin-top: 60px;
+  padding: 40px;
+  gap: 10px;
+
+  @media only screen and (max-width: 900px) {
+    flex-direction: column;
+  }
+}
+
+.goBackButton {
+  position: absolute;
+  top: -42px;
+  left: 0;
+  background-color: white;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 0.925rem;
+
+  &:hover {
+    border-color: var(--theme-color);
+  }
+}
+
+.coverSection {
+  position: relative;
+  flex: 0 0 40%;
+  padding: 30px;
+  background-color: white;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.info {
+  flex: 1;
+  padding: 30px;
+  background-color: white;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+
+.title {
+  margin-bottom: 8px;
+  font-size: 1.5rem;
+}
+
+.description {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-color);
+  line-height: 1.5;
+}
+
+@media only screen and (max-width: 900px) and (min-width: 750px) {
+  .coverSection img {
+    margin: 50px;
+  }
+}
+@media only screen and (max-width: 1000px) and (min-width: 901px) {
+  .coverSection {
+    padding: 15px;
+  }
+}
diff --git a/src/components/BookDetails/BookDetails.tsx b/src/components/BookDetails/BookDetails.tsx
new file mode 100644
index 0000000..ffd367b
--- /dev/null
+++ b/src/components/BookDetails/BookDetails.tsx
@@ -0,0 +1,35 @@
+import styles from "./BookDetails.module.css";
+import { BookCover } from "../BookCover/BookCover";
+import { FavoriteButton } from "../FavoriteButton/FavoriteButton";
+import type { Book } from "../../api/types";
+
+interface BookDetailsProps {
+  book: Book;
+  onGoBack: () => void;
+}
+
+// TODO: Temporary placeholder until we have a real description from the API
+const PLACEHOLDER_DESCRIPTION =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur rhoncus massa fermentum tristique. Curabitur interdum, elit eget rutrum posuere, turpis nisl malesuada neque, at consectetur massa nisl at risus. Mauris in lacinia dui. Proin vitae interdum nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sem lacus, pulvinar nec libero id, dapibus mollis eros. Integer nisi augue, malesuada nec sem ac, laoreet elementum turpis. Maecenas rutrum purus a laoreet vehicula. Duis tristique odio eget dolor accumsan, sed laoreet ipsum mattis. Nulla molestie nisi quis urna mollis egestas. Aliquam bibendum tristique facilisis. Curabitur feugiat, lectus et vulputate vehicula, erat turpis aliquet nunc, vitae dapibus erat nulla in ipsum. Curabitur rhoncus ipsum ligula, ut ultricies ex rutrum cursus. Sed in nisl in nisi finibus lobortis.";
+
+function BookDetails({ book, onGoBack }: BookDetailsProps) {
+  return (
+    <article className={styles.bookDetails}>
+      <section className={styles.coverSection}>
+        <button type="button" onClick={onGoBack} className={styles.goBackButton}>
+          Go back
+        </button>
+        <FavoriteButton book={book} />
+        <BookCover book={book} />
+      </section>
+        <section className={styles.info}>
+          <h3 className={styles.title}>{book.title}</h3>
+          <p>{book.author.join(", ")}</p>
+          <p>{book.publishedYear ?? "Unknown"}</p>
+          <p className={styles.description}>{PLACEHOLDER_DESCRIPTION}</p>
+        </section>
+    </article>
+  );
+}
+
+export { BookDetails };
diff --git a/src/components/BookGrid/BookGrid.tsx b/src/components/BookGrid/BookGrid.tsx
index 30a99e4..d41832e 100644
--- a/src/components/BookGrid/BookGrid.tsx
+++ b/src/components/BookGrid/BookGrid.tsx
@@ -1,8 +1,13 @@
 import { BookCard } from "../BookCard/BookCard";
 import styles from "./BookGrid.module.css";
 import { useBooks } from "../../api/useBooks";
+import type { Book } from "../../api/types";
 
-function BookGrid() {
+interface BookGridProps {
+  onBookSelect: (book: Book) => void;
+}
+
+function BookGrid({ onBookSelect }: BookGridProps) {
   const { data, isPending, isError, error } = useBooks({
     query: "subject:fantasy",
   });
@@ -35,7 +40,7 @@ function BookGrid() {
     <ul className={styles.bookGrid}>
       {data.map((book) => (
         <li key={book.id}>
-          <BookCard book={book} />
+          <BookCard book={book} onBookSelect={onBookSelect} />
         </li>
       ))}
     </ul>
diff --git a/src/components/FavoriteButton/FavoriteButton.module.css b/src/components/FavoriteButton/FavoriteButton.module.css
new file mode 100644
index 0000000..3367373
--- /dev/null
+++ b/src/components/FavoriteButton/FavoriteButton.module.css
@@ -0,0 +1,25 @@
+.favoriteButton {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 8px;
+  right: 8px;
+  background-color: white;
+  color: var(--theme-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid var(--theme-color);
+  }
+}
+
+.favoriteButtonActive {
+  color: green;
+  border: 1px solid green;
+}
diff --git a/src/components/FavoriteButton/FavoriteButton.tsx b/src/components/FavoriteButton/FavoriteButton.tsx
new file mode 100644
index 0000000..f95d73f
--- /dev/null
+++ b/src/components/FavoriteButton/FavoriteButton.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import styles from "./FavoriteButton.module.css";
+import { CheckIcon } from "../icons/CheckIcon";
+import type { Book } from "../../api/types";
+
+interface FavoriteButtonProps {
+  book: Book;
+}
+
+function FavoriteButton({ book }: FavoriteButtonProps) {
+  const [favorites, setFavorites] = useState<string[]>(() => {
+    const rawFavorites = localStorage.getItem("favorites");
+    return JSON.parse(rawFavorites ?? "[]");
+  });
+
+  const saveFavorite = () => {
+    const rawFavorites = localStorage.getItem("favorites");
+    let savedFavorites: string[] = JSON.parse(rawFavorites ?? "[]");
+
+    if (savedFavorites.includes(book.id)) {
+      // Remove from favorites if already present
+      savedFavorites = savedFavorites.filter((id) => id !== book.id);
+    } else {
+      savedFavorites.push(book.id);
+    }
+
+    localStorage.setItem("favorites", JSON.stringify(savedFavorites));
+    setFavorites(savedFavorites);
+  };
+
+  return (
+    <button
+      className={`${styles.favoriteButton} ${favorites.includes(book.id) ? styles.favoriteButtonActive : ""}`}
+      onClick={saveFavorite}
+      aria-label={
+        // Toggle the accessibility label based on the current state for screen readers
+        favorites.includes(book.id)
+          ? `Remove ${book.title} from favorites`
+          : `Add ${book.title} to favorites`
+      }
+      aria-pressed={favorites.includes(book.id)}
+    >
+      {favorites.includes(book.id) ? <CheckIcon /> : "+"}
+    </button>
+  );
+}
+
+export { FavoriteButton };