diff --git a/front/packages/primitives/src/themes/theme.tsx b/front/packages/primitives/src/themes/theme.tsx
index 3ed6f1ac..c4a67133 100644
--- a/front/packages/primitives/src/themes/theme.tsx
+++ b/front/packages/primitives/src/themes/theme.tsx
@@ -178,7 +178,7 @@ export const ContrastArea = ({
 	contrastText,
 }: {
 	children: ReactNode | YoshikiFunc<ReactNode>;
-	mode?: "light" | "dark" | "user";
+	mode?: "light" | "dark" | "user" | "alternate";
 	contrastText?: boolean;
 }) => {
 	const oldTheme = useTheme();
diff --git a/front/packages/primitives/src/tooltip.web.tsx b/front/packages/primitives/src/tooltip.web.tsx
index f43f219f..f7dbef62 100644
--- a/front/packages/primitives/src/tooltip.web.tsx
+++ b/front/packages/primitives/src/tooltip.web.tsx
@@ -19,6 +19,9 @@
  */
 
 import { Theme } from "yoshiki/native";
+import { Tooltip as RTooltip } from "react-tooltip";
+import { forwardRef } from "react";
+import { ContrastArea } from "./themes";
 
 export const tooltip = (tooltip: string, up?: boolean) => ({
 	dataSet: {
@@ -43,4 +46,10 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
 	);
 };
 
-export { Tooltip } from "react-tooltip";
+export const Tooltip = forwardRef(function Tooltip(props, ref) {
+	return (
+		<ContrastArea mode="alternate">
+			<RTooltip {...props} ref={ref} />
+		</ContrastArea>
+	);
+}) as typeof RTooltip;