diff --git a/packages/nicolium/src/components/ui/progress-bar.tsx b/packages/nicolium/src/components/ui/progress-bar.tsx
index 524e87b97..89c959511 100644
--- a/packages/nicolium/src/components/ui/progress-bar.tsx
+++ b/packages/nicolium/src/components/ui/progress-bar.tsx
@@ -23,12 +23,7 @@ const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => {
   });
 
   return (
-    <div
-      className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
-        'h-2.5': size === 'md',
-        'h-[6px]': size === 'sm',
-      })}
-    >
+    <div className={clsx('⁂-progress-bar', { '⁂-progress-bar--sm': size === 'sm' })}>
       <animated.div className='h-full bg-secondary-500' style={styles} />
     </div>
   );
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index c0b3bfd95..df22b0cbf 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -1211,3 +1211,24 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   padding: 0.25rem;
   color: white;
 }
+
+.⁂-progress-bar {
+  height: 0.625rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-gray-300));
+
+  .dark & {
+    background-color: rgb(var(--color-primary-800));
+  }
+
+  &--sm {
+    height: 6px;
+  }
+
+  > div {
+    height: 100%;
+    background-color: rgb(var(--color-secondary-500));
+  }
+}