diff --git a/html/atm.html b/html/atm.html
index f0b2ae2..4e77272 100644
--- a/html/atm.html
+++ b/html/atm.html
@@ -9,6 +9,7 @@
   <!-- Existing styles -->
   <link rel="stylesheet" href="atm.css" />
   <link rel="stylesheet" href="killfeed.css" />
+  <link rel="stylesheet" href="appearance.css" />
 
   <!-- NEW shop styles -->
   <link rel="stylesheet" href="shop.css" />
@@ -88,6 +89,47 @@
        ========================= -->
   <div id="killfeed"></div>
 
+<!-- =========================
+     APPEARANCE CREATOR (NEW)
+     ========================= -->
+<div id="appearance-wrap" class="hidden">
+  <div class="panel">
+    <div class="title">Create your look</div>
+
+    <div class="row">
+      <div class="label">Gender</div>
+      <div class="controls">
+        <button id="app-genderM" type="button">Male</button>
+        <button id="app-genderF" type="button">Female</button>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="label">Hair Style</div>
+      <div class="controls">
+        <button id="app-hairPrev" type="button">◀</button>
+        <div id="app-hairText" class="value">0</div>
+        <button id="app-hairNext" type="button">▶</button>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="label">Hair Color</div>
+      <div class="controls">
+        <button id="app-colPrev" type="button">◀</button>
+        <div id="app-colText" class="value">0</div>
+        <button id="app-colNext" type="button">▶</button>
+      </div>
+    </div>
+
+    <div class="footer">
+      <button id="app-saveBtn" class="primary" type="button">Save & Continue</button>
+    </div>
+
+    <div class="hint">Pick your gender + hair. You must save to continue.</div>
+  </div>
+</div>
+
   <!-- =========================
        GANG SHOP UI (NEW)
        ========================= -->
@@ -123,5 +165,6 @@
   <script src="killfeed.js"></script>
   <script src="atm.js"></script>
   <script src="shop.js"></script>
+  <script src="appearance.js"></script>
 </body>
 </html>