diff --git a/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx b/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx
index 17b4e859223..73486b1f013 100644
--- a/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx
+++ b/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx
@@ -36,7 +36,7 @@ export const EngineContractSubscriptions: React.FC<
             .
           </Text>
         </Flex>
-        <Flex>
+        <div className="flex flex-row">
           <FormControl display="flex" alignItems="center">
             <FormLabel htmlFor="auto-update" mb="0">
               Auto-Update
@@ -47,7 +47,7 @@ export const EngineContractSubscriptions: React.FC<
               id="auto-update"
             />
           </FormControl>
-        </Flex>
+        </div>
       </Flex>
       <ContractSubscriptionTable
         instanceUrl={instanceUrl}
diff --git a/apps/dashboard/src/components/engine/overview/engine-overview.tsx b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
index 98380ac6565..d6899203b06 100644
--- a/apps/dashboard/src/components/engine/overview/engine-overview.tsx
+++ b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
@@ -80,9 +80,9 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
           <Flex flexDirection="row-reverse">
             <Flex alignItems="center" gap={2}>
               <Text>Show balance for</Text>
-              <Flex>
+              <div className="flex flex-row">
                 <NetworkSelectorButton />
-              </Flex>
+              </div>
             </Flex>
           </Flex>
         </Flex>
@@ -104,7 +104,7 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
             </Text>
           </Flex>
 
-          <Flex>
+          <div className="flex flex-row">
             <FormControl display="flex" alignItems="center">
               <FormLabel htmlFor="auto-update" mb="0">
                 Auto-Update
@@ -115,7 +115,7 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
                 id="auto-update"
               />
             </FormControl>
-          </Flex>
+          </div>
         </Flex>
         <TransactionsTable
           transactions={transactionsQuery.data?.transactions ?? []}
