diff --git a/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx b/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
index 91e58edf3..6c765b2a1 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
@@ -106,7 +106,7 @@ export const DocumentSigningMobileWidget = () => {
                   <motion.div
                     layout="size"
                     layoutId="document-signing-mobile-widget-progress-bar"
-                    className="bg-documenso absolute inset-y-0 left-0"
+                    className="bg-primary absolute inset-y-0 left-0"
                     style={{
                       width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                     }}
diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
index e1ac12e3c..a4cb4a59c 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@@ -109,7 +109,7 @@ export const DocumentSigningPageViewV2 = () => {
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-documenso"
+                className="absolute inset-y-0 left-0 bg-primary"
                 style={{
                   width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                 }}
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
index c70273282..af5eecdd6 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
@@ -175,7 +175,7 @@ export default function EnvelopeEditor() {
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-documenso"
+                className="absolute inset-y-0 left-0 bg-primary"
                 style={{
                   width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
                 }}
diff --git a/packages/ui/primitives/document-flow/document-flow-root.tsx b/packages/ui/primitives/document-flow/document-flow-root.tsx
index d5ab9ced2..a240ed2c5 100644
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@@ -112,7 +112,7 @@ export const DocumentFlowFormContainerStep = ({
         <motion.div
           layout="size"
           layoutId="document-flow-container-step"
-          className="bg-documenso absolute inset-y-0 left-0"
+          className="bg-primary absolute inset-y-0 left-0"
           style={{
             width: `${(100 / maxStep) * step}%`,
           }}
@@ -161,7 +161,7 @@ export const DocumentFlowFormContainerActions = ({
 
       <Button
         type="button"
-        className="bg-documenso flex-1"
+        className="bg-primary flex-1"
         size="lg"
         disabled={disabled || disableNextStep || loading || !canGoNext}
         loading={loading}