diff --git a/stages/index.html b/stages/index.html
index 44f1367..a262fc7 100644
--- a/stages/index.html
+++ b/stages/index.html
@@ -14,7 +14,9 @@
 
   <div id="loading-overlay" class="loading-overlay">
     <canvas id="loading-canvas" width="100" height="100"></canvas>
-    <div id="loading-text">Loading</div>
+    <div id="loading-text">
+      <img src="/assets/en/svg/text/wait/tx_loading-dccf3fb801ca859f2d17992f5cd7da62995c1fe81a306dd103398ef7c0e25b70.svg" alt="Loading">
+    </div>
   </div>
 
   <div class="main-wrapper">
diff --git a/stages/stages.js b/stages/stages.js
index 64fe91b..b266f90 100644
--- a/stages/stages.js
+++ b/stages/stages.js
@@ -106,7 +106,6 @@ function animateLoadingCanvas() {
   };
 }
 
-//pain in the ass to implement. im proud of ts
 const canvas = document.getElementById("squid-canvas");
 const ctx = canvas.getContext("2d");
 const frameWidth = 64;
@@ -209,7 +208,7 @@ async function renderStages() {
       <div class="stages-section">
           <div class="mode-header">
               <img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
-              <div class="mode-text">Regular Battle</div>
+              <div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
           </div>
           
           <div class="stages">
@@ -225,11 +224,11 @@ async function renderStages() {
       <div class="stages-section">
           <div class="mode-header">
               <img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
-              <div class="mode-text">Ranked Battle</div>
+              <div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
           </div>
 
           <div class="ranked-mode-labels">
-              <div class="battle-mode-text">Battle Mode</div>
+              <div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
               <div class="ranked-mode-text">${rotation.ranked_mode}</div>
           </div>
 
diff --git a/stages/styles.css b/stages/styles.css
index 0d1fa59..719c40f 100644
--- a/stages/styles.css
+++ b/stages/styles.css
@@ -101,13 +101,15 @@ body {
 
 .mode-text {
     margin: 0;
-    text-align: left;
-    color: white;
-    font-family: "Splatoon1", sans-serif;
-    font-size: 44px;
-    letter-spacing: 1.2px;
-    user-select: none;
     margin-left: -60px;
+    display: flex;
+    align-items: center;
+}
+
+.mode-text img {
+    height: 88px;
+    width: auto;
+    display: block;
 }
 
 .stages {
@@ -149,11 +151,15 @@ body {
 }
 
 .battle-mode-text {
-    font-family: "Splatoon1", sans-serif;
-    color: white;
-    font-size: 30px;
-    letter-spacing: 1px;
     margin-bottom: 4px;
+    display: flex;
+    justify-content: center;
+}
+
+.battle-mode-text img {
+    height: 70px;
+    width: auto;
+    display: block;
 }
 
 .ranked-mode-text {
@@ -235,9 +241,15 @@ body {
 
 #loading-text {
     margin-top: 12px;
-    color: white;
-    font-family: "Splatoon1", sans-serif;
-    font-size: 20px;
-    letter-spacing: 1.2px;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#loading-text img {
+    height: 35px;
+    width: auto;
+    display: block;
+    user-select: none;
+    pointer-events: none;
 }
\ No newline at end of file