diff --git a/static/js/game.js b/static/js/game.js
index 0feab88..9841bbb 100644
--- a/static/js/game.js
+++ b/static/js/game.js
@@ -9,6 +9,11 @@ const state = {
 
 const el = (id) => document.getElementById(id);
 
+const CAP_COLORS = ["#c0392b", "#2980b9", "#27ae60", "#8e44ad", "#d35400", "#16a085", "#f1c40f", "#c2185b"];
+function capColorFor(row, col) {
+  return CAP_COLORS[(row * 7 + col * 3) % CAP_COLORS.length];
+}
+
 async function api(path, options) {
   const res = await fetch(path, {
     method: options?.method || "GET",
@@ -96,8 +101,7 @@ function renderPlacementBoard(data) {
       cell.innerHTML = "";
       const shipId = data.player_board[r][c];
       if (shipId) {
-        const ship = data.fleet_def.find((s) => s.id === shipId);
-        cell.appendChild(wapplerSprite(ship.hat));
+        cell.appendChild(wapplerSprite(capColorFor(r, c)));
       }
     }
   }
@@ -137,7 +141,7 @@ function renderBattle(data) {
       own.innerHTML = "";
       const shipId = data.player_board[r][c];
       const receivedShot = data.player_shots_received[r][c];
-      if (shipId) own.appendChild(wapplerSprite(data.fleet_def.find((s) => s.id === shipId).hat));
+      if (shipId) own.appendChild(wapplerSprite(capColorFor(r, c)));
       if (receivedShot) own.classList.add(receivedShot);
 
       const enemy = enemyCells[r][c];