diff --git a/src/waypoint.ts b/src/waypoint.ts
index 463030a..77fdb68 100644
--- a/src/waypoint.ts
+++ b/src/waypoint.ts
@@ -359,17 +359,31 @@ function generateHighlightedNumberSvgDataUrl(number: number): string {
 
 function generateHeightAdjustButtonSvgDataUrl(): string {
     const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 40" width="24" height="40">
-        <rect width="24" height="40" rx="4" fill="#00D690" fill-opacity="0.9" stroke="#FFF" stroke-width="1.5"/>
-        <path d="M12 8 L8 12 L12 16 M12 8 L16 12 L12 16" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-        <line x1="12" y1="20" x2="12" y2="32" stroke="#FFF" stroke-width="2" stroke-linecap="round"/>
-        <path d="M12 32 L8 28 L12 24 M12 32 L16 28 L12 24" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 48" width="32" height="48">
+        <defs>
+            <linearGradient id="heightBtnGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#00E88C" />
+                <stop offset="100%" stop-color="#00B287" />
+            </linearGradient>
+            <filter id="shadow" x="-15%" y="-15%" width="130%" height="130%">
+                <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#008060" flood-opacity="0.25"/>
+            </filter>
+        </defs>
+        <rect x="2" y="2" width="28" height="44" rx="9" fill="url(#heightBtnGradient)" stroke="#FFF" stroke-width="2" filter="url(#shadow)"/>
+        <g>
+            <!-- Up Arrow -->
+            <path d="M16 14 L11 21 Q16 18 21 21 Z" fill="#fff" opacity="0.95"/>
+            <polyline points="16,14 16,27" stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity="0.65"/>
+            <!-- Divider -->
+            <rect x="8" y="28" width="16" height="1.5" rx="0.75" fill="#fff" opacity="0.20"/>
+            <!-- Down Arrow -->
+            <path d="M16 34 L21 27 Q16 31 11 27 Z" fill="#fff" opacity="0.95"/>
+            <polyline points="16,21 16,34" stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity="0.65"/>
+        </g>
     </svg>
     `
-
     const encoded = encodeURIComponent(svg)
         .replace(/'/g, '%27')
         .replace(/"/g, '%22')
-
     return `data:image/svg+xml,${encoded}`
 }