diff --git a/lib/cobblemon_ui_web/live/pokemon_components.ex b/lib/cobblemon_ui_web/live/pokemon_components.ex
index 93bb46b..13a91ac 100644
--- a/lib/cobblemon_ui_web/live/pokemon_components.ex
+++ b/lib/cobblemon_ui_web/live/pokemon_components.ex
@@ -31,62 +31,77 @@ defmodule CobblemonUiWeb.PokemonComponents do
         if(@compact, do: "p-2.5", else: "p-3.5")
       ]}
     >
-      <div class="flex items-start justify-between">
-        <div class="min-w-0">
-          <p class={[
-            "font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors",
-            if(@compact, do: "text-xs", else: "text-sm")
-          ]}>
-            {@pokemon.species || "Unknown"}
-          </p>
-          <p class={[
-            "text-base-content/40 mt-0.5",
-            if(@compact, do: "text-[10px]", else: "text-xs")
-          ]}>
-            Lv. {@pokemon.level || "?"}
-          </p>
+      <div class="flex items-start gap-3">
+        <%!-- Sprite (party only) --%>
+        <div
+          :if={!@compact}
+          class="w-14 h-14 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0 overflow-hidden"
+        >
+          <img
+            src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
+            alt={@pokemon.species}
+            class="w-12 h-12 object-contain drop-shadow-sm"
+          />
         </div>
-        <div class="flex items-center gap-1 shrink-0">
-          <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={@compact} />
-          <div
-            :if={!@tier}
-            title="Tier data not downloaded"
-            class={[
-              "inline-flex items-center justify-center font-black rounded leading-none shrink-0",
-              "bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
-              if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5")
-            ]}
-          >
-            ?
+        <div class="flex-1 min-w-0">
+          <div class="flex items-start justify-between">
+            <div class="min-w-0">
+              <p class={[
+                "font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors",
+                if(@compact, do: "text-xs", else: "text-sm")
+              ]}>
+                {@pokemon.species || "Unknown"}
+              </p>
+              <p class={[
+                "text-base-content/40 mt-0.5",
+                if(@compact, do: "text-[10px]", else: "text-xs")
+              ]}>
+                Lv. {@pokemon.level || "?"}
+              </p>
+            </div>
+            <div class="flex items-center gap-1 shrink-0">
+              <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={@compact} />
+              <div
+                :if={!@tier}
+                title="Tier data not downloaded"
+                class={[
+                  "inline-flex items-center justify-center font-black rounded leading-none shrink-0",
+                  "bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
+                  if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5")
+                ]}
+              >
+                ?
+              </div>
+              <div :if={@pokemon.shiny} title="Shiny">
+                <.icon
+                  name="hero-sparkles"
+                  class={[
+                    "text-warning",
+                    if(@compact, do: "size-3", else: "size-4")
+                  ]}
+                />
+              </div>
+            </div>
           </div>
-          <div :if={@pokemon.shiny} title="Shiny">
-            <.icon
-              name="hero-sparkles"
+          <div :if={!@compact} class="flex items-center gap-2 mt-2">
+            <span
+              :if={@pokemon.nature}
+              class="inline-block text-[10px] px-1.5 py-0.5 rounded bg-base-300/40 text-base-content/50 capitalize"
+            >
+              {@pokemon.nature}
+            </span>
+            <span
+              :if={@pokemon.gender}
               class={[
-                "text-warning",
-                if(@compact, do: "size-3", else: "size-4")
+                "text-[10px] font-bold",
+                gender_color(@pokemon.gender)
               ]}
-            />
+            >
+              {gender_symbol(@pokemon.gender)}
+            </span>
           </div>
         </div>
       </div>
-      <div :if={!@compact} class="flex items-center gap-2 mt-2">
-        <span
-          :if={@pokemon.nature}
-          class="inline-block text-[10px] px-1.5 py-0.5 rounded bg-base-300/40 text-base-content/50 capitalize"
-        >
-          {@pokemon.nature}
-        </span>
-        <span
-          :if={@pokemon.gender}
-          class={[
-            "text-[10px] font-bold",
-            gender_color(@pokemon.gender)
-          ]}
-        >
-          {gender_symbol(@pokemon.gender)}
-        </span>
-      </div>
     </div>
     """
   end
@@ -388,12 +403,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
   def type_chart_card(assigns) do
     ~H"""
     <div class="flex items-start gap-3 rounded-xl bg-base-200/40 border border-base-300/20 px-3.5 py-3 hover:bg-base-200/60 transition-colors">
-      <%!-- Type icon circle --%>
+      <%!-- Type icon --%>
       <div class={[
-        "w-11 h-11 rounded-full flex items-center justify-center shrink-0 shadow-sm mt-0.5 text-white",
-        TypeChart.type_color(@type_name)
+        "w-11 h-11 flex items-center justify-center shrink-0 mt-0.5",
+        TypeChart.type_text_color(@type_name)
       ]}>
-        <TypeIcons.type_icon type={@type_name} class="w-6 h-6" />
+        <TypeIcons.type_icon type={@type_name} class="w-8 h-8" />
       </div>
       <%!-- Weakness / Resistance rows --%>
       <div class="flex-1 min-w-0">
@@ -442,12 +457,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
     ~H"""
     <span
       class={[
-        "inline-flex items-center justify-center w-5 h-5 rounded-full shadow-sm text-white",
-        TypeChart.type_color(@type_name)
+        "inline-flex items-center justify-center w-5 h-5",
+        TypeChart.type_text_color(@type_name)
       ]}
       title={@type_name}
     >
-      <TypeIcons.type_icon type={@type_name} class="w-3 h-3" />
+      <TypeIcons.type_icon type={@type_name} class="w-4 h-4" />
     </span>
     """
   end