From 3eba1e650ba41d57b1f8a63a60bcaf601591fef9 Mon Sep 17 00:00:00 2001
From: Kien Ngo <github@kien.ngo>
Date: Tue, 24 Sep 2024 18:31:26 +0700
Subject: [PATCH] Update

---
 .../FTUX/components/GraphicContainer.tsx      |  2 +-
 .../components/FTUX/components/Graphics.tsx   |  2 +-
 .../src/components/buttons/MismatchButton.tsx |  9 +++----
 .../components/buttons/TransactionButton.tsx  | 16 ++++++------
 .../src/components/chain-validation/index.tsx |  5 ++--
 .../src/components/connect/Carousel.tsx       | 15 ++++-------
 .../publisher/edit-profile.tsx                | 25 +++++++++----------
 .../contract-functions/contract-functions.tsx |  4 +--
 .../contract-header/metadata-header.tsx       |  6 ++---
 .../engine/overview/engine-overview.tsx       |  4 +--
 .../engine/permissions/add-keypair-button.tsx |  4 +--
 .../src/components/hackathon/common/Timer.tsx |  4 +--
 .../hackathon/gaming/GameShowcase.tsx         |  2 +-
 .../homepage/sections/GetStartedSection.tsx   |  4 +--
 .../homepage/sections/PricingCard.tsx         |  6 ++---
 .../src/components/ipfs-upload/dropzone.tsx   |  6 ++---
 apps/dashboard/src/components/logo/index.tsx  |  2 +-
 .../product-pages/common/GameCard.tsx         |  2 +-
 .../product-pages/common/GuideCard.tsx        |  2 +-
 .../components/product-pages/common/Hero.tsx  |  4 +--
 .../settings/Account/Billing/CreditsItem.tsx  |  4 +--
 .../src/components/shared/TWQueryTable.tsx    |  2 +-
 .../MiniPlayground.tsx                        |  8 +++---
 .../components/account-signer.tsx             |  4 +--
 .../accounts/components/accounts-table.tsx    |  2 +-
 .../claim-conditions-form/index.tsx           |  4 +--
 .../components/snapshot-upload.tsx            | 16 ++++++------
 .../tabs/listings/components/list-form.tsx    |  2 +-
 .../tabs/nfts/components/airdrop-upload.tsx   | 16 ++++++------
 .../tabs/nfts/components/table.tsx            |  2 +-
 .../components/MarketplaceDetails.tsx         |  2 +-
 .../tabs/overview/components/NFTCards.tsx     |  2 +-
 .../tabs/settings/components/metadata.tsx     |  4 +--
 .../shared-components/marketplace-table.tsx   |  2 +-
 .../src/core-ui/batch-upload/batch-table.tsx  |  2 +-
 .../src/core-ui/batch-upload/upload-step.tsx  |  4 +--
 apps/dashboard/src/pages/404.tsx              |  4 +--
 apps/dashboard/src/pages/community/index.tsx  |  4 +--
 apps/dashboard/src/pages/connect.tsx          |  2 +-
 apps/dashboard/src/pages/contracts.tsx        |  2 +-
 apps/dashboard/src/pages/engine.tsx           |  2 +-
 apps/dashboard/src/pages/index.tsx            |  2 +-
 apps/dashboard/src/pages/learn/index.tsx      |  4 +--
 apps/dashboard/src/pages/solutions/gaming.tsx |  4 +--
 44 files changed, 108 insertions(+), 116 deletions(-)

