diff --git a/apps/web/src/app/components/page.tsx b/apps/web/src/app/components/page.tsx
index 370f8469a3..2c191231eb 100644
--- a/apps/web/src/app/components/page.tsx
+++ b/apps/web/src/app/components/page.tsx
@@ -86,9 +86,9 @@ export default async function ComponentsPage() {
                     <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
                     <Illustration />
                   </div>
-                  <h3 className="relative z-[3] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
+                  <h2 className="relative z-[3] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
                     {category.name}
-                  </h3>
+                  </h2>
                   <span className="relative z-[3] text-slate-11 text-xs">
                     {category.components.length} component
                     {category.components.length > 1 && 's'}
diff --git a/apps/web/src/components/sections/integration.tsx b/apps/web/src/components/sections/integration.tsx
index d11c826558..3cbe36902e 100644
--- a/apps/web/src/components/sections/integration.tsx
+++ b/apps/web/src/components/sections/integration.tsx
@@ -15,6 +15,7 @@ const IntegrationSection = () => {
       <div className="space-y-12 md:space-y-16">
         <div className="max-w-full text-center space-y-4">
           <Heading
+            as="h2"
             size="8"
             weight="medium"
             className="text-white/80 text-balance"
diff --git a/apps/web/src/components/sections/patterns.tsx b/apps/web/src/components/sections/patterns.tsx
index 544a28fe1d..39eaf270fa 100644
--- a/apps/web/src/components/sections/patterns.tsx
+++ b/apps/web/src/components/sections/patterns.tsx
@@ -106,7 +106,7 @@ const ContentComponent = ({ component }: { component: string }) => {
   switch (component) {
     case 'Heading':
       return (
-        <Heading size="8" weight="medium" className="text-white/80">
+        <Heading as="h2" size="8" weight="medium" className="text-white/80">
           Ready-to-use Components
         </Heading>
       );
diff --git a/apps/web/src/components/sections/playground/index.tsx b/apps/web/src/components/sections/playground/index.tsx
index 3f1be8f6aa..de9fa25da3 100644
--- a/apps/web/src/components/sections/playground/index.tsx
+++ b/apps/web/src/components/sections/playground/index.tsx
@@ -31,6 +31,7 @@ const PlaygroundSection = () => {
       <div className="space-y-8 w-full">
         <div className="max-w-full text-center md:max-w-[40rem] md:mx-auto space-y-4">
           <Heading
+            as="h2"
             size="8"
             weight="medium"
             className="text-white/80 md:w-96 inline-block max-md:max-w-lg max-md:mx-auto"
diff --git a/apps/web/src/components/sections/primitives.tsx b/apps/web/src/components/sections/primitives.tsx
index d5e80c0abc..e86c0c6620 100644
--- a/apps/web/src/components/sections/primitives.tsx
+++ b/apps/web/src/components/sections/primitives.tsx
@@ -6,7 +6,7 @@ const PrimitivesSection = () => {
   return (
     <section className="relative md:my-40 md:py-20 space-y-16 max-md:px-6">
       <div className="flex flex-col gap-4">
-        <Heading size="8" weight="medium" className="text-white/80">
+        <Heading as="h2" size="8" weight="medium" className="text-white/80">
           Battle-tested Primitives
         </Heading>
         <Text size="5" className="opacity-70">
diff --git a/apps/web/src/components/sections/tools/index.tsx b/apps/web/src/components/sections/tools/index.tsx
index dd2a203598..b20c20c161 100644
--- a/apps/web/src/components/sections/tools/index.tsx
+++ b/apps/web/src/components/sections/tools/index.tsx
@@ -9,7 +9,7 @@ const ToolsSection = () => {
     <section className="relative text-center space-y-16 sm:space-y-24 max-md:mt-44 max-md:mb-24 my-56 max-md:px-4">
       <div className="space-y-8">
         <div className="max-w-full text-center space-y-6">
-          <Heading size="8" weight="medium" className="text-white/80">
+          <Heading as="h2" size="8" weight="medium" className="text-white/80">
             Built-in deliverability tools
           </Heading>
           <div className="sm:px-20 md:max-w-2xl md:mx-auto">
diff --git a/apps/web/src/components/sections/tools/interactive-demo.tsx b/apps/web/src/components/sections/tools/interactive-demo.tsx
index 8e8121d7a1..315d0fcdf2 100644
--- a/apps/web/src/components/sections/tools/interactive-demo.tsx
+++ b/apps/web/src/components/sections/tools/interactive-demo.tsx
@@ -73,6 +73,7 @@ export const InteractiveDemo = () => {
 
             <div className="relative flex flex-col gap-1.5">
               <Heading
+                as="h3"
                 size="5"
                 weight="medium"
                 className="text-white/80 group-data-[active='true']:text-white group-hover:text-white transition-colors"
diff --git a/apps/web/src/components/template.tsx b/apps/web/src/components/template.tsx
index e839336019..b9076c101c 100644
--- a/apps/web/src/components/template.tsx
+++ b/apps/web/src/components/template.tsx
@@ -63,7 +63,7 @@ export function Template({
         width="450"
       />
       <div className="p-4">
-        <Heading size="2" weight="medium">
+        <Heading as="h2" size="2" weight="medium">
           {name}
         </Heading>
         <div className="mt-2 flex flex-row gap-2">