diff --git a/packages/ui/BillingSlider/index.tsx b/packages/ui/BillingSlider/index.tsx
index 0de5108655..e91dfb04f6 100644
--- a/packages/ui/BillingSlider/index.tsx
+++ b/packages/ui/BillingSlider/index.tsx
@@ -18,7 +18,9 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
       className={cn("relative flex w-full touch-none select-none items-center", className)}
       {...props}>
       <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-300">
-        <div style={{ width: `${(value / max) * 100}%` }} className="absolute h-full bg-slate-800"></div>
+        <div
+          style={{ width: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
+          className="absolute h-full bg-slate-800"></div>
         <div
           style={{
             width: `${((freeTierLimit - value) / max) * 100}%`,
@@ -27,11 +29,13 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
           className="absolute h-full bg-slate-500"></div>
       </SliderPrimitive.Track>
 
-      <div style={{ left: `${(value / max) * 100}%` }} className="absolute mt-4 h-6 w-px bg-slate-500"></div>
+      <div
+        style={{ left: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
+        className="absolute mt-4 h-6 w-px bg-slate-500"></div>
 
       <div
-        style={{ left: `calc(${(value / max) * 100}% + 0.5rem)` }}
-        className="absolute mt-12 text-sm text-slate-700 dark:text-slate-200">
+        style={{ left: `calc(${Math.min(value / max, 0.93) * 100}% + 0.5rem)` }}
+        className="absolute mt-16 text-sm text-slate-700 dark:text-slate-200">
         <p className="text-xs">
           Current:
           <br />