diff --git a/apps/dashboard/src/components/engine/overview/transactions-table.tsx b/apps/dashboard/src/components/engine/overview/transactions-table.tsx
index 6a60e4ce327..c18d187c6e7 100644
--- a/apps/dashboard/src/components/engine/overview/transactions-table.tsx
+++ b/apps/dashboard/src/components/engine/overview/transactions-table.tsx
@@ -480,7 +480,7 @@ const TransactionDetailsDrawer = ({
         {/* On-chain details */}
 
         <FormControl>
-          <Flex>
+          <div className="flex flex-row">
             <FormLabel>Value</FormLabel>
             <Tooltip
               label={`The amount of ${symbol} sent to the "To" .`}
@@ -488,7 +488,7 @@ const TransactionDetailsDrawer = ({
             >
               <FiInfo />
             </Tooltip>
-          </Flex>
+          </div>
           <Text>
             {transaction.value
               ? toTokens(BigInt(transaction.value), decimals)
@@ -527,7 +527,7 @@ const TransactionDetailsDrawer = ({
               <Stack spacing={4}>
                 {transaction.nonce && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Nonce</FormLabel>
                       <Tooltip
                         label="The nonce value this transaction was submitted to mempool."
@@ -535,14 +535,14 @@ const TransactionDetailsDrawer = ({
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{transaction.nonce ?? "N/A"}</Text>
                   </FormControl>
                 )}
 
                 {transaction.gasLimit && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Gas Units</FormLabel>
                       <Tooltip
                         label="The gas units spent for this transaction."
@@ -550,14 +550,14 @@ const TransactionDetailsDrawer = ({
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{Number(transaction.gasLimit).toLocaleString()}</Text>
                   </FormControl>
                 )}
 
                 {transaction.gasPrice && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Gas Price</FormLabel>
                       <Tooltip
                         label="The price in wei spent for each gas unit."
@@ -565,7 +565,7 @@ const TransactionDetailsDrawer = ({
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{Number(transaction.gasPrice).toLocaleString()}</Text>
                   </FormControl>
                 )}
diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
index e705d9d72a2..24ec63eb03f 100644
--- a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
+++ b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -377,7 +377,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
           </Button>
         </Flex>
       )}
-      <Flex direction="column">
+      <div className="flex flex-col">
         <Divider flexShrink={0} />
         <Flex
           direction={{ base: "column-reverse", md: "row" }}
@@ -532,7 +532,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
             )}
           </ButtonGroup>
         </Flex>
-      </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
index c26d1cea8c6..86459809347 100644
--- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
+++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
@@ -233,7 +233,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
           <FormHelperText>Minimum 150 characters recommended.</FormHelperText>
         </FormControl>
       </Flex>
-      <Flex>
+      <div className="flex flex-row">
         <Button
           w="full"
           type="submit"
@@ -242,7 +242,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
         >
           {form.formState.isSubmitting ? "Applying..." : "Apply now"}
         </Button>
-      </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
index 00171345fb0..6c054abb73d 100644
--- a/apps/dashboard/src/components/onboarding/PaymentForm.tsx
+++ b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
@@ -127,7 +127,7 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
                 variant="left-accent"
                 bg="inputBg"
               >
-                <Flex>
+                <div className="flex flex-row">
                   <AlertIcon boxSize={4} mt={1} ml={1} />
                   <Flex flexDir="column" gap={1} pl={1}>
                     <AlertDescription as={Text} fontSize="body.md">
@@ -135,7 +135,7 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
                       on your payment method.
                     </AlertDescription>
                   </Flex>
-                </Flex>
+                </div>
               </Alert>
             )}
 
diff --git a/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx b/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
index d4a5a55a43c..d4671d911a4 100644
--- a/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
@@ -27,7 +27,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
 }) => {
   return (
     <Flex direction="column" justify="space-between" align="flex-start" gap={4}>
-      <Flex direction="column">
+      <div className="flex flex-col">
         <Flex alignItems="center" gap={2}>
           <ChakraNextImage src={icon} placeholder="empty" alt="" w={8} />
           <Heading size="title.sm" as="h3">
@@ -37,7 +37,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
         <Text size="body.lg" mt="16px">
           {description}
         </Text>
-      </Flex>
+      </div>
       <TrackedLink
         width="auto"
         href={href}
diff --git a/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx
index d31686050c2..16ef61b8f48 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Fade,
-  Flex,
-  SimpleGrid,
-  Stack,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { Box, Fade, SimpleGrid, Stack, useDisclosure } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { Card, Text } from "tw-components";
 import { NavCard } from "./NavCard";
@@ -83,7 +76,7 @@ export const HoverMenu: React.FC<HoverMenuProps> = ({
             borderRadius="8px"
             width={width}
           >
-            <Flex>
+            <div className="flex flex-row">
               <Stack>
                 <SimpleGrid columns={columns} gap={2}>
                   {items.map((item) => (
@@ -91,7 +84,7 @@ export const HoverMenu: React.FC<HoverMenuProps> = ({
                   ))}
                 </SimpleGrid>
               </Stack>
-            </Flex>
+            </div>
           </Card>
         </Fade>
       </Box>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
index d1441b6d876..a0418fcfb21 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, Stack } from "@chakra-ui/react";
+import { Box, Icon, Stack } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -34,7 +34,7 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
               mr={2}
             />
           )}
-          <Flex direction="column">
+          <div className="flex flex-col">
             <Text
               fontWeight="bold"
               color={comingSoon ? "whiteAlpha.400" : "white"}
@@ -42,7 +42,7 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
               {name} {comingSoon && "(coming soon)"}
             </Text>
             <Text color="whiteAlpha.500">{description}</Text>
-          </Flex>
+          </div>
         </Stack>
       </Box>
     </TrackedLink>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx
index bd9d1e93491..07cb6aa86f8 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx
@@ -119,7 +119,7 @@ export const NestedHoverMenu: React.FC<NestedHoverMenuProps> = ({
             borderRadius="8px"
             width={WIDTH}
           >
-            <Flex>
+            <div className="flex flex-row">
               <Flex
                 flexDir="column"
                 borderRight="1px"
@@ -152,7 +152,7 @@ export const NestedHoverMenu: React.FC<NestedHoverMenuProps> = ({
                   </SimpleGrid>
                 </Stack>
               </Flex>
-            </Flex>
+            </div>
           </Card>
         </Fade>
       </Box>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
index 8e5a78cc036..62a0838a7f6 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Stack } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 import { Text } from "tw-components";
@@ -27,7 +27,7 @@ export const ProductNavCard: React.FC<ProductSectionItemProps> = ({
       cursor="default"
     >
       <Stack direction="row" align="center" spacing={3}>
-        <Flex direction="column">
+        <div className="flex flex-col">
           <Text
             fontWeight="bold"
             color={comingSoon ? "whiteAlpha.400" : "white"}
@@ -35,7 +35,7 @@ export const ProductNavCard: React.FC<ProductSectionItemProps> = ({
             {name} {comingSoon && "(coming soon)"}
           </Text>
           <Text color="whiteAlpha.500">{description}</Text>
-        </Flex>
+        </div>
       </Stack>
     </Box>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
index 5debebdeb15..970b0ca0996 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
@@ -346,7 +346,7 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
         />
       </OnboardingModal>
 
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -357,7 +357,7 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
           <AlertDescription mb={2} as={Flex} direction="column">
             <Text mb={showCTAs ? "4" : "0"}>{description}</Text>
             {showCTAs && (
-              <Flex>
+              <div className="flex flex-row">
                 {isBilling && account ? (
                   <ManageBillingButton
                     account={account}
@@ -390,11 +390,11 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
                 >
                   Contact Support
                 </TrackedLinkButton>
-              </Flex>
+              </div>
             )}
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {onDismiss && (
         <IconButton
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
index 6161b6ced32..8b548d2af1f 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
@@ -29,7 +29,7 @@ export const PaymentVerificationFailureAlert: React.FC<
       variant="left-accent"
       bg="inputBg"
     >
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -57,7 +57,7 @@ export const PaymentVerificationFailureAlert: React.FC<
             </Flex>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
     </Alert>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
index e109ecd2bdc..b88830e20b2 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
@@ -77,7 +77,7 @@ export const RecurringPaymentFailureAlert: React.FC<
         />
       </OnboardingModal>
 
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -95,7 +95,7 @@ export const RecurringPaymentFailureAlert: React.FC<
                   : "We will retry several times over the next 10 days after your invoice date, after which you will lose access to your services."}
               </Text>
               {affectedServices.length > 0 && (
-                <Flex direction="column">
+                <div className="flex flex-col">
                   <Text>Affected services:</Text>
                   <UnorderedList mb={4}>
                     {affectedServices.map((service) => (
@@ -104,9 +104,9 @@ export const RecurringPaymentFailureAlert: React.FC<
                       </li>
                     ))}
                   </UnorderedList>
-                </Flex>
+                </div>
               )}
-              <Flex>
+              <div className="flex flex-row">
                 {account && (
                   <ManageBillingButton
                     account={account}
@@ -135,11 +135,11 @@ export const RecurringPaymentFailureAlert: React.FC<
                 >
                   Contact Support
                 </TrackedLinkButton>
-              </Flex>
+              </div>
             </Flex>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {onDismiss && (
         <IconButton
diff --git a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
index 819d31fc67f..bbd8d2a48e1 100644
--- a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
+++ b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
@@ -36,7 +36,7 @@ export const SmartWalletsBillingAlert = ({
       variant="left-accent"
       bg="backgroundCardHighlight"
     >
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" gap={1} pl={1}>
           <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
@@ -60,7 +60,7 @@ export const SmartWalletsBillingAlert = ({
             </TrackedLink>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {dismissable && (
         <IconButton
diff --git a/apps/dashboard/src/components/shared/CurrencySelector.tsx b/apps/dashboard/src/components/shared/CurrencySelector.tsx
index f57e610e3c5..fc5c6a3cdb7 100644
--- a/apps/dashboard/src/components/shared/CurrencySelector.tsx
+++ b/apps/dashboard/src/components/shared/CurrencySelector.tsx
@@ -92,7 +92,7 @@ export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
 
   if (isAddingCurrency && !hideDefaultCurrencies) {
     return (
-      <Flex direction="column">
+      <div className="flex flex-col">
         <Flex align="center">
           <Button
             borderRadius="4px 0px 0px 4px"
@@ -118,7 +118,7 @@ export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
             Save
           </Button>
         </Flex>
-      </Flex>
+      </div>
     );
   }
 
diff --git a/apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx b/apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx
index 01708024788..46e48f032ba 100644
--- a/apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx
+++ b/apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex } from "@chakra-ui/react";
+import { ButtonGroup } from "@chakra-ui/react";
 import { Button } from "tw-components";
 import type { SolidityInputProps } from ".";
 
@@ -10,7 +10,7 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
   const inputName = name as string;
   const watchInput = form.watch(inputName);
   return (
-    <Flex>
+    <div className="flex flex-row">
       <ButtonGroup isAttached size="sm" colorScheme="blue">
         <Button
           onClick={() => form.setValue(inputName, "true")}
@@ -27,6 +27,6 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
           False
         </Button>
       </ButtonGroup>
-    </Flex>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signer.tsx b/apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signer.tsx
index 6ab7d4fca04..3da3e44d011 100644
--- a/apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signer.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signer.tsx
@@ -63,18 +63,18 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({ item }) => {
 
         {isAdmin ? null : (
           <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>
-            <Flex direction="column">
+            <div className="flex flex-col">
               <Text fontWeight="bold">Maximum value per transaction</Text>
               <Text textTransform="capitalize">
                 {nativeTokenLimitPerTransaction.toString()}
                 {chain?.nativeCurrency.symbol}
               </Text>
-            </Flex>
-            <Flex direction="column">
+            </div>
+            <div className="flex flex-col">
               <Text fontWeight="bold">Approved targets</Text>
               <Text textTransform="capitalize">{approvedTargets.length}</Text>
-            </Flex>
-            <Flex direction="column">
+            </div>
+            <div className="flex flex-col">
               <Text fontWeight="bold">Expiration</Text>
               <Text>
                 {formatDistance(
@@ -85,7 +85,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({ item }) => {
                   },
                 )}
               </Text>
-            </Flex>
+            </div>
           </SimpleGrid>
         )}
       </Flex>
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx
index 8c3e2316993..104b14caa8e 100644
--- a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx
@@ -536,7 +536,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
           {phases?.length === 0 && (
             <Alert status="warning" borderRadius="md">
               <AlertIcon />
-              <Flex direction="column">
+              <div className="flex flex-col">
                 <AlertTitle as={Heading} size="label.lg">
                   {isMultiPhase
                     ? "Missing Claim Phases"
@@ -547,7 +547,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     ? "You need to set at least one claim phase for people to claim this drop."
                     : "You need to set claim conditions for people to claim this drop."}
                 </AlertDescription>
-              </Flex>
+              </div>
             </Alert>
           )}
 
@@ -618,7 +618,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
               )}
             </div>
 
-            <Flex>
+            <div className="flex flex-row">
               <AdminOnly contract={contract} fallback={<Box pb={5} />}>
                 <Flex justifyContent="center" alignItems="center" gap={3}>
                   {(hasRemovedPhases || hasAddedPhases) && (
@@ -643,7 +643,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   ) : null}
                 </Flex>
               </AdminOnly>
-            </Flex>
+            </div>
           </Flex>
         </Flex>
       </Flex>
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx
index 14b9b9c1bf7..940d678b1b3 100644
--- a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx
@@ -94,21 +94,21 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
 
         {!field.isEditing ? (
           <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>
-            <Flex direction="column">
+            <div className="flex flex-col">
               <Text fontWeight="bold">Phase start</Text>
               <Text>{field.startTime?.toLocaleString()}</Text>
-            </Flex>
-            <Flex direction="column">
+            </div>
+            <div className="flex flex-col">
               <Text fontWeight="bold">
                 {isErc20 ? "Tokens" : "NFTs"} to drop
               </Text>
               <Text textTransform="capitalize">{field.maxClaimableSupply}</Text>
-            </Flex>
+            </div>
             <PricePreview
               price={field.price}
               currencyAddress={field.currencyAddress}
             />
-            <Flex direction="column">
+            <div className="flex flex-col">
               <Text fontWeight="bold">Limit per wallet</Text>
               {claimConditionType === "specific" ? (
                 <Text>Set in the snapshot</Text>
@@ -119,7 +119,7 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
                   {field.maxClaimablePerWallet}
                 </Text>
               )}
-            </Flex>
+            </div>
           </SimpleGrid>
         ) : (
           <>
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx
index a0f86cf7e19..1820162a0a0 100644
--- a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx
@@ -26,13 +26,13 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
         >
           {/* Info */}
           <Flex as="section" direction="column" gap={4}>
-            <Flex direction="column">
+            <div className="flex flex-col">
               <Heading size="title.md">Set Claim Conditions</Heading>
               <Text size="body.md" fontStyle="italic" mt={2}>
                 Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how
                 much they cost, and more.
               </Text>
-            </Flex>
+            </div>
           </Flex>
 
           {/* Set Claim Conditions */}
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
index 636ff48dd31..3a6f7acc5da 100644
--- a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
@@ -428,7 +428,7 @@ const SnapshotTableColumns = [
         return address;
       }
       return (
-        <Flex>
+        <div className="flex flex-row">
           <Tooltip
             label={
               address.startsWith("0x")
@@ -443,7 +443,7 @@ const SnapshotTableColumns = [
               </Text>
             </Stack>
           </Tooltip>
-        </Flex>
+        </div>
       );
     },
   },
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
index 8036c9d22a6..62886887ceb 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
@@ -334,7 +334,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
             return address;
           }
           return (
-            <Flex>
+            <div className="flex flex-row">
               <Tooltip
                 label={
                   address.startsWith("0x")
@@ -349,7 +349,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
                   </Text>
                 </Stack>
               </Tooltip>
-            </Flex>
+            </div>
           );
         },
       },
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
index f36ac3681c0..1f7b68a6099 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
@@ -9,7 +9,6 @@ import {
   DrawerBody,
   DrawerFooter,
   DrawerHeader,
-  Flex,
   FormControl,
   Input,
   Stack,
@@ -266,13 +265,13 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
           <FormControl isInvalid={!!mediaFileError}>
             <FormLabel>Media</FormLabel>
             {nft?.metadata && !mediaFileUrl && (
-              <Flex>
+              <div className="flex flex-row">
                 <NFTMediaWithEmptyState
                   metadata={nft.metadata}
                   width="200px"
                   height="200px"
                 />
-              </Flex>
+              </div>
             )}
             <Box>
               <FileInput
diff --git a/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx b/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
index 1b5b4426728..a321ddf79ef 100644
--- a/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
@@ -36,7 +36,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
     <Card position="relative">
       <Flex direction="column" gap={3}>
         <Stack spacing={2} mb="12px">
-          <Flex>
+          <div className="flex flex-row">
             <Stack spacing={1} flexGrow={1}>
               <Heading size="subtitle.sm" textTransform="capitalize">
                 {role === "minter" ? "Minter / Creator" : role}
@@ -148,7 +148,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
                 )}
               </Flex>
             )}
-          </Flex>
+          </div>
 
           {role === "transfer" && (
             <Flex
diff --git a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
index 0ad9a09a55c..754e20ff473 100644
--- a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
@@ -200,13 +200,13 @@ export const SettingsMetadata = ({
         direction="column"
       >
         <Flex p={{ base: 6, md: 10 }} as="section" direction="column" gap={4}>
-          <Flex direction="column">
+          <div className="flex flex-col">
             <Heading size="title.md">Metadata</Heading>
             <Text size="body.md" fontStyle="italic">
               Settings to organize and distinguish between your different
               contracts.
             </Text>
-          </Flex>
+          </div>
           <Flex gap={4} direction={{ base: "column", md: "row" }}>
             <Flex
               flexShrink={0}
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
index 357df603d1e..49fb75ba56d 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -365,7 +365,7 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
           disabledText="This contract doesn't implement Delayed Reveal"
         />
       </Flex>
-      <Flex>
+      <div className="flex flex-row">
         <Stack spacing={6}>
           <Stack spacing={3}>
             {form.watch("revealType") === "delayed" && (
@@ -505,7 +505,7 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
             )}
           </Stack>
         </Stack>
-      </Flex>
+      </div>
     </Flex>
   );
 };
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 729e0bd3b4b..2f955ceb3e2 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
@@ -84,7 +84,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
             </Stack>
           </Stack>
           {infoText && (
-            <Flex>
+            <div className="flex flex-row">
               <Tooltip
                 bg="transparent"
                 boxShadow="none"
@@ -100,7 +100,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                   <Icon as={AiOutlineInfoCircle} boxSize={5} />
                 </Flex>
               </Tooltip>
-            </Flex>
+            </div>
           )}
         </Flex>
       </Stack>
diff --git a/apps/dashboard/src/pages/dashboard/settings/storage.tsx b/apps/dashboard/src/pages/dashboard/settings/storage.tsx
index 94cb52f3f78..f25026ead57 100644
--- a/apps/dashboard/src/pages/dashboard/settings/storage.tsx
+++ b/apps/dashboard/src/pages/dashboard/settings/storage.tsx
@@ -88,7 +88,7 @@ const DashboardSettingsStorage: ThirdwebNextPage = () => {
               >
                 https://&lt;your-client-id&gt;.ipfscdn.io/ipfs/
               </Text>
-              <Flex>
+              <div className="flex flex-row">
                 <Tooltip
                   p={0}
                   label={
@@ -108,7 +108,7 @@ const DashboardSettingsStorage: ThirdwebNextPage = () => {
                     aria-label="Copy code"
                   />
                 </Tooltip>
-              </Flex>
+              </div>
             </Card>
             <Text>
               Gateway requests need to be authenticated using a client ID. You
@@ -141,7 +141,7 @@ const DashboardSettingsStorage: ThirdwebNextPage = () => {
                 >
                   npx thirdweb upload ./path/to/file-or-folder
                 </Text>
-                <Flex>
+                <div className="flex flex-row">
                   <Tooltip
                     p={0}
                     label={
@@ -161,7 +161,7 @@ const DashboardSettingsStorage: ThirdwebNextPage = () => {
                       aria-label="Copy code"
                     />
                   </Tooltip>
-                </Flex>
+                </div>
               </Card>
               <Text>
                 If this is the first time that you are running this command, you