diff --git a/lib/wild_web/live/index.html.heex b/lib/wild_web/live/index.html.heex
index 68b26c6..ac488f2 100644
--- a/lib/wild_web/live/index.html.heex
+++ b/lib/wild_web/live/index.html.heex
@@ -1,20 +1,47 @@
 <h1>Hello World</h1>
-<div class="size-1/3 mr-4 mt-4">
-  <div class="p-10 bg-pink-100 shadow-md rounded-xl">
-    <h2>Books</h2>
+<div class="flex gap-10">
+  <div class="flex-1">
+    <div class="shadow-md rounded-xl pt-4 bg-pink-100">
+      <h2 class="text-center font-bold pb-2">BOOKS</h2>
+      c
+        <img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl" />
+      </.link>
+    </div>
+
+    <div class="text-right py-2 text-pink-500">
+      <.link patch={~p"/books/thoughts"} class="hover:underline">
+        Share my thoughts
+      </.link>
+    </div>
   </div>
 
-  <div class="p-10 bg-pink-200 shadow-md rounded-xl mt-2">
-    <.link patch={~p"/books/thoughts"}>Share my thought</.link>
-  </div>
-</div>
-
-<div class="size-1/3 mr-4 mt-4">
-  <div class="p-10 bg-blue-100 shadow-md rounded-xl">
-    <h2>Movies</h2>
-  </div>
-
-  <div class="p-10 bg-blue-200 shadow-md rounded-xl mt-2">
-    <.link patch={~p"/books/thoughts"}>Share my critics</.link>
+  <div class="flex-1">
+    <div class="shadow-md rounded-xl pt-4 bg-blue-100">
+      <h2 class="text-center font-bold pb-2">MOVIES</h2>
+      <.link patch={~p"/movies"}>
+        <img src={~p"/images/movie-card-homepage.jpg"} class="rounded-xl" />
+      </.link>
+    </div>
+
+    <div class="text-right py-2 text-blue-500">
+      <.link patch={~p"/movies/critics"} class="hover:underline">
+        Share my critics
+      </.link>
+    </div>
+  </div>
+
+  <div class="flex-1">
+    <div class="shadow-md rounded-xl pt-4 bg-green-100">
+      <h2 class="text-center font-bold pb-2">RECIPES</h2>
+      <.link patch={~p"/recipes"}>
+        <img src={~p"/images/recipe-card-homepage.jpg"} class="rounded-xl" />
+      </.link>
+    </div>
+
+    <div class="text-right py-2 text-green-500">
+      <.link patch={~p"/recipes/tastes"} class="hover:underline">
+        Share my tastes
+      </.link>
+    </div>
   </div>
 </div>
diff --git a/priv/static/images/book-card-homepage.jpg b/priv/static/images/book-card-homepage.jpg
new file mode 100644
index 0000000..a22358e
Binary files /dev/null and b/priv/static/images/book-card-homepage.jpg differ
diff --git a/priv/static/images/movie-card-homepage.jpg b/priv/static/images/movie-card-homepage.jpg
new file mode 100644
index 0000000..69c6a7d
Binary files /dev/null and b/priv/static/images/movie-card-homepage.jpg differ
diff --git a/priv/static/images/recipe-card-homepage.jpg b/priv/static/images/recipe-card-homepage.jpg
new file mode 100644
index 0000000..201d3aa
Binary files /dev/null and b/priv/static/images/recipe-card-homepage.jpg differ