diff --git a/assets/stages/ancho-v.png b/assets/stages/ancho-v.png
deleted file mode 100644
index e56560d..0000000
Binary files a/assets/stages/ancho-v.png and /dev/null differ
diff --git a/assets/stages/arowana.png b/assets/stages/arowana.png
deleted file mode 100644
index 5850a3e..0000000
Binary files a/assets/stages/arowana.png and /dev/null differ
diff --git a/assets/stages/blackbelly.png b/assets/stages/blackbelly.png
deleted file mode 100644
index fa0c4db..0000000
Binary files a/assets/stages/blackbelly.png and /dev/null differ
diff --git a/assets/stages/bluefin.png b/assets/stages/bluefin.png
deleted file mode 100644
index c145842..0000000
Binary files a/assets/stages/bluefin.png and /dev/null differ
diff --git a/assets/stages/camp.png b/assets/stages/camp.png
deleted file mode 100644
index 2d170af..0000000
Binary files a/assets/stages/camp.png and /dev/null differ
diff --git a/assets/stages/flounder.png b/assets/stages/flounder.png
deleted file mode 100644
index 022a793..0000000
Binary files a/assets/stages/flounder.png and /dev/null differ
diff --git a/assets/stages/hammerhead.png b/assets/stages/hammerhead.png
deleted file mode 100644
index ba53850..0000000
Binary files a/assets/stages/hammerhead.png and /dev/null differ
diff --git a/assets/stages/kelp.png b/assets/stages/kelp.png
deleted file mode 100644
index d34b943..0000000
Binary files a/assets/stages/kelp.png and /dev/null differ
diff --git a/assets/stages/mahi-mahi.png b/assets/stages/mahi-mahi.png
deleted file mode 100644
index 99c65d3..0000000
Binary files a/assets/stages/mahi-mahi.png and /dev/null differ
diff --git a/assets/stages/moray.png b/assets/stages/moray.png
deleted file mode 100644
index 628756d..0000000
Binary files a/assets/stages/moray.png and /dev/null differ
diff --git a/assets/stages/museum.png b/assets/stages/museum.png
deleted file mode 100644
index e0f3b68..0000000
Binary files a/assets/stages/museum.png and /dev/null differ
diff --git a/assets/stages/piranha.png b/assets/stages/piranha.png
deleted file mode 100644
index ff830d9..0000000
Binary files a/assets/stages/piranha.png and /dev/null differ
diff --git a/assets/stages/port.png b/assets/stages/port.png
deleted file mode 100644
index 02d671a..0000000
Binary files a/assets/stages/port.png and /dev/null differ
diff --git a/assets/stages/saltspray.png b/assets/stages/saltspray.png
deleted file mode 100644
index bcca748..0000000
Binary files a/assets/stages/saltspray.png and /dev/null differ
diff --git a/assets/stages/stages.png b/assets/stages/stages.png
new file mode 100644
index 0000000..2dae25a
Binary files /dev/null and b/assets/stages/stages.png differ
diff --git a/assets/stages/urchin.png b/assets/stages/urchin.png
deleted file mode 100644
index e859dd0..0000000
Binary files a/assets/stages/urchin.png and /dev/null differ
diff --git a/assets/stages/walleye.png b/assets/stages/walleye.png
deleted file mode 100644
index 7179718..0000000
Binary files a/assets/stages/walleye.png and /dev/null differ
diff --git a/stages/stages.js b/stages/stages.js
index c0675b7..973cf8c 100644
--- a/stages/stages.js
+++ b/stages/stages.js
@@ -4,12 +4,27 @@ function stageNames(stages, lang = "en-US") {
   return stages.map(s => s.translatedNames[lang]);
 }
 
