diff --git a/src/components/settings/DonateButton.tsx b/src/components/settings/DonateButton.tsx
index e7c562df7..4a8e96dc8 100644
--- a/src/components/settings/DonateButton.tsx
+++ b/src/components/settings/DonateButton.tsx
@@ -25,6 +25,7 @@ import { showToast } from "@webpack/common";
 
 export function DonateButton({
     equicord = false,
+    className,
     ...props
 }: Partial<ButtonProps> & { equicord?: boolean; }) {
     const link = equicord ? "https://github.com/sponsors/thororen1234" : "https://github.com/sponsors/Vendicated";
@@ -35,7 +36,7 @@ export function DonateButton({
             size="medium"
             type="button"
             onClick={() => VencordNative.native.openExternal(link)}
-            className="vc-donate-button"
+            className={className || "vc-donate-button"}
         >
             <Heart />
             Donate
@@ -44,6 +45,7 @@ export function DonateButton({
 }
 
 export function InviteButton({
+    className,
     ...props
 }: Partial<ButtonProps>) {
     return (
@@ -58,7 +60,7 @@ export function InviteButton({
                     showToast("Invalid or expired invite"),
                 );
             }}
-            className="vc-invite-button"
+            className={className || "vc-donate-button"}
         >
             Invite
             <OpenExternalIcon className="vc-invite-link" />
diff --git a/src/components/settings/SpecialCard.css b/src/components/settings/SpecialCard.css
index 083cb1d67..c58c5044d 100644
--- a/src/components/settings/SpecialCard.css
+++ b/src/components/settings/SpecialCard.css
@@ -2,14 +2,28 @@
 .vc-donate-button {
     overflow: visible !important;
     color: black;
-    background-color: color-mix(in srgb, #c3a3ce 15%, pink);
+    background-color: color-mix(in srgb, #ED87A9 25%, pink);
 }
 
 .vc-invite-button:hover,
 .vc-donate-button:hover {
     overflow: visible !important;
     color: black;
-    background-color: color-mix(in srgb, hotpink 15%, pink);
+    background-color: color-mix(in srgb, #ED87A9 50%, pink);
+}
+
+.vc-invite-support-button,
+.vc-donate-support-button {
+    overflow: visible !important;
+    color: black;
+    background-color: color-mix(in srgb, #c3a3ce 25%, rgb(240, 178, 240));
+}
+
+.vc-invite-support-button:hover,
+.vc-donate-support-button:hover {
+    overflow: visible !important;
+    color: black;
+    background-color: color-mix(in srgb, #c3a3ce 50%, rgb(240, 178, 240));
 }
 
 .vc-invite-link {
@@ -40,14 +54,18 @@
 
 .vc-invite-button .vc-invite-link,
 .vc-contrib-button .vc-contrib-github,
-.vc-donate-button .vc-heart-icon {
+.vc-donate-button .vc-heart-icon,
+.vc-invite-support-button .vc-invite-link,
+.vc-donate-support-button .vc-heart-icon {
     transition: transform 0.3s;
     margin-right: 0.5em;
 }
 
 .vc-invite-button:hover .vc-invite-link,
 .vc-contrib-button:hover .vc-contrib-github,
-.vc-donate-button:hover .vc-heart-icon {
+.vc-donate-button:hover .vc-heart-icon,
+.vc-invite-support-button:hover .vc-invite-link,
+.vc-donate-support-button:hover .vc-heart-icon {
     transform: scale(1.1);
     z-index: 10;
     position: relative;
diff --git a/src/components/settings/tabs/vencord/DonateButton.tsx b/src/components/settings/tabs/vencord/DonateButton.tsx
index c9f0ebce7..0d63f2b87 100644
--- a/src/components/settings/tabs/vencord/DonateButton.tsx
+++ b/src/components/settings/tabs/vencord/DonateButton.tsx
@@ -15,13 +15,15 @@ export const isDonor = (userId: string) => !!(
     || GuildMemberStore?.getMember(VC_GUILD_ID, userId)?.roles.includes(DONOR_ROLE_ID)
 );
 
-export function DonateButtonComponent() {
+export function DonateButtonComponent({ donated = false }) {
     return (
         <Flex>
             <DonateButton
                 equicord={true}
+                className={!donated ? "vc-donate-support-button" : ""}
                 style={{ marginTop: "1em" }} />
             <InviteButton
+                className={!donated ? "vc-invite-support-button" : ""}
                 style={{ marginTop: "1em" }} />
         </Flex>
     );
diff --git a/src/components/settings/tabs/vencord/index.tsx b/src/components/settings/tabs/vencord/index.tsx
index e8ff3e8aa..a34a2ee64 100644
--- a/src/components/settings/tabs/vencord/index.tsx
+++ b/src/components/settings/tabs/vencord/index.tsx
@@ -136,7 +136,7 @@ function EquicordSettings() {
                     backgroundImage={DONOR_BACKGROUND_IMAGE}
                     backgroundColor="#ED87A9"
                 >
-                    <DonateButtonComponent />
+                    <DonateButtonComponent donated={true} />
                 </SpecialCard>
             ) : (
                 <SpecialCard