diff --git a/frontend-sba/components/Game/RunnerCard.vue b/frontend-sba/components/Game/RunnerCard.vue
index 1a6f2eb..39c08b6 100644
--- a/frontend-sba/components/Game/RunnerCard.vue
+++ b/frontend-sba/components/Game/RunnerCard.vue
@@ -95,11 +95,11 @@ function handleClick() {
 }
 
 .runner-pill.occupied {
-  @apply cursor-pointer hover:bg-blue-50;
+  @apply cursor-pointer hover:bg-red-50;
 }
 
 .runner-pill.selected {
-  @apply ring-2 ring-blue-500 bg-blue-50 shadow-md;
+  @apply ring-2 ring-red-500 bg-red-50 shadow-md;
 }
 
 .runner-pill.empty {
diff --git a/frontend-sba/components/Game/RunnersOnBase.vue b/frontend-sba/components/Game/RunnersOnBase.vue
index 0cb1804..40809cd 100644
--- a/frontend-sba/components/Game/RunnersOnBase.vue
+++ b/frontend-sba/components/Game/RunnersOnBase.vue
@@ -12,7 +12,7 @@
           :base="baseLabels[idx]"
           :runner="runners[key]"
           :is-selected="selectedRunner === key"
-          :team-color="battingTeamColor"
+          :team-color="'#ef4444'"
           @click="toggleRunner(key)"
         />
       </div>
@@ -22,7 +22,7 @@
         <div
           :class="[
             'catcher-pill h-full flex flex-col items-center justify-center p-2 rounded-lg border shadow-sm text-center cursor-pointer transition-all duration-200',
-            selectedRunner === 'catcher' ? 'bg-green-50 border-green-500 ring-2 ring-green-500' : 'bg-white border-gray-200 hover:bg-green-50'
+            selectedRunner === 'catcher' ? 'bg-blue-50 border-blue-500 ring-2 ring-blue-500' : 'bg-white border-gray-200 hover:bg-blue-50'
           ]"
           @click="toggleCatcher"
         >
@@ -46,9 +46,9 @@
     <!-- EXPANDED ROW: Runner card + Catcher card side by side (when a runner or catcher is selected) -->
     <Transition name="expand">
       <div v-if="hasSelection && displayedRunnerPlayer" class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
-        <!-- Lead/Selected Runner full card -->
-        <div class="matchup-card-blue bg-gradient-to-b from-blue-900 to-blue-950 border-2 border-blue-600 rounded-xl overflow-hidden shadow-lg">
-          <div class="bg-blue-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
+        <!-- Lead/Selected Runner full card (RED) -->
+        <div class="matchup-card-red bg-gradient-to-b from-red-900 to-red-950 border-2 border-red-600 rounded-xl overflow-hidden shadow-lg">
+          <div class="bg-red-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
             <span class="font-bold text-white/90" :style="{ color: battingTeamColor }">
               {{ battingTeamAbbrev }}
             </span>
@@ -62,15 +62,15 @@
               :alt="`${selectedRunnerName} card`"
               class="w-full h-auto"
             >
-            <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center">
+            <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-red-700 to-red-900 flex items-center justify-center">
               <span class="text-5xl font-bold text-white/60">{{ selectedRunnerInitials }}</span>
             </div>
           </div>
         </div>
 
-        <!-- Catcher full card -->
-        <div class="matchup-card bg-gradient-to-b from-green-900 to-green-950 border-2 border-green-600 rounded-xl overflow-hidden shadow-lg">
-          <div class="bg-green-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
+        <!-- Catcher full card (BLUE) -->
+        <div class="matchup-card-blue bg-gradient-to-b from-blue-900 to-blue-950 border-2 border-blue-600 rounded-xl overflow-hidden shadow-lg">
+          <div class="bg-blue-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
             <span class="font-bold text-white/90" :style="{ color: fieldingTeamColor }">
               {{ fieldingTeamAbbrev }}
             </span>
@@ -84,7 +84,7 @@
               :alt="`${catcherName} card`"
               class="w-full h-auto"
             >
-            <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-green-700 to-green-900 flex items-center justify-center">
+            <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center">
               <span class="text-5xl font-bold text-white/60">{{ getCatcherInitials }}</span>
             </div>
           </div>
@@ -266,20 +266,20 @@ watch(() => props.runners, (newRunners) => {
   animation: expandHeight 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse;
 }
 
-.matchup-card {
-  animation: pulseGlowGreen 2s ease-in-out infinite;
+.matchup-card-red {
+  animation: pulseGlowRed 2s ease-in-out infinite;
 }
 
 .matchup-card-blue {
   animation: pulseGlowBlue 2s ease-in-out infinite;
 }
 
-@keyframes pulseGlowGreen {
+@keyframes pulseGlowRed {
   0%, 100% {
-    box-shadow: 0 0 15px 2px rgba(16, 185, 129, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 15px 2px rgba(239, 68, 68, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3);
   }
   50% {
-    box-shadow: 0 0 30px 8px rgba(16, 185, 129, 0.7), 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 30px 8px rgba(239, 68, 68, 0.7), 0 10px 25px -5px rgba(0, 0, 0, 0.3);
   }
 }
 
diff --git a/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts b/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts
index 6bd22fa..e61ba13 100644
--- a/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts
+++ b/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts
@@ -207,8 +207,9 @@ describe("RunnersOnBase", () => {
             });
 
             const runnerCards = wrapper.findAllComponents(RunnerCard);
+            // Runner cards now use hardcoded red (#ef4444) instead of battingTeamColor
             runnerCards.forEach((card) => {
-                expect(card.props("teamColor")).toBe("#ff0000");
+                expect(card.props("teamColor")).toBe("#ef4444");
             });
         });
     });
@@ -338,9 +339,9 @@ describe("RunnersOnBase", () => {
             await runnerCards[0].trigger("click");
 
             // When runner selected, expanded detail row shows both runner + catcher cards
-            // matchup-card is catcher (green), matchup-card-blue is runner (blue)
-            expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Runner full card
-            expect(wrapper.find(".matchup-card").exists()).toBe(true); // Catcher full card
+            // matchup-card-red is runner (red), matchup-card-blue is catcher (blue)
+            expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner full card
+            expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher full card
         });
 
         it("hides expanded detail row when runner is deselected", async () => {
@@ -403,8 +404,8 @@ describe("RunnersOnBase", () => {
             // Click to show expanded view
             await runnerCards[0].trigger("click");
             await wrapper.vm.$nextTick();
-            expect(wrapper.find(".matchup-card-blue").exists()).toBe(true);
-            expect(wrapper.find(".matchup-card").exists()).toBe(true);
+            expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner (red)
+            expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher (blue)
 
             // Click again to toggle selection off - Transition may keep elements during animation
             await runnerCards[0].trigger("click");
@@ -578,7 +579,8 @@ describe("RunnersOnBase", () => {
             });
 
             const runnerCards = wrapper.findAllComponents(RunnerCard);
-            expect(runnerCards[0].props("teamColor")).toBe("#3b82f6");
+            // Runner cards now use red (#ef4444) instead of blue
+            expect(runnerCards[0].props("teamColor")).toBe("#ef4444");
         });
     });
 });