diff --git a/src/pages/shop/_art_test.svelte b/src/pages/shop/_art_test.svelte
index 55fea86..520dc5f 100644
--- a/src/pages/shop/_art_test.svelte
+++ b/src/pages/shop/_art_test.svelte
@@ -7,7 +7,7 @@
     <div class="flex flex-col items-center justify-center w-full h-full">
       <div class="flex flex-col w-72">
         <div class="w-full h-72 bg-lime-200"></div>
-        <CustomScrollBar overflowX="scroll" overflowY="hidden" Class="h-32">
+        <CustomScrollBar overflowX="scroll" overflowY="hidden" Class="h-26">
           <div class="flex w-full gap-4">
             {#each { length: 4 } as i}
               <img
diff --git a/src/routes/comps/CustomScrollBar.svelte b/src/routes/comps/CustomScrollBar.svelte
index 1a3f1e9..352de79 100644
--- a/src/routes/comps/CustomScrollBar.svelte
+++ b/src/routes/comps/CustomScrollBar.svelte
@@ -7,17 +7,19 @@
 
   // Visual tuning
   export let thickness = 12; // px
-  export let padding = 6; // px, space around track inside the overlay
+  export let padding = 0; // px, space around track inside the overlay
   export let minThumb = 24; // px
   export let contentPadding = 16; // px, inner padding for your content
   export let Class = ""; // Extra classes for the scrollbar
 
   // Styling (customize freely)
-  export let trackGradient =
-    "linear-gradient(180deg, #7aa2ff, #b57cff 40%, #ff84a3)";
+  export let trackStyle = "";
+  export let trackClass = "";
   export let trackOpacity = 0.55;
+
   export let thumbClass =
-    "bg-neutral-900/90 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]";
+    "bg-black border-x-1 opacity-50 border-white text-xs text-center text-opacity-50 overflow-hidden flex items-center text-nowrap justify-center";
+  export let thumbLength = 20; // px. doesn't work for some reason, idk
 
   let viewport: HTMLDivElement;
   let vBar: HTMLDivElement; // vertical bar container
@@ -266,6 +268,9 @@
   $: pb = contentPadding + (showBarX ? thickness + padding * 2 : 0);
 </script>
 
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+
 <!-- Wrapper -->
 <div class="relative overflow-hidden {Class}">
   <!-- The real, native scrolling area (we hide its native scrollbar) -->
@@ -283,43 +288,44 @@
     </div>
   </div>
 
-  <!-- Vertical overlay bar -->
+  <!-- Vertical overlay bar (mirrors x-scroll structure) -->
   {#if showBarY}
     <div
       bind:this={vBar}
       class="absolute"
       style="
-        top: {padding}px;
-        bottom: {padding}px;
-        right: {padding}px;
-        width: {thickness}px;
-        pointer-events: none;
-      "
+      top: {padding}px;
+      bottom: {padding}px;
+      right: {padding}px;
+      width: {thickness}px;
+      pointer-events: none;
+    "
       aria-hidden="false"
     >
-      <div
-        class="rounded-full transition-opacity"
-        style="
-          position: absolute; inset: 0;
-          background: {trackGradient};
-          opacity: {trackOpacity};
+      <div class="absolute inset-0 corner-border-container">
+        <div
+          class="transition-opacity {trackClass} w-full"
+          style="
           pointer-events: auto;
+          {trackStyle}
         "
-        on:pointerdown={onVTrackPointerDown}
-      />
+          on:pointerdown={onVTrackPointerDown}
+        />
+      </div>
+
       <div
         bind:this={vThumb}
         role="scrollbar"
         aria-orientation="vertical"
         tabindex="0"
         class={`absolute left-[2px] right-[2px] rounded-full cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`}
-        style="height: 40px; pointer-events: auto; touch-action: none;"
+        style="height: {thumbLength}px; pointer-events: auto; touch-action: none;"
         on:pointerdown={onVPointerDown}
         on:pointermove={onVPointerMove}
         on:pointerup={endVDrag}
         on:pointercancel={endVDrag}
         on:keydown={onVKeyDown}
-      />
+      ></div>
     </div>
   {/if}
 
@@ -337,34 +343,36 @@
       "
       aria-hidden="false"
     >
-      <div
-        class="rounded-full transition-opacity"
-        style="
-          position: absolute; inset: 0;
-          background: {trackGradient};
-          opacity: {trackOpacity};
+      <div class="absolute inset-0 corner-border-container">
+        <div
+          class="transition-opacity {trackClass} h-full"
+          style="
           pointer-events: auto;
+          {trackStyle}
         "
-        on:pointerdown={onHTrackPointerDown}
-      />
+          on:pointerdown={onHTrackPointerDown}
+        />
+      </div>
       <div
         bind:this={hThumb}
         role="scrollbar"
         aria-orientation="horizontal"
         tabindex="0"
-        class={`absolute top-[2px] bottom-[2px] rounded-full cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`}
-        style="width: 40px; pointer-events: auto; touch-action: none;"
+        class={`absolute top-0 bottom-0 rounded-none cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`}
+        style="width: {thumbLength}px; pointer-events: auto; touch-action: none;"
         on:pointerdown={onHPointerDown}
         on:pointermove={onHPointerMove}
         on:pointerup={endHDrag}
         on:pointercancel={endHDrag}
         on:keydown={onHKeyDown}
-      />
+      >
+        -------------------------------------------------Scroll-------------------------------------------------
+      </div>
     </div>
   {/if}
 </div>
 
-<style>
+<style lang="scss">
   /* Hide the native scrollbars while keeping native scrolling */
   :global(.csb-viewport) {
     scrollbar-width: none; /* Firefox */
@@ -374,4 +382,50 @@
     width: 0;
     height: 0; /* WebKit */
   }
+  .corner-border-container {
+    --length: 5px;
+    --width: 1px;
+    --line-color: #eeeeee;
+    --background-color: #0002;
+    background-color: var(--background-color);
+    background-image:
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color));
+    background-size:
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length);
+    background-position:
+      top left,
+      top left,
+      top right,
+      top right,
+      bottom right,
+      bottom right,
+      bottom left,
+      bottom left;
+    background-repeat: no-repeat;
+
+    border-radius: 0;
+
+    & > div {
+      background: repeating-linear-gradient(
+        -45deg,
+        #0000,
+        #0000 15px,
+        #fff2 10px 20px
+      );
+    }
+  }
 </style>