diff --git a/app/components/pet_avatar_component.html.erb b/app/components/pet_avatar_component.html.erb
new file mode 100644
index 000000000..439f2f859
--- /dev/null
+++ b/app/components/pet_avatar_component.html.erb
@@ -0,0 +1 @@
+<span class="<%= container_class %>"><%= pet_avatar %></span>
diff --git a/app/components/pet_avatar_component.rb b/app/components/pet_avatar_component.rb
new file mode 100644
index 000000000..68d8635e9
--- /dev/null
+++ b/app/components/pet_avatar_component.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Renders a Pet's image and the Heart like button
+class PetAvatarComponent < ApplicationComponent
+  param :pet, Types::Instance(Pet)
+  option :like, optional: true
+
+  private
+
+  def pet_avatar
+    pet_image || pet_initials_span
+  end
+
+  def pet_image
+    if pet.images.present? && pet.images.first.present?
+      image_tag(url_for(pet.images.first), alt: pet.name, class: image_class)
+    end
+  end
+
+  def pet_initials_span
+    if pet.name.present?
+      content_tag(:span, pet_initials, class: initials_class)
+    end
+  end
+
+  def pet_initials
+    pet.name[0].upcase
+  end
+
+  def image_class
+    "rounded-circle"
+  end
+
+  def initials_class
+    "avatar-initials rounded-circle fs-2"
+  end
+
+  def container_class
+    "avatar avatar-xl avatar-primary rounded-circle border border-4 border-white"
+  end
+end
diff --git a/app/views/organizations/adopter_fosterer/likes/index.html.erb b/app/views/organizations/adopter_fosterer/likes/index.html.erb
index 9789800a8..283ae009d 100644
--- a/app/views/organizations/adopter_fosterer/likes/index.html.erb
+++ b/app/views/organizations/adopter_fosterer/likes/index.html.erb
@@ -3,41 +3,21 @@
   <% c.with_body do %>
     <div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
       <div class="row">
-        <% @pets.each do |pet| %>
-          <div class="col-lg-4 col-md-6 p-0">
-            <%= render CardComponent.new(
-              card_options: {class: "card card-hover m-4"},
-              image_options: {src: pet.images.first, url: adoptable_pet_path(pet)}
-            ) do |c| %>
-              <%= c.with_badge do %>
-                <%= render BadgeComponent.new("Adoption Pending", class: "badge bg-info", when: pet.has_adoption_pending?) %>
-                <%= render BadgeComponent.new("Adopted", class: "badge bg-warning", when: pet.is_adopted?) %>
-              <% end %>
-              <%= c.with_body do %>
-                <ul class="list-group list-group-flush">
-                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
-                    <%= link_to adoptable_pet_path(pet), class: 'text-decoration-none' do %>
-                      <h3 class="card-title text-secondary mb-0">
-                        <%= pet.name %>
-                      </h3>
-                    <% end %>
-                    <% if current_user&.adopter_foster_account %>
-                      <div class='text-end' id="like_button_pet_<%= pet.id %>">
-                        <%= render LikeButtonComponent.new(pet: pet, like: @likes_by_id[pet.id]) %>
-                      </div>
-                    <% end %>
-                  </li>
-                  <% li_classes = %w[list-group-item text-secondary] %>
-                  <%= tag.li("Age: #{time_ago_in_words(pet.birth_date).titleize}", class: li_classes) %>
-                  <%= tag.li("Breed: #{pet.breed}", class: li_classes) %>
-                  <%= tag.li("Sex: #{pet.sex}", class: li_classes) %>
-                  <%= tag.li("Weight range: #{[pet.weight_from, pet.weight_to].join("-")} kg", class: li_classes) %>
-                </ul>
-              <% end %>
-            <% end %>
+          <% @pets.each do |pet| %>
+          <div class="col-lg-4 col-md-6 p-2">
+            <div class="pet-box p-3 border rounded bg-white d-flex align-items-center">
+              <%= render PetAvatarComponent.new(pet: pet, like: @like, size: :xl) %>
+              <div class=" d-flex justify-content-between align-items-center mt-2">
+                <span class="mx-3"><%= pet.name %></span>
+                <div id="like_button_pet_<%= pet.id %>">
+                  <%= render LikeButtonComponent.new(pet: pet, like: @likes_by_id[pet.id]) %>
+                </div>
+              </div>
+            </div>
           </div>
         <% end %>
       </div>
     </div>
   <% end %>
 <% end %>
+
diff --git a/test/components/pet_avatar_component_test.rb b/test/components/pet_avatar_component_test.rb
new file mode 100644
index 000000000..4fbc2ef6a
--- /dev/null
+++ b/test/components/pet_avatar_component_test.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class PetAvatarComponentTest < ViewComponent::TestCase
+  setup do
+    @user = create(:user)
+    @component = AvatarComponent.new(@user)
+  end
+
+  context "when pet does and does not exists" do
+    setup do
+      @pet_with_image = create(:pet, :with_image)
+      @pet_without_image = create(:pet)
+    end
+
+    should "has and image" do
+      url = "/example.png"
+      stub(:url_for, url) do
+        render_inline(@component)
+        assert_selector("img[src='#{url_for(@pet_with_image.images.first)}']", count: 1)
+      end
+    end
+
+    should "does not have an image but shows initials" do
+      url = "/example.png"
+      stub(:url_for, url) do
+        @component = AvatarComponent.new(pet: @pet_without_image)
+        render_inline(@component)
+        assert_selector(@pet_without_image.name[0, 2].upcase)
+      end
+    end
+  end
+end