diff --git a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
index d6759d3f54a..8486998820a 100644
--- a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
+++ b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
@@ -21,7 +21,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
   const Graphic = slides[slideIndex].graphic;
 
   return (
-    <div className="w-full relative aspect-[16/9] md:aspect-square">
+    <div className="relative aspect-[16/9] w-full md:aspect-square">
       {/* @to be completed */}
       <Center
         as={motion.div}
diff --git a/apps/dashboard/src/components/FTUX/components/Graphics.tsx b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
index b2357d196a0..955d3461423 100644
--- a/apps/dashboard/src/components/FTUX/components/Graphics.tsx
+++ b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
@@ -61,7 +61,7 @@ export const DashboardImage: React.FC = () => (
 
 export const ConnectWalletImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <div className="flex items-center justify-center h-full w-full">
+    <div className="flex h-full w-full items-center justify-center">
       <ChakraNextImage
         alt=""
         boxSize="75px"
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index 89f6db97115..0b837db067e 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -16,7 +16,6 @@ import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import {
   Box,
-  Flex,
   Icon,
   Popover,
   PopoverArrow,
@@ -446,12 +445,12 @@ const MismatchNotice: React.FC<{
   }, [chain?.name, isMobile]);
 
   return (
-    <Flex direction="column" gap={4}>
+    <div className="flex flex-col gap-4">
       <Heading size="label.lg">
-        <Flex gap={2} align="center">
+        <div className="flex flex-row items-center gap-2">
           <Icon boxSize={6} as={AiOutlineWarning} />
           <span>Network Mismatch</span>
-        </Flex>
+        </div>
       </Heading>
 
       <Text>
@@ -487,7 +486,7 @@ const MismatchNotice: React.FC<{
           Please manually switch the network in your wallet.
         </Text>
       )}
-    </Flex>
+    </div>
   );
 };
 
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
index 6ee1837a2c0..3db84ab73aa 100644
--- a/apps/dashboard/src/components/buttons/TransactionButton.tsx
+++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -203,12 +203,12 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
   if (walletId === "global.safe") {
     const isChainIdSupported = chainId in CHAIN_ID_TO_GNOSIS;
     return (
-      <Flex direction="column" gap={4}>
+      <div className="flex flex-col gap-4">
         <Heading size="label.lg">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <Icon color="primary.500" boxSize={6} as={FiInfo} />
             <span>Execute Transaction</span>
-          </Flex>
+          </div>
         </Heading>
         <Text>
           You will need to execute this transaction in your Safe to continue.
@@ -233,17 +233,17 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
         >
           Go To Safe
         </LinkButton>
-      </Flex>
+      </div>
     );
   }
   if (walletId === "walletConnect") {
     return (
-      <Flex direction="column" gap={4}>
+      <div className="flex flex-col gap-4">
         <Heading size="label.lg">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <Icon color="primary.500" boxSize={6} as={FiInfo} />
             <span>Approve Transaction</span>
-          </Flex>
+          </div>
         </Heading>
         <Text>
           You will need to approve this transaction in your connected wallet.
@@ -255,7 +255,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
             action will continue automatically.
           </Text>
         )}
-      </Flex>
+      </div>
     );
   }
 
diff --git a/apps/dashboard/src/components/chain-validation/index.tsx b/apps/dashboard/src/components/chain-validation/index.tsx
index 6f0a2975363..2be587cb2d2 100644
--- a/apps/dashboard/src/components/chain-validation/index.tsx
+++ b/apps/dashboard/src/components/chain-validation/index.tsx
@@ -1,6 +1,5 @@
 import {
   Code,
-  Flex,
   FormControl,
   Icon,
   Input,
@@ -67,7 +66,7 @@ const ChainValidation: React.FC = () => {
 
   return (
     <Card maxW="xl">
-      <Flex direction="column" gap={6}>
+      <div className="flex flex-col gap-6">
         <FormControl gap={6}>
           <FormLabel>RPC URL</FormLabel>
           <InputGroup gap={2}>
@@ -177,7 +176,7 @@ const ChainValidation: React.FC = () => {
             </Table>
           </TableContainer>
         )}
-      </Flex>
+      </div>
     </Card>
   );
 };
diff --git a/apps/dashboard/src/components/connect/Carousel.tsx b/apps/dashboard/src/components/connect/Carousel.tsx
index b5db5726de5..76599ba62a6 100644
--- a/apps/dashboard/src/components/connect/Carousel.tsx
+++ b/apps/dashboard/src/components/connect/Carousel.tsx
@@ -1,5 +1,5 @@
 import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Box, Flex, SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useCallback, useEffect, useState } from "react";
@@ -68,12 +68,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
   }, [selectedShowCaseIdx, canAnimate]);
 
   return (
-    <Flex
-      flexDir={{ base: "column", md: "row" }}
-      gap={{ base: "24px", md: 0 }}
-      alignItems="stretch"
-      w="full"
-    >
+    <div className="flex w-full flex-col items-stretch gap-6 md:flex-row md:gap-0">
       <Box
         w="full"
         display={{ base: "flex", md: "none" }}
@@ -153,7 +148,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
           );
         })}
       </SimpleGrid>
-      <Flex width="full" maxW="786px">
+      <div className="flex w-full max-w-[786px] flex-row">
         {showcaseImages.map((img, idx) => (
           <ChakraNextImage
             // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
@@ -175,8 +170,8 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
             priority
           />
         ))}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
index 21dc18dba9e..3b4ad58989c 100644
--- a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
+++ b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
@@ -3,7 +3,6 @@
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   Box,
-  Flex,
   FormControl,
   Icon,
   Input,
@@ -177,10 +176,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
         >
           <FormControl isInvalid={!!errors.avatar}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={BiImage} boxSize={4} />
                 Avatar
