diff --git a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
index 98c97f2bc..4b3ed43cd 100644
--- a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
+++ b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
@@ -3,7 +3,7 @@
 $progress-bar-size: 12px;
 $progress-bar-br: 3px;
 
-.progress-bar {
+.multiprogress-bar {
   position: relative;
   width: 100%;
   height: $progress-bar-size;
@@ -17,7 +17,7 @@ $progress-bar-br: 3px;
   }
 }
 
-.progress-bar__indicator {
+.multiprogress-bar__indicator {
   position: absolute;
   height: inherit;
   background-color: black;
@@ -27,7 +27,7 @@ $progress-bar-br: 3px;
   right: 0;
 }
 
-.progress-bar__bg-normal {
+.multiprogress-bar__bg-normal {
   position: absolute;
   height: inherit;
   right: 0;
@@ -35,14 +35,14 @@ $progress-bar-br: 3px;
   width: 100%;
 }
 
-.progress-bar__bg-warning {
+.multiprogress-bar__bg-warning {
   position: absolute;
   height: inherit;
   right: 0;
   border-radius: 0 $progress-bar-br $progress-bar-br 0;
 }
 
-.progress-bar__bg-danger {
+.multiprogress-bar__bg-danger {
   position: absolute;
   height: inherit;
   right: 0;
diff --git a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
index 9ccd03380..462987b3c 100644
--- a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+++ b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
@@ -23,11 +23,11 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const warningWidth = clamp((warning / complete) * 100, 0, 100);
 
   return (
-    <div className={`progress-bar ${hidden ? 'progress-bar--hidden' : ''} ${className}`}>
-      <div className='progress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='progress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='progress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
-      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
+      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
     </div>
   );
 }