diff --git a/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx b/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
index f9b43612..b1be20d3 100644
--- a/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
+++ b/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
@@ -46,7 +46,7 @@ export const IntegerInput = ({
         !inputError &&
         !disableMultiplyBy1e18 && (
           <div
-            className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
+            className="space-x-4 flex tooltip tooltip-top before:shadow-lg before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
             data-tip="Multiply by 10^18 (wei)"
           >
             <button
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index 4fd346f7..ac3a4663 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -58,7 +58,8 @@ module.exports = {
 
           ".tooltip": {
             "--tooltip-tail": "6px",
-            "--tooltip-color": "hsl(var(--p))",
+            "--tooltip-color": "oklch(var(--s))",
+            "--tooltip-text-color": "oklch(var(--sc))",
           },
           ".link": {
             textUnderlineOffset: "2px",