diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
index 11730c4e1ed..cd4907fca3b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
@@ -1,10 +1,10 @@
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
 import {
-  Box,
   Flex,
   FormControl,
   Input,
@@ -539,19 +539,28 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                         </Card>
                       }
                     >
-                      <Box
-                        borderRadius="lg"
-                        cursor="pointer"
+                      <div
+                        className={cn(
+                          "cursor-pointer overflow-hidden rounded-lg",
+                          isSelected(nft) &&
+                            "outline outline-3 outline-purple-500",
+                        )}
                         onClick={() =>
                           isSelected(nft)
                             ? form.setValue("selected", undefined)
                             : form.setValue("selected", nft)
                         }
-                        outline={isSelected(nft) ? "3px solid" : undefined}
-                        outlineColor={
-                          isSelected(nft) ? "purple.500" : undefined
-                        }
-                        overflow="hidden"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            isSelected(nft)
+                              ? form.setValue("selected", undefined)
+                              : form.setValue("selected", nft);
+                          }
+                        }}
+                        tabIndex={0}
+                        role="button"
+                        aria-pressed={isSelected(nft)}
                       >
                         <NFTMediaWithEmptyState
                           metadata={nft.metadata}
@@ -559,7 +568,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                           height="140px"
                           requireInteraction
                         />
-                      </Box>
+                      </div>
                     </Tooltip>
                   );
                 })}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
index 45adba454db..c9204099827 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
+import { Flex } from "@chakra-ui/react";
 import { CurrencySelector } from "components/shared/CurrencySelector";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { useClaimConditionsFormContext } from "..";
@@ -36,14 +37,14 @@ export const ClaimPriceInput = (props: {
       }
     >
       <Flex gap={2} flexDir={{ base: "column", md: "row" }}>
-        <Box w={{ base: "100%", md: "50%" }} minW="70px">
+        <div className="w-full min-w-[70px] md:w-1/2">
           <PriceInput
             w="full"
             value={field.price?.toString() || ""}
             onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
           />
-        </Box>
-        <Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
+        </div>
+        <div className={cn("w-full", isColumn ? "md:w-1/2" : "md:w-full")}>
           <CurrencySelector
             contractChainId={props.contractChainId}
             isDisabled={formDisabled}
@@ -55,7 +56,7 @@ export const ClaimPriceInput = (props: {
               )
             }
           />
-        </Box>
+        </div>
       </Flex>
     </CustomFormControl>
   );
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
index aab2ee3fd38..dc0a76e3dc6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Box, Flex, Select } from "@chakra-ui/react";
+import { Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
 import { useClaimConditionsFormContext } from "..";
 import { CustomFormControl } from "../common";
@@ -147,10 +147,7 @@ export const ClaimerSelection = () => {
             </Flex>
           </Flex>
         ) : (
-          <Box
-            w={{ base: "100%", md: "50%" }}
-            display={{ base: "none", md: "block" }}
-          />
+          <div className="hidden w-full md:block md:w-1/2" />
         )}
       </Flex>
     </CustomFormControl>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
