diff --git a/workspaces/website/src/components/Button/Button.stories.tsx b/workspaces/website/src/components/Button/Button.stories.tsx
index 176dde46c8..ba2bcff430 100644
--- a/workspaces/website/src/components/Button/Button.stories.tsx
+++ b/workspaces/website/src/components/Button/Button.stories.tsx
@@ -97,6 +97,16 @@ export const Ghost = () => (
   </ThemeProvider>
 );
 
+export const Gradient = () => (
+  <ThemeProvider>
+    <HStack p={12}>
+      <>
+        <Button variant="gradient">Gradient button</Button>
+      </>
+    </HStack>
+  </ThemeProvider>
+);
+
 export const PrimaryHero = () => (
   <ThemeProvider>
     <HStack p={12}>
diff --git a/workspaces/website/src/components/Button/Button.tsx b/workspaces/website/src/components/Button/Button.tsx
index 1114caa463..c334d0b232 100644
--- a/workspaces/website/src/components/Button/Button.tsx
+++ b/workspaces/website/src/components/Button/Button.tsx
@@ -15,7 +15,8 @@ type props = {
     | "filter"
     | "filterActive"
     | "category"
-    | "icon";
+    | "icon"
+    | "gradient";
   children: React.ReactNode;
   toId?: string;
   href?: string;
diff --git a/workspaces/website/src/components/Button/ButtonStyles.ts b/workspaces/website/src/components/Button/ButtonStyles.ts
index ab37d43c67..db89faa4a5 100644
--- a/workspaces/website/src/components/Button/ButtonStyles.ts
+++ b/workspaces/website/src/components/Button/ButtonStyles.ts
@@ -1,50 +1,118 @@
 import { defineStyle, defineStyleConfig } from "@chakra-ui/react";
 
-const outline = defineStyle({
+const category = defineStyle({
+  cursor: "pointer",
+  borderRadius: 0,
+  fontWeight: "medium",
+  fontSize: "14px",
+  lineHeight: "14px",
+  padding: "8px 0 16px",
+  color: "tabs-fg",
+  borderBottomWidth: "1px",
+  borderColor: "tabs-border-bg",
+
+  bg: "tabs-bg",
+  _hover: {
+    bg: "tabs-bg",
+    color: "tabs-hover-fg",
+  },
+  _active: {
+    bg: "tabs-bg",
+    color: "tabs-fg-active",
+    borderColor: "tabs-border-active-bg",
+  },
+});
+
+const filter = defineStyle({
   borderRadius: 4,
   fontWeight: "medium",
-  fontSize: "16px",
-  paddingLeft: "40px",
-  paddingRight: "40px",
+  fontSize: "12px",
+  lineHeight: "12px",
+  padding: "8px 16px",
+  color: "btn-filter-fg",
+
+  bg: "btn-filter-bg",
+  _hover: {
+    bg: "btn-filter-hover-bg",
+    color: "btn-filter-hover-fg",
+  },
+  _active: {
+    bg: "btn-filter-active-bg",
+    color: "btn-filter-active-fg",
+  },
+});
+
+const filterActive = defineStyle({
+  borderRadius: 4,
+  fontWeight: "medium",
+  fontSize: "12px",
+  lineHeight: "12px",
+  padding: "8px 16px",
+  bg: "btn-filter-active-bg",
+  color: "btn-filter-active-fg",
+  _hover: {
+    bg: "btn-filter-active-hover-bg",
+    color: "btn-filter-active-hover-fg",
+  },
+});
+
+const ghost = defineStyle({
+  borderRadius: 4,
+  fontWeight: "medium",
+  fontSize: "14px",
   color: "grey.darkText",
-  borderColor: "grey.morning",
+  borderColor: "transparent",
+  borderWidth: "1px",
   bg: "transparent",
   minWidth: "none",
-  lineHeight: "24px",
+  minHeight: 42,
+  lineHeight: "100%",
   height: "auto",
-  padding: "12px 24px",
+  padding: "8px 16px",
+  "& svg path": {
+    fill: "grey.morning"
+  },
   _hover: {
     bg: "transparent",
-    color: "btn-outline-hover-fg",
-    borderColor: "grey.morning",
-    _dark: {
-      color: "selected.100"
+    "& svg path": {
+      fill: "selected.main"
     },
+    _dark: {
+      color: "white",
+      borderColor: "transparent",
+      bg: "black"
+    }
   },
   _active: {
-    bg: "bg.200",
-    color: "grey.greyDusk",
-    borderColor: "grey.morning",
-    borderWidth: "1px",
+    bg: "transparent",
     boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
     outlineWidth: 1,
+    color: "grey.greyDusk",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    "& svg path": {
+      fill: "grey.greyDusk"
+    },
     _focus: {
-      bg: "bg.200",
+      bg: "transparent",
       color: "grey.greyDusk",
-      borderColor: "grey.morning",
-      borderWidth: "1px",
       boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-      outlineWidth: 1
+      outlineWidth: 1,
+      borderWidth: "1px",
+      borderColor: "transparent",
+      "& svg path": {
+        fill: "grey.greyDusk"
+      },
     },
     _dark: {
       bg: "black",
-      color: "grey.greyDusk",
-      borderColor: "grey.greyDusk",
+      color: "btn-outline-active-fg",
+      borderColor: "black",
       outlineWidth: 1,
       _focus: {
         bg: "black",
-        color: "grey.greyDusk",
-        borderColor: "grey.greyDusk",
+        color: "btn-outline-active-fg",
+        borderColor: "black",
         outlineWidth: 1
       }
     }
@@ -60,46 +128,106 @@ const outline = defineStyle({
     }
   },
   _dark: {
-    border: "1px solid grey.greyDusk",
+    borderColor: "transparent",
     color: "white"
   }
 });
 
-const outlineLight = defineStyle({
-  borderRadius: 4,
-  fontWeight: "medium",
-  fontSize: "14px",
-  color: "grey.coolerText",
-  borderColor: "grey.line",
-  borderWidth: "1px",
-  bg: "transparent",
+const gradient = defineStyle({
+  borderRadius: 8,
+  fontWeight: 600,
+  fontSize: "16px",
   minWidth: "none",
-  lineHeight: "16px",
+  lineHeight: "24px",
   height: "auto",
-  padding: "16px 40px",
+  color: "bg.200",
+  padding: "12px 24px",
+  background: "linear-gradient(270deg, #171870 0%, #3928A0 51%, #A15882 100%)",
+  _dark: {
+    background:
+      "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)",
+  },
+  "&:disabled": {
+    background: "surface.accent.disabled",
+    color: "content.on-surface-inverted.disabled",
+    boxShadow: "none",
+  },
   _hover: {
-    bg: "transparent",
-    color: "btn-outline-hover-fg",
-    borderColor: "selected.main",
+    background:
+      "linear-gradient(270deg, #6565B3 0%, #7666D8 51%, #D586B5 100%)",
+    "&:disabled": {
+      background: "btn-primary-disabled-bg !important",
+      color: "btn-primary-disabled-fg",
+      boxShadow: "none !important",
+    },
     _dark: {
-      color: "selected.100",
-      borderColor: "selected.200"
-    }
+      background:
+        "linear-gradient(270deg, #B7B7F5 0%, #C7C7F9 44.79%, #FFDBD6 100%)",
+    },
   },
   _active: {
-    bg: "grey.line",
-    color: "grey.coolerText",
-    borderColor: "grey.line",
-    borderWidth: "1px",
-    boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+    background:
+      "linear-gradient(270deg, #171870 0%, #3928A0 51%, #A15882 100%)",
+    boxShadow: "0px 6px 0px 0px rgba(17, 17, 17, 0.24) inset !important",
+    outlineOffset: 1,
+    "&:disabled": {
+      background: "btn-primary-disabled-bg !important",
+      color: "btn-primary-disabled-fg",
+      boxShadow: "none !important",
+    },
+    _dark: {
+      background:
+        "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)",
+      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
+      _focus: {
+        background:
+          "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)",
+        boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
+      },
+    },
+  },
+  _focusVisible: {
+    outlineOffset: 1,
+    outline: "3px solid #3F8CFF",
+    boxShadow: "none",
+    border: "none",
+    _dark: {
+      outlineOffset: 0,
+    },
+  },
+});
+
+const icon = defineStyle({
+  height: "auto",
+  padding: "11px",
+  color: "darkMode.card",
+  bg: "transparent",
+  borderColor: "transparent",
+  borderWidth: 1,
+  _hover: {
+    bg: "bg.200",
+    _focus: {
+      bg: "bg.200",
+      borderColor: "transparent",
+      borderWidth: 1,
+    },
+    _dark: {
+      bg: "black",
+    },
+  },
+  _active: {
+    bg: "transparent",
+    boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
     outlineWidth: 1,
+    borderWidth: "1px",
+    borderColor: "transparent",
+    color: "darkMode.card",
     _focus: {
-      bg: "grey.line",
-      color: "grey.coolerText",
-      borderColor: "grey.line",
+      bg: "transparent",
+      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
+      outlineWidth: 1,
       borderWidth: "1px",
-      boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
-      outlineWidth: 1
+      borderColor: "transparent"
     },
     _dark: {
       bg: "black",
@@ -108,7 +236,7 @@ const outlineLight = defineStyle({
       outlineWidth: 1,
       _focus: {
         bg: "black",
-        color: "btn-outline-active-fg",
+        color: "grey.greyDusk",
         borderColor: "black",
         outlineWidth: 1
       }
@@ -125,56 +253,56 @@ const outlineLight = defineStyle({
     }
   },
   _dark: {
-    border: "1px solid grey.greyDusk",
+    borderColor: "transparent",
     color: "white"
   }
 });
 
-const outlineRounded = defineStyle({
-  borderRadius: 24,
+const outline = defineStyle({
+  borderRadius: 4,
   fontWeight: "medium",
-  fontSize: "14px",
-  color: "grey.coolerText",
-  borderColor: "grey.line",
-  borderWidth: "1px",
+  fontSize: "16px",
+  paddingLeft: "40px",
+  paddingRight: "40px",
+  color: "grey.darkText",
+  borderColor: "grey.morning",
   bg: "transparent",
   minWidth: "none",
-  lineHeight: "16px",
+  lineHeight: "24px",
   height: "auto",
-  padding: "16px 40px",
+  padding: "12px 24px",
   _hover: {
     bg: "transparent",
     color: "btn-outline-hover-fg",
-    borderColor: "selected.main",
+    borderColor: "grey.morning",
     _dark: {
-      color: "selected.100",
-      borderColor: "selected.200"
-    }
+      color: "selected.100"
+    },
   },
   _active: {
-    bg: "grey.line",
-    color: "grey.coolerText",
-    borderColor: "grey.line",
+    bg: "bg.200",
+    color: "grey.greyDusk",
+    borderColor: "grey.morning",
     borderWidth: "1px",
-    boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+    boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
     outlineWidth: 1,
     _focus: {
-      bg: "grey.line",
-      color: "grey.coolerText",
-      borderColor: "grey.line",
+      bg: "bg.200",
+      color: "grey.greyDusk",
+      borderColor: "grey.morning",
       borderWidth: "1px",
-      boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
       outlineWidth: 1
     },
     _dark: {
       bg: "black",
-      color: "btn-outline-active-fg",
-      borderColor: "black",
+      color: "grey.greyDusk",
+      borderColor: "grey.greyDusk",
       outlineWidth: 1,
       _focus: {
         bg: "black",
-        color: "btn-outline-active-fg",
-        borderColor: "black",
+        color: "grey.greyDusk",
+        borderColor: "grey.greyDusk",
         outlineWidth: 1
       }
     }
@@ -195,53 +323,41 @@ const outlineRounded = defineStyle({
   }
 });
 
-const ghost = defineStyle({
+const outlineLight = defineStyle({
   borderRadius: 4,
   fontWeight: "medium",
   fontSize: "14px",
-  color: "grey.darkText",
-  borderColor: "transparent",
+  color: "grey.coolerText",
+  borderColor: "grey.line",
   borderWidth: "1px",
   bg: "transparent",
   minWidth: "none",
-  minHeight: 42,
-  lineHeight: "100%",
+  lineHeight: "16px",
   height: "auto",
-  padding: "8px 16px",
-  "& svg path": {
-    fill: "grey.morning"
-  },
+  padding: "16px 40px",
   _hover: {
     bg: "transparent",
-    "& svg path": {
-      fill: "selected.main"
-    },
+    color: "btn-outline-hover-fg",
+    borderColor: "selected.main",
     _dark: {
-      color: "white",
-      borderColor: "transparent",
-      bg: "black"
+      color: "selected.100",
+      borderColor: "selected.200"
     }
   },
   _active: {
-    bg: "transparent",
-    boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-    outlineWidth: 1,
-    color: "grey.greyDusk",
+    bg: "grey.line",
+    color: "grey.coolerText",
+    borderColor: "grey.line",
     borderWidth: "1px",
-    borderColor: "transparent",
-    "& svg path": {
-      fill: "grey.greyDusk"
-    },
+    boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+    outlineWidth: 1,
     _focus: {
-      bg: "transparent",
-      color: "grey.greyDusk",
-      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-      outlineWidth: 1,
+      bg: "grey.line",
+      color: "grey.coolerText",
+      borderColor: "grey.line",
       borderWidth: "1px",
-      borderColor: "transparent",
-      "& svg path": {
-        fill: "grey.greyDusk"
-      },
+      boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+      outlineWidth: 1
     },
     _dark: {
       bg: "black",
@@ -267,56 +383,63 @@ const ghost = defineStyle({
     }
   },
   _dark: {
-    borderColor: "transparent",
+    border: "1px solid grey.greyDusk",
     color: "white"
   }
 });
 
-const solid = defineStyle({
-  borderRadius: 4,
+const outlineRounded = defineStyle({
+  borderRadius: 24,
   fontWeight: "medium",
-  fontSize: "16px",
+  fontSize: "14px",
+  color: "grey.coolerText",
+  borderColor: "grey.line",
+  borderWidth: "1px",
+  bg: "transparent",
   minWidth: "none",
-  lineHeight: "24px",
+  lineHeight: "16px",
   height: "auto",
-  padding: "12px 24px",
-  color: "white",
-  bg: "btn-primary-bg",
-  borderWidth: "1px",
-  borderStyle: "solid",
-  borderColor: "btn-primary-bg",
+  padding: "16px 40px",
   _hover: {
-    bg: "btn-primary-hover-bg",
-    color: "btn-primary-hover-fg",
+    bg: "transparent",
+    color: "btn-outline-hover-fg",
+    borderColor: "selected.main",
     _dark: {
-      bg: "bg.main",
-      color: "grey.darkText",
-    },
+      color: "selected.100",
+      borderColor: "selected.200"
+    }
   },
   _active: {
-    bg: "btn-primary-active-bg",
-    color: "btn-primary-active-fg",
+    bg: "grey.line",
+    color: "grey.coolerText",
+    borderColor: "grey.line",
+    borderWidth: "1px",
+    boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
     outlineWidth: 1,
+    _focus: {
+      bg: "grey.line",
+      color: "grey.coolerText",
+      borderColor: "grey.line",
+      borderWidth: "1px",
+      boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)",
+      outlineWidth: 1
+    },
     _dark: {
-      bg: "grey.morning",
-      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-      color: "grey.darkText",
+      bg: "black",
+      color: "btn-outline-active-fg",
+      borderColor: "black",
+      outlineWidth: 1,
       _focus: {
-        bg: "grey.morning",
-        boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-        color: "grey.darkText",
+        bg: "black",
+        color: "btn-outline-active-fg",
+        borderColor: "black",
+        outlineWidth: 1
       }
-    },
-  },
-  _dark: {
-    bg: "white",
-    color: "grey.darkText",
+    }
   },
   _focus: {
     boxShadow: "none",
     borderColor: "selected.main",
-    borderWidth: "1px",
-    borderStyle: "solid",
     _dark: {
       boxShadow: "none",
       borderColor: "selected.100",
@@ -324,6 +447,10 @@ const solid = defineStyle({
       borderStyle: "solid"
     }
   },
+  _dark: {
+    border: "1px solid grey.greyDusk",
+    color: "white"
+  }
 });
 
 const primaryHero = defineStyle({
@@ -389,6 +516,7 @@ const primaryHero = defineStyle({
     }
   },
 });
+
 const secondaryHero = defineStyle({
   borderRadius: 4,
   fontWeight: "medium",
@@ -456,6 +584,60 @@ const secondaryHero = defineStyle({
   },
 });
 
+const solid = defineStyle({
+  borderRadius: 4,
+  fontWeight: "medium",
+  fontSize: "16px",
+  minWidth: "none",
+  lineHeight: "24px",
+  height: "auto",
+  padding: "12px 24px",
+  color: "white",
+  bg: "btn-primary-bg",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "btn-primary-bg",
+  _hover: {
+    bg: "btn-primary-hover-bg",
+    color: "btn-primary-hover-fg",
+    _dark: {
+      bg: "bg.main",
+      color: "grey.darkText",
+    },
+  },
+  _active: {
+    bg: "btn-primary-active-bg",
+    color: "btn-primary-active-fg",
+    outlineWidth: 1,
+    _dark: {
+      bg: "grey.morning",
+      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
+      color: "grey.darkText",
+      _focus: {
+        bg: "grey.morning",
+        boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
+        color: "grey.darkText",
+      }
+    },
+  },
+  _dark: {
+    bg: "white",
+    color: "grey.darkText",
+  },
+  _focus: {
+    boxShadow: "none",
+    borderColor: "selected.main",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    _dark: {
+      boxShadow: "none",
+      borderColor: "selected.100",
+      borderWidth: "1px",
+      borderStyle: "solid"
+    }
+  },
+});
+
 const switchButton = defineStyle({
   height: "auto",
   padding: "11px",
@@ -521,136 +703,20 @@ const switchButton = defineStyle({
   },
 });
 
-const filter = defineStyle({
-  borderRadius: 4,
-  fontWeight: "medium",
-  fontSize: "12px",
-  lineHeight: "12px",
-  padding: "8px 16px",
-  color: "btn-filter-fg",
-
-  bg: "btn-filter-bg",
-  _hover: {
-    bg: "btn-filter-hover-bg",
-    color: "btn-filter-hover-fg",
-  },
-  _active: {
-    bg: "btn-filter-active-bg",
-    color: "btn-filter-active-fg",
-  },
-});
-
-const filterActive = defineStyle({
-  borderRadius: 4,
-  fontWeight: "medium",
-  fontSize: "12px",
-  lineHeight: "12px",
-  padding: "8px 16px",
-  bg: "btn-filter-active-bg",
-  color: "btn-filter-active-fg",
-  _hover: {
-    bg: "btn-filter-active-hover-bg",
-    color: "btn-filter-active-hover-fg",
-  },
-});
-
-const category = defineStyle({
-  cursor: "pointer",
-  borderRadius: 0,
-  fontWeight: "medium",
-  fontSize: "14px",
-  lineHeight: "14px",
-  padding: "8px 0 16px",
-  color: "tabs-fg",
-  borderBottomWidth: "1px",
-  borderColor: "tabs-border-bg",
-
-  bg: "tabs-bg",
-  _hover: {
-    bg: "tabs-bg",
-    color: "tabs-hover-fg",
-  },
-  _active: {
-    bg: "tabs-bg",
-    color: "tabs-fg-active",
-    borderColor: "tabs-border-active-bg",
-  },
-});
-
-const icon = defineStyle({
-  height: "auto",
-  padding: "11px",
-  color: "darkMode.card",
-  bg: "transparent",
-  borderColor: "transparent",
-  borderWidth: 1,
-  _hover: {
-    bg: "bg.200",
-    _focus: {
-      bg: "bg.200",
-      borderColor: "transparent",
-      borderWidth: 1,
-    },
-    _dark: {
-      bg: "black",
-    },
-  },
-  _active: {
-    bg: "transparent",
-    boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-    outlineWidth: 1,
-    borderWidth: "1px",
-    borderColor: "transparent",
-    color: "darkMode.card",
-    _focus: {
-      bg: "transparent",
-      boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)",
-      outlineWidth: 1,
-      borderWidth: "1px",
-      borderColor: "transparent"
-    },
-    _dark: {
-      bg: "black",
-      color: "btn-outline-active-fg",
-      borderColor: "black",
-      outlineWidth: 1,
-      _focus: {
-        bg: "black",
-        color: "grey.greyDusk",
-        borderColor: "black",
-        outlineWidth: 1
-      }
-    }
-  },
-  _focus: {
-    boxShadow: "none",
-    borderColor: "selected.main",
-    _dark: {
-      boxShadow: "none",
-      borderColor: "selected.100",
-      borderWidth: "1px",
-      borderStyle: "solid"
-    }
-  },
-  _dark: {
-    borderColor: "transparent",
-    color: "white"
-  }
-});
-
 export const buttonTheme = defineStyleConfig({
   variants: {
+    category,
+    filter,
+    filterActive,
+    ghost,
+    gradient,
+    icon,
     outline,
     outlineLight,
     outlineRounded,
-    secondaryHero,
     primaryHero,
+    secondaryHero,
     solid,
-    ghost,
-    filter,
-    filterActive,
-    category,
-    switch: switchButton,
-    icon
+    switch: switchButton
   },
 });
diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx
index e2ce294c0a..e3732f7932 100644
--- a/workspaces/website/src/components/Card/ImageIconCard.tsx
+++ b/workspaces/website/src/components/Card/ImageIconCard.tsx
@@ -15,6 +15,7 @@ import { CardGradientBorder } from "@ui/Card/components/CardGradientBorder";
 import { getComputedLinkData } from "src/utils/utils";
 import { CustomLink } from "@ui/Link/CustomLink";
 import { LinkData } from "@starknet-io/cms-data/src/settings/main-menu";
+import { Button } from "@ui/Button";
 
 type Props = {
   variant?: "image_icon_link_card" | "icon_link_card" | "dapp" | "large_card" | "community_card";
@@ -69,6 +70,7 @@ export const ImageIconCard = ({
   let linkVariant;
   let cardFooterPadding;
   let globalPadding;
+  let buttonVariant;
   switch (variant) {
     case "image_icon_link_card":
       titleVariant = size === "large" ? "h3" : "h4";
@@ -92,6 +94,7 @@ export const ImageIconCard = ({
       descriptionVariant = "body";
       cardFooterPadding = "24px 0 0 0";
       linkVariant = "cardLink";
+      buttonVariant = "gradient";
       break;
     case "community_card":
       titleVariant = "h4";
@@ -200,7 +203,17 @@ export const ImageIconCard = ({
               </Stack>
             </CardBody>
 
-            {link && variant !== "dapp" && variant !== "community_card" && (
+            {link && variant === "large_card" && (
+              <CardFooter padding={cardFooterPadding}>
+                <ButtonGroup spacing="2">
+                  <Button href={href} variant={buttonVariant}>
+                    {label} &rarr;
+                  </Button>
+                </ButtonGroup>
+              </CardFooter>
+            )}
+
+            {link && variant !== "dapp" && variant !== "community_card" && variant !== "large_card" && (
               <CardFooter padding={cardFooterPadding}>
                 <ButtonGroup spacing="2">
                   <CustomLink