diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
index b7255adae9d..64e0bd52839 100644
--- a/src/components/ui/Table.tsx
+++ b/src/components/ui/Table.tsx
@@ -166,6 +166,18 @@ const TableCell = React.forwardRef<
 })
 TableCell.displayName = "TableCell"
 
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-body-medium", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
 const mdxTableComponents = {
   table: Table,
   td: ({ align, ...rest }) => <TableCell align={align} {...rest} />,
@@ -179,6 +191,7 @@ export {
   mdxTableComponents,
   Table,
   TableBody,
+  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
diff --git a/src/pages/gas.tsx b/src/pages/gas.tsx
index 45564a216c0..2e372181d54 100644
--- a/src/pages/gas.tsx
+++ b/src/pages/gas.tsx
@@ -1,28 +1,10 @@
-import { ComponentPropsWithRef } from "react"
+import { BaseHTMLAttributes, ComponentPropsWithRef } from "react"
 import { GetStaticProps } from "next/types"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import {
-  Box,
-  BoxProps,
-  Flex,
-  FlexProps,
-  HeadingProps,
-  Link,
-  ListItem,
-  Table,
-  TableCaption,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  UnorderedList,
-} from "@chakra-ui/react"
 
 import { BasePageProps, Lang } from "@/lib/types"
 
-import { ButtonLink } from "@/components/Buttons"
 import Callout from "@/components/Callout"
 import Card from "@/components/Card"
 import Emoji from "@/components/Emoji"
@@ -30,18 +12,29 @@ import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import GhostCard from "@/components/GhostCard"
 import HorizontalCard from "@/components/HorizontalCard"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
 import InfoBanner from "@/components/InfoBanner"
-import InlineLink from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
+import { Flex, FlexProps } from "@/components/ui/flex"
+import InlineLink, { BaseLink } from "@/components/ui/Link"
+import { ListItem, UnorderedList } from "@/components/ui/list"
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/Table"
 import { Tag } from "@/components/ui/tag"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
@@ -54,18 +47,20 @@ import infrastructureTransparentImg from "@/public/images/infrastructure_transpa
 import walletImg from "@/public/images/wallet.png"
 import whatIsEthereumImg from "@/public/images/what-is-ethereum.png"
 
-const Content = (props: BoxProps) => <Box px={8} w="full" {...props} />
+const Content = ({
+  className,
+  ...props
+}: BaseHTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("w-full px-8", className)} {...props} />
+)
 
-const Page = (props: FlexProps) => (
+const Page = ({ className, ...props }: FlexProps) => (
   <Flex
-    as={MainArticle}
-    width="full"
-    direction="column"
-    align="center"
-    my={0}
-    mx="auto"
-    {...props}
-  />
+    asChild
+    className={cn("mx-auto my-0 w-full flex-col items-center", className)}
+  >
+    <MainArticle {...props} />
+  </Flex>
 )
 
 export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
@@ -75,21 +70,18 @@ export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
   />
 )
 
-const H2 = (props: HeadingProps) => (
-  <OldHeading
-    fontSize={{ base: "2xl", md: "2rem" }}
-    lineHeight={1.4}
-    {...props}
-  />
+const H2 = ({
+  className,
+  ...props
+}: BaseHTMLAttributes<HTMLHeadingElement>) => (
+  <h2 className={cn("mb-8 mt-12 text-2xl md:text-3xl", className)} {...props} />
 )
 
-const H3 = (props: HeadingProps) => (
-  <OldHeading
-    as="h3"
-    fontSize={{ base: "xl", md: "2xl" }}
-    lineHeight={1.4}
-    {...props}
-  />
+const H3 = ({
+  className,
+  ...props
+}: BaseHTMLAttributes<HTMLHeadingElement>) => (
+  <h3 className={cn("mb-8 mt-10 text-xl md:text-2xl", className)} {...props} />
 )
 
 export const getStaticProps = (async ({ locale }) => {
@@ -157,7 +149,7 @@ const GasPage = () => {
         description={t("page-gas-meta-description")}
       />
       <div className="w-full bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20">
-        <Box pb={8}>
+        <div className="pb-8">
           <PageHero
             content={{
               subtitle: (
@@ -170,15 +162,11 @@ const GasPage = () => {
               ...heroContent,
             }}
           />
-        </Box>
+        </div>
       </div>
-      <Content mb={{ base: 16, lg: 32 }} mt={16}>
-        <Flex
-          direction={{ base: "column", lg: "row" }}
-          align={{ base: "center", lg: "flex-start" }}
-          w="full"
-        >
-          <Box flex="60%" w="full" me={{ base: "auto", lg: 2 }}>
+      <Content className="mb-16 mt-16 lg:mb-32">
+        <Flex className="w-full flex-col items-center lg:flex-row lg:items-start">
+          <div className="me-auto w-full flex-[60%] lg:me-2">
             <InfoBanner className="mb-8" title={t("page-gas-summary-title")}>
               <UnorderedList>
                 <ListItem>{t("page-gas-summary-item-1")}</ListItem>
@@ -186,36 +174,28 @@ const GasPage = () => {
                 <ListItem>{t("page-gas-summary-item-3")}</ListItem>
               </UnorderedList>
             </InfoBanner>
-            <H2 id="what-is-gas" mt={0}>
+            <H2 className="mt-0" id="what-is-gas">
               {t("page-gas-what-are-gas-fees-header")}
             </H2>
-            <Text>{t("page-gas-what-are-gas-fees-text-1")}</Text>
-            <Text>
+            <p className="mb-6">{t("page-gas-what-are-gas-fees-text-1")}</p>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-what-are-gas-fees-text-2" />
-            </Text>
-          </Box>
+            </p>
+          </div>
 
-          <Box
-            flex="50%"
-            display={["none", "none", "none", "flex"]}
-            justifyContent="center"
-            style={{ maxHeight: "450px" }}
-          >
-            <Image src={walletImg} alt="A robot" objectFit="contain" />
-          </Box>
+          <div className="hidden max-h-[450px] flex-[50%] justify-center lg:flex">
+            <TwImage src={walletImg} alt="A robot" className="object-contain" />
+          </div>
         </Flex>
       </Content>
-      <Content mb={{ base: 16, lg: 32 }}>
-        <Flex
-          direction={{ base: "column", lg: "row" }}
-          align="center"
-          justify="center"
-          width="full"
-        >
-          <Box w="full">
-            <H2 mt={0}>{t("page-gas-how-do-i-pay-less-gas-header")}</H2>
-            <Text>{t("page-gas-how-do-i-pay-less-gas-text")}</Text>
-            <Flex flexWrap="wrap" my={{ base: 4, lg: 0 }} gap={8}>
+      <Content className="mb-16 lg:mb-32">
+        <Flex className="w-full flex-col items-center justify-center lg:flex-row">
+          <div className="w-full">
+            <H2 className="mt-0">
+              {t("page-gas-how-do-i-pay-less-gas-header")}
+            </H2>
+            <p className="mb-6">{t("page-gas-how-do-i-pay-less-gas-text")}</p>
+            <Flex className="my-4 flex-wrap gap-8 lg:my-0">
               <StyledCard
                 emoji=":alarm_clock:"
                 title={t("page-gas-how-do-i-pay-less-gas-card-1-title")}
@@ -237,90 +217,88 @@ const GasPage = () => {
                   "page-gas-how-do-i-pay-less-gas-card-3-description"
                 )}
               >
-                <ButtonLink w="fit-content" href="/layer-2/">
+                <ButtonLink className="w-fit" href="/layer-2/">
                   {t("page-gas-try-layer-2")}
                 </ButtonLink>
               </StyledCard>
             </Flex>
-          </Box>
+          </div>
         </Flex>
       </Content>
-      <Content mb={{ base: 16, lg: 32 }}>
-        <Flex
-          direction={{ base: "column", lg: "row" }}
-          align="flex-start"
-          width="full"
-        >
-          <Box
-            w="full"
-            ms={{ base: "auto", lg: 0 }}
-            me={{ base: "auto", lg: 16 }}
-            flex="60%"
-          >
-            <H3 mt={0}>{t("page-gas-what-causes-high-gas-fees-header")}</H3>
-            <Text>{t("page-gas-what-causes-high-gas-fees-text-1")}</Text>
-            <Text>
+      <Content className="mb-16 lg:mb-32">
+        <Flex className="w-full flex-col items-start lg:flex-row">
+          <div className="me-auto ms-auto w-full flex-[60%] lg:me-16 lg:ms-0">
+            <H3 className="mt-0">
+              {t("page-gas-what-causes-high-gas-fees-header")}
+            </H3>
+            <p className="mb-6">
+              {t("page-gas-what-causes-high-gas-fees-text-1")}
+            </p>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-what-causes-high-gas-fees-text-2" />
-            </Text>
-            <Text>{t("page-gas-what-causes-high-gas-fees-text-3")}</Text>
-            <Text>
+            </p>
+            <p className="mb-6">
+              {t("page-gas-what-causes-high-gas-fees-text-3")}
+            </p>
+            <p className="mb-6">
               {t("page-gas-want-to-dive-deeper")}{" "}
               <InlineLink href="/developers/docs/gas/">
                 {t("page-gas-check-out-the-developer-docs")}
               </InlineLink>
-            </Text>
-          </Box>
+            </p>
+          </div>
           <GhostCard className="mt-16 max-w-[640px] self-center md:w-2/5 lg:mt-2">
             <Emoji text=":cat:" className="text-5xl" />
             <H3>{t("page-gas-attack-of-the-cryptokitties-header")}</H3>
-            <Text>{t("page-gas-attack-of-the-cryptokitties-text")}</Text>
+            <p className="mb-6">
+              {t("page-gas-attack-of-the-cryptokitties-text")}
+            </p>
           </GhostCard>
         </Flex>
       </Content>
-      <Content mb={{ base: 16, lg: 32 }}>
-        <Flex
-          direction={{ base: "column", lg: "row" }}
-          align="flex-start"
-          width="full"
-          me={{ base: 0, lg: 8 }}
-        >
-          <Box w="full" me={{ base: "auto", lg: "8" }}>
-            <Box>
-              <H2 mt={0}>{t("page-gas-why-do-we-need-gas-header")}</H2>
-              <Text>{t("page-gas-why-do-we-need-gas-text")}</Text>
-            </Box>
+      <Content className="mb-16 lg:mb-32">
+        <Flex className="me-0 w-full flex-col items-start lg:me-8 lg:flex-row">
+          <div className="me-auto w-full lg:me-8">
+            <div>
+              <H2 className="mt-0">
+                {t("page-gas-why-do-we-need-gas-header")}
+              </H2>
+              <p className="mb-6">{t("page-gas-why-do-we-need-gas-text")}</p>
+            </div>
             {benefits.map((benefit, index) => (
-              <Box key={index} minWidth="full" my={2}>
+              <div key={index} className="my-2 min-w-full">
                 <HorizontalCard
                   key={benefit.emoji}
                   emoji={benefit.emoji}
                   description={benefit.description}
                 />
-              </Box>
+              </div>
             ))}
-          </Box>
-          <Box w="full">
-            <Image
+          </div>
+          <div className="w-full">
+            <TwImage
+              className="object-contain"
               src={ethImg}
               alt=""
               width={600}
-              style={{ objectFit: "contain" }}
             />
-          </Box>
+          </div>
         </Flex>
       </Content>
-      <Content mb={{ base: 16, lg: 32 }}>
-        <Flex direction={{ base: "column", lg: "row" }} align="flex-start">
-          <Box w="full" me={{ base: "auto", lg: 8 }}>
-            <Flex alignItems="flex-start">
-              <H2 mt={0}>{t("page-gas-how-is-gas-calculated-header")}</H2>
+      <Content className="mb-16 lg:mb-32">
+        <Flex className="flex-col items-start lg:flex-row">
+          <div className="me-auto w-full lg:me-8">
+            <Flex className="items-start">
+              <H2 className="mt-0">
+                {t("page-gas-how-is-gas-calculated-header")}
+              </H2>
 
-              <Tag status="warning" className="ms-4 mt-1.5">
+              <Tag className="ms-4 mt-0.5" status="warning">
                 {t("page-gas-advanced")}
               </Tag>
             </Flex>
-            <Text>{t("page-gas-how-is-gas-calculated-text-1")}</Text>
-            <UnorderedList ms={6} spacing={3}>
+            <p className="mb-6">{t("page-gas-how-is-gas-calculated-text-1")}</p>
+            <UnorderedList className="ms-6 gap-3">
               <ListItem>
                 <Translation id="page-gas:page-gas-how-is-gas-calculated-item-1" />
               </ListItem>
@@ -329,83 +307,89 @@ const GasPage = () => {
               </ListItem>
               <ListItem>
                 <Translation id="page-gas:page-gas-how-is-gas-calculated-item-3" />
-                <UnorderedList ms={6} spacing={3} styleType="none">
-                  <ListItem color="body.medium" fontSize="sm">
+                <UnorderedList className="ms-6 list-none gap-3">
+                  <ListItem className="text-sm text-body-medium">
                     <Translation id="page-gas:page-gas-how-is-gas-calculated-list-item-1" />
                   </ListItem>
                 </UnorderedList>
               </ListItem>
             </UnorderedList>
-            <Text>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-how-is-gas-calculated-text-2" />
-            </Text>
-          </Box>
-          <Table maxW={"100%"} minW={"auto"}>
-            <TableCaption fontSize="sm">
+            </p>
+          </div>
+          <Table className="min-w-[auto] max-w-full">
+            <TableCaption className="caption-bottom">
               <Translation id="page-gas:page-gas-table-figure" />
             </TableCaption>
-            <Thead>
-              <Tr>
-                <Th>{t("page-gas-table-header-1")}</Th>
-                <Th>{t("page-gas-table-header-2")}</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              <Tr>
-                <Td>{t("page-gas-table-item-1-transaction-type")}</Td>
-                <Td>21,000</Td>
-              </Tr>
-              <Tr>
-                <Td>{t("page-gas-table-item-2-transaction-type")}</Td>
-                <Td>65,000</Td>
-              </Tr>
-              <Tr>
-                <Td>{t("page-gas-table-item-3-transaction-type")}</Td>
-                <Td>84,904</Td>
-              </Tr>
-              <Tr>
-                <Td>{t("page-gas-table-item-4-transaction-type")}</Td>
-                <Td>184,523</Td>
-              </Tr>
-            </Tbody>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("page-gas-table-header-1")}</TableHead>
+                <TableHead>{t("page-gas-table-header-2")}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>
+                  {t("page-gas-table-item-1-transaction-type")}
+                </TableCell>
+                <TableCell>21,000</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  {t("page-gas-table-item-2-transaction-type")}
+                </TableCell>
+                <TableCell>65,000</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  {t("page-gas-table-item-3-transaction-type")}
+                </TableCell>
+                <TableCell>84,904</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  {t("page-gas-table-item-4-transaction-type")}
+                </TableCell>
+                <TableCell>184,523</TableCell>
+              </TableRow>
+            </TableBody>
           </Table>
         </Flex>
       </Content>
       <Content>
-        <H2 mt="0">{t("page-gas-faq-header")}</H2>
+        <H2 className="mt-0">{t("page-gas-faq-header")}</H2>
         {/* MaxWidth will be enforced by FAQ component once implemented */}
-        <Box maxWidth="832px">
+        <div className="max-w-[832px]">
           <ExpandableCard title={t("page-gas-faq-question-1-q")}>
-            <Text>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-faq-question-1-a-1" />
-            </Text>
-            <Text>
+            </p>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-faq-question-1-a-2" />
-            </Text>
+            </p>
           </ExpandableCard>
           <ExpandableCard title={t("page-gas-faq-question-2-q")}>
-            <Text>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-faq-question-2-a-1" />
-            </Text>
-            <Link href="/eth/">
+            </p>
+            <BaseLink href="/eth/">
               <Translation id="page-gas:page-gas-faq-question-2-a-2" />
-            </Link>
+            </BaseLink>
           </ExpandableCard>
           <ExpandableCard title={t("page-gas-faq-question-3-q")}>
-            <Text>
+            <p className="mb-6">
               <Translation id="page-gas:page-gas-faq-question-3-a-1" />
-            </Text>
-            <Text>{t("page-gas-faq-question-3-a-2")}</Text>
+            </p>
+            <p className="mb-6">{t("page-gas-faq-question-3-a-2")}</p>
           </ExpandableCard>
-        </Box>
+        </div>
       </Content>
       <Divider />
       <Content>
-        <Flex wrap="wrap" mx={-4}>
-          <Box
-            as={Callout}
-            flex="1 1 416px"
-            minH="full"
+        <Flex className="-mx-4 flex-wrap">
+          <Callout
+            className="min-h-full flex-[1_1_416px]"
             image={whatIsEthereumImg}
             titleKey={t("page-gas-how-do-i-pay-less-gas-card-3-title")}
             alt=""
@@ -413,16 +397,14 @@ const GasPage = () => {
               "page-gas-how-do-i-pay-less-gas-card-3-description"
             )}
           >
-            <Box>
+            <div>
               <ButtonLink href="/layer-2/">
                 {t("page-gas-use-layer-2")}
               </ButtonLink>
-            </Box>
-          </Box>
-          <Box
-            as={Callout}
-            flex="1 1 416px"
-            minH="full"
+            </div>
+          </Callout>
+          <Callout
+            className="min-h-full flex-[1_1_416px]"
             image={dogeComputerImg}
             titleKey={t("page-community:page-community-explore-dapps-title")}
             alt={t("page-community:page-community-explore-dapps-alt")}
@@ -430,12 +412,12 @@ const GasPage = () => {
               "page-community:page-community-explore-dapps-description"
             )}
           >
-            <Box>
+            <div>
               <ButtonLink href="/dapps/">
                 {t("page-community:page-community-explore-dapps")}
               </ButtonLink>
-            </Box>
-          </Box>
+            </div>
+          </Callout>
         </Flex>
       </Content>
       <Content>