-              </Flex>
+              </div>
             </FormLabel>
             <Box width={{ base: "auto", md: "250px" }}>
               <FileInput
@@ -200,10 +199,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.bio}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={HiPencilAlt} boxSize={4} />
                 Bio
-              </Flex>
+              </div>
             </FormLabel>
             <Textarea
               {...register("bio")}
@@ -214,10 +213,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.github}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiGithub} boxSize={4} />
                 GitHub
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("github")}
@@ -227,10 +226,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.twitter}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiTwitter} boxSize={4} />
                 Twitter
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("twitter")}
@@ -240,10 +239,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.website}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={FiGlobe} boxSize={4} />
                 Website
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("website")}
@@ -253,10 +252,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.discord}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiDiscord} boxSize={4} />
                 Discord
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("discord")}
diff --git a/apps/dashboard/src/components/contract-functions/contract-functions.tsx b/apps/dashboard/src/components/contract-functions/contract-functions.tsx
index b8c1f59075a..90ca6be3007 100644
--- a/apps/dashboard/src/components/contract-functions/contract-functions.tsx
+++ b/apps/dashboard/src/components/contract-functions/contract-functions.tsx
@@ -93,9 +93,9 @@ export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
           ) : null}
           {abi && (
             <TabPanel>
-              <Flex direction="column" gap={6}>
+              <div className="flex flex-col gap-6">
                 <CodeOverview abi={abi} noSidebar />
-              </Flex>
+              </div>
             </TabPanel>
           )}
           {(sources || abi) && (
diff --git a/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx b/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
index 2ca4afbd666..bcfb3c6b2b1 100644
--- a/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
+++ b/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
@@ -119,7 +119,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 cursor="pointer"
               >
                 {chain.icon?.url && (
-                  <div className="flex items-center justify-center w-5 h-5 mr-0 md:-mr-0.5 rounded-full">
+                  <div className="md:-mr-0.5 mr-0 flex h-5 w-5 items-center justify-center rounded-full">
                     <ChainIcon ipfsSrc={chain.icon.url} size={24} />
                   </div>
                 )}
@@ -154,7 +154,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             </Text>
           </Skeleton>
         )}
-        <Flex gap={2}>
+        <div className="flex flex-row gap-2">
           <AddressCopyButton size="xs" address={address} />
           {validBlockExplorers?.map((validBlockExplorer) => (
             <LinkButton
@@ -178,7 +178,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
               {e.name}
             </LinkButton>
           ))}
-        </Flex>
+        </div>
       </Flex>
     </Flex>
   );
diff --git a/apps/dashboard/src/components/engine/overview/engine-overview.tsx b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
index 4fc1efaecd9..98380ac6565 100644
--- a/apps/dashboard/src/components/engine/overview/engine-overview.tsx
+++ b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
@@ -71,10 +71,10 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
               </Text>
             </Flex>
 
-            <Flex gap={2}>
+            <div className="flex flex-row gap-2">
               <ImportBackendWalletButton instanceUrl={instanceUrl} />
               <CreateBackendWalletButton instanceUrl={instanceUrl} />
-            </Flex>
+            </div>
           </Flex>
 
           <Flex flexDirection="row-reverse">
diff --git a/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx b/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx
index c0ad7227ebf..c5f10798541 100644
--- a/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx
+++ b/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx
@@ -130,7 +130,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
           <ModalBody as={Flex} flexDir="column" gap={8}>
             <FormControl>
               <Stack>
-                <Flex gap={2}>
+                <div className="flex flex-row gap-2">
                   <Text>Create a private key using:</Text>
                   <Select
                     w="fit-content"
@@ -156,7 +156,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
                       </option>
                     ))}
                   </Select>
-                </Flex>
+                </div>
 
                 <CodeBlock
                   fontSize="small"
diff --git a/apps/dashboard/src/components/hackathon/common/Timer.tsx b/apps/dashboard/src/components/hackathon/common/Timer.tsx
index b10662948f1..bd5e8474c70 100644
--- a/apps/dashboard/src/components/hackathon/common/Timer.tsx
+++ b/apps/dashboard/src/components/hackathon/common/Timer.tsx
@@ -51,7 +51,7 @@ const Timer: React.FC<TimerProps> = ({ date }) => {
   ];
 
   return (
-    <Flex gap={2}>
+    <div className="flex flex-row gap-2">
       {items.map(({ label, value }) => (
         <Flex flexDir="column" key={label} align="center">
           <Text
@@ -76,7 +76,7 @@ const Timer: React.FC<TimerProps> = ({ date }) => {
           </Text>
         </Flex>
       ))}
-    </Flex>
+    </div>
   );
 };
 
