diff --git a/assets/en/stageinfo.png b/assets/en/stageinfo.png
deleted file mode 100644
index cedd13f..0000000
Binary files a/assets/en/stageinfo.png and /dev/null differ
diff --git a/stages/index.html b/stages/index.html
index a262fc7..8b0f8ab 100644
--- a/stages/index.html
+++ b/stages/index.html
@@ -24,7 +24,15 @@
     <div id="header-container"></div>
 
     <div class="content">
-      <img src="../assets/en/stageinfo.png" class="stage-info" alt="Stage Info" />
+      
+      <div class="logo-left-align">
+        <div id="stage-header-logo">
+          <img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
+          <img class="icon-layer" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
+          <img class="label-layer" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
+        </div>
+      </div>
+
       <div class="stage-info-text">
         Use the stage information to guide your weapon strategy and battle strategy!
       </div>
diff --git a/stages/styles.css b/stages/styles.css
index 719c40f..cdc29da 100644
--- a/stages/styles.css
+++ b/stages/styles.css
@@ -12,13 +12,14 @@
     font-style: normal;
 }
 
-html {
+html, body {
     height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
 }
 
 body {
-    margin: 0;
-    padding: 0;
     display: flex;
     align-items: flex-start;
     min-height: 100vh;
@@ -32,6 +33,7 @@ body {
     display: flex;
     width: 100%;
     background: transparent;
+    overflow-x: hidden;
 }
 
 .content {
@@ -39,8 +41,9 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 40px 0;
+    padding: 30px 0;
     box-sizing: border-box;
+    max-width: 100vw;
 }
 
 .stage-info {
@@ -57,16 +60,16 @@ body {
     text-align: center;
     color: white;
     font-family: "Regular", sans-serif;
-    font-size: 40px;
-    line-height: 1.4;
+    font-size: 34px;
+    line-height: 1.3;
 }
 
 .stages-container {
     width: 100%;
-    max-width: 1000px;
+    max-width: 900px;
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: 28px;
     padding-bottom: 40px;
 }
 
@@ -74,11 +77,11 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 16px;
+    gap: 14px;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 14px;
-    padding: 24px;
+    padding: 20px;
     box-sizing: border-box;
 }
 
@@ -93,21 +96,19 @@ body {
 
 .mode-title {
     display: block;
-    max-width: 160px;
+    max-width: 120px;
     height: auto;
-    margin: 80px;
-    margin-left: -20px;
+    margin: 20px;
 }
 
 .mode-text {
     margin: 0;
-    margin-left: -60px;
     display: flex;
     align-items: center;
 }
 
 .mode-text img {
-    height: 88px;
+    height: 60px;
     width: auto;
     display: block;
 }
@@ -115,7 +116,7 @@ body {
 .stages {
     display: flex;
     flex-direction: row; 
-    gap: 20px;
+    gap: 18px;
     width: 100%;
     justify-content: center;
 }
@@ -125,11 +126,11 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-width: 400px;
 }
 
 .stages img {
     width: 100%;
-    max-width: 450px;
     height: auto;
     display: block;
     margin-bottom: 10px;
@@ -138,16 +139,15 @@ body {
 .stage-title {
     font-family: "Regular", sans-serif;
     text-align: center;
-    font-size: 28px;
+    font-size: 22px;
     color: white;
-    margin: 0;
-    margin-bottom: 80px;
+    margin: 0 0 15px 0;
 }
 
 .ranked-mode-labels {
     text-align: center;
-    margin-bottom: 12px;
-    margin-top: -40px;
+    margin-bottom: 10px;
+    margin-top: 0;
 }
 
 .battle-mode-text {
@@ -157,7 +157,7 @@ body {
 }
 
 .battle-mode-text img {
-    height: 70px;
+    height: 55px;
     width: auto;
     display: block;
 }
@@ -165,24 +165,24 @@ body {
 .ranked-mode-text {
     font-family: "Regular", sans-serif;
     color: white;
-    font-size: 25px;
-    letter-spacing: 0.8px;
+    font-size: 22px;
+    letter-spacing: 0.7px;
 }
 
 .rotation-time {
     text-align: center;
     color: white;
     font-family: "Regular", sans-serif;
-    font-size: 33px;
-    margin: 36px 0 12px 0;
-    letter-spacing: 0.8px;
+    font-size: 28px;
+    margin: 28px 0 10px 0;
+    letter-spacing: 0.7px;
 }
 
 .error-message {
     color: white;
     font-family: "Splatoon1", sans-serif;
     text-align: center;
-    margin-top: 40px;
+    margin-top: 30px;
 }
 
 .loading-overlay {
@@ -212,7 +212,7 @@ body {
     left: 0;
     width: 100%;
     height: 100vh;
-    overflow: visible;
+    overflow: hidden;
     pointer-events: none;
     z-index: 0;
 }
@@ -250,6 +250,46 @@ body {
     height: 35px;
     width: auto;
     display: block;
-    user-select: none;
+}
+
+.logo-left-align {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    margin-bottom: 20px; 
+    margin-left: 40px;
+}
+
+#stage-header-logo {
+    position: relative;
+    width: 400px; 
+    height: 80px; 
+    cursor: default;
     pointer-events: none;
+}
+
+#stage-header-logo .bg-layer {
+    width: 400px;
+    height: auto;
+    position: relative;
+    display: block;
+}
+
+#stage-header-logo .icon-layer {
+    position: absolute;
+    width: 65px; 
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    margin-left: 10px;
+}
+
+#stage-header-logo .label-layer {
+    position: absolute;
+    width: 200px; 
+    left: 110px;
+    top: 45%;
+    transform: translateY(-50%);
+    z-index: 2;
 }
\ No newline at end of file