diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
index bac9835b312..aab2ee3fd38 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
@@ -1,6 +1,6 @@
+import { Button } from "@/components/ui/button";
 import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
-import { Button, Text } from "tw-components";
 import { useClaimConditionsFormContext } from "..";
 import { CustomFormControl } from "../common";
 
@@ -115,13 +115,13 @@ export const ClaimerSelection = () => {
           >
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
-              colorScheme="purple"
-              isDisabled={disabledSnapshotButton}
-              borderRadius="md"
+              variant="primary"
+              disabled={disabledSnapshotButton}
+              className="gap-2 rounded-md"
               onClick={() => setOpenIndex(phaseIndex)}
-              rightIcon={<UploadIcon className="size-4" />}
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
+              <UploadIcon className="size-4" />
             </Button>
 
             <Flex
@@ -136,14 +136,14 @@ export const ClaimerSelection = () => {
               }}
               ml={2}
             >
-              <Text size="body.sm" color="inherit">
+              <p>
                 ●{" "}
                 <strong>
                   {field.snapshot?.length} address
                   {field.snapshot?.length === 1 ? "" : "es"}
                 </strong>{" "}
                 in snapshot
-              </Text>
+              </p>
             </Flex>
           </Flex>
         ) : (
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx
index b7bd92ff6d0..cc577f6e1a7 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx
@@ -2,7 +2,6 @@
 
 import { useWalletNFTs } from "@3rdweb-sdk/react";
 import type { ThirdwebContract } from "thirdweb";
-import { Text } from "tw-components";
 import { NFTCards } from "../../_components/NFTCards";
 
 interface NftsOwnedProps {
@@ -35,8 +34,8 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({ contract }) => {
       trackingCategory="account_nfts_owned"
     />
   ) : isWalletNFTsLoading ? null : error ? (
-    <Text>Failed to fetch NFTs for this account: {error}</Text>
+    <p>Failed to fetch NFTs for this account: {error}</p>
   ) : (
-    <Text>This account doesn&apos;t own any NFTs.</Text>
+    <p>This account doesn&apos;t own any NFTs.</p>
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx
index 309bc6719a3..cf6626210d4 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Tooltip } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import type { ThirdwebContract } from "thirdweb";
@@ -9,7 +11,6 @@ import {
   useReadContract,
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
-import { Button, Card, Text } from "tw-components";
 
 interface CreateAccountButtonProps {
   contract: ThirdwebContract;
@@ -51,8 +52,8 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
     return (
       <Tooltip
         label={
-          <Card py={2} px={4} bgColor="backgroundHighlight">
-            <Text>You can only initialize one account per EOA.</Text>
+          <Card className="bg-card px-4 py-2">
+            <p>You can only initialize one account per EOA.</p>
           </Card>
         }
         bg="transparent"
@@ -62,7 +63,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
         placement="right"
         shouldWrapChildren
       >
-        <Button colorScheme="primary" isDisabled>
+        <Button variant="primary" disabled>
           Account Created
         </Button>
       </Tooltip>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx
index d9a86ef36b9..d010079b64d 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -18,7 +19,6 @@ import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, Text } from "tw-components";
 import {
   type AirdropAddressInput,
   AirdropUpload,
@@ -118,12 +118,8 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
             <Flex direction={{ base: "column", md: "row" }} gap={4}>
               <Sheet open={open} onOpenChange={setOpen}>
                 <SheetTrigger asChild>
-                  <Button
-                    colorScheme="primary"
-                    borderRadius="md"
-                    rightIcon={<UploadIcon className="size-5" />}
-                  >
-                    Upload addresses
+                  <Button variant="primary" className="rounded-md">
+                    Upload addresses <UploadIcon className="mr-2 size-5" />
                   </Button>
                 </SheetTrigger>
                 <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
@@ -149,18 +145,18 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 color={addresses.length === 0 ? "orange.500" : "green.500"}
               >
                 {addresses.length > 0 && (
-                  <Text size="body.sm" color="inherit">
+                  <p>
                     ● <strong>{addresses.length} addresses</strong> ready to be
                     airdropped
-                  </Text>
+                  </p>
                 )}
               </Flex>
             </Flex>
           </div>
-          <Text>
+          <p>
             You can airdrop to a maximum of 250 addresses at a time. If you have
             more, please do it in multiple transactions.
-          </Text>
+          </p>
           <TransactionButton
             txChainID={contract.chain.id}
             transactionCount={1}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index 2e024736687..dcf673165d7 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -27,8 +27,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import {} from "tw-components";
-import { Button, Card, Heading, Text } from "tw-components";
+import { Button, Card } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
@@ -104,10 +103,10 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
 
   if (!nft) {
     return (
-      <Text>
+      <p>
         No NFT found with token ID {tokenId}. Please check the token ID and try
         again.
-      </Text>
+      </p>
     );
   }
 
@@ -182,7 +181,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                   label={
                     tb.isDisabled ? (
                       <Card py={2} px={4} bgColor="backgroundHighlight">
-                        <Text size="label.sm">{tb.disabledText}</Text>
+                        <p>{tb.disabledText}</p>
                       </Card>
                     ) : (
                       ""
@@ -214,7 +213,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             <Card as={Flex} flexDir="column" gap={3}>
               <SimpleGrid rowGap={3} columns={12} placeItems="center left">
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token ID</Heading>
+                  <p className="font-semibold">Token ID</p>
                 </GridItem>
                 <GridItem colSpan={8}>
                   <CopyTextButton
@@ -228,7 +227,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.owner && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Owner</Heading>
+                      <p className="font-semibold">Owner</p>
                     </GridItem>
                     <GridItem colSpan={8}>
                       <WalletAddress address={nft.owner} />
@@ -236,23 +235,21 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token Standard</Heading>
+                  <p className="font-semibold">Token Standard</p>
                 </GridItem>
                 <GridItem colSpan={8}>{nft.type}</GridItem>
                 {nft.type !== "ERC721" && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Supply</Heading>
+                      <p className="font-semibold">Supply</p>
                     </GridItem>
                     <GridItem colSpan={8}>
-                      <Text fontFamily="mono" size="body.md">
-                        {nft.supply.toString()}
-                      </Text>
+                      <p>{nft.supply.toLocaleString("en-US")}</p>
                     </GridItem>
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token URI</Heading>
+                  <p className="font-semibold">Token URI</p>
                 </GridItem>
                 <GridItem
                   colSpan={8}
@@ -275,7 +272,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.metadata.image && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Media URI</Heading>
+                      <p className="font-semibold">Media URI</p>
                     </GridItem>
                     <GridItem
                       colSpan={8}
@@ -301,7 +298,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             </Card>
             {properties ? (
               <Card as={Flex} flexDir="column" gap={4}>
-                <Heading size="label.md">Attributes</Heading>
+                <p className="font-semibold">Attributes</p>
                 {Array.isArray(properties) &&
                 String(properties[0]?.value) !== "undefined" ? (
                   <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
index 05bce7cb136..f077f07a5ee 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
@@ -3,7 +3,6 @@ import {
   useEngineSystemHealth,
   useEngineSystemMetrics,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Text } from "tw-components";
 
 interface EngineSystemProps {
   instance: EngineInstance;
@@ -17,7 +16,7 @@ export const EngineSystem: React.FC<EngineSystemProps> = ({ instance }) => {
   }
 
   return (
-    <Text fontSize="x-small" fontFamily="mono" opacity={0.5} gap={0}>
+    <p className="gap-0 font-mono text-xs opacity-50">
       Version: {healthQuery.data.engineVersion ?? "..."}
       <br />
       Enabled: {healthQuery.data.features?.join(", ")}
@@ -25,6 +24,6 @@ export const EngineSystem: React.FC<EngineSystemProps> = ({ instance }) => {
       CPU: {metricsQuery.data?.data?.cpu?.toFixed(2) ?? "..."}%
       <br />
       Memory: {metricsQuery.data?.data?.memory?.toFixed(0) ?? "..."}MB
-    </Text>
+    </p>
   );
 };
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx
index 1c4ff6582ef..578e1893d4e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import {} from "@/components/ui/dropdown-menu";
-import {} from "@/components/ui/select";
 import { Layers3 } from "lucide-react";
 import Link from "next/link";
 
diff --git a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
index 641b24f2671..bd5bcab863c 100644
--- a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
+++ b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
@@ -7,7 +7,6 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Heading } from "tw-components";
 import type { SourceFile } from "../types";
 
 interface SourcesAccordionProps {
@@ -33,7 +32,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">ABI</Heading>
+                <p className="font-semibold">ABI</p>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>
@@ -58,7 +57,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">{signature.filename}</Heading>
+                <p className="font-semibold">{signature.filename}</p>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>
diff --git a/apps/dashboard/src/components/devRelEvents/AmbassadorCards.tsx b/apps/dashboard/src/components/devRelEvents/AmbassadorCards.tsx
index 2d00d7e76b4..26273a2d1da 100644
--- a/apps/dashboard/src/components/devRelEvents/AmbassadorCards.tsx
+++ b/apps/dashboard/src/components/devRelEvents/AmbassadorCards.tsx
@@ -1,7 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import type { StaticImageData } from "next/image";
-import { Text } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface AmbassadorProps {
@@ -41,7 +40,7 @@ export const AmbassadorCard: ComponentWithChildren<AmbassadorProps> = ({
         lineHeight={1.6}
         textAlign="center"
       >
-        <Text size="body.lg">{children}</Text>
+        <p>{children}</p>
       </Flex>
     </Flex>
   );
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
index 6c9ed3b5769..a9c75bca356 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -28,7 +28,6 @@ import {
 import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
-import { Text } from "tw-components";
 
 const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
   const img = useImageFileOrUrl(
@@ -174,9 +173,9 @@ export const BatchTable: React.FC<BatchTableProps> = ({
                 {headerGroup.headers.map((column, i) => (
                   // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                   <Th {...column.getHeaderProps()} border="none" key={i}>
-                    <Text as="label" size="label.sm" color="faded">
+                    <p className="text-muted-foreground">
                       {column.render("Header")}
-                    </Text>
+                    </p>
                   </Th>
                 ))}
               </Tr>
@@ -227,10 +226,10 @@ export const BatchTable: React.FC<BatchTableProps> = ({
               icon={<ChevronLeftIcon className="size-4" />}
               onClick={() => previousPage()}
             />
-            <Text whiteSpace="nowrap">
+            <p className="whitespace-nowrap">
               Page <strong>{pageIndex + 1}</strong> of{" "}
               <strong>{pageOptions.length}</strong>
-            </Text>
+            </p>
             <IconButton
               isDisabled={!canNextPage}
               aria-label="next page"
diff --git a/apps/dashboard/src/pages/mission.tsx b/apps/dashboard/src/pages/mission.tsx
index a37ea91fbd6..864638f6453 100644
--- a/apps/dashboard/src/pages/mission.tsx
+++ b/apps/dashboard/src/pages/mission.tsx
@@ -12,7 +12,6 @@ import ReasonSection from "components/mission/ReasonSection";
 import ReasonWeb3Section from "components/mission/ReasonWeb3Section";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import { PageId } from "page-id";
-import { Text } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
 const TRACKING_CATEGORY = "mission";
@@ -108,16 +107,9 @@ const Mission: ThirdwebNextPage = () => {
                 maxW="80%"
               />
 
-              <Text
-                size="body.xl"
-                fontWeight={600}
-                textAlign="center"
-                mt={{ base: "28px", md: "32px" }}
-                color="#fff"
-                fontSize={{ base: "20px", md: "32px" }}
-              >
+              <p className="mt-7 text-center font-semibold text-[28px] text-white md:mt-8 md:text-[32px]">
                 solves for both.
-              </Text>
+              </p>
             </Box>
           </Container>
         </Container>
diff --git a/apps/dashboard/src/pages/rpc-edge.tsx b/apps/dashboard/src/pages/rpc-edge.tsx
index 15dabb6b1ac..a899464cd47 100644
--- a/apps/dashboard/src/pages/rpc-edge.tsx
+++ b/apps/dashboard/src/pages/rpc-edge.tsx
@@ -1,3 +1,4 @@
+import { Card } from "@/components/ui/card";
 import { Container, Flex } from "@chakra-ui/react";
 import { LandingEndCTA } from "components/landing-pages/end-cta";
 import { LandingGridSection } from "components/landing-pages/grid-section";
@@ -8,7 +9,6 @@ import { LandingLayout } from "components/landing-pages/layout";
 import { LandingSectionHeading } from "components/landing-pages/section-heading";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import { PageId } from "page-id";
-import { Card } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
 const TRACKING_CATEGORY = "rpc-edge-landing";
@@ -95,31 +95,31 @@ const RPCEdgeLanding: ThirdwebNextPage = () => {
           />
         </LandingGridSection>
         <LandingGridSection desktopColumns={5}>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-verified.svg")}
               title="High data reliability"
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-automatic-file-upload.svg")}
               title="High request-per-second throughput"
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-efficient.svg")}
               title="High uptime (99.9% infrastructure SLAs)"
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-global.svg")}
               title="Intelligent routing with global edge"
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-evm.svg")}
               title="Any EVM Chain"
@@ -135,21 +135,21 @@ const RPCEdgeLanding: ThirdwebNextPage = () => {
             />
           }
         >
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-game.svg")}
               title="Massively-Multiplayer Games"
               description="Scale to millions of users across the world with global RPC edge caching."
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-protocol.svg")}
               title="DeFi Protocols"
               description="Build decentralized finance platforms with maximum security — such as onchain exchanges, lending protocols, and staking platforms."
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-marketplace.svg")}
               title="Brand Activations"
diff --git a/apps/dashboard/src/pages/sdk.tsx b/apps/dashboard/src/pages/sdk.tsx
index 49ef8e84130..34e5023eb49 100644
--- a/apps/dashboard/src/pages/sdk.tsx
+++ b/apps/dashboard/src/pages/sdk.tsx
@@ -9,8 +9,8 @@ import { ProductLearnMoreCard } from "components/product-pages/common/ProductLea
 import { ProductPage } from "components/product-pages/common/ProductPage";
 import { ProductSection } from "components/product-pages/common/ProductSection";
 import { getAbsoluteUrl } from "lib/vercel-utils";
+import Link from "next/link";
 import { PageId } from "page-id";
-import { Link } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
 const SDK_GUIDES = [
@@ -135,27 +135,30 @@ const Web3SDK: ThirdwebNextPage = () => {
                 Interact with your contracts from your app in the programming
                 language that you’re familiar with our{" "}
                 <Link
-                  color="blue.500"
+                  className="text-link-foreground hover:text-foreground"
                   href="https://portal.thirdweb.com/typescript/v5/react"
                 >
                   React
                 </Link>
                 ,{" "}
                 <Link
-                  color="blue.500"
+                  className="text-link-foreground hover:text-foreground"
                   href="https://portal.thirdweb.com/react-native/latest"
                 >
                   ReactNative
                 </Link>
                 ,{" "}
                 <Link
-                  color="blue.500"
+                  className="text-link-foreground hover:text-foreground"
                   href="https://portal.thirdweb.com/typescript/latest"
                 >
                   TypeScript
                 </Link>
                 ,{" "}
-                <Link color="blue.500" href="https://portal.thirdweb.com/unity">
+                <Link
+                  className="text-link-foreground hover:text-foreground"
+                  href="https://portal.thirdweb.com/unity"
+                >
                   Unity
                 </Link>{" "}
                 SDKs.
diff --git a/apps/dashboard/src/pages/storage.tsx b/apps/dashboard/src/pages/storage.tsx
index da7316e8a7d..c94f3b547e3 100644
--- a/apps/dashboard/src/pages/storage.tsx
+++ b/apps/dashboard/src/pages/storage.tsx
@@ -1,3 +1,4 @@
+import { Card } from "@/components/ui/card";
 import { Container, Flex } from "@chakra-ui/react";
 import { LandingEndCTA } from "components/landing-pages/end-cta";
 import { LandingGridSection } from "components/landing-pages/grid-section";
@@ -7,7 +8,6 @@ import { LandingIconSectionItem } from "components/landing-pages/icon-section-it
 import { LandingLayout } from "components/landing-pages/layout";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import { PageId } from "page-id";
-import { Card } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
 const TRACKING_CATEGORY = "storage-landing";
@@ -108,21 +108,21 @@ const InteractLanding: ThirdwebNextPage = () => {
           />
         </LandingGridSection>
         <LandingGridSection>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-image.svg")}
               title="All file types supported"
               description="Includes 3D images, video, music, HTML, text, etc."
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-automatic-file-upload.svg")}
               title="Faster file uploads"
               description="Optimized upload latency to increase speed of file uploads."
             />
           </Card>
-          <Card p={8}>
+          <Card className="bg-transparent p-8">
             <LandingIconSectionItem
               icon={require("../../public/assets/product-pages-icons/infra/icon-manage.svg")}
               title="Manage pinned files"