diff --git a/src/pages/status/migration/index.jsx b/src/pages/status/migration/index.jsx
index a37eaf38af..673350a254 100644
--- a/src/pages/status/migration/index.jsx
+++ b/src/pages/status/migration/index.jsx
@@ -115,16 +115,19 @@ function Bar({ details }) {
         {ORDERED.filter(([key]) => details[key]?.length).map(([key], index) => (
           <>
           <a
-            id={"migration-bar-element" + "-" + key}
+            id={`migration-bar-element-${key}`}
             className={styles[`${prefix}${key.replace("-", "_")}`]}
             style={{ flex: details[key].length }}
             key={index}
             alt={TITLES[key]}
           ></a>
-         <Tooltip anchorSelect={"#migration-bar-element" + "-" + key}
-                  style={{color: "white", backgroundColor: "var(--ifm-color-gray-700)"}} place="top" className={styles.migration_details_bar_tooltip}>
-          <div>{TITLES[key]}</div>
-        </Tooltip>
+          <Tooltip
+            anchorSelect={`#migration-bar-element-${key}`}
+            place="top"
+            className={styles.migration_details_bar_tooltip}
+          >
+            <div>{TITLES[key]}</div>
+          </Tooltip>
           </>
         ))}
       </div>
diff --git a/src/pages/status/migration/styles.module.css b/src/pages/status/migration/styles.module.css
index 9687f76e1e..6ce15f8371 100644
--- a/src/pages/status/migration/styles.module.css
+++ b/src/pages/status/migration/styles.module.css
@@ -124,3 +124,8 @@
   font-size: smaller;
   content: " ▿";
 }
+
+.migration_details_bar .migration_details_bar_tooltip {
+  color: var(--ifm-color-emphasis-100);
+  background-color: var(--ifm-color-emphasis-900);
+}