diff --git a/src/pages/Bookshelf/BookItem/BookItem.module.css b/src/pages/Bookshelf/BookItem/BookItem.module.css
index d98dbaf..ed518ea 100644
--- a/src/pages/Bookshelf/BookItem/BookItem.module.css
+++ b/src/pages/Bookshelf/BookItem/BookItem.module.css
@@ -1,4 +1,6 @@
 .bookCard {
+  text-decoration: none;
+  color: black;
   width: 300px;
   border: 1px lightgrey solid;
   overflow: hidden;
diff --git a/src/pages/Bookshelf/BookItem/index.tsx b/src/pages/Bookshelf/BookItem/index.tsx
index e20c688..f2cb3c4 100644
--- a/src/pages/Bookshelf/BookItem/index.tsx
+++ b/src/pages/Bookshelf/BookItem/index.tsx
@@ -3,23 +3,28 @@ import React from "react";
 import styles from "./BookItem.module.css";
 
 import { IBook } from "~/types/book";
+import { Link } from "wouter";
 
 interface IBookItemProps extends IBook {}
 
-export const BookItem = ({ author, title, cover }: IBookItemProps) => {
+export const BookItem = ({ author, title, cover, hash }: IBookItemProps) => {
   return (
-    <div className={styles.bookCard}>
-      <div className={styles.cardHeading}>
-        <h1>{title}</h1>
-        <h2>{author}</h2>
-      </div>
-      <div className={styles.imageContainer}>
-        <img
-          className={styles.image}
-          src={cover}
-          alt={title + " cover picture"}
-        />
-      </div>
-    </div>
+    <Link href={hash!}>
+      <a className={styles.bookCard}>
+        <div className={styles.cardHeading}>
+          <h1>{title}</h1>
+          <h2>{author}</h2>
+        </div>
+        {cover && (
+          <div className={styles.imageContainer}>
+            <img
+              className={styles.image}
+              src={cover}
+              alt={title + " cover picture"}
+            />
+          </div>
+        )}
+      </a>
+    </Link>
   );
 };