diff --git a/apps/dashboard/.eslintrc.js b/apps/dashboard/.eslintrc.js
index 5e01a25b5f0..08efc5000ca 100644
--- a/apps/dashboard/.eslintrc.js
+++ b/apps/dashboard/.eslintrc.js
@@ -58,6 +58,7 @@ module.exports = {
               "VStack",
               "HStack",
               "AspectRatio",
+              "Center",
               // also the types
               "ButtonProps",
               "BadgeProps",
diff --git a/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx b/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx
index a0d5f69a9a4..a9a356c352d 100644
--- a/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx
+++ b/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx
@@ -1,5 +1,5 @@
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Box, ButtonGroup, Center, Flex } from "@chakra-ui/react";
+import { Box, ButtonGroup, Flex } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useTrack } from "hooks/analytics/useTrack";
 import { FiArrowRight } from "react-icons/fi";
@@ -98,7 +98,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
       h="100%"
       justify="space-between"
     >
-      <Center flexGrow={1} position="relative">
+      <div className="flex items-center justify-center grow relative">
         <Flex gap={8} direction="column" height="100%" width={"100%"}>
           <Box position="relative" w="full" mt="auto">
             <SlideContent
@@ -128,7 +128,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
             )}
           </ButtonGroup>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
index 61cdd025452..d6759d3f54a 100644
--- a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
+++ b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
@@ -22,6 +22,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
 
   return (
     <div className="w-full relative aspect-[16/9] md:aspect-square">
+      {/* @to be completed */}
       <Center
         as={motion.div}
         initial={`slide-${slideIndex}`}
diff --git a/apps/dashboard/src/components/FTUX/components/Graphics.tsx b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
index 4fc8c4f292e..b2357d196a0 100644
--- a/apps/dashboard/src/components/FTUX/components/Graphics.tsx
+++ b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { motion } from "framer-motion";
 import { Heading } from "tw-components";
@@ -48,25 +48,25 @@ export const Titles: React.FC<SlideStateProps> = ({
 
 export const DashboardImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center>
+    <div className="flex items-center justify-center">
       <ChakraNextImage
         priority
         w={{ base: "45%", md: "90%" }}
         src={require("../../../../public/assets/product-pages/dashboard/hero.png")}
         alt=""
       />
-    </Center>
+    </div>
   </motion.div>
 );
 
 export const ConnectWalletImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center h="100%" w="100%">
+    <div className="flex items-center justify-center h-full w-full">
       <ChakraNextImage
         alt=""
         boxSize="75px"
         src={require("../../../../public/logos/wallet.png")}
       />
-    </Center>
+    </div>
   </motion.div>
 );
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
index 816629e5894..6ee1837a2c0 100644
--- a/apps/dashboard/src/components/buttons/TransactionButton.tsx
+++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -119,6 +119,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                 : `This action will trigger ${transactionCount} ${transactionCount > 1 ? "transactions" : "transaction"}`
             }
           >
+            {/* to be completed */}
             <Center
               _groupHover={{
                 bg:
diff --git a/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
index 18a34254874..3348ac06e44 100644
--- a/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
@@ -1,11 +1,4 @@
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  Center,
-  Flex,
-  Spinner,
-} from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Flex, Spinner } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useMemo, useState } from "react";
 import { IoRefreshSharp } from "react-icons/io5";
