diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents.tsx
deleted file mode 100644
index 9affa173a57..00000000000
--- a/src/components/MdComponents.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { ComponentProps } from "react"
-import {
-  Badge,
-  Box,
-  type BoxProps,
-  chakra,
-  Divider as ChakraDivider,
-  Flex,
-  type FlexProps,
-  type HeadingProps,
-  ListItem,
-  OrderedList,
-  Text,
-  UnorderedList,
-  useToken,
-} from "@chakra-ui/react"
-
-import type { ChildOnlyProp } from "@/lib/types"
-
-import ButtonDropdown, {
-  type ButtonDropdownProps,
-} from "@/components/ButtonDropdown"
-import { ButtonLink } from "@/components/Buttons"
-import Contributors from "@/components/Contributors"
-import MarkdownImage from "@/components/MarkdownImage"
-import OldHeading from "@/components/OldHeading"
-import { mdxTableComponents } from "@/components/Table"
-import TooltipLink from "@/components/TooltipLink"
-import YouTube from "@/components/YouTube"
-
-import ContributorsQuizBanner from "./Banners/ContributorsQuizBanner"
-import GlossaryTooltip from "./Glossary/GlossaryTooltip"
-import { StandaloneQuizWidget } from "./Quiz/QuizWidget"
-import Card from "./Card"
-import DocLink from "./DocLink"
-import Emoji from "./Emoji"
-import ExpandableCard from "./ExpandableCard"
-import FeaturedText from "./FeaturedText"
-import IdAnchor from "./IdAnchor"
-import InfoBanner from "./InfoBanner"
-import IssuesList from "./IssuesList"
-import LocaleDateTime from "./LocaleDateTime"
-import MainArticle from "./MainArticle"
-
-/**
- * Base HTML elements
- */
-const headingPropsForAnchor = (id?: string): HeadingProps => {
-  if (!id) return {}
-  return {
-    scrollMarginTop: 28,
-    id,
-    "data-group": true,
-    position: "relative",
-  } as HeadingProps
-}
-
-export const commonHeadingProps = (id?: string): HeadingProps => ({
-  fontWeight: 700,
-  lineHeight: 1.4,
-  ...headingPropsForAnchor(id),
-})
-
-export const Heading1 = ({ children, ...rest }: HeadingProps) => (
-  <OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>
-    {children}
-  </OldHeading>
-)
-
-export const Heading2 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading
-    as="h2"
-    {...commonHeadingProps(id)}
-    fontSize="2rem"
-    mt={16}
-    {...rest}
-  >
-    <IdAnchor id={id} />
-    {children}
-  </OldHeading>
-)
-
-export const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
-    <IdAnchor id={id} />
-    {children}
-  </OldHeading>
-)
-
-export const Heading4 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading
-    as="h4"
-    {...commonHeadingProps(id)}
-    fontSize="xl"
-    fontWeight={600}
-    {...rest}
-  >
-    <IdAnchor id={id} />
-    {children}
-  </OldHeading>
-)
-
-export const Pre = (props: ChildOnlyProp) => (
-  <chakra.pre
-    bg="preBackground"
-    border="1px"
-    borderColor="preBorder"
-    borderRadius="base"
-    maxW="full"
-    overflowX="scroll"
-    p={4}
-    whiteSpace="pre-wrap"
-    {...props}
-  />
-)
-
-export const Paragraph = (props: ChildOnlyProp) => (
-  <Text mt={8} mb={4} {...props} />
-)
-
-export const HR = () => (
-  <ChakraDivider
-    mt={8}
-    mb={4}
-    display="inline-block"
-    position="inherit"
-    bg="border"
-  />
-)
-
-// All base html element components
-export const htmlElements = {
-  a: TooltipLink,
-  div: Box,
-  h1: Heading1,
-  h2: Heading2,
-  h3: Heading3,
-  h4: Heading4,
-  hr: HR,
-  img: MarkdownImage,
-  li: ListItem,
-  ol: OrderedList,
-  p: Paragraph,
-  pre: Pre,
-  time: LocaleDateTime,
-  ul: UnorderedList,
-  ...mdxTableComponents,
-}
-
-/**
- * Custom React components
- */
-export const Page = (props: FlexProps) => (
-  <Flex
-    flexDirection={{ base: "column", lg: "row" }}
-    justifyContent="space-between"
-    mx="auto"
-    mb={16}
-    pt={{ lg: 16 }}
-    width="full"
-    sx={{ "h2:first-of-type": { mt: { lg: 0 } } }}
-    {...props}
-  />
-)
-
-export const Title = (props: ChildOnlyProp) => <Heading1 mt={4} {...props} />
-
-export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
-  const lgBp = useToken("breakpoints", "lg")
-
-  return (
-    <Box
-      as={MainArticle}
-      flex={`1 1 ${lgBp}`}
-      position="relative"
-      px={8}
-      pb={8}
-      {...props}
-      sx={{
-        ".citation p": {
-          color: "text200",
-        },
-      }}
-    />
-  )
-}
-
-export const MobileButton = (props: ChildOnlyProp) => {
-  const borderColor = useToken("colors", "border")
-  return (
-    <Box
-      hideFrom="lg"
-      bg="background.base"
-      boxShadow={`0 -1px 0 ${borderColor}`}
-      position="sticky"
-      bottom={0}
-      zIndex={99}
-      p={8}
-      width="full"
-      {...props}
-    />
-  )
-}
-
-export const StyledButtonDropdown = ({
-  list,
-  ...rest
-}: FlexProps & Pick<ButtonDropdownProps, "list">) => (
-  <Flex align="flex-end" justify="flex-end" mb={8} {...rest}>
-    <ButtonDropdown list={list} w={{ base: "full", lg: "auto" }} minW="240px" />
-  </Flex>
-)
-
-export const MobileButtonDropdown = (
-  props: ComponentProps<typeof StyledButtonDropdown>
-) => <StyledButtonDropdown mb={0} {...props} />
-
-export const Divider = () => <Box my={16} w="10%" h={1} bgColor="homeDivider" />
-
-// All custom React components
-export const reactComponents = {
-  Badge,
-  ButtonLink,
-  Card,
-  ContentContainer,
-  Contributors,
-  ContributorsQuizBanner,
-  Divider,
-  DocLink,
-  Emoji,
-  ExpandableCard,
-  FeaturedText,
-  GlossaryTooltip,
-  InfoBanner,
-  MobileButton,
-  MobileButtonDropdown,
-  Page,
-  QuizWidget: StandaloneQuizWidget,
-  StyledButtonDropdown,
-  IssuesList,
-  Title,
-  YouTube,
-}
-
-/**
- * All base markdown components as default export
- */
-const MdComponents = {
-  ...htmlElements,
-  ...reactComponents,
-}
-
-export default MdComponents
diff --git a/src/components/MdComponents/MdComponents.stories.tsx b/src/components/MdComponents/MdComponents.stories.tsx
new file mode 100644
index 00000000000..9d101a7334d
--- /dev/null
+++ b/src/components/MdComponents/MdComponents.stories.tsx
@@ -0,0 +1,129 @@
+import pickBy from "lodash/pickBy"
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
+
+import { viewportModes } from "../../../.storybook/modes"
+
+import MdComponentSet from "."
+
+const meta = {
+  title: "Molecules / Display Content / MdComponents",
+  parameters: {
+    layout: "none",
+    chromatic: {
+      modes: pickBy(viewportModes, (args) =>
+        ["md", "lg"].includes(args.viewport)
+      ),
+    },
+  },
+} satisfies Meta
+
+export default meta
+
+const {
+  ContentContainer,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  Title,
+  p: Paragraph,
+  FeaturedText,
+  Divider,
+  hr: HR,
+  pre: Pre,
+  Page,
+  MobileButton,
+  MobileButtonDropdown,
+} = MdComponentSet
+
+const Para = () => (
+  <Paragraph>
+    Ether (also known by its ticker symbol, ETH) is the native currency
+    transacted on Ethereum. ETH is needed to pay for usage of the Ethereum
+    network (in the form of transaction fees). ETH is also used to secure the
+    network with staking. When people talk about the price of Ethereum,
+    they&apos;re referring to ETH the asset.
+  </Paragraph>
+)
+
+export const MdComponents: StoryObj = {
+  render: () => (
+    <div className="mx-auto max-w-screen-lg">
+      <Page>
+        <ContentContainer>
+          <MobileButton>
+            <MobileButtonDropdown list={roadmapDropdownLinks} />
+          </MobileButton>
+          <Heading1>Heading1</Heading1>
+          <Para />
+          <Heading2>Heading2</Heading2>
+          <Para />
+          <Heading3>Heading3</Heading3>
+          <Para />
+          <Heading4>Heading4</Heading4>
+          <Para />
+          <Title>Title</Title>
+          <Para />
+          <Divider />
+          <Pre>Lots of coding here</Pre>
+          <HR />
+          <FeaturedText>Feature Text</FeaturedText>
+        </ContentContainer>
+      </Page>
+    </div>
+  ),
+}
+
+const roadmapDropdownLinks: ButtonDropdownList = {
+  text: "nav-roadmap-options",
+  ariaLabel: "nav-roadmap-options-alt",
+  items: [
+    {
+      text: "nav-roadmap-home",
+      href: "/roadmap/",
+      matomo: {
+        eventCategory: `Roadmap dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap home",
+      },
+    },
+    {
+      text: "nav-roadmap-security",
+      href: "/roadmap/security",
+      matomo: {
+        eventCategory: `Roadmap security dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap security",
+      },
+    },
+    {
+      text: "nav-roadmap-scaling",
+      href: "/roadmap/scaling",
+      matomo: {
+        eventCategory: `Roadmap scaling dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap scaling home",
+      },
+    },
+    {
+      text: "nav-roadmap-user-experience",
+      href: "/roadmap/user-experience/",
+      matomo: {
+        eventCategory: `Roadmap user experience dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap user experience home",
+      },
+    },
+    {
+      text: "nav-roadmap-future-proofing",
+      href: "/roadmap/future-proofing",
+      matomo: {
+        eventCategory: `Roadmap future-proofing dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap future-proofing home",
+      },
+    },
+  ],
+}
diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
new file mode 100644
index 00000000000..a58550e47c5
--- /dev/null
+++ b/src/components/MdComponents/index.tsx
@@ -0,0 +1,220 @@
+import { ComponentProps, type HTMLAttributes } from "react"
+import { Badge, Box, type BoxProps } from "@chakra-ui/react"
+
+import type { ChildOnlyProp } from "@/lib/types"
+
+import ButtonDropdown, {
+  type ButtonDropdownProps,
+} from "@/components/ButtonDropdown"
+import Contributors from "@/components/Contributors"
+import MarkdownImage from "@/components/MarkdownImage"
+import { mdxTableComponents } from "@/components/Table"
+import TooltipLink from "@/components/TooltipLink"
+import YouTube from "@/components/YouTube"
+
+import { cn } from "@/lib/utils/cn"
+
+import ContributorsQuizBanner from "../Banners/ContributorsQuizBanner"
+import Card from "../Card"
+import DocLink from "../DocLink"
+import Emoji from "../Emoji"
+import ExpandableCard from "../ExpandableCard"
+import FeaturedText from "../FeaturedText"
+import GlossaryTooltip from "../Glossary/GlossaryTooltip"
+import IdAnchor from "../IdAnchor"
+import InfoBanner from "../InfoBanner"
+import IssuesList from "../IssuesList"
+import LocaleDateTime from "../LocaleDateTime"
+import MainArticle from "../MainArticle"
+import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
+import { ListItem, OrderedList, UnorderedList } from "../ui/list"
+
+export const commonHeadingAttributes = (className: string, id?: string) => ({
+  id,
+  className: cn(
+    "font-bold leading-xs my-8",
+    id && "scroll-mt-28 relative",
+    className
+  ),
+  "data-group": !!id || undefined,
+})
+
+type HeadingProps = HTMLAttributes<HTMLHeadingElement>
+
+export const Heading1 = ({ children, className, ...rest }: HeadingProps) => (
+  <h1 {...commonHeadingAttributes(cn("text-[2.5rem]", className))} {...rest}>
+    {children}
+  </h1>
+)
+
+export const Heading2 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h2
+    {...commonHeadingAttributes(cn("text-[2rem] mt-16", className), id)}
+    {...rest}
+  >
+    <IdAnchor id={id} />
+    {children}
+  </h2>
+)
+
+export const Heading3 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h3
+    {...commonHeadingAttributes(cn("text-2xl mt-10", className), id)}
+    {...rest}
+  >
+    <IdAnchor id={id} />
+    {children}
+  </h3>
+)
+
+export const Heading4 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h4
+    {...commonHeadingAttributes(cn("text-xl font-semibold", className), id)}
+    {...rest}
+  >
+    <IdAnchor id={id} />
+    {children}
+  </h4>
+)
+
+export const Pre = (props: ChildOnlyProp) => (
+  <pre
+    className="max-w-full overflow-x-scroll whitespace-pre-wrap rounded border bg-background-highlight p-4"
+    {...props}
+  />
+)
+
+export const Paragraph = (props: ChildOnlyProp) => (
+  <p className="mb-4 mt-8" {...props} />
+)
+
+export const HR = () => (
+  <hr className="mb-4 mt-8 inline-block w-full border-body-medium opacity-60" />
+)
+
+// All base html element components
+export const htmlElements = {
+  a: TooltipLink,
+  div: Box,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  hr: HR,
+  img: MarkdownImage,
+  li: ListItem,
+  ol: OrderedList,
+  p: Paragraph,
+  pre: Pre,
+  time: LocaleDateTime,
+  ul: UnorderedList,
+  ...mdxTableComponents,
+}
+
+/**
+ * Custom React components
+ */
+export const Page = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <Flex
+    className={cn(
+      "mx-auto mb-16 w-full flex-col justify-between lg:flex-row lg:pt-16 lg:first-of-type:[&_h2]:mt-0",
+      className
+    )}
+    {...props}
+  />
+)
+
+export const Title = (props: ChildOnlyProp) => (
+  <Heading1 className="mt-4" {...props} />
+)
+
+export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
+  return (
+    <MainArticle className="relative flex-[1_1_992px] px-8 pb-8" {...props} />
+  )
+}
+
+export const MobileButton = (props: ChildOnlyProp) => {
+  return (
+    <div
+      className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-md lg:hidden"
+      {...props}
+    />
+  )
+}
+
+export const StyledButtonDropdown = ({
+  list,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & Pick<ButtonDropdownProps, "list">) => (
+  <Flex className={cn("mb-8 items-end justify-end", className)} {...rest}>
+    <ButtonDropdown list={list} w={{ base: "full", lg: "auto" }} minW="240px" />
+  </Flex>
+)
+
+export const MobileButtonDropdown = ({
+  className,
+  ...props
+}: ComponentProps<typeof StyledButtonDropdown>) => (
+  <StyledButtonDropdown className={cn("mb-0", className)} {...props} />
+)
+
+export const Divider = () => (
+  <div className="my-16 h-1 w-[10%] bg-primary-high-contrast" />
+)
+
+// All custom React components
+export const reactComponents = {
+  Badge,
+  ButtonLink,
+  Card,
+  ContentContainer,
+  Contributors,
+  ContributorsQuizBanner,
+  Divider,
+  DocLink,
+  Emoji,
+  ExpandableCard,
+  FeaturedText,
+  GlossaryTooltip,
+  InfoBanner,
+  MobileButton,
+  MobileButtonDropdown,
+  Page,
+  QuizWidget: StandaloneQuizWidget,
+  StyledButtonDropdown,
+  IssuesList,
+  Title,
+  YouTube,
+}
+
+/**
+ * All base markdown components as default export
+ */
+const MdComponents = {
+  ...htmlElements,
+  ...reactComponents,
+}
+
+export default MdComponents
diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx
index 7d6fc32ddf7..925b60310c8 100644
--- a/src/layouts/Docs.tsx
+++ b/src/layouts/Docs.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router"
+import type { HTMLAttributes } from "react"
 import {
   Badge,
   Box,
@@ -6,7 +7,6 @@ import {
   Divider as ChakraDivider,
   Flex,
   type FlexProps,
-  type HeadingProps,
   type ListProps,
   OrderedList as ChakraOrderedList,
   UnorderedList as ChakraUnorderedList,
@@ -45,6 +45,7 @@ import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import YouTube from "@/components/YouTube"
 
+import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
 
 const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
@@ -80,47 +81,33 @@ const ContentContainer = (props: ContentContainerProps) => (
   />
 )
 
-const baseHeadingStyle: HeadingProps = {
-  fontFamily: "mono",
-  textTransform: "uppercase",
-  fontWeight: "bold",
-  scrollMarginTop: 40,
-}
+const baseHeadingClasses = "font-mono uppercase font-bold scroll-mt-40"
 
-const H1 = (props: HeadingProps) => (
+const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
-    {...baseHeadingStyle}
-    fontSize={{ base: "2rem", md: "2.5rem" }}
-    mt={{ base: 0, md: 8 }}
-    mb="8"
+    className={cn(baseHeadingClasses, "max-md:mt-0 max-md:text-[2rem]")}
     {...props}
   />
 )
 
-const H2 = (props: HeadingProps) => (
+const H2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading2
-    {...baseHeadingStyle}
-    fontSize="2xl"
-    lineHeight={{ base: 1.2, md: 1.4 }}
-    pb={2}
-    mt={12}
-    borderBottom="1px"
-    borderColor="border"
+    className={cn(
+      baseHeadingClasses,
+      "mt-12 border-b border-[#e5e5e5] pb-2 text-2xl max-md:leading-4xs dark:border-[#333]"
+    )}
     {...props}
   />
 )
 
-const baseSubHeadingStyles: HeadingProps = {
-  lineHeight: 1.4,
-  fontWeight: "semibold",
-}
+const baseSubHeadingClasses = "leading-xs font-semibold"
 
-const H3 = (props: HeadingProps) => (
-  <MdHeading3 {...baseSubHeadingStyles} mt={12} {...props} />
+const H3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading3 className={cn(baseSubHeadingClasses, "mt-12")} {...props} />
 )
 
-const H4 = (props: HeadingProps) => (
-  <MdHeading4 {...baseSubHeadingStyles} {...props} />
+const H4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className={baseSubHeadingClasses} {...props} />
 )
 
 const UnorderedList = (props: ListProps) => (
diff --git a/src/layouts/Staking.tsx b/src/layouts/Staking.tsx
index aabe7c501c2..9236ac5e740 100644
--- a/src/layouts/Staking.tsx
+++ b/src/layouts/Staking.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from "next-i18next"
+import type { HTMLAttributes } from "react"
 import {
   Box,
   type BoxProps,
   chakra,
   Flex,
   Grid,
-  type HeadingProps,
   SimpleGrid,
   Text,
   UnorderedList,
@@ -43,16 +43,12 @@ import WithdrawalsTabComparison from "@/components/Staking/WithdrawalsTabCompari
 import TableOfContents from "@/components/TableOfContents"
 import UpgradeStatus from "@/components/UpgradeStatus"
 
-const Heading1 = (props: HeadingProps) => (
-  <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading1 className="md:text-5xl" {...props} />
 )
 
-const Heading4 = (props: HeadingProps) => (
-  <MdHeading4
-    fontSize={{ base: "md", md: "xl" }}
-    fontWeight="semibold"
-    {...props}
-  />
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className="font-semibold max-md:text-md" {...props} />
 )
 
 const Paragraph = (props: ChildOnlyProp) => (
diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index 0f0fa18b64b..3b39613413e 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/router"
-import { type HeadingProps } from "@chakra-ui/react"
+import type { HTMLAttributes } from "react"
 
 import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, StaticFrontmatter } from "@/lib/interfaces"
@@ -38,17 +38,17 @@ import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import GuideHeroImage from "@/public/images/heroes/guides-hub-hero.jpg"
 
-const Heading1 = (props: HeadingProps) => (
-  <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading1 className="md:text-5xl" {...props} />
 )
-const Heading2 = (props: HeadingProps) => (
-  <MdHeading2 fontSize={{ base: "2xl", md: "2rem" }} {...props} />
+const Heading2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading2 className="max-md:text-2xl" {...props} />
 )
-const Heading3 = (props: HeadingProps) => (
-  <MdHeading3 fontSize={{ base: "xl", md: "2xl" }} {...props} />
+const Heading3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading3 className="max-md:text-xl" {...props} />
 )
-const Heading4 = (props: HeadingProps) => (
-  <MdHeading4 fontSize={{ base: "md", md: "xl" }} {...props} />
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className="max-md:text-md" {...props} />
 )
 
 // Static layout components
diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx
index 4c5a54a0a95..aa599d44653 100644
--- a/src/layouts/Tutorial.tsx
+++ b/src/layouts/Tutorial.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from "next/router"
+import type { HTMLAttributes } from "react"
 import {
   Badge,
   Box,
   type BoxProps,
   Divider,
   Flex,
-  type HeadingProps,
   Kbd,
   Text,
   type TextProps,
@@ -65,40 +65,30 @@ const ContentContainer = (props: ContentContainerProps) => {
   )
 }
 
-const Heading1 = (props: HeadingProps) => (
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
-    fontSize={{ base: "1.75rem", lg: "2.5rem" }}
-    fontFamily="monospace"
-    textTransform="uppercase"
+    className="font-monospace uppercase max-lg:text-[1.75rem]"
     {...props}
   />
 )
 
-const Heading2 = (props: HeadingProps) => (
+const Heading2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading2
-    fontSize={{ base: "2xl", md: "2rem" }}
-    fontFamily="monospace"
-    textTransform="uppercase"
-    scrollMarginTop={40}
-    mt={12}
+    className="mt-12 scroll-mt-40 font-monospace uppercase max-md:text-2xl"
     {...props}
   />
 )
 
-const Heading3 = (props: HeadingProps) => (
+const Heading3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading3
-    fontWeight={{ base: "semibold" }}
-    fontSize={{ base: "1rem", md: "1.5rem" }}
-    scrollMarginTop={40}
+    className="scroll-mt-40 font-semibold max-md:text-md"
     {...props}
   />
 )
 
-const Heading4 = (props: HeadingProps) => (
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading4
-    fontWeight={{ base: "semibold" }}
-    fontSize={{ base: "1rem", md: "1.25rem" }}
-    scrollMarginTop={40}
+    className="scroll-mt-40 font-semibold max-md:text-md"
     {...props}
   />
 )
diff --git a/src/layouts/Upgrade.tsx b/src/layouts/Upgrade.tsx
index 8978dc5f8e3..c227863f5e3 100644
--- a/src/layouts/Upgrade.tsx
+++ b/src/layouts/Upgrade.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from "next-i18next"
+import type { HTMLAttributes } from "react"
 import {
   Box,
   type BoxProps,
-  type FlexProps,
   List,
   ListItem,
   Text,
@@ -29,7 +29,9 @@ import UpgradeStatus from "@/components/UpgradeStatus"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
-const Page = (props: FlexProps) => <MdPage sx={{}} {...props} />
+const Page = (props: HTMLAttributes<HTMLDivElement>) => (
+  <MdPage className="lg:first-of-type:[&_h2]:mt-16" {...props} />
+)
 
 type ContainerProps = Pick<BoxProps, "children" | "dir">