diff --git a/packages/frontend/src/components/coachmark/CoachTooltip.css.ts b/packages/frontend/src/components/coachmark/CoachTooltip.css.ts
index a248493..cf4c0e9 100644
--- a/packages/frontend/src/components/coachmark/CoachTooltip.css.ts
+++ b/packages/frontend/src/components/coachmark/CoachTooltip.css.ts
@@ -13,7 +13,6 @@ export const container = style([
     position: "relative",
     width: 398,
     padding: 16,
-    color: color.$scale.grey800,
     backgroundColor: color.$semantic.bgWhite,
   },
 ]);
@@ -22,17 +21,13 @@ export const header = style([flexAlignCenter, { gap: 5, marginBottom: 12 }]);
 
 export const title = style([typography.$semantic.title3Bold]);
 
-export const stepProgress = style([
-  typography.$semantic.caption2Regular,
-  { color: color.$scale.grey500 },
-]);
+export const stepProgress = style([typography.$semantic.caption2Regular]);
 
 export const closeButton = style({
   position: "absolute",
   top: 13,
   right: 3,
   border: 0,
-  color: color.$scale.grey700,
   backgroundColor: "transparent",
 });
 
@@ -56,7 +51,6 @@ export const actionButtonVariant = styleVariants({
     actionBaseButton,
     {
       padding: 0,
-      color: color.$scale.grey600,
       backgroundColor: "transparent",
     },
   ],
diff --git a/packages/frontend/src/components/coachmark/Coachmark.tsx b/packages/frontend/src/components/coachmark/Coachmark.tsx
index b54024f..373bed8 100644
--- a/packages/frontend/src/components/coachmark/Coachmark.tsx
+++ b/packages/frontend/src/components/coachmark/Coachmark.tsx
@@ -45,7 +45,8 @@ const LOCALE: RequiredJoyrideProps["locale"] = {
 
 const STYLES: RequiredJoyrideProps["styles"] = {
   options: {
-    overlayColor: "rgba(0, 0, 0, 0.2)",
+    arrowColor: color.$semantic.bgWhite,
+    overlayColor: "rgba(0, 0, 0, 0.6)",
     primaryColor: color.$semantic.primary,
     zIndex: coachmarkZIndex,
   },