diff --git a/src/ui/components/mod.rs b/src/ui/components/mod.rs
index 817e002..3f6eba6 100644
--- a/src/ui/components/mod.rs
+++ b/src/ui/components/mod.rs
@@ -555,16 +555,24 @@ pub fn HelpIcon() -> PreEscaped<String> {
 }
 
 #[allow(non_snake_case)]
-pub fn ProgressBar(percentage: u8, label: bool) -> PreEscaped<String> {
-    assert!(percentage < 100, "Percentage must be less than 100");
+pub fn ProgressBar<C: UIColor + 'static>(
+    mut percentage: u8,
+    label: bool,
+    color: C,
+) -> PreEscaped<String> {
+    if percentage > 100 {
+        percentage = 100;
+    }
+
+    let color = color.color_class();
     html! {
         @if label {
             div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" {
-                div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style=(format!("width: {percentage}%")) { (format!("{percentage}%")) };
+                div class=(format!("bg-{color} text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full")) style=(format!("width: {percentage}%")) { (format!("{percentage}%")) };
             };
         } @else {
             div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700" {
-                div class="bg-blue-600 h-2.5 rounded-full" style=(format!("width: {percentage}%")) {};
+                div class=(format!("bg-{color} h-2.5 rounded-full")) style=(format!("width: {percentage}%")) {};
             };
         }
     }