@@ -90,15 +83,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
         hidePublisher
       >
         {publishedContractsQuery.isPending && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex py={4} direction="row" gap={4} align="center">
               <Spinner size="sm" />
               <Text>Loading published contracts</Text>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isError && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex mt={4} py={4} direction="column" gap={4} align="center">
               <Alert status="error" borderRadius="md">
                 <AlertIcon />
@@ -116,15 +109,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
                 </Button>
               </Alert>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length === 0 && (
-            <Center>
+            <div className="flex items-center justify-center">
               <Flex py={4} direction="column" gap={4} align="center">
                 <Text>No published contracts found.</Text>
               </Flex>
-            </Center>
+            </div>
           )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length > slicedData.length && (
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 02fd44d1d37..2ca4afbd666 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
@@ -1,7 +1,7 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { Center, Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { ChainIcon } from "components/icons/ChainIcon";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -119,13 +119,9 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 cursor="pointer"
               >
                 {chain.icon?.url && (
-                  <Center
-                    boxSize={5}
-                    mr={{ base: 0, md: -0.5 }}
-                    borderRadius="full"
-                  >
+                  <div className="flex items-center justify-center w-5 h-5 mr-0 md:-mr-0.5 rounded-full">
                     <ChainIcon ipfsSrc={chain.icon.url} size={24} />
-                  </Center>
+                  </div>
                 )}
                 <Heading
                   display={{
diff --git a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
index 7c4bee9e8ff..5222ef87f92 100644
--- a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
+++ b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex, LightMode } from "@chakra-ui/react";
+import { Box, Flex, LightMode } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { GeneralCta } from "components/shared/GeneralCta";
@@ -18,8 +18,8 @@ export const GetStartedSection = () => {
         align="center"
         gap={{ base: 6, md: 8 }}
       >
-        <Center mb={6} pt={{ base: 8, lg: 24 }}>
-          <Center p={2} position="relative" mb={6}>
+        <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">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
@@ -38,8 +38,8 @@ export const GetStartedSection = () => {
               placeholder="empty"
               src={WhiteLogo}
             />
-          </Center>
-        </Center>
+          </div>
+        </div>
         <Heading as="h2" size="display.md" textAlign="center">
           Get started with thirdweb
         </Heading>
diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
index a8d894d9685..4a5ab9b0763 100644
--- a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
+++ b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
@@ -1,5 +1,5 @@
 import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { Box, type CardProps, Center, Flex } from "@chakra-ui/react";
+import { Box, type CardProps, Flex } from "@chakra-ui/react";
 import {
   Badge,
   Card,
@@ -174,7 +174,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
   if (highlighted) {
     return (
-      <Center position="relative" p={2} m={-2}>
+      <div className="flex items-center justify-center relative p-2 -m-2">
         <Box
           position="absolute"
           bgGradient="linear(to-b, #4DABEE, #692AC1)"
@@ -187,7 +187,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
           filter="blur(8px)"
         />
         {content}
-      </Center>
+      </div>
     );
   }
 
diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
index a46d874a019..52a93412822 100644
--- a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
+++ b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -7,7 +7,6 @@ import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardS
 import {
   Box,
   ButtonGroup,
-  Center,
   Divider,
   Flex,
   GridItem,
@@ -87,11 +86,7 @@ export const IpfsUploadDropzone: React.FC = () => {
             <FileUpload files={droppedFiles} updateFiles={setDroppedFiles} />
           </Box>
         ) : !address ? (
-          <Center
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-          >
+          <div className="flex items-center justify-center border-border border-2 rounded-xl">
             <Text
               size="label.lg"
               className="text-muted-foreground"
@@ -99,23 +94,14 @@ export const IpfsUploadDropzone: React.FC = () => {
             >
               Please connect your wallet to begin uploading.
             </Text>
-          </Center>
+          </div>
         ) : (
-          <Center
+          <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",
+              address ? "cursor-pointer" : "cursor-default",
+            )}
             {...getRootProps()}
-            bg="transparent"
-            _hover={{
-              _light: {
-                borderColor: "blue.600",
-              },
-              _dark: {
-                borderColor: "blue.400",
-              },
-            }}
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-            cursor={address ? "pointer" : "default"}
           >
             <input {...getInputProps()} />
 
@@ -147,7 +133,7 @@ export const IpfsUploadDropzone: React.FC = () => {
                 )}
               </Flex>
             }
-          </Center>
+          </div>
         )}
       </div>
       <Flex flexDir="column" gap={{ base: 6, md: 3 }} />
@@ -439,14 +425,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 isIndeterminate={storageUpload.isPending}
                 position="relative"
               />
-              <Center
-                display={{ base: "none", md: "block" }}
-                position="absolute"
-                left={0}
-                right={0}
-                top={0}
-                bottom={0}
-              >
+              <div className="left-0 bottom-0 right-0 top-0 absolute hidden md:block">
                 {/* <Text
                   mt={0.5}
                   size="label.xs"
@@ -473,7 +452,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 >
                   {Math.round(progressPercent)}%
                 </Text> */}
-              </Center>
+              </div>
             </Flex>
           )}
           <ButtonGroup ml={{ base: "0", md: "auto" }}>
diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
index 7c7ca36c736..bf18520c20f 100644
--- a/apps/dashboard/src/components/onboarding/PaymentForm.tsx
+++ b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
@@ -3,7 +3,6 @@ import {
   Alert,
   AlertDescription,
   AlertIcon,
-  Center,
   Flex,
   Spinner,
 } from "@chakra-ui/react";
@@ -109,9 +108,9 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
         />
 
         {loading ? (
-          <Center pb={16}>
+          <div className="flex items-center justify-center pb-16">
             <Spinner size="sm" />
-          </Center>
+          </div>
         ) : (
           <Flex flexDir="column" gap={4}>
             {paymentFailureCode ? (
diff --git a/apps/dashboard/src/components/product-pages/common/GameCard.tsx b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
index c2acd830a9c..70f2172f606 100644
--- a/apps/dashboard/src/components/product-pages/common/GameCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex, useBreakpointValue } from "@chakra-ui/react";
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { useTrack } from "hooks/analytics/useTrack";
 import NextImage, { type StaticImageData } from "next/image";
@@ -70,7 +70,7 @@ export const GameCard: React.FC<GameCardProps> = ({
               (max-width: 1200px) 50vw,
               33vw"
         />
-        <Center position="absolute" top={0} bottom={0} left={0} right={0}>
+        <div className="flex items-center justify-center absolute top-0 bottom-0 left-0 right-0">
           <Button
             leftIcon={<IoGameControllerOutline />}
             color="white"
@@ -80,7 +80,7 @@ export const GameCard: React.FC<GameCardProps> = ({
           >
             Play Game
           </Button>
-        </Center>
+        </div>
       </Box>
 
       <Flex direction="column" gap={2} pb={4} px={4}>
diff --git a/apps/dashboard/src/components/product-pages/common/Hero.tsx b/apps/dashboard/src/components/product-pages/common/Hero.tsx
index fe874a7eb7e..a7c01b36d62 100644
--- a/apps/dashboard/src/components/product-pages/common/Hero.tsx
+++ b/apps/dashboard/src/components/product-pages/common/Hero.tsx
@@ -1,5 +1,4 @@
 import {
-  Center,
   Container,
   Flex,
   GridItem,
@@ -49,13 +48,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
   imageHeight,
 }) => {
   return (
-    <Center
-      w="100%"
-      as="section"
-      flexDirection="column"
-      bg="#030A19"
-      padding={{ base: 0, md: "64px" }}
-    >
+    <section className="flex items-center justify-center flex-col w-full p-0 md:p-[64px] bg-[#030A19]">
       <SimpleGrid
         as={Container}
         maxW="container.page"
@@ -170,11 +163,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
           </SimpleGrid>
         </Flex>
         {image && (
-          <Center
-            display={{ base: "none", md: "flex" }}
-            padding={{ base: "24px", md: "48px" }}
-            gridColumnEnd={{ base: undefined, md: "span 3" }}
-          >
+          <div className="hidden md:flex items-center justify-center p-6 md:p-12 md:col-span-3">
             <ChakraNextImage
               maxH={{ base: imageHeight ? imageHeight : "480px" }}
               style={{ objectFit: "contain" }}
@@ -186,7 +175,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
                   (max-width: 1200px) 50vw,
                   33vw"
             />
-          </Center>
+          </div>
         )}
       </SimpleGrid>
 
@@ -197,6 +186,6 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
       >
         {children}
       </Container>
-    </Center>
+    </section>
   );
 };
diff --git a/apps/dashboard/src/components/shared/TWQueryTable.tsx b/apps/dashboard/src/components/shared/TWQueryTable.tsx
index 6f94f727a83..918417c220b 100644
--- a/apps/dashboard/src/components/shared/TWQueryTable.tsx
+++ b/apps/dashboard/src/components/shared/TWQueryTable.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   ButtonGroup,
-  Center,
   Flex,
   GridItem,
   Icon,
@@ -132,20 +131,20 @@ export function TWQueryTable<TRowData, TInputData>(
           </Tbody>
         </Table>
         {isPending && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex py={4} direction="row" gap={4} align="center">
               <Spinner size="sm" />
               <Text>Loading {pluralize(tableProps.title, 0, false)}</Text>
             </Flex>
-          </Center>
+          </div>
         )}
 
         {!isPending && !isFetching && data.length === 0 && isFetched && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex py={4} direction="column" gap={4} align="center">
               <Text>No {pluralize(tableProps.title, 0, false)} found.</Text>
             </Flex>
-          </Center>
+          </div>
         )}
       </TableContainer>
       {/* render pagination if pagination is enabled */}
@@ -236,7 +235,7 @@ function Pagination<TInputData>(paginationProps: PaginationProps<TInputData>) {
       {/* filler box on left side for spacing */}
       <GridItem colSpan={2} />
       <GridItem colSpan={8}>
-        <Center>
+        <div className="flex items-center justify-center">
           <ButtonGroup fontFamily="mono" variant="outline" size="sm">
             {paginationProps.isPending
               ? new Array(MAX_PAGE_BUTTONS).fill("0").map((val, i) => {
@@ -265,15 +264,9 @@ function Pagination<TInputData>(paginationProps: PaginationProps<TInputData>) {
                       <Box as="span" visibility="hidden">
                         {buttonStringTemplate}
                       </Box>
-                      <Center
-                        position="absolute"
-                        top={0}
-                        right={0}
-                        left={0}
-                        bottom={0}
-                      >
+                      <div className="flex items-center justify-center absolute top-0 right-0 left-0 bottom-0">
                         {page.page + 1}
-                      </Center>
+                      </div>
                     </Button>
                   ) : (
                     <Button
@@ -287,7 +280,7 @@ function Pagination<TInputData>(paginationProps: PaginationProps<TInputData>) {
                   ),
                 )}
           </ButtonGroup>
-        </Center>
+        </div>
       </GridItem>
 
       {/* if we let the users set the page size then show a select to do that */}
diff --git a/apps/dashboard/src/components/storage/your-files.tsx b/apps/dashboard/src/components/storage/your-files.tsx
index 230b17b171e..fc222fc1e7c 100644
--- a/apps/dashboard/src/components/storage/your-files.tsx
+++ b/apps/dashboard/src/components/storage/your-files.tsx
@@ -1,6 +1,6 @@
 import { DASHBOARD_STORAGE_URL } from "@/constants/env";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Center, Flex, Tooltip } from "@chakra-ui/react";
+import { Flex, Tooltip } from "@chakra-ui/react";
 import {
   keepPreviousData,
   useMutation,
@@ -211,11 +211,11 @@ export const YourFilesSection: React.FC = () => {
         />
       ) : (
         <Card>
-          <Center>
+          <div className="flex items-center justify-center">
             <Text>
               Please connect your wallet to see the files you have pinned.
             </Text>
-          </Center>
+          </div>
         </Card>
       )}
     </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 ddcf3a92c98..07ca759f8a3 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
@@ -1,12 +1,5 @@
 import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
-import {
-  Center,
-  Flex,
-  Icon,
-  IconButton,
-  Select,
-  Skeleton,
-} from "@chakra-ui/react";
+import { Flex, Icon, IconButton, Select, Skeleton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { useRouter } from "next/router";
@@ -101,7 +94,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
         }}
       />
       {/* pagination */}
-      <Center w="100%">
+      <div className="flex items-center justify-center w-full">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={totalAccountsQuery.isPending}
@@ -172,7 +165,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
             <option value="500">500</option>
           </Select>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };
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 35d7025f365..9153c07d3be 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
@@ -1,7 +1,7 @@
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { cn } from "@/lib/utils";
 import {
   Box,
-  Center,
   Code,
   Container,
   Flex,
@@ -226,18 +226,12 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
                 <div className="w-full aspect-[21/9]">
-                  <Center
-                    borderRadius="md"
+                  <div
+                    className={cn(
+                      "rounded-md cursor-pointer hover:border-primary border border-border h-full",
+                      noCsv ? "bg-red-200" : "bg-card",
+                    )}
                     {...getRootProps()}
-                    cursor="pointer"
-                    bg={noCsv ? "red.200" : "inputBg"}
-                    _hover={{
-                      bg: "inputBgHover",
-                      borderColor: "primary.500",
-                    }}
-                    borderColor="inputBorder"
-                    borderWidth="1px"
-                    h={"100%"}
                   >
                     <input {...getInputProps()} />
                     <div className="flex flex-col p-6">
@@ -264,7 +258,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                         </Heading>
                       )}
                     </div>
-                  </Center>
+                  </div>
                 </div>
                 <Flex gap={2} flexDir="column">
                   <Heading size="label.md">Requirements</Heading>
@@ -563,7 +557,7 @@ const SnapshotTable: React.FC<SnapshotTableProps> = ({ data, portalRef }) => {
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <Center w="100%">
+        <div className="flex items-center justify-center w-full">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
@@ -607,7 +601,7 @@ const SnapshotTable: React.FC<SnapshotTableProps> = ({ data, portalRef }) => {
               <option value="500">500</option>
             </Select>
           </div>
-        </Center>
+        </div>
       </Portal>
     </Flex>
   );
diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
index 9fc5525e860..f77bef1ec73 100644
--- a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
@@ -10,7 +10,6 @@ import {
   AccordionPanel,
   Box,
   ButtonGroup,
-  Center,
   Divider,
   Flex,
   FormControl,
@@ -148,14 +147,14 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
 
         <List overflow="auto">
           {filteredEvents.length === 0 && (
-            <Center py={4}>
+            <div className="flex items-center justify-center py-4">
               <Flex align="center" gap={2}>
                 {autoUpdate && <Spinner size="sm" speed="0.69s" />}
                 <Text size="body.md" fontStyle="italic">
                   {autoUpdate ? "listening for events" : "no events to show"}
                 </Text>
               </Flex>
-            </Center>
+            </div>
           )}
           <Accordion
             as={AnimatePresence}
@@ -406,9 +405,9 @@ const TransactionData: React.FC<TransactionDataProps> = ({
               </Card>
             }
           >
-            <Center>
+            <div className="flex items-center justify-center">
               <Icon as={AiOutlineQuestionCircle} color="gray.600" />
-            </Center>
+            </div>
           </Tooltip>
 
           <Text fontWeight="bold">{name}</Text>
diff --git a/apps/dashboard/src/contract-ui/tabs/explorer/page.tsx b/apps/dashboard/src/contract-ui/tabs/explorer/page.tsx
index f9bdcb9a8f5..2cb0db12f58 100644
--- a/apps/dashboard/src/contract-ui/tabs/explorer/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/explorer/page.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex, Skeleton } from "@chakra-ui/react";
+import { Flex, Skeleton } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { useContractFunctions } from "components/contract-components/hooks";
 import { ContractFunctionsOverview } from "components/contract-functions/contract-functions";
@@ -32,7 +32,7 @@ export const ContractExplorerPage: React.FC<ContractCodePageProps> = ({
             contract={contract}
           />
         ) : (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex direction="column" textAlign="center" gap={2}>
               <Heading as="p" size="label.md">
                 No callable functions discovered in ABI.
@@ -42,7 +42,7 @@ export const ContractExplorerPage: React.FC<ContractCodePageProps> = ({
                 explorer, check back soon for full proxy support.
               </Text>
             </Flex>
-          </Center>
+          </div>
         )}
       </Skeleton>
     </Flex>
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 ab8f4dac9f4..1c61e211a6e 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
@@ -4,7 +4,6 @@ import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwned
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
 import {
   Box,
-  Center,
   Flex,
   FormControl,
   Icon,
@@ -416,9 +415,9 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         (isOwnedNFTsLoading &&
           !isSupportedChain &&
           form.watch("selected.contractAddress")) ? (
-          <Center height="60px">
+          <div className="flex items-center justify-center h-[60px]">
             <Spinner />
-          </Center>
+          </div>
         ) : nfts && nfts.length !== 0 ? (
           <Flex gap={2} flexWrap="wrap">
             {nfts?.map((nft) => {
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 de3a1bc0e61..00a3b9856b2 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
@@ -1,7 +1,7 @@
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { cn } from "@/lib/utils";
 import {
   Box,
-  Center,
   Container,
   Flex,
   Icon,
@@ -205,18 +205,12 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
                 <div className="w-full aspect-[21/9]">
-                  <Center
-                    borderRadius="md"
+                  <div
+                    className={cn(
+                      "rounded-md cursor-pointer border border-border h-full hover:border-primary",
+                      noCsv ? "bg-red-200" : "bg-card",
+                    )}
                     {...getRootProps()}
-                    cursor="pointer"
-                    bg={noCsv ? "red.200" : "inputBg"}
-                    _hover={{
-                      bg: "inputBgHover",
-                      borderColor: "primary.500",
-                    }}
-                    borderColor="inputBorder"
-                    borderWidth="1px"
-                    h={"100%"}
                   >
                     <input {...getInputProps()} />
                     <div className="flex flex-col p-6">
@@ -243,7 +237,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                         </Heading>
                       )}
                     </div>
-                  </Center>
+                  </div>
                 </div>
                 <Flex gap={2} flexDir="column">
                   <Heading size="subtitle.sm">Requirements</Heading>
@@ -448,7 +442,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <Center w="100%">
+        <div className="flex items-center justify-center w-full">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
@@ -492,7 +486,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
               <option value="500">500</option>
             </Select>
           </div>
-        </Center>
+        </div>
       </Portal>
     </Flex>
   );
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 6456055c619..3ea79f46582 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
@@ -1,6 +1,5 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
-  Center,
   Flex,
   Icon,
   IconButton,
@@ -321,7 +320,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           </Tbody>
         </Table>
       </TableContainer>
-      <Center w="100%">
+      <div className="flex items-center justify-center w-full">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
@@ -368,7 +367,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
             <option value="500">500</option>
           </Select>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
index 3146d2b7cac..5529e777b07 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
@@ -5,7 +5,6 @@ import {
 import {
   Box,
   ButtonGroup,
-  Center,
   Flex,
   Icon,
   List,
@@ -85,14 +84,14 @@ export const LatestEvents: React.FC<LatestEventsProps> = ({
 
         <List overflow="auto">
           {allEvents.length === 0 ? (
-            <Center py={4}>
+            <div className="flex items-center justify-center py-4">
               <Flex align="center" gap={2}>
                 {autoUpdate && <Spinner size="sm" speed="0.69s" />}
                 <Text size="body.md" fontStyle="italic">
                   {autoUpdate ? "listening for events" : "no events to show"}
                 </Text>
               </Flex>
-            </Center>
+            </div>
           ) : null}
           <AnimatePresence initial={false}>
             {allEvents?.slice(0, 3).map((e) => (
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
index 2e4496a5345..05f8fc80aba 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Center,
   Flex,
   Icon,
   List,
@@ -100,7 +99,7 @@ export const PermissionsTable: React.FC<PermissionsTableProps> = ({
 
           <List overflow="auto">
             {members.length === 0 && (
-              <Center py={4}>
+              <div className="flex items-center justify-center py-4">
                 <Flex align="center" gap={2}>
                   <Text size="body.md" fontStyle="italic">
                     {allRoleMembers.isPending
@@ -108,7 +107,7 @@ export const PermissionsTable: React.FC<PermissionsTableProps> = ({
                       : "no permissions found"}
                   </Text>
                 </Flex>
-              </Center>
+              </div>
             )}
             <AnimatePresence initial={false}>
               {members.map((e) => (
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 bb68984ffe3..4242fb33c1c 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
@@ -1,7 +1,6 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
   ButtonGroup,
-  Center,
   Flex,
   Icon,
   IconButton,
@@ -277,7 +276,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           </Tbody>
         </Table>
       </TableContainer>
-      <Center w="100%">
+      <div className="flex items-center justify-center w-full">
         <Flex gap={2} direction="row" align="center">
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
@@ -328,7 +327,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
             <option value="500">500</option>
           </Select>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/split/page.tsx b/apps/dashboard/src/contract-ui/tabs/split/page.tsx
index 40cdc6a9787..2b36e6ca53f 100644
--- a/apps/dashboard/src/contract-ui/tabs/split/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/split/page.tsx
@@ -1,6 +1,5 @@
 import { useSplitBalances } from "@3rdweb-sdk/react/hooks/useSplit";
 import {
-  Center,
   Flex,
   SimpleGrid,
   Spinner,
@@ -133,9 +132,9 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({ contract }) => {
               )}
             </Card>
             {balanceQuery.isPending ? (
-              <Center>
+              <div className="flex items-center justify-center">
                 <Spinner />
-              </Center>
+              </div>
             ) : (
               (balanceQuery?.data || [])
                 ?.filter((bl) => bl.name !== "Native Token")
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
index 27635ad796f..a94cb4ec41d 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
@@ -1,7 +1,7 @@
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { cn } from "@/lib/utils";
 import {
-  Center,
   IconButton,
   Link,
   ListItem,
@@ -222,17 +222,12 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
       ) : (
         <div className="flex flex-col gap-8">
           <div className="w-full aspect-[21/9]">
-            <Center
-              borderRadius="md"
+            <div
+              className={cn(
+                "flex items-center justify-center rounded-md cursor-pointer border border-border hover:border-primary",
+                noCsv ? "bg-red-200" : "bg-card",
+              )}
               {...getRootProps()}
-              cursor="pointer"
-              bg={noCsv ? "red.200" : "inputBg"}
-              _hover={{
-                bg: "inputBgHover",
-                borderColor: "primary.500",
-              }}
-              borderColor="inputBorder"
-              borderWidth="1px"
             >
               <input {...getInputProps()} />
               <div className="flex flex-col p-6">
@@ -256,7 +251,7 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
                   </Heading>
                 )}
               </div>
-            </Center>
+            </div>
           </div>
           <div className="gap-2 flex flex-col">
             <Heading size="subtitle.sm">Requirements</Heading>
@@ -400,7 +395,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
       {/* Only need to show the Pagination components if we have more than 25 records */}
       {data.length > 25 && (
         <Portal containerRef={portalRef}>
-          <Center w="100%">
+          <div className="flex items-center justify-center w-full">
             <div className="flex flex-row">
               <IconButton
                 isDisabled={!canPreviousPage}
@@ -443,7 +438,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
                 <option value="500">500</option>
               </Select>
             </div>
-          </Center>
+          </div>
         </Portal>
       )}
     </>
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 64c66f1dd1a..159b2fb378d 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   type BoxProps,
-  Center,
   Flex,
   Icon,
   IconButton,
@@ -209,7 +208,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         </Table>
       </TableContainer>
       <Portal containerRef={portalRef}>
-        <Center w="100%">
+        <div className="w-full flex items-center justify-center">
           <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
@@ -253,7 +252,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
               <option value="500">500</option>
             </Select>
           </div>
-        </Center>
+        </div>
       </Portal>
     </Flex>
   );
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 f8c3d87660d..698f988b597 100644
--- a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -1,5 +1,5 @@
+import { cn } from "@/lib/utils";
 import {
-  Center,
   Code,
   Container,
   Flex,
@@ -31,18 +31,12 @@ export const UploadStep: React.FC<UploadStepProps> = ({
       <Container maxW="container.page">
         <Flex gap={8} flexDir={{ base: "column", md: "row" }}>
           <div className="aspect-square w-full md:w-1/2">
-            <Center
-              borderRadius="md"
+            <div
+              className={cn(
+                "rounded-md cursor-pointer border border-border h-full hover:border-blue-500",
+                hasFailed ? "bg-red-200" : "bg-card",
+              )}
               {...getRootProps()}
-              cursor="pointer"
-              bg={hasFailed ? "red.200" : "inputBg"}
-              _hover={{
-                bg: hasFailed ? "red.200" : "inputBgHover",
-                borderColor: "blue.500",
-              }}
-              borderColor="inputBorder"
-              borderWidth="1px"
-              h={"100%"}
             >
               <input {...getInputProps()} />
               <div className="flex flex-col p-6">
@@ -70,7 +64,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
                   </Heading>
                 )}
               </div>
-            </Center>
+            </div>
           </div>
           <Flex gap={2} flexDir="column" w={{ base: "100%", md: "50%" }}>
             <Heading size="subtitle.sm">Requirements</Heading>
diff --git a/apps/dashboard/src/pages/404.tsx b/apps/dashboard/src/pages/404.tsx
index 7eacd792eec..cfc17e37fc1 100644
--- a/apps/dashboard/src/pages/404.tsx
+++ b/apps/dashboard/src/pages/404.tsx
@@ -1,5 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Center, Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Aurora } from "components/homepage/Aurora";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
@@ -34,8 +34,8 @@ const PageNotFound: ThirdwebNextPage = () => {
           color="hsl(289deg 78% 30% / 35%)"
         />
 
-        <Center mb={6}>
-          <Center p={2} position="relative" mb={6}>
+        <div className="flex items-center justify-center mb-6">
+          <div className="flex items-center justify-center p-2 relative mb-6">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
@@ -54,8 +54,8 @@ const PageNotFound: ThirdwebNextPage = () => {
               placeholder="empty"
               src={NotFound}
             />
-          </Center>
-        </Center>
+          </div>
+        </div>
         <Heading textAlign="center" size="display.md">
           Uh oh.
           <br />
diff --git a/apps/dashboard/src/pages/community/index.tsx b/apps/dashboard/src/pages/community/index.tsx
index dbf57870e36..1f7592b4bcd 100644
--- a/apps/dashboard/src/pages/community/index.tsx
+++ b/apps/dashboard/src/pages/community/index.tsx
@@ -1,12 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import {
-  Box,
-  Center,
-  Container,
-  Flex,
-  Icon,
-  SimpleGrid,
-} from "@chakra-ui/react";
+import { Box, Container, Flex, Icon, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { CommunityCard } from "components/community/CommunityCard";
 import { HomepageFooter } from "components/footer/Footer";
@@ -132,11 +125,7 @@ const Community: ThirdwebNextPage = () => {
               color="hsl(280deg 78% 30% / 30%)"
             />
 
-            <Center
-              py={{ base: 12, md: 24 }}
-              px={{ base: 4, md: 8 }}
-              flexDir="column"
-            >
+            <div className="flex items-center justify-center flex-col py-12 md:py-24 px-4 md:px-8">
               <Heading mt={8} textAlign="center" size="title.2xl">
                 A decentralized internet begins
                 <br /> with{" "}
@@ -197,7 +186,7 @@ const Community: ThirdwebNextPage = () => {
                   Get In Touch
                 </LinkButton>
               </Flex>
-            </Center>
+            </div>
           </Container>
 
           {communitySections.map(
@@ -319,11 +308,7 @@ const Community: ThirdwebNextPage = () => {
           </SimpleGrid>
         </Container>
 
-        <Center
-          px={{ base: 4, md: 8 }}
-          flexDir="column"
-          my={{ base: 12, md: 24 }}
-        >
+        <div className="flex items-center justify-center px-4 md:px-8 flex-col my-12 md:my-24">
           <Heading mt={8} size="display.md">
             Start
             <Box
@@ -386,7 +371,7 @@ const Community: ThirdwebNextPage = () => {
               Get In Touch
             </LinkButton>
           </Flex>
-        </Center>
+        </div>
 
         <HomepageFooter />
       </Flex>
diff --git a/apps/dashboard/src/pages/connect.tsx b/apps/dashboard/src/pages/connect.tsx
index cfbbb715ad7..cd1f6c6e1a0 100644
--- a/apps/dashboard/src/pages/connect.tsx
+++ b/apps/dashboard/src/pages/connect.tsx
@@ -1,4 +1,4 @@
-import { Center, Container, Flex, Spacer } from "@chakra-ui/react";
+import { Container, Flex, Spacer } from "@chakra-ui/react";
 import Carousel from "components/connect/Carousel";
 import CodePlayground from "components/connect/CodePlayground";
 import { LandingCardWithImage } from "components/landing-pages/card-with-image";
@@ -302,7 +302,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
           <Flex flexDir="column" gap={6}>
             <LandingGridSection
               title={
-                <Center>
+                <div className="flex items-center justify-center">
                   <Heading
                     size="display.sm"
                     color="white"
@@ -311,7 +311,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
                   >
                     Everything you need to build seamless web3 apps
                   </Heading>
-                </Center>
+                </div>
               }
               desktopColumns={4}
             >
@@ -407,7 +407,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
 
           <LandingCardWithMetrics
             title={
-              <Center flexDir="column" textAlign="center">
+              <div className="flex items-center justify-center flex-col text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
@@ -416,7 +416,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
                   thirdweb Connect powers the best web3 projects — from
                   marketplaces, to collectibles, to games.
                 </Text>
-              </Center>
+              </div>
             }
             desktopColumns={3}
             TRACKING_CATEGORY={TRACKING_CATEGORY}
diff --git a/apps/dashboard/src/pages/contracts.tsx b/apps/dashboard/src/pages/contracts.tsx
index 57a1d80d09d..df8de868bcf 100644
--- a/apps/dashboard/src/pages/contracts.tsx
+++ b/apps/dashboard/src/pages/contracts.tsx
@@ -1,4 +1,4 @@
-import { Center, Container, Flex, Icon } from "@chakra-ui/react";
+import { Container, Flex, Icon } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { ContractInteractionSection } from "components/contracts/ContractInteractionSection";
 import LandingCaseStudyStaticSection from "components/contracts/LandingCaseStudyStaticSection";
@@ -321,7 +321,7 @@ const Contracts: ThirdwebNextPage = () => {
 
         <LandingCardWithMetrics
           title={
-            <Center flexDir="column" textAlign="center">
+            <div className="flex items-center justify-center flex-col text-center">
               <Heading size="display.sm" color="white">
                 Trusted by the best
               </Heading>
@@ -330,7 +330,7 @@ const Contracts: ThirdwebNextPage = () => {
                 Powering web3 apps across verticals — from onchain games to
                 creator platforms.
               </Text>
-            </Center>
+            </div>
           }
           desktopColumns={3}
           TRACKING_CATEGORY={TRACKING_CATEGORY}
diff --git a/apps/dashboard/src/pages/engine.tsx b/apps/dashboard/src/pages/engine.tsx
index cd6fd032892..913a72f2c4f 100644
--- a/apps/dashboard/src/pages/engine.tsx
+++ b/apps/dashboard/src/pages/engine.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Container, Flex } from "@chakra-ui/react";
+import { Box, Container, Flex } from "@chakra-ui/react";
 import { PricingEngineHomepage } from "components/homepage/sections/PricingEngine";
 import { LandingCardWithImage } from "components/landing-pages/card-with-image";
 import LandingCardWithMetrics from "components/landing-pages/card-with-metrics";
@@ -325,7 +325,7 @@ const EngineLanding: ThirdwebNextPage = () => {
 
           <LandingCardWithMetrics
             title={
-              <Center flexDir="column" textAlign="center">
+              <div className="flex items-center justify-center flex-col text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
@@ -334,7 +334,7 @@ const EngineLanding: ThirdwebNextPage = () => {
                   thirdweb Engine powers the best onchain apps, integrating into
                   any backend at scale.
                 </Text>
-              </Center>
+              </div>
             }
             desktopColumns={3}
             TRACKING_CATEGORY={TRACKING_CATEGORY}
diff --git a/apps/dashboard/src/pages/in-app-wallets.tsx b/apps/dashboard/src/pages/in-app-wallets.tsx
index 955672cb5bf..558b4869cc8 100644
--- a/apps/dashboard/src/pages/in-app-wallets.tsx
+++ b/apps/dashboard/src/pages/in-app-wallets.tsx
@@ -1,4 +1,4 @@
-import { Center, Container, Flex } from "@chakra-ui/react";
+import { Container, Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { LandingCardWithImage } from "components/landing-pages/card-with-image";
 import { LandingDynamicSelector } from "components/landing-pages/dynamic-selector";
@@ -123,11 +123,11 @@ const EmbeddedWalletsLanding: ThirdwebNextPage = () => {
         <LandingGridSection
           desktopColumns={4}
           title={
-            <Center>
+            <div className="flex items-center justify-center">
               <Heading size="display.sm" color="white">
                 Abstract away complexity for your users
               </Heading>
-            </Center>
+            </div>
           }
         >
           <LandingCardWithImage
diff --git a/apps/dashboard/src/pages/index.tsx b/apps/dashboard/src/pages/index.tsx
index d4723da16e5..de4af8c8564 100644
--- a/apps/dashboard/src/pages/index.tsx
+++ b/apps/dashboard/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Center, Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import { HomepageFooter } from "components/footer/Footer";
 import { GetStartedSection } from "components/homepage/sections/GetStartedSection";
 import { HeroSection } from "components/homepage/sections/HeroSection";
@@ -80,7 +80,7 @@ const HomePage: ThirdwebNextPage = () => {
         <Box px={4}>
           <LandingCardWithMetrics
             title={
-              <Center flexDir="column" textAlign="center">
+              <div className="flex items-center justify-center flex-col text-center">
                 <Heading size="display.sm" color="white">
                   Trusted by the best
                 </Heading>
@@ -89,7 +89,7 @@ const HomePage: ThirdwebNextPage = () => {
                   Powering web3 apps across verticals — from onchain games to
                   creator platforms.
                 </Text>
-              </Center>
+              </div>
             }
             desktopColumns={3}
             TRACKING_CATEGORY={TRACKING_CATEGORY}
diff --git a/apps/dashboard/src/pages/learn/index.tsx b/apps/dashboard/src/pages/learn/index.tsx
index 5b0a8938b37..a3dcc50640f 100644
--- a/apps/dashboard/src/pages/learn/index.tsx
+++ b/apps/dashboard/src/pages/learn/index.tsx
@@ -1,12 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import {
-  Box,
-  Center,
-  Flex,
-  Icon,
-  LightMode,
-  SimpleGrid,
-} from "@chakra-ui/react";
+import { Box, Flex, Icon, LightMode, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageFooter } from "components/footer/Footer";
 import { NewsletterSection } from "components/homepage/sections/NewsletterSection";
@@ -188,8 +181,8 @@ const Learn: ThirdwebNextPage = () => {
             align="center"
             gap={{ base: 6, md: 8 }}
           >
-            <Center mb={6} pt={{ base: 8, lg: 24 }}>
-              <Center p={2} position="relative" mb={6}>
+            <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">
                 <Box
                   position="absolute"
                   bgGradient="linear(to-r, #F213A4, #040BBF)"
@@ -208,8 +201,8 @@ const Learn: ThirdwebNextPage = () => {
                   placeholder="empty"
                   src={WhiteLogo}
                 />
-              </Center>
-            </Center>
+              </div>
+            </div>
             <Heading as="h2" size="display.md" textAlign="center">
               Ready to learn more?
             </Heading>
diff --git a/apps/dashboard/src/pages/solutions/gaming.tsx b/apps/dashboard/src/pages/solutions/gaming.tsx
index 9cdc98656fb..936cc0e1e84 100644
--- a/apps/dashboard/src/pages/solutions/gaming.tsx
+++ b/apps/dashboard/src/pages/solutions/gaming.tsx
@@ -1,4 +1,4 @@
-import { Center, Container, Flex, SimpleGrid } from "@chakra-ui/react";
+import { Container, Flex, SimpleGrid } from "@chakra-ui/react";
 import LandingCardWithMetrics from "components/landing-pages/card-with-metrics";
 import { LandingEndCTA } from "components/landing-pages/end-cta";
 import { LandingGridSection } from "components/landing-pages/grid-section";
@@ -326,7 +326,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
 
         <LandingGridSection
           title={
-            <Center flexDir="column" textAlign="center">
+            <div className="flex items-center justify-center flex-col text-center">
               <Heading size="display.sm" color="white">
                 The complete stack for web3 games
               </Heading>
@@ -334,7 +334,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
               <Text size="body.lg" mt={6}>
                 Everything you need to build full-featured onchain games.
               </Text>
-            </Center>
+            </div>
           }
         >
           <SolutionsGamingCard
@@ -415,7 +415,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
 
         <LandingCardWithMetrics
           title={
-            <Center flexDir="column" textAlign="center">
+            <div className="flex items-center justify-center flex-col text-center">
               <Heading size="display.sm" color="white">
                 Trusted by the best
               </Heading>
@@ -424,7 +424,7 @@ const SolutionsGaming: ThirdwebNextPage = () => {
                 Powering web3 apps across verticals — from onchain games to
                 creator platforms.
               </Text>
-            </Center>
+            </div>
           }
           desktopColumns={3}
           TRACKING_CATEGORY={TRACKING_CATEGORY}