diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
index f69edf9a3ad..05b18512967 100644
--- a/src/pages/staking/index.tsx
+++ b/src/pages/staking/index.tsx
@@ -1,8 +1,7 @@
-import { ReactNode } from "react"
+import { type HTMLAttributes, ReactNode } from "react"
 import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { Box, Flex, Grid, HeadingProps, useToken } from "@chakra-ui/react"
 
 import type {
   BasePageProps,
@@ -14,27 +13,30 @@ import type {
 } from "@/lib/types"
 
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
-import ButtonLink, { ButtonLinkProps } from "@/components/Buttons/ButtonLink"
+import ButtonLink, {
+  type ButtonLinkProps,
+} from "@/components/Buttons/ButtonLink"
 import Card from "@/components/Card"
 import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import LeftNavBar from "@/components/LeftNavBar"
-import InlineLink from "@/components/Link"
 import {
   ContentContainer,
   MobileButton,
   MobileButtonDropdown,
   Page,
 } from "@/components/MdComponents"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
 import StakingHierarchy from "@/components/Staking/StakingHierarchy"
 import StakingStatsBox from "@/components/Staking/StakingStatsBox"
 import Translation from "@/components/Translation"
+import { Flex, Stack, VStack } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+import { ListItem, UnorderedList } from "@/components/ui/list"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { runOnlyOnce } from "@/lib/utils/runOnlyOnce"
@@ -54,85 +56,40 @@ type BenefitsType = {
 }
 
 const PageContainer = (props: ChildOnlyProp) => (
-  <Flex flexDir="column" alignItems="center" w="full" m="0 auto" {...props} />
+  <VStack className="mx-auto w-full gap-0" {...props} />
 )
 
 const Divider = () => (
-  <Box
-    my={8}
-    w="10%"
-    height="0.25rem"
-    bgColor="homeDivider"
-    alignSelf="center"
-  />
+  <div className="my-8 h-1 w-[10%] self-center bg-primary-high-contrast" />
 )
 
 const HeroStatsWrapper = (props: ChildOnlyProp) => (
-  <Flex
-    direction="column"
-    alignItems="center"
-    bg="layer2Gradient"
-    pb={8}
-    w="full"
-    {...props}
-  />
+  <VStack className="w-full gap-0 bg-main-gradient" {...props} />
 )
 
 const ComparisonGrid = (props: ChildOnlyProp) => {
-  const gridAreas = {
-    base: `"solo-title"
-        "solo-rewards"
-        "solo-risks"
-        "solo-reqs"
-        "solo-cta"
-        "saas-title"
-        "saas-rewards"
-        "saas-risks"
-        "saas-reqs"
-        "saas-cta"
-        "pool-title"
-        "pool-rewards"
-        "pool-risks"
-        "pool-reqs"
-        "pool-cta";`,
-    xl: `"solo-title saas-title pool-title"
-        "solo-rewards saas-rewards pool-rewards"
-        "solo-risks saas-risks pool-risks"
-        "solo-reqs saas-reqs pool-reqs"
-        "solo-cta saas-cta pool-cta"`,
-  }
   return (
-    <Grid
-      columnGap={12}
-      gridAutoRows="minmax(64px, auto)"
-      gridTemplateColumns={{ base: "1fr", xl: "repeat(3, 1fr)" }}
-      gridTemplateAreas={gridAreas}
-      sx={{
-        h4: {
-          color: "#787878",
-        },
-      }}
+    <div
+      className="grid auto-rows-[minmax(64px,_auto)] grid-cols-[1fr] gap-x-12 [grid-template-areas:'solo-title''solo-rewards''solo-risks''solo-reqs''solo-cta''saas-title''saas-rewards''saas-risks''saas-reqs''saas-cta''pool-title''pool-rewards''pool-risks''pool-reqs''pool-cta'] xl:grid-cols-[repeat(3,_1fr)] xl:[grid-template-areas:'solo-title_saas-title_pool-title''solo-rewards_saas-rewards_pool-rewards''solo-risks_saas-risks_pool-risks''solo-reqs_saas-reqs_pool-reqs''solo-cta_saas-cta_pool-cta'] [&_h4]:text-[#787878]"
       {...props}
-    ></Grid>
+    />
   )
 }
 
-const H2 = (props: HeadingProps) => (
-  <OldHeading
-    fontSize={{ base: "2xl", md: "2rem" }}
-    lineHeight={1.4}
-    mt={0}
-    {...props}
-  />
+const H2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <h2 className="mb-8 mt-0 text-2xl leading-xs md:text-[2rem]" {...props} />
 )
 
 const ColorH3 = ({
   color,
   children,
-}: Pick<HeadingProps, "color" | "children">) => (
-  <OldHeading as="h3" fontSize="2xl" color={color}>
-    {children}
-  </OldHeading>
+}: {
+  color: `text-${string} dark:text-${string}`
+  children: ReactNode
+}) => <h3 className={cn("my-8", color)}>{children}</h3>
+
+const H4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <h4 className="my-8" {...props} />
 )
 
 const StyledButtonLink = ({
@@ -143,11 +100,7 @@ const StyledButtonLink = ({
 )
 
 const CardGrid = (props: ChildOnlyProp) => (
-  <Grid
-    gap={8}
-    templateColumns={{ base: "1fr", lg: "repeat(3, 1fr)" }}
-    {...props}
-  />
+  <div className="grid grid-cols-1 gap-8 lg:grid-cols-3" {...props} />
 )
 
 const StyledCard = (props: {
@@ -239,9 +192,6 @@ const StakingPage = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { t } = useTranslation("page-staking")
 
-  // TODO: Replace with direct token implementation after UI migration is completed
-  const lgBp = useToken("breakpoints", "lg")
-
   const heroContent = {
     title: t("page-staking-hero-title"),
     header: t("page-staking-hero-header"),
@@ -382,23 +332,23 @@ const StakingPage = ({
         <StakingStatsBox data={data} />
       </HeroStatsWrapper>
       <Page>
-        {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */}
         <LeftNavBar
           dropdownLinks={dropdownLinks}
           tocItems={tocArray}
-          hideBelow={lgBp}
+          // TODO: Remove bang after this component is migrated to Tailwind
+          className="max-lg:!hidden"
         />
         <ContentContainer>
-          <Flex direction="column" gap={16} mt={{ base: 16, lg: 0 }}>
-            <Box>
+          <Flex className="mt-16 flex-col gap-16 lg:mt-0">
+            <div>
               <H2 id={tocItems.whatIsStaking.id}>
                 {tocItems.whatIsStaking.title}
               </H2>
-              <Text>
+              <p>
                 <Translation id="page-staking:page-staking-description" />
-              </Text>
-            </Box>
-            <Box>
+              </p>
+            </div>
+            <div>
               <H2 id={tocItems.whyStakeYourEth.id}>
                 {tocItems.whyStakeYourEth.title}
               </H2>
@@ -418,234 +368,203 @@ const StakingPage = ({
                   )
                 )}
               </CardGrid>
-            </Box>
-            <Box>
+            </div>
+            <div>
               <H2 id={tocItems.howToStakeYourEth.id}>
                 {tocItems.howToStakeYourEth.title}
               </H2>
-              <Text>{t("page-staking-section-why-p1")}</Text>
-              <Text>{t("page-staking-section-why-p2")}</Text>
-            </Box>
+              <Stack className="gap-[1.45rem]">
+                <p>{t("page-staking-section-why-p1")}</p>
+                <p>{t("page-staking-section-why-p2")}</p>
+              </Stack>
+            </div>
             <StakingHierarchy />
-            <Box>
-              <p style={{ marginTop: "1rem" }}>
+            <div>
+              <p className="mt-4">
                 <Translation id="page-staking:page-staking-hierarchy-subtext" />
               </p>
-            </Box>
+            </div>
             <Divider />
-            <Box>
+            <div>
               <H2 id={tocItems.comparisonOfOptions.id}>
                 {tocItems.comparisonOfOptions.title}
               </H2>
-              <Text>{t("page-staking-section-comparison-subtitle")}</Text>
+              <p className="mb-[1.45rem]">
+                {t("page-staking-section-comparison-subtitle")}
+              </p>
               <ComparisonGrid>
-                <ColorH3 color="stakingGold">
+                <ColorH3 color="text-[#be8d10] dark:text-[#f2bb2f]">
                   {t("page-staking-dropdown-solo")}
                 </ColorH3>
-                <div
-                  style={{
-                    gridArea: "solo-rewards",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-rewards-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:solo-rewards]">
+                  <H4>{t("page-staking-section-comparison-rewards-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-rewards-li1")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-rewards-li2")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-rewards-li3")}
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div
-                  style={{
-                    gridArea: "solo-risks",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-risks-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:solo-risks]">
+                  <H4>{t("page-staking-section-comparison-risks-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-risks-li1")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-risks-li2")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-solo-risks-li3")}
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "solo-reqs" }}>
-                  <OldHeading as="h4" size="md">
+                <div className="[grid-area:solo-reqs]">
+                  <H4>
                     {t("page-staking-section-comparison-requirements-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                  </H4>
+                  <UnorderedList>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-solo-requirements-li1" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-solo-requirements-li2" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-solo-requirements-li3" />
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "solo-cta" }}>
+                <div className="[grid-area:solo-cta]">
                   <StyledButtonLink href="/staking/solo/">
                     {t("page-staking-more-on-solo")}
                   </StyledButtonLink>
                 </div>
-                <ColorH3 color="stakingGreen">
+                <ColorH3 color="text-[#129e5b] dark:text-[#49de96]">
                   {t("page-staking-dropdown-saas")}
                 </ColorH3>
-                <div
-                  style={{
-                    gridArea: "saas-rewards",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-rewards-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:saas-rewards]">
+                  <H4>{t("page-staking-section-comparison-rewards-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       {t("page-staking-section-comparison-saas-rewards-li1")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-saas-rewards-li2")}
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div
-                  style={{
-                    gridArea: "saas-risks",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-risks-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:saas-risks]">
+                  <H4>{t("page-staking-section-comparison-risks-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       {t("page-staking-section-comparison-saas-risks-li1")}
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       {t("page-staking-section-comparison-saas-risks-li2")}
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "saas-reqs" }}>
-                  <OldHeading as="h4" size="md">
+                <div className="[grid-area:saas-reqs]">
+                  <H4>
                     {t("page-staking-section-comparison-requirements-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                  </H4>
+                  <UnorderedList>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-saas-requirements-li1" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-saas-requirements-li2" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-saas-requirements-li3" />
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "saas-cta" }}>
+                <div className="[grid-area:saas-cta]">
                   <StyledButtonLink href="/staking/saas">
                     {t("page-staking-more-on-saas")}
                   </StyledButtonLink>
                 </div>
 
-                <ColorH3 color="stakingBlue">
+                <ColorH3 color="text-[#0b83dc] dark:text-[#a9d3f2]">
                   {t("page-staking-dropdown-pools")}
                 </ColorH3>
-                <div
-                  style={{
-                    gridArea: "pool-rewards",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-rewards-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:pool-rewards]">
+                  <H4>{t("page-staking-section-comparison-rewards-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-rewards-li1" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-rewards-li2" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-rewards-li3" />
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div
-                  style={{
-                    gridArea: "pool-risks",
-                    borderBottom: "1px solid #3335",
-                  }}
-                >
-                  <OldHeading as="h4" size="md">
-                    {t("page-staking-section-comparison-risks-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                <div className="border-b-[1px] border-b-[#3335] [grid-area:pool-risks]">
+                  <H4>{t("page-staking-section-comparison-risks-title")}</H4>
+                  <UnorderedList>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-risks-li1" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-risks-li2" />
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "pool-reqs" }}>
-                  <OldHeading as="h4" size="md">
+                <div className="[grid-area:pool-reqs]">
+                  <H4>
                     {t("page-staking-section-comparison-requirements-title")}
-                  </OldHeading>
-                  <ul>
-                    <li>
+                  </H4>
+                  <UnorderedList>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-requirements-li1" />
-                    </li>
-                    <li>
+                    </ListItem>
+                    <ListItem>
                       <Translation id="page-staking:page-staking-section-comparison-pools-requirements-li2" />
-                    </li>
-                  </ul>
+                    </ListItem>
+                  </UnorderedList>
                 </div>
-                <div style={{ gridArea: "pool-cta" }}>
+                <div className="[grid-area:pool-cta]">
                   <StyledButtonLink href="/staking/pools/">
                     {t("page-staking-more-on-pools")}
                   </StyledButtonLink>
                 </div>
               </ComparisonGrid>
-            </Box>
+            </div>
             <Divider />
             <StakingCommunityCallout id={tocItems.joinTheCommunity.id} />
-            <Box>
+            <div>
               <H2 id={tocItems.faq.id}>{tocItems.faq.title}</H2>
               <ExpandableCard title={t("page-staking-faq-4-question")}>
-                <Text>{t("page-staking-faq-4-answer-p1")}</Text>
-                <Text>{t("page-staking-faq-4-answer-p2")}</Text>
-                <Text>{t("page-staking-faq-4-answer-p3")}</Text>
-                <ButtonLink href="/roadmap/merge/">
-                  {t("page-upgrades-merge-btn")}
-                </ButtonLink>
+                <Stack className="gap-[1.45rem]">
+                  <p>{t("page-staking-faq-4-answer-p1")}</p>
+                  <p>{t("page-staking-faq-4-answer-p2")}</p>
+                  <p>{t("page-staking-faq-4-answer-p3")}</p>
+                  <ButtonLink className="self-start" href="/roadmap/merge/">
+                    {t("page-upgrades-merge-btn")}
+                  </ButtonLink>
+                </Stack>
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-5-question")}>
-                <Text>{t("page-staking-faq-5-answer-p1")}</Text>
-                <Text>{t("page-staking-faq-5-answer-p2")}</Text>
-                <ButtonLink href="/staking/withdrawals/">
-                  {t("page-staking-faq-5-answer-link")}
-                </ButtonLink>
+                <Stack className="gap-[1.45rem]">
+                  <p>{t("page-staking-faq-5-answer-p1")}</p>
+                  <p>{t("page-staking-faq-5-answer-p2")}</p>
+                  <ButtonLink
+                    className="self-start"
+                    href="/staking/withdrawals/"
+                  >
+                    {t("page-staking-faq-5-answer-link")}
+                  </ButtonLink>
+                </Stack>
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-1-question")}>
                 <Translation id="page-staking:page-staking-faq-1-answer" />
@@ -654,16 +573,18 @@ const StakingPage = ({
                 {t("page-staking-faq-2-answer")}
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-3-question")}>
-                <Text>{t("page-staking-faq-3-answer-p1")}</Text>
-                <Text>
-                  <Translation id="page-staking:page-staking-faq-3-answer-p2" />
-                </Text>
+                <Stack className="gap-[1.45rem]">
+                  <p>{t("page-staking-faq-3-answer-p1")}</p>
+                  <p>
+                    <Translation id="page-staking:page-staking-faq-3-answer-p2" />
+                  </p>
+                </Stack>
               </ExpandableCard>
-            </Box>
-            <Box>
+            </div>
+            <div>
               <H2 id={tocItems.further.id}>{tocItems.further.title}</H2>
-              <ul>
-                <li>
+              <UnorderedList>
+                <ListItem>
                   <InlineLink href="https://notes.ethereum.org/9l707paQQEeI-GPzVK02lA?view#">
                     {t("page-staking-further-reading-2-link")}
                   </InlineLink>{" "}
@@ -671,44 +592,44 @@ const StakingPage = ({
                   <i>
                     {t("page-staking-further-reading-author-vitalik-buterin")}
                   </i>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://hackmd.io/@benjaminion/eth2_news">
                     {t("page-staking-further-reading-4-link")}
                   </InlineLink>{" "}
                   - <i>{t("page-staking-further-reading-4-author")}</i>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://blog.ethereum.org/2022/01/31/finalized-no-33/">
                     {t("page-staking-further-reading-5-link")}
                   </InlineLink>{" "}
                   - <i>{t("page-staking-further-reading-5-author")}</i>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://www.attestant.io/posts/">
                     {t("page-staking-further-reading-6-link")}
                   </InlineLink>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://beaconcha.in/education">
                     {t("page-staking-further-reading-8-link")}
                   </InlineLink>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://launchpad.ethereum.org/en/faq">
                     {t("page-staking-further-reading-9-link")}
                   </InlineLink>
-                </li>
-                <li>
+                </ListItem>
+                <ListItem>
                   <InlineLink href="https://ethstaker.gitbook.io/ethstaker-knowledge-base/">
                     {t("page-staking-further-reading-10-link")}
                   </InlineLink>
-                </li>
-              </ul>
-            </Box>
-            <Box>
+                </ListItem>
+              </UnorderedList>
+            </div>
+            <div>
               <FeedbackCard />
-            </Box>
+            </div>
           </Flex>
         </ContentContainer>
         <MobileButton>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6108afb7b72..3d38dc0519f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss"
 import plugin from "tailwindcss/plugin"
 
 const config = {
-  darkMode: ["class"],
+  darkMode: ["selector", "[data-theme='dark']"],
   content: [
     "./src/**/*.{ts,tsx}",
     // TODO: remove after migration