diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts
index 59a56f3..794cd3b 100644
--- a/theme/AppTheme.ts
+++ b/theme/AppTheme.ts
@@ -29,6 +29,7 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
+      patreon: "#FF424D",
     },
   },
   styles: {
diff --git a/theme/components/buttonStyles.ts b/theme/components/buttonStyles.ts
index b47e9f9..ca5c83a 100644
--- a/theme/components/buttonStyles.ts
+++ b/theme/components/buttonStyles.ts
@@ -157,6 +157,18 @@ const buttonStyles = {
         border: "1px solid #0068ff",
       },
     }),
+    patreon: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.patreon",
+      fontSize: "lg",
+      p: 3,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(
+          whiten("brand.patreon", 20),
+          darken("brand.patreon", 20)
+        )(props),
+      },
+    }),
   },
   // default values for `size` and `variant`
   defaultProps: {},
diff --git a/theme/layout/Footer.tsx b/theme/layout/Footer.tsx
index 7aac0c1..c5f274f 100644
--- a/theme/layout/Footer.tsx
+++ b/theme/layout/Footer.tsx
@@ -87,8 +87,7 @@ const Footer = (): JSX.Element => {
             >
               <Button
                 color="whiteAlpha"
-                background="#FF424D"
-                variant="credits"
+                variant="patreon"
                 leftIcon={<Icon icon="ri:patreon-fill" />}
               >
                 Fund This App