diff --git a/www/components/AdminAccess/index.tsx b/www/components/AdminAccess/index.tsx
index e8439b73528..0227c6b4aa5 100644
--- a/www/components/AdminAccess/index.tsx
+++ b/www/components/AdminAccess/index.tsx
@@ -6,7 +6,6 @@ import SectionContainer from '../Layouts/SectionContainer'
 import ImageCarousel from '../Carousels/ImageCarousel'
 
 import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
-import { Typography } from '@supabase/ui'
 
 import AdminAccessData from 'data/home/admin-access.json'
 
@@ -17,9 +16,7 @@ const AdminAccess = () => {
   return (
     <SectionContainer>
       <div>
-        <Typography.Title level={2} className="mb-16">
-          Build your app without leaving the dashboard
-        </Typography.Title>
+        <h2 className="mb-16">Build your app without leaving the dashboard</h2>
       </div>
       <ImageCarousel content={AdminAccessData} altTabView={true} />
     </SectionContainer>
diff --git a/www/components/AdminAccess/tabs.tsx b/www/components/AdminAccess/tabs.tsx
index de2d0a27ac8..753b2f85b44 100644
--- a/www/components/AdminAccess/tabs.tsx
+++ b/www/components/AdminAccess/tabs.tsx
@@ -1,5 +1,5 @@
 import TabMarkup from 'data/AdminAccess.json'
-import { Tabs as SBTabs, Typography, Button } from '@supabase/ui'
+import { Tabs as SBTabs, Button } from '@supabase/ui'
 
 type Props = {
   tabId: string
@@ -26,7 +26,7 @@ function Tabs(props: Props) {
           >
             <SBTabs.Panel id="tabTableEditor" label="Table Editor">
               <div className="mt-5">
-                <Typography.Title level={3}>{TabMarkup['tabTableEditor'].header}</Typography.Title>
+                <h3>{TabMarkup['tabTableEditor'].header}</h3>
                 <dd className="mt-8">
                   <p>{TabMarkup['tabTableEditor'].description}</p>
                 </dd>
@@ -38,7 +38,7 @@ function Tabs(props: Props) {
 
             <SBTabs.Panel id="tabSqlEditor" label=" SQL Editor">
               <div className="mt-5">
-                <Typography.Title level={3}>{TabMarkup['tabSqlEditor'].header}</Typography.Title>
+                <h3>{TabMarkup['tabSqlEditor'].header}</h3>
                 <dd className="mt-8">
                   <p>{TabMarkup['tabSqlEditor'].description}</p>
                 </dd>
@@ -49,7 +49,7 @@ function Tabs(props: Props) {
             </SBTabs.Panel>
             <SBTabs.Panel id="tabAuthRules" label="Auth Rules">
               <div className="mt-5">
-                <Typography.Title level={3}>{TabMarkup['tabAuthRules'].header}</Typography.Title>
+                <h3>{TabMarkup['tabAuthRules'].header}</h3>
                 <dd className="mt-8">
                   <p>{TabMarkup['tabAuthRules'].description}</p>
                 </dd>
diff --git a/www/components/AuthWidget/AuthComponentExample.tsx b/www/components/AuthWidget/AuthComponentExample.tsx
index 6721328a243..9d476491f69 100644
--- a/www/components/AuthWidget/AuthComponentExample.tsx
+++ b/www/components/AuthWidget/AuthComponentExample.tsx
@@ -7,7 +7,6 @@ import {
   // Auth,
   Space,
   Tabs,
-  Typography,
   IconCode,
   IconSearch,
 } from '@supabase/ui'
@@ -96,7 +95,7 @@ function AuthComponentExample() {
                         width="96"
                         alt="Logo"
                       />
-                      <Typography.Title level={3}>{'Acme Company'}</Typography.Title>
+                      <h3>{'Acme Company'}</h3>
                     </Space>
                     <Badge dot>Demo</Badge>
                   </div>
diff --git a/www/components/AuthWidget/AuthWidget.tsx b/www/components/AuthWidget/AuthWidget.tsx
index 94b722033b3..036f25caa9d 100644
--- a/www/components/AuthWidget/AuthWidget.tsx
+++ b/www/components/AuthWidget/AuthWidget.tsx
@@ -13,7 +13,6 @@ import {
   Select,
   Space,
   Tabs,
-  Typography,
   Input,
   Toggle,
   IconCode,
@@ -49,9 +48,7 @@ function AuthPage() {
       <div className="container mx-auto px-8 sm:px-16 xl:px-20 relative py-32">
         <div className="grid grid-cols-12">
           <div className="col-span-8">
-            <Typography.Title level={2} className="mb-4">
-              ReactJS Auth Widget
-            </Typography.Title>
+            <h2 className="mb-4">ReactJS Auth Widget</h2>
             <p>
               An API built from the groud up just for Storage.With powerful library clients coming
               soon that allow for asset optimasation and image transformation
@@ -85,7 +82,7 @@ function AuthPage() {
                           <div>
                             <Space size={3} direction="vertical">
                               <img src="https://app.supabase.io/img/supabase-dark.svg" width="96" />
-                              <Typography.Title level={3}>{companyName}</Typography.Title>
+                              <h3>{companyName}</h3>
                             </Space>
                           </div>
                           {/* <Auth
@@ -141,7 +138,7 @@ function AuthPage() {
               <div className={`p-8`}>
                 <Space size={12} direction="vertical">
                   <div>
-                    <Typography.Title level={3}>Customise your login form</Typography.Title>
+                    <h3>Customise your login form</h3>
                     <p>Our ReactJS Auth form will help you get going even quicker </p>
                   </div>
                   <Divider light />
diff --git a/www/components/Blog/BlogHeader.tsx b/www/components/Blog/BlogHeader.tsx
index 5f9d1d18a91..c1c494969c0 100644
--- a/www/components/Blog/BlogHeader.tsx
+++ b/www/components/Blog/BlogHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Typography } from '@supabase/ui'
 
 interface Props {
   title: string
@@ -10,9 +9,9 @@ export default function BlogHeader({ title }: Props) {
     <div className="bg-white dark:bg-dark-800 overflow-hidden pt-4 pb-4 border-b dark:border-gray-600">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto">
-          <Typography.Title>
+          <h1>
             <span className="text-3xl">{title}</span>
-          </Typography.Title>
+          </h1>
         </div>
       </div>
     </div>
diff --git a/www/components/Blog/BlogListItem.tsx b/www/components/Blog/BlogListItem.tsx
index b05e580d303..9cd8521c64d 100644
--- a/www/components/Blog/BlogListItem.tsx
+++ b/www/components/Blog/BlogListItem.tsx
@@ -1,4 +1,4 @@
-import { Space, Typography } from '@supabase/ui'
+import { Space } from '@supabase/ui'
 import authors from 'lib/authors.json'
 import React from 'react'
 import Image from 'next/image'
@@ -32,9 +32,7 @@ const BlogListItem = ({ blog }: Props) => {
               </div>
 
               <div>
-                <Typography.Title level={3} className="m-0">
-                  {blog.title}
-                </Typography.Title>
+                <h3 className="m-0">{blog.title}</h3>
               </div>
               <p small>{blog.date}</p>
 
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index b20b0a49011..f891a39cdb9 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -1,7 +1,5 @@
 import { useRouter } from 'next/router'
-import SectionHeader from 'components/UI/SectionHeader'
-import ProjectExamples from 'data/ProjectExamples.json'
-import { Button, Card, Typography, Space, IconGitHub } from '@supabase/ui'
+import { Button, IconGitHub } from '@supabase/ui'
 import SectionContainer from '../Layouts/SectionContainer'
 import ExampleCard from '../ExampleCard'
 
diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index ec6ad84e8bf..95e6a2044f8 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@supabase/ui'
+import { Button } from '@supabase/ui'
 
 const CTABanner = (props: any) => {
   const { darkerBg } = props
@@ -10,10 +10,10 @@ const CTABanner = (props: any) => {
       `}
     >
       <div className="col-span-12">
-        <Typography.Title level={2}>
+        <h2>
           <span style={{ color: '#bbbbbb' }}>Build in a weekend,</span>
           <span style={{ color: '#ffffff' }}> scale to millions</span>
-        </Typography.Title>
+        </h2>
       </div>
       <div className="col-span-12 mt-4">
         <a href="https://app.supabase.io/">
diff --git a/www/components/Carousels/ImageCarousel.tsx b/www/components/Carousels/ImageCarousel.tsx
index 3017aaddd0b..c77b471e934 100644
--- a/www/components/Carousels/ImageCarousel.tsx
+++ b/www/components/Carousels/ImageCarousel.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { Tabs, Typography, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
+import { Tabs, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
 import { useState } from 'react'
 
 // Import Swiper React components
@@ -170,7 +170,7 @@ function ImageCarousel(props: ImageCarouselProps) {
             return (
               <SwiperSlide key={i}>
                 <div className="bg-white dark:bg-gray-800 p-px">
-                  <Typography.Title level={4}>{content.title}</Typography.Title>
+                  <h4>{content.title}</h4>
                   <p>
                     <p className="text-base">{content.text}</p>
                   </p>
diff --git a/www/components/Carousels/SplitCodeBlockCarousel.tsx b/www/components/Carousels/SplitCodeBlockCarousel.tsx
index 9d1c6c09a98..cdbfe573d6a 100644
--- a/www/components/Carousels/SplitCodeBlockCarousel.tsx
+++ b/www/components/Carousels/SplitCodeBlockCarousel.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 // Import Swiper React components
 import { Swiper, SwiperSlide } from 'swiper/react'
 
-import { Tabs, Typography, Button, Space } from '@supabase/ui'
+import { Tabs, Button, Space } from '@supabase/ui'
 import CodeBlock from '../CodeBlock/CodeBlock'
 
 // Import Swiper styles
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index b55848d26fc..4c97dc281fc 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@supabase/ui'
+import { Button } from '@supabase/ui'
 import { useRouter } from 'next/router'
 
 const Benchmark = () => {
@@ -18,9 +18,9 @@ const Benchmark = () => {
             alt="Benchmark illustration"
           />
           <div className="px-12 py-5 lg:px-0 lg:py-0">
-            <Typography.Title level={4}>
+            <h4>
               <span className="text-white">Built for speed and reliability</span>
-            </Typography.Title>
+            </h4>
             <p>
               <span className="block text-gray-300">
                 Supabase outperforms equivalent systems by more than 300%.
diff --git a/www/components/CaseStudies/index.tsx b/www/components/CaseStudies/index.tsx
index e65ac365016..f7dafc8cd88 100644
--- a/www/components/CaseStudies/index.tsx
+++ b/www/components/CaseStudies/index.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import Benchmark from 'components/CaseStudies/benchmark'
 import SectionHeader from 'components/UI/SectionHeader'
 import CaseStudiesData from 'data/CaseStudies.json'
-import { Card, Space, Typography } from '@supabase/ui'
+import { Card, Space } from '@supabase/ui'
 import SectionContainer from '../Layouts/SectionContainer'
 
 const CaseStudies = () => {
@@ -30,12 +30,10 @@ const CaseStudies = () => {
             >
               <Space className="justify-between h-40" direction="vertical">
                 <div>
-                  <p small type="secondary">
-                    Project example
-                  </p>
-                  <Typography.Title level={3}>{caseStudy.title}</Typography.Title>
+                  <p>Project example</p>
+                  <h3>{caseStudy.title}</h3>
                 </div>
-                <p type="default">{caseStudy.description}</p>
+                <p>{caseStudy.description}</p>
               </Space>
             </Card>
           </a>
diff --git a/www/components/ExampleCard.tsx b/www/components/ExampleCard.tsx
index e0a46f04656..d85de38bb00 100644
--- a/www/components/ExampleCard.tsx
+++ b/www/components/ExampleCard.tsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Divider,
-  IconArrowUpRight,
-  IconGitHub,
-  IconTriangle,
-  Space,
-  Typography,
-} from '@supabase/ui'
+import { Button, Divider, IconArrowUpRight, IconGitHub, IconTriangle, Space } from '@supabase/ui'
 import Link from 'next/link'
 
 function ExampleCard(props: any) {
diff --git a/www/components/FeatureColumn.tsx b/www/components/FeatureColumn.tsx
index e80bd3f5558..7606171f845 100644
--- a/www/components/FeatureColumn.tsx
+++ b/www/components/FeatureColumn.tsx
@@ -1,12 +1,10 @@
-import { Typography } from '@supabase/ui'
-
 function FeatureColumn({ icon, title, text }: any) {
   return (
     <>
       <p>
         <p>{icon}</p>
       </p>
-      <Typography.Title level={4}>{title}</Typography.Title>
+      <h4>{title}</h4>
       <p>
         <p>{text}</p>
       </p>
diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index f662b7fa13a..372ab2866fc 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Badge, Typography, IconArrowRight } from '@supabase/ui'
+import { Button, Badge, IconArrowRight } from '@supabase/ui'
 import SectionHeader from 'components/UI/SectionHeader'
 import Solutions from 'data/Solutions.json'
 import Link from 'next/link'
@@ -30,9 +30,7 @@ const Features = () => {
 
   return (
     <SectionContainer className="pb-0">
-      <Typography.Title level={2} className="mb-16">
-        Build faster and focus on your products
-      </Typography.Title>
+      <h2 className="mb-16">Build faster and focus on your products</h2>
       <dl className="grid grid-cols-1 sm:grid-cols-2  gap-y-4 md:grid-cols-2 lg:grid-cols-4 md:gap-16 lg:gap-x-8 xl:gap-x-24">
         {IconSections}
       </dl>
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index 11ec133c6ce..2d7a4c10d16 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -1,4 +1,4 @@
-import { Button, IconBookOpen, Space, Typography } from '@supabase/ui'
+import { Button, IconBookOpen, Space } from '@supabase/ui'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import SectionContainer from './Layouts/SectionContainer'
diff --git a/www/components/Nav/Developers.tsx b/www/components/Nav/Developers.tsx
index c5cf42e520f..7fe71cefaa8 100644
--- a/www/components/Nav/Developers.tsx
+++ b/www/components/Nav/Developers.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import DevelopersData from 'data/Developers.json'
 import AnnouncementsData from 'data/Announcements.json'
 import { useRouter } from 'next/router'
-import { Typography } from '@supabase/ui'
 
 type Props = {
   text: string
@@ -33,7 +32,7 @@ const Developers = () => {
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icon} />
         </svg>
         <div className="ml-4">
-          <Typography.Title level={5}>{text}</Typography.Title>
+          <h5>{text}</h5>
           <p>
             <p>{description}</p>
           </p>
@@ -81,9 +80,7 @@ const Developers = () => {
                     />
                   </div>
                   <div className="min-w-0 flex-1 sm:ml-8">
-                    <Typography.Title level={5} className="mb-0">
-                      {caseStudy.title}
-                    </Typography.Title>
+                    <h5 className="mb-0">{caseStudy.title}</h5>
                     <p>{caseStudy.description}</p>
                   </div>
                 </a>
diff --git a/www/components/Nav/Product.tsx b/www/components/Nav/Product.tsx
index 4f2d49139f9..1f2dc77574d 100644
--- a/www/components/Nav/Product.tsx
+++ b/www/components/Nav/Product.tsx
@@ -3,7 +3,7 @@ import SolutionsData from 'data/Solutions.json'
 import CaseStudiesData from 'data/CaseStudies.json'
 import { useRouter } from 'next/router'
 import ProductIcon from '../ProductIcon'
-import { Typography, Badge } from '@supabase/ui'
+import { Badge } from '@supabase/ui'
 
 const Product = () => {
   const { basePath } = useRouter()
@@ -16,9 +16,7 @@ const Product = () => {
         <div className="flex flex-row items-center">
           <ProductIcon icon={icon} />
           <div>
-            <Typography.Title level={5} className="ml-3 mb-0">
-              {name}
-            </Typography.Title>
+            <h5 className="ml-3 mb-0">{name}</h5>
           </div>
         </div>
         <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
@@ -73,9 +71,7 @@ const Product = () => {
                       />
                     </div>
                     <div className="min-w-0 flex-1 sm:ml-8">
-                      <Typography.Title level={5} className="mb-0">
-                        {caseStudy.title}
-                      </Typography.Title>
+                      <h5 className="mb-0">{caseStudy.title}</h5>
                       <p>{caseStudy.description}</p>
                     </div>
                   </a>
diff --git a/www/components/PricingTableRow.tsx b/www/components/PricingTableRow.tsx
index 2ea70f76208..7e986a13daf 100644
--- a/www/components/PricingTableRow.tsx
+++ b/www/components/PricingTableRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { IconHelpCircle, IconWatch, Space, Typography } from '@supabase/ui'
+import { IconHelpCircle, IconWatch, Space } from '@supabase/ui'
 import ReactTooltip from 'react-tooltip'
 import ProductIcon from 'components/ProductIcon'
 
@@ -53,9 +53,7 @@ export const PricingTableRowDesktop = (props: any) => {
         >
           <Space size={4}>
             {props.icon && <ProductIcon icon={props.icon} />}
-            <Typography.Title className="m-0" level={4}>
-              {category.title}
-            </Typography.Title>
+            <h4 className="m-0">{category.title}</h4>
           </Space>
         </th>
         <td className="pricing-table__product-row bg-gray-50 dark:bg-scale-300 py-5 px-6"></td>
@@ -112,9 +110,7 @@ export const PricingTableRowMobile = (props: any) => {
         <caption className="bg-gray-50 dark:bg-dark-900 border-t border-gray-200 dark:border-gray-600 py-3 px-4 text-sm font-medium text-gray-900 dark:text-white text-left">
           <Space size={4}>
             {category.icon ? <ProductIcon icon={props.icon} /> : null}
-            <Typography.Title className="m-0" level={4}>
-              {category.title}
-            </Typography.Title>
+            <h4 className="m-0">{category.title}</h4>
           </Space>
         </caption>
         <thead>
diff --git a/www/components/Quote.tsx b/www/components/Quote.tsx
index 7bb2fcea47d..e9a9150e649 100644
--- a/www/components/Quote.tsx
+++ b/www/components/Quote.tsx
@@ -1,4 +1,4 @@
-import { Space, Typography } from '@supabase/ui'
+import { Space } from '@supabase/ui'
 import React from 'react'
 
 interface Props {
diff --git a/www/components/Sections/APISection.tsx b/www/components/Sections/APISection.tsx
index a9819775ef4..1739273a34b 100644
--- a/www/components/Sections/APISection.tsx
+++ b/www/components/Sections/APISection.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 // Import Swiper React components
-import { Button, IconArrowUpRight, Tabs, Typography } from '@supabase/ui'
+import { Button, IconArrowUpRight, Tabs } from '@supabase/ui'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import CodeBlock from '../CodeBlock/CodeBlock'
 import Link from 'next/link'
@@ -35,7 +35,7 @@ function APISection(props: Props) {
   return (
     <div className="grid grid-cols-12 lg:gap-16">
       <div className="col-span-12 lg:col-span-5 xl:col-span-5 pb-8">
-        <Typography.Title level={2}>{props.title}</Typography.Title>
+        <h2>{props.title}</h2>
         <p>{props.text}</p>
         {props.documentation_link && (
           <Link href={props.documentation_link} as={props.documentation_link}>
diff --git a/www/components/Sections/FeatureSection.tsx b/www/components/Sections/FeatureSection.tsx
index 773154f370a..524a846eedf 100644
--- a/www/components/Sections/FeatureSection.tsx
+++ b/www/components/Sections/FeatureSection.tsx
@@ -1,4 +1,4 @@
-import { IconDatabase, Typography } from '@supabase/ui'
+import { IconDatabase } from '@supabase/ui'
 
 const FeatureSection = (props: any) => {
   return (
@@ -7,7 +7,7 @@ const FeatureSection = (props: any) => {
         <p className="mb-4">
           <IconDatabase />
         </p>
-        <Typography.Title level={4}>Write less code</Typography.Title>
+        <h4>Write less code</h4>
         <p>
           <p className="lg:text-lg">
             Use media in your project without needing to reply on external services or learn new
@@ -23,7 +23,7 @@ const FeatureSection = (props: any) => {
         <p className="mb-4">
           <IconDatabase />
         </p>
-        <Typography.Title level={4}>Blazing fast</Typography.Title>
+        <h4>Blazing fast</h4>
         <p>
           <p className="lg:text-lg">
             Use media in your project without needing to reply on external services or learn new
@@ -39,7 +39,7 @@ const FeatureSection = (props: any) => {
         <p className="mb-4">
           <IconDatabase />
         </p>
-        <Typography.Title level={4}>Dependable</Typography.Title>
+        <h4>Dependable</h4>
         <p>
           <p className="lg:text-lg">
             Use media in your project without needing to reply on external services or learn new
diff --git a/www/components/Sections/GithubExamples.tsx b/www/components/Sections/GithubExamples.tsx
index 0486dbe6986..2259d71b69e 100644
--- a/www/components/Sections/GithubExamples.tsx
+++ b/www/components/Sections/GithubExamples.tsx
@@ -7,15 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import SwiperCore, { Navigation, Pagination } from 'swiper'
 
 import Link from 'next/link'
-import {
-  Button,
-  Typography,
-  IconGitHub,
-  IconArrowLeft,
-  IconArrowRight,
-  Space,
-  IconBookOpen,
-} from '@supabase/ui'
+import { Button, IconGitHub, IconArrowLeft, IconArrowRight, IconBookOpen } from '@supabase/ui'
 
 import Examples from '../../data/Examples.json'
 import ExampleCard from '../ExampleCard'
@@ -34,9 +26,7 @@ function GithubExamples() {
     <>
       <div className="grid grid-cols-12">
         <div className="col-span-12 text-center">
-          <Typography.Title level={2}>
-            Community driven examples, libraries and guides
-          </Typography.Title>
+          <h2>Community driven examples, libraries and guides</h2>
           <p className="block mb-6">
             <p className="text-base lg:text-lg">
               Supported by a network of early advocates, contributors, and champions.
diff --git a/www/components/Sections/ProductHeader.tsx b/www/components/Sections/ProductHeader.tsx
index 71717626a9a..a92ede9af21 100644
--- a/www/components/Sections/ProductHeader.tsx
+++ b/www/components/Sections/ProductHeader.tsx
@@ -1,4 +1,4 @@
-import { Button, IconBookOpen, IconKey, Space, Typography } from '@supabase/ui'
+import { Button, IconBookOpen, IconKey, Space } from '@supabase/ui'
 import Link from 'next/link'
 import ProductIcon from '../ProductIcon'
 
@@ -21,15 +21,13 @@ const ProductHeader = (props: Types) => (
           <div className="flex flex-row mb-4 item-center">
             {props.icon && <ProductIcon icon={props.icon} />}
             {props.title && (
-              <Typography.Title level={4} className="ml-3" key={`product-name-${props.title}`}>
+              <h4 className="ml-3" key={`product-name-${props.title}`}>
                 {props.title}
-              </Typography.Title>
+              </h4>
             )}
           </div>
         ) : null}
-        <Typography.Title level={1} key={`h1`}>
-          {props.h1}
-        </Typography.Title>
+        <h1 key={`h1`}>{props.h1}</h1>
         {props.subheader && (
           <p>
             {props.subheader.map((subheader, i) => {
diff --git a/www/components/TweetCard.tsx b/www/components/TweetCard.tsx
index ae29756a0b2..cce78981944 100644
--- a/www/components/TweetCard.tsx
+++ b/www/components/TweetCard.tsx
@@ -1,4 +1,4 @@
-import { IconTwitter, Typography } from '@supabase/ui'
+import { IconTwitter } from '@supabase/ui'
 import Image from 'next/image'
 
 interface TweetCard {
diff --git a/www/components/UI/SectionHeader.tsx b/www/components/UI/SectionHeader.tsx
index af3749bf9fa..df86c45a869 100644
--- a/www/components/UI/SectionHeader.tsx
+++ b/www/components/UI/SectionHeader.tsx
@@ -1,5 +1,3 @@
-import { Typography } from '@supabase/ui'
-
 const SectionHeader = (props: any) => {
   return (
     <div className={'grid grid-cols-12 gap-1 sm:gap-8 ' + props.className}>
@@ -8,12 +6,12 @@ const SectionHeader = (props: any) => {
           <span className="col-span-12 block mb-6 text-sm tracking-widest uppercase text-gray-300 font-mono dark:text-gray-300">
             {props.subtitle}
           </span>
-          <Typography.Title level={2}>
+          <h2>
             <span>{props.title}</span>
             {props.title_alt && (
               <span className="text-gray-400 dark:text-gray-300 inline">{props.title_alt}</span>
             )}
-          </Typography.Title>
+          </h2>
         </div>
         <div className="col-span-12 lg:col-span-7">
           {props.paragraph && (
diff --git a/www/data/Community.tsx b/www/data/Community.tsx
index bdaa1b4397a..538239e09b5 100644
--- a/www/data/Community.tsx
+++ b/www/data/Community.tsx
@@ -1,4 +1,3 @@
-import { Card, Space, Typography } from '@supabase/ui'
 import DeveloperSignups from 'data/DeveloperSignups'
 
 type CommunityItem = {
diff --git a/www/data/Team.tsx b/www/data/Team.tsx
index 8841282b2d7..cfcc53a998e 100644
--- a/www/data/Team.tsx
+++ b/www/data/Team.tsx
@@ -1,6 +1,3 @@
-import { Card, Space, Typography } from '@supabase/ui'
-import DeveloperSignups from 'data/DeveloperSignups'
-
 type TeamMember = {
   name: string
   img: string
diff --git a/www/pages/404.tsx b/www/pages/404.tsx
index 49102ab528a..24357c627ec 100644
--- a/www/pages/404.tsx
+++ b/www/pages/404.tsx
@@ -1,8 +1,7 @@
-import { NextPage } from 'next'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { Button, Typography } from '@supabase/ui'
+import { Button } from '@supabase/ui'
 
 import DefaultLayout from '../components/Layouts/Default'
 
@@ -42,14 +41,14 @@ const Error404 = () => {
           </nav>
         </div>
         <div className="absolute">
-          <Typography.Title
+          <h1
             className={`select-none filter transition opacity-[5%] duration-200 ${
               show404 ? 'blur-sm' : 'blur-none'
             }`}
             style={{ fontSize: '28rem' }}
           >
             404
-          </Typography.Title>
+          </h1>
         </div>
         <div
           className={`transition flex flex-col space-y-6 items-center justify-center ${
@@ -57,7 +56,7 @@ const Error404 = () => {
           }`}
         >
           <div className="w-[320px] flex flex-col items-center justify-center space-y-3">
-            <Typography.Title level={3}>Looking for something? 🔍</Typography.Title>
+            <h3>Looking for something? 🔍</h3>
             <p className="text-center">We couldn't find the page that you're looking for!</p>
           </div>
           <div className="flex items-center space-x-4">
diff --git a/www/pages/auth/Auth.tsx b/www/pages/auth/Auth.tsx
index b6a28da5248..3c35047dc0b 100644
--- a/www/pages/auth/Auth.tsx
+++ b/www/pages/auth/Auth.tsx
@@ -128,7 +128,7 @@ function AuthPage() {
                   })}
                 </div>
               </p>
-              <Typography.Title level={4}>All the social providers</Typography.Title>
+              <h4>All the social providers</h4>
               <p>
                 <p className="text-base">
                   Enable social logins with the click of a button. Google, Facebook, GitHub, Azure,
@@ -142,7 +142,7 @@ function AuthPage() {
                   <IconLink />
                 </p>
               </p>
-              <Typography.Title level={4}>Fully integrated</Typography.Title>
+              <h4>Fully integrated</h4>
               <p>
                 <p className="text-base">
                   Incredibly simple Auth, without a single external authentication service. Built-in
@@ -156,7 +156,7 @@ function AuthPage() {
                   <IconShield />
                 </p>
               </p>
-              <Typography.Title level={4}>Own your data</Typography.Title>
+              <h4>Own your data</h4>
               <p>
                 <p className="text-base">
                   User data stored in your Supabase database so you never have to worry about 3rd
@@ -227,7 +227,7 @@ function AuthPage() {
         <SectionContainer>
           <div className="grid grid-cols-12 lg:gap-16">
             <div className="col-span-12 lg:col-span-5 mb-8">
-              <Typography.Title level={2}>User permissions without the middleware</Typography.Title>
+              <h2>User permissions without the middleware</h2>
               <p>
                 <p className="text-base lg:text-lg">
                   Supabase Auth works without any additional servers. Build Authorization rules with
@@ -269,9 +269,7 @@ function AuthPage() {
                 <img className="w-8" src={`${basePath}/images/product/auth/react-icon.svg`} />
               </Space>
 
-              <Typography.Title level={2} className="mb-4">
-                React Auth
-              </Typography.Title>
+              <h2 className="mb-4">React Auth</h2>
               <p>
                 <p className="text-base lg:text-lg">
                   Pre-built auth widgets to get started in minutes.
diff --git a/www/pages/blog.tsx b/www/pages/blog.tsx
index db5ee6ce7c2..a623a9d04e4 100644
--- a/www/pages/blog.tsx
+++ b/www/pages/blog.tsx
@@ -9,7 +9,7 @@ import { getSortedPosts, getAllCategories } from '~/lib/posts'
 import authors from 'lib/authors.json'
 
 import DefaultLayout from '~/components/Layouts/Default'
-import { Typography, Tabs } from '@supabase/ui'
+import { Tabs } from '@supabase/ui'
 import PostTypes from '~/types/post'
 import BlogListItem from '~/components/Blog/BlogListItem'
 
@@ -149,7 +149,7 @@ function FeaturedThumb(blog: PostTypes) {
             </div>
 
             <div>
-              <Typography.Title level={2}>{blog.title}</Typography.Title>
+              <h2>{blog.title}</h2>
               <p className="m-0" type="secondary">
                 <span className="text-xl">{blog.description}</span>
               </p>
diff --git a/www/pages/blog/[year]/[month]/[day]/[slug].tsx b/www/pages/blog/[year]/[month]/[day]/[slug].tsx
index 54c5a9b747e..e82cc9a2aa0 100644
--- a/www/pages/blog/[year]/[month]/[day]/[slug].tsx
+++ b/www/pages/blog/[year]/[month]/[day]/[slug].tsx
@@ -1,4 +1,4 @@
-import { Badge, Card, Divider, IconChevronLeft, IconFile, Space, Typography } from '@supabase/ui'
+import { Badge, Card, Divider, IconChevronLeft, IconFile, Space } from '@supabase/ui'
 import matter from 'gray-matter'
 import authors from 'lib/authors.json'
 import hydrate from 'next-mdx-remote/hydrate'
@@ -107,7 +107,7 @@ function BlogPostPage(props: any) {
                 <p>{label}</p>
               </div>
               <div>
-                <Typography.Title level={4}>{post.title}</Typography.Title>
+                <h4>{post.title}</h4>
                 <p>{post.date}</p>
               </div>
               <div>
@@ -137,11 +137,11 @@ function BlogPostPage(props: any) {
       </div>
       <div>
         <p>Table of contents</p>
-        <Typography>
+        <div>
           <div className={blogStyles['toc']}>
             <ReactMarkdown plugins={[gfm]}>{props.blog.toc.content}</ReactMarkdown>
           </div>
-        </Typography>
+        </div>
       </div>
     </Space>
   )
@@ -202,8 +202,8 @@ function BlogPostPage(props: any) {
               {/* Title and description */}
               <div className="mb-16 space-y-8 max-w-5xl">
                 <div className="space-y-4">
-                  <p type="success">Blog post</p>
-                  <Typography.Title>{props.blog.title}</Typography.Title>
+                  <p className="text-brand-900">Blog post</p>
+                  <h1>{props.blog.title}</h1>
                   <div className="flex space-x-3">
                     <p>{props.blog.date}</p>
                     <p>•</p>
@@ -241,8 +241,8 @@ function BlogPostPage(props: any) {
                       style={{ maxHeight: '520px' }}
                     />
                   )}
-                  <article className={blogStyles['article']}>
-                    <Typography>{content}</Typography>
+                  <article className={[blogStyles['article'], 'prose'].join(' ')}>
+                    {content}
                   </article>
                   <div className="text-gray-900 dark:text-white">Share with your friends</div>
                   <div className="flex space-x-4 mt-4">
@@ -384,9 +384,9 @@ function BlogPostPage(props: any) {
                 <Space direction="vertical" size={8} className="lg:mb-16 lg:top-16 lg:sticky">
                   <div className="hidden lg:block">{toc}</div>
                   <div>
-                    <Typography.Title className="mb-4" level={5}>
+                    <h5 className="mb-4">
                       Related articles
-                    </Typography.Title>
+                    </h5>
                     <Space direction="vertical">
                       {props.relatedPosts.map((post: any) => (
                         <Link href={`/blog/${post.url}`} as={`/blog/${post.url}`}>
diff --git a/www/pages/blog/tags/[tag].tsx b/www/pages/blog/tags/[tag].tsx
index 26b8852da86..0310c49fc5a 100644
--- a/www/pages/blog/tags/[tag].tsx
+++ b/www/pages/blog/tags/[tag].tsx
@@ -5,8 +5,6 @@ import Link from 'next/link'
 import DefaultLayout from '~/components/Layouts/Default'
 import BlogListItem from '~/components/Blog/BlogListItem'
 import PostTypes from '~/types/post'
-import BlogHeader from '~/components/Blog/BlogHeader'
-import { Typography } from '@supabase/ui'
 
 export async function getStaticProps({ params }: any) {
   const posts = getSortedPosts('_blog', 0, [params.tag])
diff --git a/www/pages/brand-assets.tsx b/www/pages/brand-assets.tsx
index 30b983bcfa4..5662891f5d0 100644
--- a/www/pages/brand-assets.tsx
+++ b/www/pages/brand-assets.tsx
@@ -1,17 +1,14 @@
 import Container from 'components/Container'
-import { createClient } from '@supabase/supabase-js'
+
 import Layout from '~/components/Layouts/Default'
 import CTABanner from 'components/CTABanner/index'
-import { Button, Typography, IconDownload } from '@supabase/ui'
+import { Button, IconDownload } from '@supabase/ui'
 
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { NextSeo } from 'next-seo'
 
-const { Title, Text } = Typography
-
 const Index = () => {
   // base path for images
   const router = useRouter()
@@ -39,14 +36,12 @@ const Index = () => {
         <Container>
           <SectionContainer className="pb-0 md:pb-0 lg:pb-0">
             <div className="grid lg:grid-cols-2">
-              <div>
-                <Title>Brand assets</Title>
-                <Title level={3}>Download official Supabase logos</Title>
-                <Text>
-                  All Supabase trademarks, logos, or other brand elements can never be modified or
-                  used for any other purpose other than to represent Supabase Inc.
-                </Text>
-              </div>
+              <h1>Brand assets</h1>
+              <h3>Download official Supabase logos</h3>
+              <p>
+                All Supabase trademarks, logos, or other brand elements can never be modified or
+                used for any other purpose other than to represent Supabase Inc.
+              </p>
             </div>
           </SectionContainer>
           <SectionContainer>
@@ -61,7 +56,7 @@ const Index = () => {
               <div className="col-span-12 lg:col-span-7 flex items-center">
                 <div className="p-16">
                   <div>
-                    <Typography.Title level={2}>Supabase logos</Typography.Title>
+                    <h2>Supabase logos</h2>
                     <p>
                       <p>
                         Download Supabase official logos, including as SVG's, in both light and dark
diff --git a/www/pages/company.tsx b/www/pages/company.tsx
index aad5486766b..7779a237494 100644
--- a/www/pages/company.tsx
+++ b/www/pages/company.tsx
@@ -24,7 +24,6 @@ import {
   IconLinkedin,
   IconTwitter,
   Space,
-  Typography,
 } from '@supabase/ui'
 import { NextSeo } from 'next-seo'
 
@@ -76,9 +75,7 @@ const Header = () => {
           mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24
           text-center"
       >
-        <Typography.Title>
-          Join one of the world's fastest growing open source communities.
-        </Typography.Title>
+        <h1>Join one of the world's fastest growing open source communities.</h1>
       </div>
     </>
   )
@@ -133,9 +130,9 @@ const Team = () => {
               </div>
               <div className="flex flex-col justify-center space-y-2">
                 <div>
-                  <Typography.Title level={5} className="mb-0">
+                  <h5 className="mb-0">
                     {x.name}
-                  </Typography.Title>
+                  </h5>
                   <p className="mb-0">
                     {x.department}
                   </p>
@@ -216,9 +213,7 @@ const Community = () => {
                 />
               </div>
               <div>
-                <Typography.Title level={1} className="mb-0">
-                  {x.stat}
-                </Typography.Title>
+                <h1 className="mb-0">{x.stat}</h1>
                 <p>{x.statLabel}</p>
               </div>
             </div>
@@ -283,7 +278,7 @@ const Investors = () => {
           </div>
         ))}
       </div>
-      <Typography.Title level={3}>Individual investors</Typography.Title>
+      <h3>Individual investors</h3>
       <div className="mt-5 mx-auto grid gap-5 grid-cols-2 lg:grid-cols-4 lg:max-w-none">
         {InvestorData.filter((x) => x.lead === false)
           .sort((a, b) => a.name.localeCompare(b.name))
@@ -293,9 +288,7 @@ const Investors = () => {
 
               <div className="flex flex-col justify-center space-y-2">
                 <div>
-                  <Typography.Title level={5} className="mb-0">
-                    {x.name}
-                  </Typography.Title>
+                  <h5 className="mb-0">{x.name}</h5>
                   <p className="mb-0">{x.title}</p>
                 </div>
               </div>
@@ -318,10 +311,8 @@ const Press = () => {
             <Card key={`press_${x.href}`} hoverable>
               <Space className="justify-between h-40" direction="vertical">
                 <div>
-                  <p small type="secondary">
-                    {x.type.toUpperCase()}
-                  </p>
-                  <Typography.Title level={3}>{x.title}</Typography.Title>
+                  <p>{x.type.toUpperCase()}</p>
+                  <h3>{x.title}</h3>
                 </div>
               </Space>
             </Card>
@@ -334,10 +325,8 @@ const Press = () => {
             <Card key={`press_${x.href}`} hoverable>
               <Space className="justify-between h-40" direction="vertical">
                 <div>
-                  <p small type="secondary">
-                    {x.type.toUpperCase()}
-                  </p>
-                  <Typography.Title level={3}>{x.title}</Typography.Title>
+                  <p>{x.type.toUpperCase()}</p>
+                  <h3>{x.title}</h3>
                 </div>
               </Space>
             </Card>
diff --git a/www/pages/database/Database.tsx b/www/pages/database/Database.tsx
index 9984ba62da7..df2b5bb82d9 100644
--- a/www/pages/database/Database.tsx
+++ b/www/pages/database/Database.tsx
@@ -1,13 +1,4 @@
-import {
-  Badge,
-  Button,
-  IconArrowUpRight,
-  IconShuffle,
-  IconX,
-  Space,
-  Tabs,
-  Typography,
-} from '@supabase/ui'
+import { Badge, Button, IconArrowUpRight, IconShuffle, IconX, Space, Tabs } from '@supabase/ui'
 // data
 import ApiExamplesData from 'data/products/database/api-examples'
 import ExtensionsExamplesData from 'data/products/database/extensions-examples'
@@ -122,7 +113,7 @@ function Database() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Just Postgres</Typography.Title>
+              <h4>Just Postgres</h4>
               <p>
                 <p className="text-base lg:text-lg">
                   Every Supabase project is a dedicated Postgres database.
@@ -142,7 +133,7 @@ function Database() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Built-in Auth</Typography.Title>
+              <h4>Built-in Auth</h4>
               <p>
                 <p className="text-base lg:text-lg">
                   Leveraging PostgreSQL's proven Row Level Security.
@@ -163,7 +154,7 @@ function Database() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Realtime enabled</Typography.Title>
+              <h4>Realtime enabled</h4>
               <p>
                 <p className="text-base lg:text-lg">Data-change listeners over websockets.</p>
                 <p>Subscribe and react to database changes, milliseconds after they happen.</p>
@@ -176,7 +167,7 @@ function Database() {
         <SectionContainer className="text-center md:pb-0 lg:pb-0">
           <div className="grid grid-cols-12">
             <div className="col-span-12 lg:col-span-8 lg:col-start-3">
-              <Typography.Title level={2}>Easy to use dashboard</Typography.Title>
+              <h2>Easy to use dashboard</h2>
               <p>
                 <p className="text-base lg:text-lg">
                   The simplicity of a Table Editor, or the power of a SQL editor. Your choice.
@@ -320,7 +311,7 @@ function Database() {
         <SectionContainer className="lg:py-48">
           <div className="grid grid-cols-12 lg:gap-16">
             <div className="col-span-12 lg:col-span-6 xl:col-span-5 mb-8">
-              <Typography.Title level={2}>Extend your database</Typography.Title>
+              <h2>Extend your database</h2>
               <p className="block mb-8">
                 <p className="lg:text-lg">Supabase works natively with Postgres extensions.</p>
                 <p>
diff --git a/www/pages/pricing/index.tsx b/www/pages/pricing/index.tsx
index ab81a198615..23252a34d5f 100644
--- a/www/pages/pricing/index.tsx
+++ b/www/pages/pricing/index.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/PricingTableRow'
-import { Accordion, Badge, Button, Divider, Space, Typography } from '@supabase/ui'
+import { Accordion, Button } from '@supabase/ui'
 
 import pricing from '~/data/Pricing.json'
 import pricingFaq from '~/data/PricingFAQ.json'
@@ -40,7 +40,7 @@ export default function IndexPage() {
       <div className="bg-white dark:bg-gray-800">
         <div className="container mx-auto px-6 lg:px-16 xl:px-20 relative pt-24 md:pt-24 lg:pt-24">
           <div className="text-center">
-            <Typography.Title>Predictable pricing, no surprises</Typography.Title>
+            <h1>Predictable pricing, no surprises</h1>
             <p>
               <p className="text-lg">
                 Start with a hobby project, collaborate with a team, and scale to millions of users.
@@ -51,9 +51,9 @@ export default function IndexPage() {
                 <div className="rounded border border-green-500 dark:border-green-900 bg-green-500 bg-opacity-10 grid grid-cols-6">
                   <div className="p-6 col-span-6">
                     <Space className="mb-4">
-                      <Typography.Title level={3} className="flex gap-2">
+                      <h3 className="flex gap-2">
                         Special Beta Pricing
-                      </Typography.Title>
+                      </h3>
                       <Badge dot>Limited time offer</Badge>
                     </Space>
                     <p>
@@ -71,7 +71,7 @@ export default function IndexPage() {
                     className="col-span-6 h-30 object-cover"
                   />
                   <div className="p-6 lg:col-span-6">
-                    <Typography.Title level={4}>Free tshirt</Typography.Title>
+                    <h4>Free tshirt</h4>
                     <p>
                       We are giving away free tshirts to anyone who signs up for the Beta Pro plan
                     </p>
@@ -223,7 +223,7 @@ export default function IndexPage() {
                     className=" bg-white dark:bg-gray-800  w-1/4 pb-4 px-6 text-left font-medium"
                     scope="col"
                   >
-                    <Typography.Title level={4}>Free</Typography.Title>
+                    <h4>Free</h4>
                     <div
                       className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
                       style={{ height: '1px' }}
@@ -234,7 +234,7 @@ export default function IndexPage() {
                     className=" bg-white dark:bg-gray-800  w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left"
                     scope="col"
                   >
-                    <Typography.Title level={4}>Pro</Typography.Title>
+                    <h4>Pro</h4>
                     <div
                       className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
                       style={{ height: '1px' }}
@@ -245,7 +245,7 @@ export default function IndexPage() {
                     className=" bg-white dark:bg-gray-800  w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left"
                     scope="col"
                   >
-                    <Typography.Title level={4}>Pay as you go</Typography.Title>
+                    <h4>Pay as you go</h4>
                     <div
                       className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
                       style={{ height: '1px' }}
@@ -391,11 +391,11 @@ export default function IndexPage() {
 
       <div className="bg-gray-50 dark:bg-gray-800 border-t dark:border-gray-600">
         <div className="container mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24">
-          <Typography.Title level={2}>Frequently asked questions</Typography.Title>
-          <Typography className="w-5/12 mb-4">
+          <h2>Frequently asked questions</h2>
+          <h1 className="w-5/12 mb-4">
             Can&apos;t find the answer to your question, ask someone in the community either on our
             Discord or GitHub.
-          </Typography>
+          </h1>
           <Link href="https://discord.supabase.com">
             <a>
               <Button type="default" className="mr-2" size="small">
@@ -416,9 +416,7 @@ export default function IndexPage() {
                     {/* @ts-ignore */}
                     <Accordion type="bordered" openBehaviour="multiple" size="medium">
                       <Accordion.Item header={faq.question} id={`faq--${i.toString()}`}>
-                        <Typography>
-                          <ReactMarkdown>{faq.answer}</ReactMarkdown>
-                        </Typography>
+                        <ReactMarkdown>{faq.answer}</ReactMarkdown>
                       </Accordion.Item>
                     </Accordion>
                   </div>
diff --git a/www/pages/storage/Storage.tsx b/www/pages/storage/Storage.tsx
index 77cb573338b..dffbc774714 100644
--- a/www/pages/storage/Storage.tsx
+++ b/www/pages/storage/Storage.tsx
@@ -1,15 +1,4 @@
-import {
-  Badge,
-  Button,
-  IconArrowUpRight,
-  IconBarChart,
-  IconCheckSquare,
-  IconShuffle,
-  IconWifi,
-  IconX,
-  Space,
-  Typography,
-} from '@supabase/ui'
+import { Badge, Button, IconArrowUpRight, IconShuffle, IconWifi, IconX, Space } from '@supabase/ui'
 import ApiExamples from 'data/products/storage/api-examples'
 import DashboardViewData from 'data/products/storage/dashboard-carousel.json'
 import StoragePermissionsData from 'data/products/storage/permissions-examples'
@@ -104,7 +93,7 @@ function StoragePage() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Interoperable</Typography.Title>
+              <h4>Interoperable</h4>
               <p>
                 <p className="text-lg">
                   Integrates well with the rest of Supabase ecosystem, including Auth and Postgres.
@@ -127,7 +116,7 @@ function StoragePage() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Lightning fast</Typography.Title>
+              <h4>Lightning fast</h4>
               <p>
                 <p className="text-lg">
                   Thin API server layer that leverages Postgres' permissions and performance.
@@ -150,7 +139,7 @@ function StoragePage() {
                   </Space>
                 </p>
               </p>
-              <Typography.Title level={4}>Dependable</Typography.Title>
+              <h4>Dependable</h4>
               <p>
                 <p className="text-lg">Enterprise-level scalability and durability.</p>
                 {/* <p>A durability rating of 99.999999999%.</p> */}
@@ -161,7 +150,7 @@ function StoragePage() {
 
         <SectionContainer className="pt-16">
           <div className="mb-16 block">
-            <Typography.Title>Sleek dashboard for managing your media</Typography.Title>
+            <h1>Sleek dashboard for managing your media</h1>
             <p>
               <p className="text-lg">
                 A complete Object Explorer so that any of your team can use.
@@ -176,9 +165,7 @@ function StoragePage() {
             // @ts-ignore
             content={DashboardViewData}
             footer={[
-              <Typography.Title level={4} key="title">
-                Check out our example app
-              </Typography.Title>,
+              <h4 key="title">Check out our example app</h4>,
               // !! Update this example !!
               <ExampleCard
                 key="example"
@@ -254,10 +241,10 @@ function StoragePage() {
                 <SectionContainer>
                   <div className="grid grid-cols-12 lg:gap-16">
                     <div className="col-span-12 lg:col-span-5 mb-8">
-                      <Typography.Title level={2}>
+                      <h2>
                         Integrates natively <br />
                         with Supabase Auth
-                      </Typography.Title>
+                      </h2>
                       <p>
                         <p className="">
                           Using Postgres Row Level Security to create Object access rules.
diff --git a/www/pages/support.tsx b/www/pages/support.tsx
index a022387b458..03e04d8f545 100644
--- a/www/pages/support.tsx
+++ b/www/pages/support.tsx
@@ -11,7 +11,6 @@ import {
   IconX,
   Space,
   Tabs,
-  Typography,
   IconGitHub,
   Divider,
   IconMail,
@@ -61,7 +60,7 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="text-center">
-              <Typography.Title level={2}>Get Support</Typography.Title>
+              <h2>Get Support</h2>
               <p>
                 <p className="lg:text-lg">
                   Need a bit of help? We're here for you. Check out our current issues, GitHub
@@ -80,9 +79,7 @@ const Index = ({}: Props) => {
                     "
                 >
                   <div className="mb-4">
-                    <Typography.Title level={5} className="mb-1">
-                      GitHub Issues
-                    </Typography.Title>
+                    <h5 className="mb-1">GitHub Issues</h5>
                     <p className="block">
                       <p>
                         Have a general issue or bug that you've found? We'd love to hear about it in
@@ -129,9 +126,7 @@ const Index = ({}: Props) => {
                     "
                 >
                   <div className="mb-4">
-                    <Typography.Title level={5} className="mb-1">
-                      GitHub Discussions
-                    </Typography.Title>
+                    <h5 className="mb-1">GitHub Discussions</h5>
                     <p className="block">
                       <p>
                         For help and questions about best practices, join our GitHub discussions.
@@ -179,9 +174,7 @@ const Index = ({}: Props) => {
                     "
                 >
                   <div className="mb-4">
-                    <Typography.Title level={5} className="mb-1">
-                      Email Support
-                    </Typography.Title>
+                    <h5 className="mb-1">Email Support</h5>
                     <p className="block">
                       <p>
                         We offer email based support. If you need SLAs, guaranteed response times,