diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index 51dbd76..37a7075 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import { Progress as ProgressPrimitive } from "radix-ui"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      "relative h-1 w-full overflow-hidden rounded-full bg-primary/20",
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className={cn("h-full w-full flex-1 transition-all", className, value ?? 0 < 20 ? "bg-red-500" : "bg-sarLinkOrange")}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/package-lock.json b/package-lock.json
index 9289eb2..dafbdee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@hookform/resolvers": "^5.1.1",
         "@pyncz/tailwind-mask-image": "^2.0.0",
         "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
         "@tailwindcss/postcss": "^4.1.11",
         "@tanstack/react-query": "^5.61.4",
         "axios": "^1.8.4",
diff --git a/package.json b/package.json
index 55a1294..bc76448 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@hookform/resolvers": "^5.1.1",
     "@pyncz/tailwind-mask-image": "^2.0.0",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
     "@tailwindcss/postcss": "^4.1.11",
     "@tanstack/react-query": "^5.61.4",
     "axios": "^1.8.4",