diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index 5e2ef909985..df040ec1976 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button, Typography } from '@supabase/ui'
 
 const CTABanner = (props: any) => {
   const { darkerBg } = props
@@ -10,16 +10,14 @@ const CTABanner = (props: any) => {
       `}
     >
       <div className="col-span-12">
-        <h4 className="flex flex-col sm:flex-row sm:justify-center font-normal text-white text-2xl lg:text-3xl">
-          <span className="block">Build in a weekend, scale to millions.</span>
-        </h4>
-        {/* <p className="font-normal mt-1 text-gray-500 dark:text-dark-100 lg:text-3xl">
-					Build in a weekend, scale to millions.
-				</p> */}
+        <Typography.Title level={2}>
+          <span style={{ color: '#bbbbbb' }}>Build in a weekend,</span>
+          <span style={{ color: '#ffffff' }}> scale to millions</span>
+        </Typography.Title>
       </div>
-      <div className="col-span-12">
+      <div className="col-span-12 mt-4">
         <a href="https://app.supabase.io/api/login">
-          <Button>Start your project</Button>
+          <Button size="medium">Start your project</Button>
         </a>
       </div>
     </div>
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index 434d74b36aa..a56350e8ead 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button, Typography } from '@supabase/ui'
 import { useRouter } from 'next/router'
 
 const Benchmark = () => {
@@ -16,15 +16,18 @@ const Benchmark = () => {
             src={`${basePath}/images/benchmark--mobile.svg`}
           />
           <div className="px-12 py-5 lg:px-0 lg:py-0">
-            <p className="text-xl text-white">Built for speed and reliability</p>
-            <p className="text-dark-300 mt-2">
-              <span className="block">
+            {/* <p className="text-xl text-white">Built for speed and reliability</p> */}
+            <Typography.Title level={4}>
+              <span className="text-white">Built for speed and reliability</span>
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              <span className="block text-gray-300">
                 Supabase outperforms equivalent systems by more than 300%.
               </span>
-              <span className="block">
+              <span className="block text-gray-300">
                 Sign up for our public benchmark release and we'll send it to your inbox.
               </span>
-            </p>
+            </Typography.Text>
           </div>
         </div>
         <div className="pb-12 px-12 col-span-1 lg:pb-0 lg:px-0 lg:col-span-2 rounded-r-md">
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index 58443576f5a..d4ee3bc1836 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button, Typography } from '@supabase/ui'
 import { useRouter } from 'next/router'
 
 const Hero = () => {
@@ -38,7 +38,7 @@ const Hero = () => {
                   <div className="md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
                     <div className="sm:mx-auto md:w-3/4 lg:w-full lg:mx-0">
                       <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
-                        <span className="block">The Open Source</span>
+                        <span className="block text-white">The Open Source</span>
                         <span className="text-brand-600 md:ml-0 block">Firebase Alternative</span>
                       </h1>
                       <p className="mt-5 text-base text-dark-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 28915c73084..ea8b63fd8df 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -1,5 +1,6 @@
-import Button from 'components/Button'
-import Badge from 'components/Badge'
+// import Button from 'components/Button'
+// import Badge from 'components/Badge'
+import { Badge, Button, Typography } from '@supabase/ui'
 import SectionHeader from 'components/UI/SectionHeader'
 import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
 
@@ -36,22 +37,28 @@ const MadeForDevelopers = () => {
                     return (
                       <div className={blockClass} key={`dev_feature_${idx}`}>
                         <div className="lg:mt-5">
-                          <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex flex-row sm:flex-col xl:flex-row">
-                            {feature.name}
+                          <dt className="flex flex-row sm:flex-col xl:flex-row">
+                            <Typography.Title level={4}>{feature.name}</Typography.Title>
                             {feature.badge && (
-                              <Badge className="ml-3 sm:ml-0 sm:w-20 sm:mt-2 xl:ml-3 xl:mt-0 xl:w-auto">
-                                {feature.badge}
-                              </Badge>
+                              <div className="block xl:ml-3">
+                                <Badge
+                                  dot
+                                  // className="ml-3 sm:ml-0 sm:w-20 sm:mt-2 xl:ml-3 xl:mt-0 xl:w-auto"
+                                >
+                                  {feature.badge}
+                                </Badge>
+                              </div>
                             )}
                           </dt>
-                          <dd className="mt-3 text-base text-gray-500 mb-6 dark:text-dark-300">
-                            {feature.description}
+                          <dd className="my-3">
+                            <Typography.Text type="secondary">
+                              {feature.description}
+                            </Typography.Text>
                           </dd>
-                          <Button
-                            type="secondary"
-                            text={feature.badge ? 'Get notified' : 'Explore more'}
-                            url={feature.url}
-                          />
+
+                          <Typography.Link href={feature.url}>
+                            {feature.badge ? 'Get notified' : 'Explore more'}
+                          </Typography.Link>
                         </div>
                       </div>
                     )