diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
index 91d725f..ac45dfd 100644
--- a/src/components/Stepper/index.js
+++ b/src/components/Stepper/index.js
@@ -42,7 +42,7 @@ function Stepper({
            }
          </div>
         <div className="flex justify-center items-center">
-          <p className="mr-3 ml-1 text-xl font-bold text-red-500 text-opacity-50">{index + 1}</p>
+          <p className={`mr-3 ml-1 text-xl font-bold  ${item.active ? 'text-red-500' : 'text-gray-400'} text-opacity-50`}>{index + 1}</p>
         <p className={` giveMeEllipsis font-bold ${item.active ? 'text-red26' : 'text-gray-400'} ${direction === 'horizontal' && 'text-xs' }`}> {item.title}</p>
           </div>
          </div>