diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index 7e5db1ec3..bdeb051ce 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -21,14 +21,12 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account
-    ? { color: "red.400", borderColor: "red.400", bg: "transparent" }
-    : undefined
+  const colorScheme = !account ? "error" : undefined
 
   return (
     <Button
       variant="card"
-      sx={styles}
+      colorScheme={colorScheme}
       leftIcon={<Icon as={leftIcon} boxSize={6} />}
       onClick={requestAccount}
     >
diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
index ade14f918..965541e54 100644
--- a/dapp/src/theme/Button.ts
+++ b/dapp/src/theme/Button.ts
@@ -1,4 +1,4 @@
-import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+import { ComponentSingleStyleConfig, StyleFunctionProps } from "@chakra-ui/react"
 
 // TODO: Update the button styles correctly when ready
 const Button: ComponentSingleStyleConfig = {
@@ -37,17 +37,25 @@ const Button: ComponentSingleStyleConfig = {
         bg: "transparent",
       },
     },
-    card: {
-      borderWidth: "2px",
-      borderColor: "gold.100",
-      borderRadius: "xl",
-      bg: "gold.200",
-      _hover: {
-        bg: "opacity.grey.700-05",
-      },
-      _active: {
-        bg: "transparent",
-      },
+    card: (props: StyleFunctionProps) => {
+      const defaultStyles = {
+          borderWidth: "2px",
+          borderColor: "gold.100",
+          borderRadius: "xl",
+          bg: "gold.200",
+          _hover: {
+            bg: "opacity.grey.700-05",
+          },
+          _active: {
+            bg: "transparent",
+          },
+      }
+
+      if(props.colorScheme === "error") {
+        return {...defaultStyles, color: "red.400", borderColor: "red.400", bg: "transparent" }
+      }
+
+      return defaultStyles
     },
   },
 }