diff --git a/src/lib/components/Dark/DarkToggle.svelte b/src/lib/components/Dark/DarkToggle.svelte
index eef46a0b..f482a9bd 100644
--- a/src/lib/components/Dark/DarkToggle.svelte
+++ b/src/lib/components/Dark/DarkToggle.svelte
@@ -10,7 +10,7 @@
 
 <IconButton
     on:click={handleClick}
-    color="invisible"
+    variant="invisible"
 >
     {#if $dark}
         <IconMoonStarsFill size={18} />
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index a52814b9..593f3d36 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -40,7 +40,7 @@
 
                 <div class="close-wrap">
                     <IconButton
-                        color="invisible"
+                        variant="invisible"
                         on:click={() => show = false}
                     >
                         <IconX size={25} />
diff --git a/src/lib/marketing/Footer/Footer.svelte b/src/lib/marketing/Footer/Footer.svelte
index 0c51b1d7..35ded838 100644
--- a/src/lib/marketing/Footer/Footer.svelte
+++ b/src/lib/marketing/Footer/Footer.svelte
@@ -51,7 +51,7 @@
                         <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
                             <IconButton 
                                 size="small" 
-                                color="invisible" 
+                                variant="invisible" 
                                 on:click={handleCopy}
                                 on:mouseleave={() => emailCopied = false}
                             >
diff --git a/src/lib/marketing/Header/Header.svelte b/src/lib/marketing/Header/Header.svelte
index 05d7c802..f33c4348 100644
--- a/src/lib/marketing/Header/Header.svelte
+++ b/src/lib/marketing/Header/Header.svelte
@@ -69,7 +69,7 @@
 		<span class="mobile-nav-wrap">
 			<Dropdown align="end" width={300}>
 				<IconButton 
-					color="invisible" 
+					variant="invisible" 
 					slot="trigger"
 				>
 					<IconList size={18} />