diff --git a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
index e6ce68c9fd3..40dfcb9cf19 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
@@ -261,7 +261,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
           <button
             type="button"
             onClick={skipSurvey}
-            className="text-white text-base font-medium text-opacity-30 hover:text-opacity-100 mt-8"
+            className="text-white text-base font-medium text-opacity-30 hover:text-opacity-100 hover:text-teal mt-8"
           >
             {t("onboarding.survey.skip")}
           </button>
diff --git a/frontend/src/pages/OnboardingFlow/Steps/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
index bc222b8261a..e0e8fb20460 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
@@ -74,10 +74,10 @@ export function OnboardingLayout({ children }) {
                 <button
                   disabled={forwardBtn.disabled}
                   onClick={forwardBtn.onClick}
-                  className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+                  className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-teal disabled:hover:bg-transparent"
                 >
                   <ArrowRight
-                    className="text-white group-hover:text-black group-disabled:text-gray-500"
+                    className="text-white group-hover:text-teal group-disabled:text-gray-500"
                     size={30}
                   />
                 </button>
@@ -127,11 +127,11 @@ export function OnboardingLayout({ children }) {
           <button
             disabled={forwardBtn.disabled}
             onClick={forwardBtn.onClick}
-            className="group p-2 rounded-lg border-2 border-theme-sidebar-border h-fit w-fit disabled:cursor-not-allowed hover:bg-theme-bg-secondary disabled:hover:bg-transparent"
+            className="group p-2 rounded-lg border-2 border-theme-sidebar-border h-fit w-fit disabled:cursor-not-allowed hover:bg-teal disabled:hover:bg-transparent"
             aria-label="Continue"
           >
             <ArrowRight
-              className="text-theme-text-secondary group-hover:text-theme-text-primary group-disabled:text-gray-500"
+              className="text-theme-text-secondary group-hover:text-white group-disabled:text-gray-500"
               size={30}
             />
           </button>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9d48124091c..d9daad66719 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -45,6 +45,7 @@ export default {
         warn: "#854708",
         success: "#05603A",
         darker: "#F4F4F4",
+        teal: "#0BA5EC",
 
         // Generic theme colors
         theme: {