diff --git a/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx b/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
index 1abe9c23b47..43b36bd8f09 100644
--- a/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
+++ b/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
@@ -86,7 +86,7 @@ export const GameShowcase = () => {
           >
             <ModalCloseButton />
           </Box>
-          <div className="w-full aspect-[16/9]">
+          <div className="aspect-[16/9] w-full">
             <Box
               bg="#000"
               borderRadius={{ base: "md", md: "lg" }}
diff --git a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
index 5222ef87f92..c86796ba0c4 100644
--- a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
+++ b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
@@ -18,8 +18,8 @@ export const GetStartedSection = () => {
         align="center"
         gap={{ base: 6, md: 8 }}
       >
-        <div className="flex items-center justify-center mb-6 pt-8 lg:pt-24">
-          <div className="flex items-center justify-center p-2 relative mb-6">
+        <div className="mb-6 flex items-center justify-center pt-8 lg:pt-24">
+          <div className="relative mb-6 flex items-center justify-center p-2">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
index eaba7663a49..024de9d662d 100644
--- a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
+++ b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
@@ -60,7 +60,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     >
       <Flex flexDir="column" gap={6}>
         <Flex flexDir="column" gap={3}>
-          <Flex gap={2}>
+          <div className="flex flex-row gap-2">
             <Heading
               as="h3"
               size={size === "lg" ? "title.lg" : "title.sm"}
@@ -79,7 +79,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
                 Current plan
               </Badge>
             )}
-          </Flex>
+          </div>
           <Text maxW={320} h={12}>
             {plan.description}
           </Text>
