diff --git a/lib/cobblemon_ui_web/live/battle_components.ex b/lib/cobblemon_ui_web/live/battle_components.ex
index a739a21..0866493 100644
--- a/lib/cobblemon_ui_web/live/battle_components.ex
+++ b/lib/cobblemon_ui_web/live/battle_components.ex
@@ -9,91 +9,106 @@ defmodule CobblemonUiWeb.BattleComponents do
 
   def battle_panel(assigns) do
     ~H"""
-    <div class="rounded-xl border border-error/30 bg-error/5 overflow-hidden mb-6">
-      <div class="px-5 py-3 border-b border-error/20 flex items-center gap-2">
+    <div class="rounded-xl border border-error/20 bg-error/5 overflow-hidden mb-6">
+      <%!-- Header --%>
+      <div class="px-5 py-3 border-b border-error/15 flex items-center gap-2.5 bg-error/5">
         <span class="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
-        <span class="text-sm font-semibold text-error">Active Battle</span>
+        <span class="text-sm font-semibold text-error tracking-wide">Active Battle</span>
       </div>
-      <div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-3 relative">
-        <div class="hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2 items-center justify-center z-10 pointer-events-none">
-          <span class="text-base font-black text-base-content/20 bg-base-200/80 px-2 py-1 rounded-lg">
-            VS
-          </span>
-        </div>
-        <%= for actor <- @battle.actors do %>
+
+      <%!-- Actors --%>
+      <div class="grid grid-cols-1 md:grid-cols-2">
+        <%= for {actor, idx} <- Enum.with_index(@battle.actors) do %>
+          <%!-- Divider between actors on mobile, VS bar on desktop --%>
+          <div :if={idx == 1} class="md:hidden border-t border-base-300/20 mx-4" />
           <div class={[
-            "rounded-lg border p-3",
-            if(actor.player_id == @player_id,
-              do: "border-primary/25 bg-primary/5",
-              else: "border-warning/25 bg-warning/5"
-            )
+            "p-4",
+            if(idx == 0, do: "md:border-r border-base-300/20", else: "")
           ]}>
-            <div class="flex items-center gap-2 mb-3">
+            <%!-- Actor header --%>
+            <div class={[
+              "flex items-center gap-2 mb-3 pb-3 border-b",
+              if(actor.player_id == @player_id,
+                do: "border-primary/15",
+                else: "border-warning/15"
+              )
+            ]}>
               <div class={[
-                "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
+                "w-8 h-8 rounded-lg flex items-center justify-center shrink-0",
                 if(actor.type == "player", do: "bg-primary/15", else: "bg-warning/15")
               ]}>
                 <%= if actor.type == "player" do %>
-                  <.icon name="hero-user" class="size-3.5 text-primary" />
+                  <.icon name="hero-user" class="size-4 text-primary" />
                 <% else %>
-                  <.icon name="hero-cpu-chip" class="size-3.5 text-warning" />
+                  <.icon name="hero-cpu-chip" class="size-4 text-warning" />
                 <% end %>
               </div>
-              <div>
-                <p class="text-sm font-semibold text-base-content">{actor.name}</p>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-bold text-base-content truncate">{actor.name}</p>
                 <p class={[
-                  "text-[10px] uppercase font-medium tracking-wide",
-                  if(actor.type == "player", do: "text-primary/60", else: "text-warning/60")
+                  "text-[10px] uppercase font-semibold tracking-widest",
+                  if(actor.type == "player", do: "text-primary/50", else: "text-warning/50")
                 ]}>
                   {actor.type}
                 </p>
               </div>
+              <%!-- VS badge for desktop --%>
+              <div :if={idx == 0} class="hidden md:flex items-center justify-center">
+                <span class="text-xs font-black text-base-content/20">VS</span>
+              </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 gap-3">
+
+            <%!-- Pokemon cards --%>
+            <div class="space-y-2">
+              <%= for poke <- actor.active_pokemon do %>
+                <% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
+                <% hp_pct = if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0.0 %>
+                <div class="flex items-center gap-3 rounded-lg bg-base-100/40 border border-base-300/20 p-3">
                   <%!-- Sprite --%>
-                  <div class="w-14 h-14 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden">
+                  <div class="w-16 h-16 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0">
                     <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"
+                      class="w-14 h-14 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">
+                    <%!-- Name row --%>
+                    <div class="flex items-center gap-2 mb-1.5">
+                      <span class="text-sm font-bold text-base-content capitalize truncate">{poke.species}</span>
+                      <span class="text-[10px] text-base-content/35 bg-base-300/30 px-1.5 py-0.5 rounded font-mono shrink-0">
                         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">
+                    <%!-- HP bar --%>
+                    <div class="w-full h-2 rounded-full bg-base-300/40 overflow-hidden mb-1">
                       <div
                         class={[
-                          "h-full rounded-full transition-all",
+                          "h-full rounded-full transition-all duration-500",
                           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"
+                            hp_pct > 50 -> "bg-success"
+                            hp_pct > 20 -> "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}%"}
+                        style={"width: #{hp_pct}%"}
                       />
                     </div>
+                    <%!-- HP numbers --%>
+                    <div class="flex items-center justify-between">
+                      <span class="text-[10px] text-base-content/35 font-medium">HP</span>
+                      <span class="text-[10px] font-mono text-base-content/40">
+                        {poke.hp} / {poke.max_hp}
+                        <span class="text-base-content/25 ml-1">({hp_pct}%)</span>
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            <% end %>
+              <% end %>
+            </div>
           </div>
         <% end %>
       </div>
diff --git a/lib/cobblemon_ui_web/live/pokemon_components.ex b/lib/cobblemon_ui_web/live/pokemon_components.ex
index 571d701..9490c9e 100644
--- a/lib/cobblemon_ui_web/live/pokemon_components.ex
+++ b/lib/cobblemon_ui_web/live/pokemon_components.ex
@@ -52,7 +52,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
             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")
+              if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7")
             ]}
           >
             ?
@@ -101,7 +101,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
       rel="noopener noreferrer"
       class={[
         "inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform",
-        if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5"),
+        if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7"),
         case @tier do
           "S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30"
           "A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30"