-function stageImagePath(stageName) {
-  const firstWord = stageName
-    .split(" ")[0]
-    .toLowerCase()
-    .replace(/['.]/g, "");
-  return `/assets/stages/${firstWord}.png`;
+function getStageClass(stageName) {
+  const name = stageName.toLowerCase();
+  
+  if (name.includes("ancho-v")) return "sprite-ancho-v";
+  if (name.includes("arowana")) return "sprite-arowana";
+  if (name.includes("blackbelly")) return "sprite-blackbelly";
+  if (name.includes("bluefin")) return "sprite-bluefin";
+  if (name.includes("camp")) return "sprite-camp";
+  if (name.includes("flounder")) return "sprite-flounder";
+  if (name.includes("hammerhead")) return "sprite-hammerhead";
+  if (name.includes("kelp")) return "sprite-kelp";
+  if (name.includes("mahi-mahi")) return "sprite-mahi-mahi";
+  if (name.includes("moray")) return "sprite-moray";
+  if (name.includes("museum")) return "sprite-museum";
+  if (name.includes("piranha")) return "sprite-piranha";
+  if (name.includes("port")) return "sprite-port";
+  if (name.includes("saltspray")) return "sprite-saltspray";
+  if (name.includes("urchin")) return "sprite-urchin";
+  if (name.includes("walleye")) return "sprite-walleye";
+  
+  return "sprite"; // fallback
 }
 
 async function fetchRotations() {
@@ -83,7 +98,7 @@ async function renderStages() {
           <div class="stages">
               ${rotation.turf.map(name => `
                   <div class="stage-item">
-                      <img src="${stageImagePath(name)}" alt="${name}">
+                      <div class="sprite ${getStageClass(name)}"></div>
                       <div class="stage-title">${name}</div>
                   </div>
               `).join("")}
@@ -104,7 +119,7 @@ async function renderStages() {
           <div class="stages">
               ${rotation.ranked.map(name => `
                   <div class="stage-item">
-                      <img src="${stageImagePath(name)}" alt="${name}">
+                      <div class="sprite ${getStageClass(name)}"></div>
                       <div class="stage-title">${name}</div>
                   </div>
               `).join("")}
diff --git a/stages/styles.css b/stages/styles.css
index dde4e30..e0de196 100644
--- a/stages/styles.css
+++ b/stages/styles.css
@@ -170,13 +170,6 @@ body {
     max-width: 400px;
 }
 
-.stages img {
-    width: 100%;
-    height: auto;
-    display: block;
-    margin-bottom: 10px;
-}
-
 .stage-title {
     font-family: "Regular", sans-serif;
     text-align: center;
@@ -291,4 +284,43 @@ body {
     height: 35px;
     width: auto;
     display: block;
-}
\ No newline at end of file
+}
+
+.sprite {
+    background-image: url("/assets/stages/stages.png");
+    background-repeat: no-repeat;
+    display: block;
+    width: 100%;
+    max-width: 640px;
+    aspect-ratio: 16 / 9;
+    background-size: 406.25% auto;
+    margin-bottom: 10px;
+}
+
+.sprite-ancho-v { background-position: 0.255% 0.336%; }
+.sprite-arowana { background-position: 33.418% 0.336%; }
+.sprite-blackbelly { background-position: 66.582% 0.336%; }
+.sprite-urchin { background-position: 99.745% 0.336%; }
+
+.sprite-bluefin { background-position: 0.255% 25.168%; }
+.sprite-camp { background-position: 33.418% 25.168%; }
+.sprite-flounder { background-position: 66.582% 25.168%; }
+.sprite-walleye { background-position: 99.745% 25.168%; }
+
+.sprite-hammerhead { background-position: 4.337% 50%; }
+.sprite-kelp { background-position: 37.5% 50%; }
+
+.sprite-mahi-mahi { background-position: 0.255% 74.832%; }
+.sprite-moray { background-position: 33.418% 74.832%; }
+.sprite-museum { background-position: 66.582% 74.832%; }
+
+.sprite-piranha { background-position: 0.255% 99.664%; }
+.sprite-port { background-position: 33.418% 99.664%; }
+.sprite-saltspray { background-position: 66.582% 99.664%; }
+
+.sprite-github { width: 30px; height: 30px; background-position: -5px -745px; background-size: initial; aspect-ratio: 1/1; }
+.sprite-gmail { width: 30px; height: 30px; background-position: -45px -745px; background-size: initial; aspect-ratio: 1/1; }
+.sprite-linkedin { width: 30px; height: 30px; background-position: -1385px -745px; background-size: initial; aspect-ratio: 1/1; }
+.sprite-stackoverflow { width: 30px; height: 30px; background-position: -1425px -745px; background-size: initial; aspect-ratio: 1/1; }
+.sprite-tumblr { width: 30px; height: 30px; background-position: -1465px -745px; background-size: initial; aspect-ratio: 1/1; }
+.sprite-twitter { width: 30px; height: 30px; background-position: -1505px -745px; background-size: initial; aspect-ratio: 1/1; }
\ No newline at end of file