diff --git a/public/translations/en.json b/public/translations/en.json
index 364d2367d..e1fe50737 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -110,6 +110,7 @@
     "removeInstructions": "Remove instructions",
     "nextStep": "Next step",
     "previousStep": "Previous step",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
     "projectSteps": "Project instructions",
     "edit": "Edit",
     "view": "View",
diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 6ed155b8e..d56951b78 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -1,19 +1,42 @@
 @use './rpf_design_system/spacing' as *;
 
 .progress-bar {
-  accent-color: var(--editor-color-theme);
+  accent-color: var(--progress-bar-color, var(--editor-color-theme));
   display: flex;
   align-items: center;
   justify-content: center;
-  max-inline-size: 300px;
   margin: auto;
 
-  progress {
+  .progress-container {
     flex: 1;
     min-inline-size: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  progress {
+    width: 100%;
   }
 
   .btn-outer {
     padding: $space-0-5;
   }
+
+  .btn {
+    margin: $space-0-5;
+    border-radius: var(--step-buttons-radius, inherit);
+    &:hover,
+    &:focus,
+    &:active {
+      border-radius: var(--step-buttons-radius, inherit);
+    }
+  }
+}
+
+.step-counter {
+  display: var(--display-step-counter, none);
+  align-items: center;
+  justify-content: center;
+  margin: 0;
 }
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 27d4993ed..697c7a24d 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -32,25 +32,36 @@ const ProgressBar = () => {
   };
 
   return (
-    <div className="progress-bar">
-      <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToPreviousStep}
-        ButtonIcon={ChevronLeft}
-        disabled={currentStepPosition === 0}
-        title={t("instructionsPanel.previousStep")}
-      />
-      <progress max={numberOfSteps - 1} value={currentStepPosition}></progress>
-      <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToNextStep}
-        ButtonIcon={ChevronRight}
-        disabled={currentStepPosition === numberOfSteps - 1}
-        title={t("instructionsPanel.nextStep")}
-      />
-    </div>
+    <>
+      <div className="progress-bar">
+        <Button
+          className={"btn--secondary btn--small"}
+          buttonOuter
+          onClickHandler={goToPreviousStep}
+          ButtonIcon={ChevronLeft}
+          disabled={currentStepPosition === 0}
+          title={t("instructionsPanel.previousStep")}
+        />
+        <div className="progress-container">
+          <p className="step-counter">
+            {t("instructionsPanel.stepCounter", {
+              currentStep: currentStepPosition + 1,
+              totalSteps: numberOfSteps,
+            })}
+          </p>
+          <progress max={numberOfSteps - 1} value={currentStepPosition} />
+        </div>
+
+        <Button
+          className={"btn--secondary btn--small"}
+          buttonOuter
+          onClickHandler={goToNextStep}
+          ButtonIcon={ChevronRight}
+          disabled={currentStepPosition === numberOfSteps - 1}
+          title={t("instructionsPanel.nextStep")}
+        />
+      </div>
+    </>
   );
 };