diff --git a/lib/cobblemon_ui_web/live/battle_components.ex b/lib/cobblemon_ui_web/live/battle_components.ex
index 7a1b5c1..a739a21 100644
--- a/lib/cobblemon_ui_web/live/battle_components.ex
+++ b/lib/cobblemon_ui_web/live/battle_components.ex
@@ -1,8 +1,11 @@
 defmodule CobblemonUiWeb.BattleComponents do
   use CobblemonUiWeb, :html
 
+  import CobblemonUiWeb.PokemonComponents, only: [tier_badge: 1]
+
   attr :battle, :map, required: true
   attr :player_id, :string, required: true
+  attr :tier_list, :map, default: %{}
 
   def battle_panel(assigns) do
     ~H"""
@@ -25,7 +28,7 @@ defmodule CobblemonUiWeb.BattleComponents do
               else: "border-warning/25 bg-warning/5"
             )
           ]}>
-            <div class="flex items-center gap-2 mb-2">
+            <div class="flex items-center gap-2 mb-3">
               <div class={[
                 "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
                 if(actor.type == "player", do: "bg-primary/15", else: "bg-warning/15")
@@ -47,31 +50,47 @@ defmodule CobblemonUiWeb.BattleComponents do
               </div>
             </div>
             <%= for poke <- actor.active_pokemon do %>
+              <% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
               <div class="rounded-md bg-base-100/50 border border-base-300/30 px-3 py-2">
-                <div class="flex items-center justify-between mb-1">
-                  <div class="flex items-center gap-1.5">
-                    <span class="text-sm font-bold text-base-content">{poke.species}</span>
-                    <span class="text-[10px] text-base-content/40 bg-base-300/40 px-1.5 py-0.5 rounded font-mono">
-                      Lv.{poke.level}
-                    </span>
+                <div class="flex items-center gap-3">
+                  <%!-- Sprite --%>
+                  <div class="w-14 h-14 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden">
+                    <img
+                      src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{String.downcase(poke.species || "")}.png"}
+                      alt={poke.species}
+                      class="w-12 h-12 object-contain drop-shadow-sm"
+                    />
+                  </div>
+                  <%!-- Info --%>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-1.5 mb-1">
+                      <span class="text-sm font-bold text-base-content capitalize">{poke.species}</span>
+                      <span class="text-[10px] text-base-content/40 bg-base-300/40 px-1.5 py-0.5 rounded font-mono">
+                        Lv.{poke.level}
+                      </span>
+                      <.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
+                    </div>
+                    <div class="flex items-center justify-between mb-1">
+                      <span class="text-[11px] text-base-content/40">HP</span>
+                      <span class="text-xs font-mono text-base-content/50">
+                        {poke.hp}/{poke.max_hp}
+                      </span>
+                    </div>
+                    <div class="w-full h-1.5 rounded-full bg-base-300/50 overflow-hidden">
+                      <div
+                        class={[
+                          "h-full rounded-full transition-all",
+                          cond do
+                            poke.max_hp == 0 -> "bg-base-content/20"
+                            poke.hp / poke.max_hp > 0.5 -> "bg-success"
+                            poke.hp / poke.max_hp > 0.2 -> "bg-warning"
+                            true -> "bg-error"
+                          end
+                        ]}
+                        style={"width: #{if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0}%"}
+                      />
+                    </div>
                   </div>
-                  <span class="text-xs font-mono text-base-content/50">
-                    {poke.hp}/{poke.max_hp}
-                  </span>
-                </div>
-                <div class="w-full h-1.5 rounded-full bg-base-300/50 overflow-hidden">
-                  <div
-                    class={[
-                      "h-full rounded-full transition-all",
-                      cond do
-                        poke.max_hp == 0 -> "bg-base-content/20"
-                        poke.hp / poke.max_hp > 0.5 -> "bg-success"
-                        poke.hp / poke.max_hp > 0.2 -> "bg-warning"
-                        true -> "bg-error"
-                      end
-                    ]}
-                    style={"width: #{if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0}%"}
-                  />
                 </div>
               </div>
             <% end %>
diff --git a/lib/cobblemon_ui_web/live/dashboard_live.ex b/lib/cobblemon_ui_web/live/dashboard_live.ex
index 93081f0..9271fb8 100644
--- a/lib/cobblemon_ui_web/live/dashboard_live.ex
+++ b/lib/cobblemon_ui_web/live/dashboard_live.ex
@@ -217,7 +217,7 @@ defmodule CobblemonUiWeb.DashboardLive do
               </div>
 
               <%!-- Active battle --%>
-              <.battle_panel :if={@battle} battle={@battle} player_id={@selected_player} />
+              <.battle_panel :if={@battle} battle={@battle} player_id={@selected_player} tier_list={@tier_list} />
 
               <%!-- View mode tabs --%>
               <div class="flex items-center gap-1 mb-5 p-1 rounded-lg bg-base-200/40 w-fit">