@@ -174,7 +174,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
   if (highlighted) {
     return (
-      <div className="flex items-center justify-center relative p-2 -m-2">
+      <div className="-m-2 relative flex items-center justify-center p-2">
         <Box
           position="absolute"
           bgGradient="linear(to-b, #4DABEE, #692AC1)"
diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
index e4c432d608d..e705d9d72a2 100644
--- a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
+++ b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -86,7 +86,7 @@ export const IpfsUploadDropzone: React.FC = () => {
             <FileUpload files={droppedFiles} updateFiles={setDroppedFiles} />
           </Box>
         ) : !address ? (
-          <div className="flex items-center justify-center border-border border-2 rounded-xl">
+          <div className="flex items-center justify-center rounded-xl border-2 border-border">
             <Text
               size="label.lg"
               className="text-muted-foreground"
@@ -98,7 +98,7 @@ export const IpfsUploadDropzone: React.FC = () => {
         ) : (
           <div
             className={cn(
-              "flex items-center justify-center bg-transparent border-border border-2 border-solid rounded-xl hover:border-blue-600 dark:border-blue-400",
+              "flex items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400",
               address ? "cursor-pointer" : "cursor-default",
             )}
             {...getRootProps()}
@@ -425,7 +425,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 isIndeterminate={storageUpload.isPending}
                 position="relative"
               />
-              <div className="left-0 bottom-0 right-0 top-0 absolute hidden md:block">
+              <div className="absolute top-0 right-0 bottom-0 left-0 hidden md:block">
                 {/* <Text
                   mt={0.5}
                   size="label.xs"
diff --git a/apps/dashboard/src/components/logo/index.tsx b/apps/dashboard/src/components/logo/index.tsx
index 02f2d5657e1..b1d7000842d 100644
--- a/apps/dashboard/src/components/logo/index.tsx
+++ b/apps/dashboard/src/components/logo/index.tsx
@@ -100,7 +100,7 @@ export const Logo: React.FC<ILogoProps> = ({
       {(hideWordmark && !forceShowWordMark) ?? (
         <div
           className={cn(
-            "aspect-[1377/267] w-24 md:w-28 flex-shrink-0",
+            "aspect-[1377/267] w-24 flex-shrink-0 md:w-28",
             forceShowWordMark ? "block" : "none md:block",
           )}
           style={color ? { color } : undefined}
diff --git a/apps/dashboard/src/components/product-pages/common/GameCard.tsx b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
index 70f2172f606..b0c0216c981 100644
--- a/apps/dashboard/src/components/product-pages/common/GameCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
@@ -70,7 +70,7 @@ export const GameCard: React.FC<GameCardProps> = ({
               (max-width: 1200px) 50vw,
               33vw"
         />
-        <div className="flex items-center justify-center absolute top-0 bottom-0 left-0 right-0">
+        <div className="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center">
           <Button
             leftIcon={<IoGameControllerOutline />}
             color="white"
diff --git a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
index c4bfe6e881a..08c930eb726 100644
--- a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
@@ -51,7 +51,7 @@ export const GuideCard: React.FC<GuideCardProps> = ({
         _hover={{ opacity: 0.86 }}
         overflow="hidden"
       >
-        <div className="w-full aspect-[2400/1260]">
+        <div className="aspect-[2400/1260] w-full">
           <Box bg="rgba(0,0,0,.8)">
             <NextImage
               loading="lazy"
diff --git a/apps/dashboard/src/components/product-pages/common/Hero.tsx b/apps/dashboard/src/components/product-pages/common/Hero.tsx
index 8a7e1b2759a..617bb8689f4 100644
--- a/apps/dashboard/src/components/product-pages/common/Hero.tsx
+++ b/apps/dashboard/src/components/product-pages/common/Hero.tsx
@@ -48,7 +48,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
   imageHeight,
 }) => {
   return (
-    <section className="flex items-center justify-center flex-col w-full p-0 md:p-[64px] bg-[#030A19]">
+    <section className="flex w-full flex-col items-center justify-center bg-[#030A19] p-0 md:p-[64px]">
       <SimpleGrid
         as={Container}
         maxW="container.page"
@@ -163,7 +163,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
           </SimpleGrid>
         </Flex>
         {image && (
-          <div className="hidden md:flex items-center justify-center p-6 md:p-12 md:col-span-3">
+          <div className="hidden items-center justify-center p-6 md:col-span-3 md:flex md:p-12">
             <ChakraNextImage
               maxH={{ base: imageHeight ? imageHeight : "480px" }}
               style={{ objectFit: "contain" }}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
index 995a4fbb281..b9d111feec3 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -45,7 +45,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   return (
     <Card p={6} as={Flex} flexDir="column" gap={3}>
       <Flex flexDir="column" gap={4}>
-        <Flex gap={2}>
+        <div className="flex flex-row gap-2">
           {isOpCredit ? (
             <ChainIcon
               ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
@@ -87,7 +87,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
               Apply Now
             </LinkButton>
           )}
-        </Flex>
+        </div>
         <Flex gap={6}>
           <Flex flexDir="column" gap={1}>
             <Text>Remaining Credits</Text>
diff --git a/apps/dashboard/src/components/shared/TWQueryTable.tsx b/apps/dashboard/src/components/shared/TWQueryTable.tsx
index 918417c220b..8fbcde6dc22 100644
--- a/apps/dashboard/src/components/shared/TWQueryTable.tsx
+++ b/apps/dashboard/src/components/shared/TWQueryTable.tsx
@@ -264,7 +264,7 @@ function Pagination<TInputData>(paginationProps: PaginationProps<TInputData>) {
                       <Box as="span" visibility="hidden">
                         {buttonStringTemplate}
                       </Box>
-                      <div className="flex items-center justify-center absolute top-0 right-0 left-0 bottom-0">
+                      <div className="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center">
                         {page.page + 1}
                       </div>
                     </Button>
diff --git a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
index 1a12740b3e7..64910b88896 100644
--- a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
+++ b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
@@ -206,7 +206,7 @@ export const MiniPlayground: React.FC<{
           <Flex flexDir="column" gap={10} order={[1, 0]}>
             {/* Theme */}
             <FormItem label="Theme">
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <ThemeButton
                   trackingCategory={trackingCategory}
                   theme="dark"
@@ -226,13 +226,13 @@ export const MiniPlayground: React.FC<{
                     setSelectedBrand("default");
                   }}
                 />
-              </Flex>
+              </div>
             </FormItem>
 
             {/* modal size */}
             {!isMobile && (
               <FormItem label="Modal Size">
-                <Flex gap={2}>
+                <div className="flex flex-row gap-2">
                   <ModalSizeButton
                     trackingCategory={trackingCategory}
                     theme={selectedTheme}
@@ -252,7 +252,7 @@ export const MiniPlayground: React.FC<{
                       setModalSize("compact");
                     }}
                   />
-                </Flex>
+                </div>
               </FormItem>
             )}
 
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 ffb0c8afff4..6ab7d4fca04 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
@@ -42,7 +42,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({ item }) => {
             <Heading size="label.lg">
               <WalletAddress shortenAddress={isMobile} address={signer} />
             </Heading>
-            <Flex gap={2}>
+            <div className="flex flex-row gap-2">
               {isAdmin ? (
                 <Badge borderRadius="lg" p={1.5}>
                   Admin Key
@@ -57,7 +57,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({ item }) => {
                   Currently connected
                 </Badge>
               )}
-            </Flex>
+            </div>
           </Flex>
         </Flex>
 
diff --git a/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx b/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx
index 86497edb200..63922a8db22 100644
--- a/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx
@@ -94,7 +94,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
         }}
       />
       {/* pagination */}
-      <div className="flex items-center justify-center w-full">
+      <div className="flex w-full items-center justify-center">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={totalAccountsQuery.isPending}
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 3f76f82d94c..8c3e2316993 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
@@ -556,7 +556,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
             flexDir={{ base: "column", md: isColumn ? "column" : "row" }}
             gap={2}
           >
-            <Flex gap={2}>
+            <div className="flex flex-row gap-2">
               <AdminOnly contract={contract}>
                 <Menu>
                   <MenuButton
@@ -616,7 +616,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   tokenId={tokenId}
                 />
               )}
