diff --git a/client/package-lock.json b/client/package-lock.json
index 7263c98..8310ec9 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -45,7 +45,7 @@
         "react-loader-spinner": "^6.1.6",
         "react-responsive": "^10.0.0",
         "react-router-dom": "^6.27.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "react-spring": "^9.7.4",
         "react-toastify": "^10.0.5",
         "react-visibility-sensor": "^5.1.1",
diff --git a/client/package.json b/client/package.json
index 1ef76c2..cd46f00 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,7 +40,7 @@
     "react-loader-spinner": "^6.1.6",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.27.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-spring": "^9.7.4",
     "react-toastify": "^10.0.5",
     "react-visibility-sensor": "^5.1.1",
diff --git a/client/src/components/MultiStepRegistration.jsx b/client/src/components/MultiStepRegistration.jsx
index 6246039..bdba89a 100644
--- a/client/src/components/MultiStepRegistration.jsx
+++ b/client/src/components/MultiStepRegistration.jsx
@@ -151,7 +151,9 @@ function MultiStepRegistration() {
       }}
     >
       <div
-        className={`steps-container ${dark === 'dark' ? 'bg-gray-900 text-yellow-400' : 'bg-white text-gray-700'} transition-colors duration-300 p-4 rounded-lg`}
+        className={`steps-container ${dark === 'dark'
+          ? 'bg-gray-900 text-purple-400'
+          : 'bg-gray-200 text-gray-900'} transition-colors duration-300 p-4 rounded-lg`}
       >
         <Steps current={currentStep} onChange={handleNextStepValidation}>
           <Step
@@ -159,8 +161,8 @@ function MultiStepRegistration() {
               <span
                 className={
                   dark === 'dark'
-                    ? 'font-bold text-yellow-400'
-                    : 'font-bold text-gray-700'
+          ? ' font-bold text-purple-400'
+          : ' font-bold text-gray-900'
                 }
               >
                 Basic details
@@ -173,8 +175,8 @@ function MultiStepRegistration() {
               <span
                 className={
                   dark === 'dark'
-                    ? 'font-bold text-yellow-400'
-                    : 'font-bold text-gray-700'
+          ? ' font-bold text-purple-400'
+          : ' font-bold text-gray-900'
                 }
               >
                 Other details
@@ -187,8 +189,8 @@ function MultiStepRegistration() {
               <span
                 className={
                   dark === 'dark'
-                    ? 'font-bold text-yellow-400'
-                    : 'font-bold text-gray-700'
+          ? ' font-bold text-purple-400'
+          : ' font-bold text-gray-900'
                 }
               >
                 Review and Register