diff --git a/apps/javascript/src/challenges/dice-game/README.md b/apps/javascript/src/challenges/dice-game/README.md
index fe7fb5fdd..30775b394 100644
--- a/apps/javascript/src/challenges/dice-game/README.md
+++ b/apps/javascript/src/challenges/dice-game/README.md
@@ -2,7 +2,7 @@
 
 ---
 
-<br>
+</br>
 
 ## **Description 📃**
 
diff --git a/apps/react/src/challenges/stepper/App.module.css b/apps/react/src/challenges/stepper/App.module.css
index 043b9320d..5303ebbf4 100644
--- a/apps/react/src/challenges/stepper/App.module.css
+++ b/apps/react/src/challenges/stepper/App.module.css
@@ -27,6 +27,7 @@
   background-color: #ccc;
   border: 2px solid black;
   border-radius: 50%;
+  cursor: pointer;
 }
 
 .step.active .step-number {
@@ -72,9 +73,9 @@
 }
 
 .action-container .btn {
-  width: 70px;
   height: 40px;
   padding: 10px;
+  margin: 10px 50px;
   font-size: 20px;
   cursor: pointer;
   background: none;
@@ -82,3 +83,6 @@
   border: none;
   border-radius: 5px;
 }
+button:disabled {
+  cursor: not-allowed !important;
+}
diff --git a/apps/react/src/challenges/stepper/Stepper.jsx b/apps/react/src/challenges/stepper/Stepper.jsx
index 32ca8fce4..aec66a970 100644
--- a/apps/react/src/challenges/stepper/Stepper.jsx
+++ b/apps/react/src/challenges/stepper/Stepper.jsx
@@ -11,7 +11,23 @@ const Stepper = ({ stepConfig = [] }) => {
 
   const ActiveComponent = stepConfig[currentStep - 1]?.Component;
 
-  const handleClick = () => {
+  const handleClick = (index) => {
+    setIsCompleted(false);
+    setCurrentStep(index);
+  };
+
+  const handlePrevClick = () => {
+    setCurrentStep((prevStep) => {
+      if (prevStep < stepConfig.length + 1 && isCompleted) {
+        setIsCompleted(false);
+        return prevStep;
+      } else {
+        return prevStep - 1;
+      }
+    });
+  };
+
+  const handleNextClick = () => {
     setCurrentStep((prevStep) => {
       if (prevStep === stepConfig.length) {
         setIsCompleted(true);
@@ -33,7 +49,7 @@ const Stepper = ({ stepConfig = [] }) => {
                 currentStep > index + 1 || isCompleted ? styles.complete : ''
               }`}
             >
-              <div className={styles['step-number']}>
+              <div className={styles['step-number']} onClick={() => handleClick(index + 1)}>
                 {currentStep > index + 1 || isCompleted ? <span>&#10003;</span> : index + 1}
               </div>
 
@@ -62,11 +78,15 @@ const Stepper = ({ stepConfig = [] }) => {
       <div className={styles['action-container']}>
         {!isCompleted && <ActiveComponent />}
         {isCompleted && <div>Order Delivered successfully!🎉</div>}
-        {!isCompleted && (
-          <button className={styles.btn} onClick={handleClick}>
+        <span>
+          <button disabled={currentStep === 1} className={styles.btn} onClick={handlePrevClick}>
+            Previous
+          </button>
+
+          <button disabled={isCompleted} className={styles.btn} onClick={handleNextClick}>
             {currentStep === stepConfig.length ? 'Finish' : 'Next'}
           </button>
-        )}
+        </span>
       </div>
     </>
   );