diff --git a/lib/wild_web/live/books.html.heex b/lib/wild_web/live/books.html.heex
index b477887..24f1dfe 100644
--- a/lib/wild_web/live/books.html.heex
+++ b/lib/wild_web/live/books.html.heex
@@ -1 +1,37 @@
-<div>Books</div>
+<h1>Our Book Journey</h1>
+
+<div>
+  <h2>Book name</h2>
+  <p>Review times</p>
+</div>
+
+<div class="flex flex-col sm:flex-row bg-white border shadow-sm rounded-xl hover:shadow-lg focus:outline-none focus:shadow-lg transition dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70" >
+  <img src={~p"/images/book-card-homepage.jpg"} class="w-1/2 h-auto rounded-t-xl">
+  
+  <div>
+    
+    <div class="flex px-4 pt-4 sm:px-5 sm:pt-5">
+      <h3 class="flex-1 flex-row text-lg font-bold text-gray-800 dark:text-white">
+        Book Name
+      </h3>
+
+      <p class="flex-1 flex-row dark:text-white text-right">
+        4 thoughts
+      </p>
+    </div>
+    
+    <p class="text-gray-400 w-full px-5 pb-5">
+      by author name, published 1999
+    </p>
+    
+    <div class="p-5 mt-1">
+      <h3 class="font-bold text-gray-800 dark:text-white">
+        Recent thoughts from Thu
+      </h3>
+      <p class="text-gray-500 dark:text-neutral-400">
+        Some quick example text to build on the card title and make up the bulk of the card's content.
+      </p>
+    </div>
+
+  </div>
+</div>