-            </Flex>
+            </div>
 
             <Flex>
               <AdminOnly contract={contract} fallback={<Box pb={5} />}>
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 d1d89056264..636ff48dd31 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
@@ -209,12 +209,12 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
         <Flex shadow="sm">
           <Container maxW="container.page">
             <Flex align="center" justify="space-between" p={4}>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Logo hideWordmark />
                 <Heading size="title.md">
                   {validSnapshot.length ? "Edit" : "Upload"} Snapshot
                 </Heading>
-              </Flex>
+              </div>
             </Flex>
           </Container>
         </Flex>
@@ -225,10 +225,10 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
           <Flex flexGrow={1} align="center" overflow="auto">
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
-                <div className="w-full aspect-[21/9]">
+                <div className="aspect-[21/9] w-full">
                   <div
                     className={cn(
-                      "rounded-md cursor-pointer hover:border-primary border border-border h-full",
+                      "h-full cursor-pointer rounded-md border border-border hover:border-primary",
                       noCsv ? "bg-red-200" : "bg-card",
                     )}
                     {...getRootProps()}
@@ -240,7 +240,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                         boxSize={8}
                         mb={2}
                         color={noCsv ? "red.500" : "gray.600"}
-                        my={"auto"}
+                        my="auto"
                       />
                       {isDragActive ? (
                         <Heading as={Text} size="label.md">
@@ -260,7 +260,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                     </div>
                   </div>
                 </div>
-                <Flex gap={2} flexDir="column">
+                <div className="flex flex-row gap-2">
                   <Heading size="label.md">Requirements</Heading>
                   <UnorderedList spacing={1}>
                     {dropType === "specific" ? (
@@ -351,7 +351,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                       wallet can claim, not how many they can receive in total.
                     </Text>
                   </UnorderedList>
-                </Flex>
+                </div>
               </Flex>
             </Container>
           </Flex>
@@ -557,7 +557,7 @@ const SnapshotTable: React.FC<SnapshotTableProps> = ({ data, portalRef }) => {
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <div className="flex items-center justify-center w-full">
+        <div className="flex w-full items-center justify-center">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
diff --git a/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx b/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx
index f80adcd4170..9cfe0adba9f 100644
--- a/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx
@@ -415,7 +415,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         (isOwnedNFTsLoading &&
           !isSupportedChain &&
           form.watch("selected.contractAddress")) ? (
-          <div className="flex items-center justify-center h-[60px]">
+          <div className="flex h-[60px] items-center justify-center">
             <Spinner />
           </div>
         ) : nfts && nfts.length !== 0 ? (
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 7b647f0baae..8036c9d22a6 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
@@ -188,12 +188,12 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
         <Flex shadow="sm">
           <Container maxW="container.page">
             <Flex align="center" justify="space-between" p={4}>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Logo hideWordmark />
                 <Heading size="title.md">
                   {validAirdrop.length ? "Edit" : "Upload"} Airdrop
                 </Heading>
-              </Flex>
+              </div>
             </Flex>
           </Container>
         </Flex>
@@ -204,10 +204,10 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
           <Flex flexGrow={1} align="center" overflow="auto">
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
-                <div className="w-full aspect-[21/9]">
+                <div className="aspect-[21/9] w-full">
                   <div
                     className={cn(
-                      "rounded-md cursor-pointer border border-border h-full hover:border-primary",
+                      "h-full cursor-pointer rounded-md border border-border hover:border-primary",
                       noCsv ? "bg-red-200" : "bg-card",
                     )}
                     {...getRootProps()}
@@ -219,7 +219,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                         boxSize={8}
                         mb={2}
                         color={noCsv ? "red.500" : "gray.600"}
-                        my={"auto"}
+                        my="auto"
                       />
                       {isDragActive ? (
                         <Heading as={Text} size="label.md">
@@ -239,7 +239,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                     </div>
                   </div>
                 </div>
-                <Flex gap={2} flexDir="column">
+                <div className="flex flex-row gap-2">
                   <Heading size="subtitle.sm">Requirements</Heading>
                   <UnorderedList>
                     <ListItem>
@@ -255,7 +255,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                       found will be kept.
                     </ListItem>
                   </UnorderedList>
-                </Flex>
+                </div>
               </Flex>
             </Container>
           </Flex>
@@ -442,7 +442,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <div className="flex items-center justify-center w-full">
+        <div className="flex w-full items-center justify-center">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
index f9321899917..b9a88f04689 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
@@ -320,7 +320,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           </Tbody>
         </Table>
       </TableContainer>
-      <div className="flex items-center justify-center w-full">
+      <div className="flex w-full items-center justify-center">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
index 0f92c0b6453..632c080e0ae 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
@@ -272,7 +272,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
           _hover={{ opacity: 0.75, textDecoration: "none" }}
         >
           <Card p={0} position="relative">
-            <div className="w-full aspect-square overflow-hidden rounded-xl">
+            <div className="aspect-square w-full overflow-hidden rounded-xl">
               <Skeleton isLoaded={!isPending}>
                 <NFTMediaWithEmptyState
                   metadata={listing.asset.metadata}
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
index 47d94b52515..5b41042c253 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
@@ -73,7 +73,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
             _hover={{ opacity: 0.75, textDecoration: "none" }}
           >
             <Card p={0} h="full">
-              <div className="w-full aspect-square overflow-hidden rounded-xl">
+              <div className="aspect-square w-full overflow-hidden rounded-xl">
                 <Skeleton isLoaded={!isPending}>
                   <NFTMediaWithEmptyState
                     metadata={token.metadata}
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 8ce37d0d33a..0ad9a09a55c 100644
--- a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
@@ -288,7 +288,7 @@ export const SettingsMetadata = ({
                       ) ||
                       "New URL"}
                   </FormLabel>
-                  <Flex gap={2}>
+                  <div className="flex flex-row gap-2">
                     <Input
                       isDisabled={
                         metadata.isPending || sendTransaction.isPending
@@ -305,7 +305,7 @@ export const SettingsMetadata = ({
                       aria-label="Remove row"
                       onClick={() => remove(index)}
                     />
-                  </Flex>
+                  </div>
                 </FormControl>
               </Flex>
             ))}
diff --git a/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx b/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
index f0ed3f1221b..07b4cddda37 100644
--- a/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
@@ -276,7 +276,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           </Tbody>
         </Table>
       </TableContainer>
-      <div className="flex items-center justify-center w-full">
+      <div className="flex w-full items-center justify-center">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
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 444b60156c5..5259f4092ff 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -208,7 +208,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <div className="w-full flex items-center justify-center">
+        <div className="flex w-full items-center justify-center">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
index 1072180fa55..0aab730e476 100644
--- a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -33,7 +33,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
           <div className="aspect-square w-full md:w-1/2">
             <div
               className={cn(
-                "rounded-md cursor-pointer border border-border h-full hover:border-blue-500",
+                "h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
                 hasFailed ? "bg-red-200" : "bg-card",
               )}
               {...getRootProps()}
@@ -45,7 +45,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
                   boxSize={8}
                   mb={2}
                   color={hasFailed ? "red.500" : "gray.600"}
-                  my={"auto"}
+                  my="auto"
                 />
                 {isDragActive ? (
                   <Heading as={Text} size="label.md" color="gray.600">
diff --git a/apps/dashboard/src/pages/404.tsx b/apps/dashboard/src/pages/404.tsx
index f107c9f0c07..2b771f7351c 100644
--- a/apps/dashboard/src/pages/404.tsx
+++ b/apps/dashboard/src/pages/404.tsx
@@ -34,8 +34,8 @@ const PageNotFound: ThirdwebNextPage = () => {
           color="hsl(289deg 78% 30% / 35%)"
         />
 
-        <div className="flex items-center justify-center mb-6">
-          <div className="flex items-center justify-center p-2 relative mb-6">
+        <div className="mb-6 flex items-center justify-center">
+          <div className="relative mb-6 flex items-center justify-center p-2">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
diff --git a/apps/dashboard/src/pages/community/index.tsx b/apps/dashboard/src/pages/community/index.tsx
index dff34a5d3c4..0f58b985b25 100644
--- a/apps/dashboard/src/pages/community/index.tsx
+++ b/apps/dashboard/src/pages/community/index.tsx
@@ -125,7 +125,7 @@ const Community: ThirdwebNextPage = () => {
               color="hsl(280deg 78% 30% / 30%)"
             />
 
-            <div className="flex items-center justify-center flex-col py-12 md:py-24 px-4 md:px-8">
+            <div className="flex flex-col items-center justify-center px-4 py-12 md:px-8 md:py-24">
               <Heading mt={8} textAlign="center" size="title.2xl">
                 A decentralized internet begins
                 <br /> with
@@ -308,7 +308,7 @@ const Community: ThirdwebNextPage = () => {
           </SimpleGrid>
         </Container>
 
-        <div className="flex items-center justify-center px-4 md:px-8 flex-col my-12 md:my-24">
+        <div className="my-12 flex flex-col items-center justify-center px-4 md:my-24 md:px-8">
           <Heading mt={8} size="display.md">
             Start
             <Box
diff --git a/apps/dashboard/src/pages/connect.tsx b/apps/dashboard/src/pages/connect.tsx
index 6a4947c7284..09fc4ba69b3 100644
--- a/apps/dashboard/src/pages/connect.tsx
+++ b/apps/dashboard/src/pages/connect.tsx
@@ -407,7 +407,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
 
           <LandingCardWithMetrics
             title={
-              <div className="flex items-center justify-center flex-col text-center">
+              <div className="flex flex-col items-center justify-center text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
diff --git a/apps/dashboard/src/pages/contracts.tsx b/apps/dashboard/src/pages/contracts.tsx
index df8de868bcf..6b200ab705f 100644
--- a/apps/dashboard/src/pages/contracts.tsx
+++ b/apps/dashboard/src/pages/contracts.tsx
@@ -321,7 +321,7 @@ const Contracts: ThirdwebNextPage = () => {
 
         <LandingCardWithMetrics
           title={
-            <div className="flex items-center justify-center flex-col text-center">
+            <div className="flex flex-col items-center justify-center text-center">
               <Heading size="display.sm" color="white">
                 Trusted by the best
               </Heading>
diff --git a/apps/dashboard/src/pages/engine.tsx b/apps/dashboard/src/pages/engine.tsx
index 913a72f2c4f..47e961b82ba 100644
--- a/apps/dashboard/src/pages/engine.tsx
+++ b/apps/dashboard/src/pages/engine.tsx
@@ -325,7 +325,7 @@ const EngineLanding: ThirdwebNextPage = () => {
 
           <LandingCardWithMetrics
             title={
-              <div className="flex items-center justify-center flex-col text-center">
+              <div className="flex flex-col items-center justify-center text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
diff --git a/apps/dashboard/src/pages/index.tsx b/apps/dashboard/src/pages/index.tsx
index de4af8c8564..0383ee66183 100644
--- a/apps/dashboard/src/pages/index.tsx
+++ b/apps/dashboard/src/pages/index.tsx
@@ -80,7 +80,7 @@ const HomePage: ThirdwebNextPage = () => {
         <Box px={4}>
           <LandingCardWithMetrics
             title={
-              <div className="flex items-center justify-center flex-col text-center">
+              <div className="flex flex-col items-center justify-center text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
diff --git a/apps/dashboard/src/pages/learn/index.tsx b/apps/dashboard/src/pages/learn/index.tsx
index a3dcc50640f..48c14f615d7 100644
--- a/apps/dashboard/src/pages/learn/index.tsx
+++ b/apps/dashboard/src/pages/learn/index.tsx
@@ -181,8 +181,8 @@ const Learn: ThirdwebNextPage = () => {
             align="center"
             gap={{ base: 6, md: 8 }}
           >
-            <div className="flex items-center justify-center mb-6 pt-8 lg:pt-24">
-              <div className="flex items-center justify-center p-2 relative mb-6">
+            <div className="mb-6 flex items-center justify-center pt-8 lg:pt-24">
+              <div className="relative mb-6 flex items-center justify-center p-2">
                 <Box
                   position="absolute"
                   bgGradient="linear(to-r, #F213A4, #040BBF)"
diff --git a/apps/dashboard/src/pages/solutions/gaming.tsx b/apps/dashboard/src/pages/solutions/gaming.tsx
index 936cc0e1e84..738155f0845 100644
--- a/apps/dashboard/src/pages/solutions/gaming.tsx
+++ b/apps/dashboard/src/pages/solutions/gaming.tsx
@@ -326,7 +326,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
 
         <LandingGridSection
           title={
-            <div className="flex items-center justify-center flex-col text-center">
+            <div className="flex flex-col items-center justify-center text-center">
               <Heading size="display.sm" color="white">
                 The complete stack for web3 games
               </Heading>
@@ -415,7 +415,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
 
         <LandingCardWithMetrics
           title={
-            <div className="flex items-center justify-center flex-col text-center">
+            <div className="flex flex-col items-center justify-center text-center">
               <Heading size="display.sm" color="white">
                 Trusted by the best
               </Heading>