diff --git a/src/assets/styles/common-progress-bar.scss b/src/assets/styles/common-progress-bar.scss
index e213f78..dee07dd 100644
--- a/src/assets/styles/common-progress-bar.scss
+++ b/src/assets/styles/common-progress-bar.scss
@@ -1,20 +1,18 @@
-.mat-progress-bar {
-    height: 6px;
+.mat-mdc-progress-bar {
+    --mdc-linear-progress-track-height: 6px;
+    --mdc-linear-progress-active-indicator-color: var(--iqser-white);
+
     border-radius: 3px;
 
-    .mat-progress-bar-buffer {
+    .mdc-linear-progress__buffer-bar {
         background-color: var(--iqser-grey-5);
     }
 
-    &.white {
-        .mat-progress-bar-fill::after {
-            background-color: var(--iqser-white);
-        }
+    &.primary {
+        --mdc-linear-progress-active-indicator-color: var(--iqser-primary);
     }
 
     &.green {
-        .mat-progress-bar-fill::after {
-            background-color: var(--iqser-green-2);
-        }
+        --mdc-linear-progress-active-indicator-color: var(--iqser-green-2);
     }
 }
diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index 3bb78b3..d137d22 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -7,7 +7,7 @@ import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
diff --git a/src/lib/loading/loading.module.ts b/src/lib/loading/loading.module.ts
index 9009ca8..9b19ea4 100644
--- a/src/lib/loading/loading.module.ts
+++ b/src/lib/loading/loading.module.ts
@@ -4,7 +4,7 @@ import { ProgressLoadingComponent } from './progress-loading/progress-loading.co
 import { LoadingService } from './loading.service';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CommonModule } from '@angular/common';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/src/lib/loading/progress-loading/progress-loading.component.html b/src/lib/loading/progress-loading/progress-loading.component.html
index 7e63728..0c229c6 100644
--- a/src/lib/loading/progress-loading/progress-loading.component.html
+++ b/src/lib/loading/progress-loading/progress-loading.component.html
@@ -3,7 +3,7 @@
 <div class="pt-8">
     <mat-progress-bar
         [mode]="!config.value || config.value === 100 ? 'indeterminate' : 'determinate'"
-        [value]="config.value"
+        [value]="config.value || 0"
     ></mat-progress-bar>
 
     <div class="pt-10">