diff --git a/src/css/index.css b/src/css/index.css
index 4d5bef5..1a11ad5 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -116,97 +116,128 @@ body {
 }
 
 *::-webkit-scrollbar {
-    width: 17px !important;
-    height: 17px !important;
+    width: 18px !important;
+    height: 18px !important;
+    background-color: #bdbbb3 !important;
 }
 
 *::-webkit-scrollbar:horizontal {
-    height: 17px !important;
+    height: 18px !important;
 }
 
 *::-webkit-scrollbar:not(:horizontal) {
-    width: 17px !important;
+    width: 18px !important;
 }
 
-/* App-wide Habbo scrollbar (sprites cropped from catalog_skin1.png).
-   Thumb sprite is 17x34 with caps + grip baked in; stretched full
-   height via background-size: 17px 100%. Arrow buttons are natural
-   17x16 sprites. */
-
 *::-webkit-scrollbar-track {
-    background-color: #e7e5d8 !important;
     background-image: none !important;
-    box-shadow: inset 1px 0 0 #b9b6a5, inset -1px 0 0 #ffffff !important;
+    background-color: #bdbbb3 !important;
+    box-shadow: inset 1px 0 0 #000000 !important;
     border: 0 !important;
     border-radius: 0 !important;
 }
 
 *::-webkit-scrollbar-thumb {
     min-height: 24px !important;
-    background-color: transparent !important;
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_thumb.png") !important;
-    background-repeat: no-repeat !important;
-    background-position: center center !important;
-    background-size: 17px 100% !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23a0a0a0'/></svg>") center top / 8px 5px repeat-y,
+        #d9d9d9 !important;
+    border: 1px solid #000000 !important;
+    border-radius: 3px !important;
+    box-shadow: inset 0 0 0 2px #ffffff !important;
     image-rendering: pixelated !important;
 }
 
-*::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23ababab'/></svg>") center top / 8px 5px repeat-y,
+        #e3e3e3 !important;
+}
+
 *::-webkit-scrollbar-thumb:active {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_thumb_pressed.png") !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23606060'/></svg>") center top / 8px 5px repeat-y,
+        #bcbcbc !important;
 }
 
 *::-webkit-scrollbar-corner {
     background: transparent !important;
 }
 
-*::-webkit-scrollbar-button:single-button {
-    display: block !important;
-    width: 17px !important;
-    height: 16px !important;
-    /* Cream fill so the arrow sprite's transparent rounded corners
-       paint over the track colour, not whatever is behind the
-       scrollbar (which can render black). */
-    background-color: #e7e5d8 !important;
-    background-repeat: no-repeat !important;
-    background-position: center !important;
-    border: 0 !important;
-    image-rendering: pixelated !important;
-}
-
 *::-webkit-scrollbar-button:single-button:vertical:decrement {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_up.png") !important;
+    display: block !important;
+    width: 18px !important;
+    height: 18px !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='4.5,0 9,6 0,6' fill='%23222'/></svg>") center center / 9px 6px no-repeat,
+        #d9d9d9 !important;
+    border: 1px solid #000000 !important;
+    border-radius: 3px 3px 0 0 !important;
+    box-shadow:
+        inset 0 1px 0 #ffffff,
+        inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
 }
 *::-webkit-scrollbar-button:single-button:vertical:decrement:active {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_up_pressed.png") !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='4.5,0 9,6 0,6' fill='%23000'/></svg>") center center / 9px 6px no-repeat,
+        #bcbcbc !important;
 }
 
 *::-webkit-scrollbar-button:single-button:vertical:increment {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_down.png") !important;
+    display: block !important;
+    width: 18px !important;
+    height: 18px !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='0,0 9,0 4.5,6' fill='%23222'/></svg>") center center / 9px 6px no-repeat,
+        #d9d9d9 !important;
+    border: 1px solid #000000 !important;
+    border-radius: 0 0 3px 3px !important;
+    box-shadow:
+        inset 0 1px 0 #ffffff,
+        inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
 }
 *::-webkit-scrollbar-button:single-button:vertical:increment:active {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_v_down_pressed.png") !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='0,0 9,0 4.5,6' fill='%23000'/></svg>") center center / 9px 6px no-repeat,
+        #bcbcbc !important;
 }
 
 *::-webkit-scrollbar-button:single-button:horizontal:decrement {
-    width: 16px !important;
-    height: 17px !important;
-    background-image: url("../assets/images/catalog/scrollbar/scroll_h_left.png") !important;
+    display: block !important;
+    width: 18px !important;
+    height: 18px !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='0,4.5 6,0 6,9' fill='%23222'/></svg>") center center / 6px 9px no-repeat,
+        #d9d9d9 !important;
+    border: 1px solid #000000 !important;
+    border-radius: 3px 0 0 3px !important;
+    box-shadow:
+        inset 0 1px 0 #ffffff,
+        inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
 }
 *::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_h_left_pressed.png") !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='0,4.5 6,0 6,9' fill='%23000'/></svg>") center center / 6px 9px no-repeat,
+        #bcbcbc !important;
 }
 
 *::-webkit-scrollbar-button:single-button:horizontal:increment {
-    width: 16px !important;
-    height: 17px !important;
-    background-image: url("../assets/images/catalog/scrollbar/scroll_h_right.png") !important;
+    display: block !important;
+    width: 18px !important;
+    height: 18px !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='6,4.5 0,0 0,9' fill='%23222'/></svg>") center center / 6px 9px no-repeat,
+        #d9d9d9 !important;
+    border: 1px solid #000000 !important;
+    border-radius: 0 3px 3px 0 !important;
+    box-shadow:
+        inset 0 1px 0 #ffffff,
+        inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
 }
 *::-webkit-scrollbar-button:single-button:horizontal:increment:active {
-    background-image: url("../assets/images/catalog/scrollbar/scroll_h_right_pressed.png") !important;
+    background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='6,4.5 0,0 0,9' fill='%23000'/></svg>") center center / 6px 9px no-repeat,
+        #bcbcbc !important;
 }
 
 @layer components {
@@ -822,8 +853,6 @@ body {
     }
 }
 
-/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */
-
 .nitro-avatar-editor-wardrobe-figure-preview {
     background-color: #677181;
     overflow: hidden;
@@ -946,10 +975,9 @@ body {
     }
 }
 
-/* Font Size */
 
 .fs-custom {
-    font-size: var(--font-size, 16px); /* Fallback to 16px if not set */
+    font-size: var(--font-size, 16px);
 }
 
 .nitro-wired {
@@ -1904,8 +1932,6 @@ body {
     box-shadow: none !important;
 }
 
-/* ── Avatar Editor ─────────────────────────────────────────────────────── */
-
 .color-picker-frame {
     border-image-source: url('@/assets/images/avatareditor/color_frame.png');
     border-image-slice: 6 6 6 6 fill;
@@ -1983,8 +2009,6 @@ body {
     gap: 5px;
 }
 
-/* ── Avatar Editor tab icons ───────────────────────────────────────────── */
-
 .avatar-editor-tabs {
     position: relative;
 
@@ -2051,11 +2075,6 @@ body {
     box-shadow: none !important;
 }
 
-/* ── Avatar Editor misc ─────────────────────────────────────────────────── */
-
-
-/* ── Pet Companion ─────────────────────────────────────────────────────── */
-
 .pet-equipped-bar {
     display: flex;
     align-items: center;