diff --git a/adminforth/spa/src/afcl/ProgressBar.vue b/adminforth/spa/src/afcl/ProgressBar.vue
index 170c372ad..81fb4347f 100644
--- a/adminforth/spa/src/afcl/ProgressBar.vue
+++ b/adminforth/spa/src/afcl/ProgressBar.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
-    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
-    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
-    <div 
+    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm" :class="textClass">{{ leftLabel }}</span>
+    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm" :class="textClass">{{ rightLabel }}</span>
+    <div
       class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
-      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"  
+      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"
       :style="{ width: `${percentage}%` }"
     ></div>
     <div v-if="showValues || showProgress" class="flex justify-between mt-2">
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
-      <span v-if="showProgress" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="text-sm" :class="textClass">{{ progressText }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(maxValue) }}</span>
     </div>
   </div>
 </template>
@@ -31,6 +31,7 @@ interface Props {
   showProgress?: boolean
   showAnimation?: boolean
   height?: number
+  textClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
   formatter: (value: number) => `${value}`,
   progressFormatter: (value: number, percentage: number) => `${value}`,
   showValues: true,
-  showProgress: true
+  showProgress: true,
+  textClass: 'text-lightProgressBarText dark:text-darkProgressBarText',
 })
 
 const percentage = computed((): number => {