index f3b26340cc2..61cbd84cd1a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
@@ -9,7 +9,6 @@ import {
   AlertDescription,
   AlertIcon,
   AlertTitle,
-  Box,
   Flex,
   Menu,
   MenuButton,
@@ -647,7 +646,10 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
             </div>
 
             <div className="flex flex-row">
-              <AdminOnly contract={contract} fallback={<Box pb={5} />}>
+              <AdminOnly
+                contract={contract}
+                fallback={<div className="pb-5" />}
+              >
                 <Flex justifyContent="center" alignItems="center" gap={3}>
                   {(hasRemovedPhases || hasAddedPhases) && (
                     <Text color="red.500" fontWeight="bold">
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx
index 2bcd28c4926..fb981f0159c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx
@@ -34,7 +34,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
     endTimestamp,
   } = item;
   return (
-    <Card position="relative" p={8}>
+    <Card className="relative p-8">
       <Flex direction="column" gap={8}>
         <Flex flexDir="column" gap={2} mt={{ base: 4, md: 0 }}>
           <Flex
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx
index dd8fe24f3d5..ab8fa5933b9 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSplitBalances } from "@3rdweb-sdk/react/hooks/useSplit";
-import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { SimpleGrid, StatLabel, StatNumber } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { useActiveWalletChain, useWalletBalance } from "thirdweb/react";
 import { Card } from "tw-components";
@@ -21,14 +21,14 @@ export const AccountBalance: React.FC<AccountBalanceProps> = ({ contract }) => {
 
   return (
     <SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
-      <Card as={Stat}>
+      <Card className="[&>*]:m-0">
         <StatLabel mb={{ base: 1, md: 0 }}>{balance?.symbol}</StatLabel>
         <StatNumber>{balance?.displayValue}</StatNumber>
       </Card>
       {balanceQuery?.data
         ?.filter((bl) => bl.name !== "Native Token")
         .map((bl) => (
-          <Card as={Stat} key={bl.symbol}>
+          <Card className="[&>*]:m-0" key={bl.symbol}>
             <StatLabel mb={{ base: 1, md: 0 }}>{bl.symbol}</StatLabel>
             <StatNumber>{bl.display_balance}</StatNumber>
           </Card>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx
index 87b3c2544af..87124e7b0b7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx
@@ -32,15 +32,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
   const v5Chain = useV5DashboardChain(chain.chainId);
 
   return (
-    <Card
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        gap: 16,
-        alignItems: "center",
-      }}
-      maxW={{ base: "100%", md: "49%" }}
-    >
+    <Card className="flex max-w-full flex-row items-center gap-4 md:max-w-49%">
       <Input
         placeholder={`Amount in ${symbol}. ex: 0.001`}
         onChange={handleChange}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx
index ea05b12866d..01cd36ee603 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  SimpleGrid,
-  Skeleton,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
+import { SimpleGrid, Skeleton, StatLabel, StatNumber } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
@@ -20,7 +14,7 @@ export const AccountsCount: React.FC<AccountsCountProps> = ({ contract }) => {
   const totalAccountsQuery = useReadContract(totalAccounts, { contract });
   return (
     <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 3, md: 6 }}>
-      <Card as={Stat}>
+      <Card className="[&>*]:m-0">
         <StatLabel mb={{ base: 1, md: 0 }}>Total Accounts</StatLabel>
         <Skeleton isLoaded={totalAccountsQuery.isSuccess}>
           <StatNumber>{totalAccountsQuery.data?.toString()}</StatNumber>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
index 89b6d93f4bc..7edfe841451 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
@@ -11,7 +11,6 @@ import {
   AccordionButton,
   AccordionItem,
   AccordionPanel,
-  Box,
   ButtonGroup,
   Divider,
   Flex,
@@ -114,7 +113,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
           </FormControl>
         </div>
       </Flex>
-      <Card p={0} overflow="hidden">
+      <Card className="overflow-hidden p-0">
         <SimpleGrid
           gap={2}
           columns={12}
@@ -198,14 +197,14 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
           alignItems="center"
           _last={{ borderBottomWidth: 0 }}
         >
-          <Box gridColumn="span 3">
+          <div className="col-span-3">
             <div className="flex flex-row items-center gap-3">
               <Tooltip
                 p={0}
                 bg="transparent"
                 boxShadow="none"
                 label={
-                  <Card py={2} px={4} bgColor="backgroundHighlight">
+                  <Card className="bg-backgroundHighlight px-4 py-2">
                     <Text size="label.sm">
                       Copy transaction hash to clipboard
                     </Text>
@@ -227,9 +226,9 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 {transaction.transactionHash.slice(0, 32)}...
               </Text>
             </div>
-          </Box>
+          </div>
 
-          <Box gridColumn="span 1" />
+          <div className="col-span-1" />
 
           <ButtonGroup
             size="sm"
@@ -262,7 +261,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
             )}
           </ButtonGroup>
 
-          <Box gridColumn="span 3">
+          <div className="col-span-3">
             <div className="flex flex-row justify-between gap-2">
               <Text fontFamily="mono" noOfLines={1}>
                 {transaction.blockNumber}
@@ -271,7 +270,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 <ChevronDownIcon className="size-4" />
               </div>
             </div>
-          </Box>
+          </div>
         </SimpleGrid>
       </AccordionButton>
       <AccordionPanel>
@@ -312,15 +311,15 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 key={`${transaction.transactionHash}_${event.logIndex}`}
               >
                 <SimpleGrid columns={12} gap={2}>
-                  <Box gridColumn="span 3">
+                  <div className="col-span-3">
                     <Text fontWeight="bold">{event.eventName}</Text>
-                  </Box>
-                  <Box gridColumn="span 9">
+                  </div>
+                  <div className="col-span-9">
                     <CodeClient
                       code={stringify(event.args, null, 2)}
                       lang="json"
                     />
-                  </Box>
+                  </div>
                 </SimpleGrid>
 
                 {arr.length - 1 === idx ? null : <Divider />}
@@ -353,7 +352,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
             bg="transparent"
             boxShadow="none"
             label={
-              <Card py={2} px={4} bgColor="backgroundHighlight">
+              <Card className="bg-backgroundHighlight px-4 py-2">
                 <Text size="label.sm">{description}</Text>
               </Card>
             }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
index 59352daefcd..cc9c20f3333 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
@@ -25,7 +25,7 @@ export const ContractPermissionsPage: React.FC<
 
   if (!detectedPermissionEnumerable) {
     return (
-      <Card as={Flex} flexDir="column" gap={3}>
+      <Card className="flex flex-col gap-3">
         {/* TODO  extract this out into it's own component and make it better */}
         <Heading size="subtitle.md">
           Missing PermissionsEnumerable Extension
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx
index a73537b1c4d..87b8152e47c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { voteTokenBalances } from "@3rdweb-sdk/react/hooks/useVote";
-import { Divider, Flex, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { Divider, Flex, StatLabel, StatNumber } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
@@ -61,7 +61,11 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
         <Heading size="title.sm">Voting Tokens</Heading>
         <div className="flex flex-row gap-2">
           {voteTokenBalancesQuery.data?.map((balance) => (
-            <Card as={Stat} key={balance.address} maxWidth="240px">
+            <Card
+              className="[&>*]:m-0"
+              key={balance.address}
+              style={{ maxWidth: 240 }}
+            >
               <StatLabel>
                 {balance.address?.toLowerCase() === address?.toLowerCase()
                   ? "Your Balance"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
index 71bf43990a9..b7cb6273f49 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
@@ -142,7 +142,7 @@ export const SettingsMetadata = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="metadata" detectedState={detectedState} />
       <Flex
         as="form"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
index 30866164c8b..2c590ea4314 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
@@ -75,7 +75,7 @@ export const SettingsPlatformFees = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="platformFee" detectedState={detectedState} />
       <Flex
         as="form"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
index a2f67425ed0..0df29772cba 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
@@ -67,7 +67,7 @@ export const SettingsPrimarySale = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="primarySale" detectedState={detectedState} />
       <Flex
         as="form"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
index 0514a75d3f1..b08db7a66a5 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
@@ -88,7 +88,7 @@ export const SettingsRoyalties = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="royalties" detectedState={detectedState} />
       <Flex
         as="form"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx
index 48886eb96fa..1188fe12b6b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx
@@ -5,7 +5,6 @@ import {
   Flex,
   SimpleGrid,
   Spinner,
-  Stat,
   StatLabel,
   StatNumber,
 } from "@chakra-ui/react";
@@ -121,7 +120,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
       <div className="flex flex-col gap-8">
         <Flex gap={4} flexDir="column">
           <SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
-            <Card as={Stat}>
+            <Card className="[&>*]:m-0">
               <StatLabel mb={{ base: 1, md: 0 }}>
                 {nativeBalanceQuery.data?.symbol}
               </StatLabel>
@@ -145,7 +144,11 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
               (balanceQuery?.data || [])
                 ?.filter((bl) => bl.name !== "Native Token")
                 ?.map((balance) => (
-                  <Card as={Stat} key={balance.token_address} maxWidth="2xs">
+                  <Card
+                    className="[&>*]:m-0"
+                    key={balance.token_address}
+                    style={{ maxWidth: "20rem" }}
+                  >
                     <StatLabel as={Heading} size="label.lg">
                       {balance.name === "Native Token"
                         ? v4Chain?.nativeCurrency.symbol || "Native Token"
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
index 8afde003a7b..244cc97d158 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -287,7 +287,7 @@ const ChainLastBlockTimestamp = ({
   }
 
   return (
-    <Card bgColor="backgroundHighlight">
+    <Card className="bg-backgroundHighlight">
       <Text>{format(ethBlockQuery.data, "PP pp z")}</Text>
     </Card>
   );
@@ -405,7 +405,7 @@ const RemoveModal = ({
               subscription.
             </Text>
 
-            <Card as={Flex} flexDir="column" gap={4}>
+            <Card className="flex flex-col gap-4">
               <FormControl>
                 <FormLabel>Chain</FormLabel>
                 <Flex align="center" gap={2}>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
index 5b06c4f7b31..864abbd8fee 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
@@ -39,7 +39,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
   let systemMetricsPanel = <Spinner className="h-4 w-4" />;
   if (!systemMetricsQuery.data || systemMetricsQuery.isError) {
     systemMetricsPanel = (
-      <Card p={8}>
+      <Card className="p-8">
         <div className="flex flex-col gap-4">
           <div className="flex flex-row items-center gap-2">
             <InfoIcon className="size-4" />
@@ -65,7 +65,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
     );
   } else {
     systemMetricsPanel = (
-      <Card p={16}>
+      <Card className="p-16">
         <div className="flex flex-col gap-4">
           <div className="-mb-2 flex flex-row items-center gap-2">
             <ChartAreaIcon className="size-4" />
@@ -106,7 +106,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
     const msToMine = queueMetricsQuery.data.result.latency?.msToMine;
 
     queueMetricsPanel = (
-      <Card p={8}>
+      <Card className="p-8">
         <div className="flex flex-col gap-6">
           <div className="flex flex-row items-center gap-2">
             <Heading size="title.md">Queue Metrics</Heading>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
index 35bcabaf646..946ea0ccaa0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
@@ -101,7 +101,7 @@ const columns = [
           bg="transparent"
           boxShadow="none"
           label={
-            <Card bgColor="backgroundHighlight">
+            <Card className="bg-backgroundHighlight">
               <Text>{format(date, "PP pp z")}</Text>
             </Card>
           }
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
index cb77bad7047..7a630c8e261 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -1,6 +1,5 @@
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import {
-  Box,
   Flex,
   FormControl,
   IconButton,
@@ -77,7 +76,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
         {fields.map((field, index) => (
           <div key={field.id}>
             <FormControl isRequired as={Flex} gap={4}>
-              <Box w={{ base: "full", md: "40%" }}>
+              <div className="w-full md:w-[40%]">
                 <Controller
                   name={`customFactoryAddresses[${index}].key`}
                   control={form.control}
@@ -93,14 +92,14 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
                     );
                   }}
                 />
-              </Box>
-              <Box w="full">
+              </div>
+              <div className="w-full">
                 <Input
                   isRequired
                   {...form.register(`customFactoryAddresses[${index}].value`)}
                   placeholder="Factory contract address"
                 />
-              </Box>
+              </div>
               <IconButton
                 isDisabled={fields.length === 1 || form.formState.isSubmitting}
                 icon={<TrashIcon className="size-5" />}
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
index 31adef4332f..ca1253d2ff3 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
@@ -2,7 +2,7 @@
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Box, Divider, Flex, IconButton } from "@chakra-ui/react";
+import { Divider, Flex, IconButton } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
@@ -365,13 +365,13 @@ export function ContractPublishForm(props: {
             >
               {!account ? (
                 <>
-                  <Box />
+                  <div />
                   <CustomConnectWallet isLoggedIn={!!props.jwt} />
                 </>
               ) : fieldsetToShow === "landing" &&
                 form.watch("deployType") === "standard" ? (
                 <>
-                  <Box />
+                  <div />
                   <Button
                     onClick={() => setFieldsetToShow("networks")}
                     colorScheme="primary"
@@ -384,7 +384,7 @@ export function ContractPublishForm(props: {
                 (form.watch("deployType") === "autoFactory" ||
                   form.watch("deployType") === "customFactory") ? (
                 <>
-                  <Box />
+                  <div />
                   <Button
                     onClick={() => setFieldsetToShow("factory")}
                     colorScheme="primary"
@@ -397,7 +397,7 @@ export function ContractPublishForm(props: {
                 fieldsetToShow !== "implParams" &&
                 deployParams?.length > 0 ? (
                 <>
-                  <Box />
+                  <div />
                   <Button
                     isDisabled={disableNext}
                     onClick={() => setFieldsetToShow("contractParams")}
@@ -411,7 +411,7 @@ export function ContractPublishForm(props: {
                 deployParams?.length === 0 &&
                 implDeployParams?.length > 0 ? (
                 <>
-                  <Box />
+                  <div />
                   <Button
                     isDisabled={disableNext}
                     onClick={() => setFieldsetToShow("implParams")}
@@ -423,7 +423,7 @@ export function ContractPublishForm(props: {
               ) : fieldsetToShow === "contractParams" &&
                 implDeployParams?.length > 0 ? (
                 <>
-                  <Box />
+                  <div />
                   <Button
                     onClick={() => setFieldsetToShow("implParams")}
                     colorScheme="primary"
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
index 7a7408608cc..d9e0cbebce4 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Flex,
   FormControl,
   Image,
@@ -93,7 +92,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
       <Flex gap={6} w="full">
         <FormControl isInvalid={!!form.formState.errors.logo} w="auto">
           <FormLabel>Image</FormLabel>
-          <Box width="141px">
+          <div className="w-[141px]">
             <FileInput
               accept={{ "image/*": [] }}
               value={logoUrl}
@@ -111,7 +110,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
               )}
               helperText="Image"
             />
-          </Box>
+          </div>
           <FormErrorMessage>
             {form.formState.errors?.logo?.message as unknown as string}
           </FormErrorMessage>
diff --git a/apps/dashboard/src/components/contract-components/published-contract/index.tsx b/apps/dashboard/src/components/contract-components/published-contract/index.tsx
index a4d328bc261..aabf8c1c345 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/index.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/index.tsx
@@ -122,13 +122,13 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
             </LinkButton>
           )}
           {publishedContract?.readme && (
-            <Card as={Flex} flexDir="column" gap={2} p={6} position="relative">
+            <Card className="relative flex flex-col gap-2 p-6">
               <MarkdownRenderer markdownText={publishedContract?.readme} />
             </Card>
           )}
 
           {publishedContract?.changelog && (
-            <Card as={Flex} flexDir="column" gap={2} p={0}>
+            <Card className="flex flex-col gap-2 p-0">
               <Heading px={6} pt={5} pb={2} size="title.sm">
                 {publishedContract?.version} Release Notes
               </Heading>
@@ -141,7 +141,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
             </Card>
           )}
           {contractFunctions && (
-            <Card p={0}>
+            <Card className="p-0">
               <ContractFunctionsOverview
                 functions={contractFunctions}
                 events={contractEvents}
diff --git a/apps/dashboard/src/components/contract-functions/contract-function.tsx b/apps/dashboard/src/components/contract-functions/contract-function.tsx
index a9eb59957c0..8e7f4f20af9 100644
--- a/apps/dashboard/src/components/contract-functions/contract-function.tsx
+++ b/apps/dashboard/src/components/contract-functions/contract-function.tsx
@@ -10,7 +10,6 @@ import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import {
-  Box,
   Divider,
   Flex,
   GridItem,
@@ -210,12 +209,7 @@ function ContractFunctionInputs(props: {
           <Divider my={2} />
           <Flex flexDir="column" gap={3}>
             <Heading size="label.lg">Inputs</Heading>
-            <Box
-              borderTopRadius="lg"
-              p={0}
-              overflowX="auto"
-              position="relative"
-            >
+            <div className="relative overflow-x-auto rounded-t-lg p-0">
               <Table size="sm">
                 <Thead>
                   <Tr>
@@ -263,7 +257,7 @@ function ContractFunctionInputs(props: {
                   ))}
                 </Tbody>
               </Table>
-            </Box>
+            </div>
           </Flex>
         </>
       ) : null}
@@ -478,7 +472,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
           )}
 
           {events.length > 0 && selectedFunction && (
-            <Box px={4} pt={2} overflowX="hidden">
+            <div className="overflow-x-hidden px-4 pt-2">
               {events.map((fn) => (
                 <FunctionsOrEventsListItem
                   key={`${fn.name}_${fn.type}_${fn.inputs.length}`}
@@ -487,7 +481,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
                   setSelectedFunction={setSelectedFunction}
                 />
               ))}
-            </Box>
+            </div>
           )}
         </List>
       </GridItem>
diff --git a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
index a8ade90f858..cefbe7393e4 100644
--- a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
+++ b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
@@ -368,19 +368,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
 
   return (
     <FormProvider {...form}>
-      <Card
-        gridColumn={{ base: "span 12", md: "span 9" }}
-        borderRadius="none"
-        bg="transparent"
-        border="none"
-        as={Flex}
-        flexDirection="column"
-        gap={4}
-        boxShadow="none"
-        flexGrow={1}
-        w="100%"
-        p={0}
-      >
+      <Card className="flex w-full flex-grow grid-cols-12 flex-col gap-4 rounded-none border-none bg-transparent p-0 shadow-none md:grid-cols-9">
         <Flex
           position="relative"
           w="100%"
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index 04942e6c23e..1136ad124b4 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -3,7 +3,6 @@
 import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { updateProjectClient } from "@3rdweb-sdk/react/hooks/useApi";
 import {
-  Box,
   Divider,
   Flex,
   FormControl,
@@ -709,7 +708,7 @@ export function AccountAbstractionSettingsPage(
 
         <Divider />
 
-        <Box alignSelf="flex-end">
+        <div className="self-end">
           <Button
             type="submit"
             colorScheme="primary"
@@ -717,7 +716,7 @@ export function AccountAbstractionSettingsPage(
           >
             Save changes
           </Button>
-        </Box>
+        </div>
       </Flex>
     </Flex>
   );
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
index 670841e3930..7ac5b1ba703 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -1,8 +1,6 @@
 import { CodeClient } from "@/components/ui/code/code.client";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
-  Box,
-  type BoxProps,
   Flex,
   IconButton,
   Image,
@@ -29,6 +27,7 @@ import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
 import { useThirdwebClient } from "../../@/constants/thirdweb.client";
+import { cn } from "../../@/lib/utils";
 
 const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
   const client = useThirdwebClient();
@@ -41,17 +40,36 @@ const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
 };
 
 const FileVideo: React.FC<
-  BoxProps &
-    Omit<React.ComponentProps<"video">, "ref" | "src"> & { src: string | File }
-> = ({ src, ...props }) => {
+  React.VideoHTMLAttributes<HTMLVideoElement> & { src: string | File }
+> = ({
+  src,
+  className = "",
+  autoPlay,
+  playsInline,
+  muted,
+  loop,
+  ...videoProps
+}) => {
   const client = useThirdwebClient();
   const video = useImageFileOrUrl(
     typeof src === "string" && src.startsWith("ipfs://")
       ? replaceIpfsUrl(src, client)
       : src,
   );
-  return <Box as="video" {...props} src={video} />;
+
+  return (
+    <video
+      src={video}
+      autoPlay={autoPlay}
+      playsInline={playsInline}
+      muted={muted}
+      loop={loop}
+      className={cn("h-24 w-24 flex-shrink-0 object-contain", className)}
+      {...videoProps}
+    />
+  );
 };
+
 interface BatchTableProps {
   data: NFTInput[];
   portalRef: React.RefObject<HTMLDivElement | null>;
@@ -90,16 +108,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         Header: "Animation Url",
         accessor: (row) => row.animation_url,
         Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FileVideo
-            flexShrink={0}
-            boxSize={24}
-            objectFit="contain"
-            src={value || ""}
-            autoPlay
-            playsInline
-            muted
-            loop
-          />
+          <FileVideo src={value || ""} autoPlay playsInline muted loop />
         ),
       },
       { Header: "Name", accessor: (row) => row.name },
diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
index 5eb8f1e6699..2d0aa704959 100644
--- a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -24,13 +24,12 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   disabledText,
   infoText,
   className,
-  ...stackProps
 }) => {
   return (
     <Tooltip
       label={
         disabled && (
-          <Card bgColor="backgroundHighlight">
+          <Card className="bg-backgroundHighlight">
             <Text>{disabledText}</Text>
           </Card>
         )
@@ -42,16 +41,13 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
     >
       <Card
         className={cn(
-          "flex flex-col gap-2 rounded-md p-5",
+          "flex flex-col gap-2 rounded-md p-5 md:w-[350px]",
           disabled
-            ? "pointer-events-none cursor-not-allowed"
+            ? "pointer-events-none cursor-not-allowed bg-backgroundHighlight"
             : "cursor-pointer",
+          isActive && "border-primary-500",
           className,
         )}
-        width={{ base: "inherit", md: "350px" }}
-        borderColor={isActive ? "primary.500" : undefined}
-        bgColor={disabled ? "backgroundHighlight" : undefined}
-        {...stackProps}
         onClick={onClick}
       >
         <Flex flexDirection="row" justifyContent="space-between">
@@ -89,7 +85,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 p={0}
                 shouldWrapChildren
                 label={
-                  <Card bgColor="backgroundHighlight">
+                  <Card className="bg-backgroundHighlight">
                     <Text>{infoText}</Text>
                   </Card>
                 }
diff --git a/apps/dashboard/src/tw-components/card.tsx b/apps/dashboard/src/tw-components/card.tsx
index d156e8711b1..c58d0c1e5f1 100644
--- a/apps/dashboard/src/tw-components/card.tsx
+++ b/apps/dashboard/src/tw-components/card.tsx
@@ -1,85 +1,43 @@
-import { Box, type BoxProps } from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
+import type * as React from "react";
 
-type DefaultedBoxProps = Pick<
-  BoxProps,
-  "shadow" | "py" | "px" | "borderRadius" | "borderWidth" | "borderColor"
->;
-
-const defaultBoxProps: Required<DefaultedBoxProps> = {
-  shadow: "sm",
-  px: 4,
-  py: 4,
-  borderRadius: "xl",
-  borderWidth: "1px",
-  borderColor: "borderColor",
-};
-
-const borderRadiusMap = {
-  "3xl": "2xl",
-  "2xl": "xl",
-  xl: "lg",
-  lg: "md",
-  md: "sm",
-  sm: "none",
-  none: "none",
-};
-
-interface CardProps extends BoxProps {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   outlineBorder?: {
     gradient: string;
     width: string;
   };
 }
 
-function getBorderRadius(
-  borderRadius: BoxProps["borderRadius"],
-): BoxProps["borderRadius"] {
-  try {
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    return (borderRadiusMap as any)[borderRadius as any];
-  } catch {
-    return borderRadius;
-  }
-}
-
 export const Card: React.FC<CardProps> = ({
+  className,
   children,
   outlineBorder,
-  ...requiredBoxProps
+  ...props
 }) => {
-  const combinedProps = { ...{ ...defaultBoxProps, ...requiredBoxProps } };
+  const baseClasses = cn(
+    "rounded-xl border border-border bg-card shadow-sm px-4 py-4",
+    className,
+  );
 
+  if (outlineBorder) {
+    return (
+      <div
+        className="relative overflow-hidden"
+        style={{ padding: outlineBorder.width }}
+      >
+        <div
+          className="-z-10 absolute inset-0"
+          style={{ background: outlineBorder.gradient }}
+        />
+        <div className={baseClasses} {...props}>
+          {children}
+        </div>
+      </div>
+    );
+  }
   return (
-    <>
-      {outlineBorder ? (
-        <Box
-          p={outlineBorder.width}
-          borderRadius={combinedProps.borderRadius}
-          position="relative"
-          overflow="hidden"
-          w={combinedProps.w || combinedProps.width}
-        >
-          <Box
-            zIndex={-1}
-            position="absolute"
-            top={0}
-            left={0}
-            w="full"
-            h="full"
-            bgGradient={outlineBorder.gradient}
-          />
-
-          <Box
-            {...combinedProps}
-            w="full"
-            borderRadius={getBorderRadius(combinedProps.borderRadius)}
-          >
-            {children}
-          </Box>
-        </Box>
-      ) : (
-        <Box {...combinedProps}>{children}</Box>
-      )}
-    </>
+    <div className={baseClasses} {...props}>
+      {children}
+    </div>
   );
 };