diff --git a/website/src/app.pcss b/website/src/app.pcss
index 6ff7062d..170292c5 100644
--- a/website/src/app.pcss
+++ b/website/src/app.pcss
@@ -30,6 +30,8 @@
  
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 210 40% 98%;
+
+    --support: 220 15 130;
  
     --ring: 222.2 84% 4.9%;
  
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 04835f3a..8d70f1fd 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -2,17 +2,7 @@
 	import * as Menubar from '$lib/components/ui/menubar/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
-	import {
-		Plus,
-		Copy,
-		Download,
-		Undo2,
-		Redo2,
-		Trash2,
-		HeartHandshake,
-		Upload,
-		Cloud
-	} from 'lucide-svelte';
+	import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
 
 	import {
 		files,
@@ -153,8 +143,8 @@
 				variant="ghost"
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
-				class="cursor-default h-fit rounded-sm"
-				>{$_('menu.donate')} <HeartHandshake size="16" class="ml-1" /></Button
+				class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support"
+				>{$_('menu.donate')} <Heart size="16" class="ml-1" fill="rgb(var(--support))" /></Button
 			>
 		</div>
 	</div>
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index ec5a1b1a..09f5c0b6 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -47,7 +47,8 @@ const config = {
                 card: {
                     DEFAULT: "hsl(var(--card) / <alpha-value>)",
                     foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-                }
+                },
+                support: "rgb(var(--support))",
             },
             borderRadius: {
                 lg: "var(--radius)",