diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 5cd079a7f..287e0a113 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -121,7 +121,7 @@ function Home() {
 
               <Heading
                 level={2}
-                className={'font-medium text-muted-foreground'}
+                className={'font-sans font-normal text-muted-foreground'}
               >
                 Unbeatable Features and Benefits for Your SaaS Business
               </Heading>
@@ -136,16 +136,16 @@ function Home() {
         >
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
                   <Lock className={'h-5 text-green-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Authentication</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Authentication</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     Secure and Easy-to-Use Authentication for Your SaaS Website
@@ -185,16 +185,16 @@ function Home() {
             </FeatureContainer>
 
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
                   <LayoutDashboard className={'h-5 text-indigo-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Dashboard</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Dashboard</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A fantastic dashboard to manage your SaaS business
@@ -212,16 +212,16 @@ function Home() {
 
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
                   <CreditCard className={'h-5 text-blue-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Billing</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Billing</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A powerful billing system for your SaaS business
@@ -260,12 +260,12 @@ function Home() {
 
             <div className={'flex flex-col space-y-2'}>
               <Heading level={1}>
-                Fair pricing for all types of SaaS businesses
+                Fair pricing for all types of businesses
               </Heading>
 
               <Heading
                 level={2}
-                className={'font-medium text-muted-foreground'}
+                className={'font-sans font-normal text-muted-foreground'}
               >
                 Get started on our free plan and upgrade when you are ready.
               </Heading>
diff --git a/packages/billing/gateway/src/components/line-item-details.tsx b/packages/billing/gateway/src/components/line-item-details.tsx
index 475bff87e..0e3c2973a 100644
--- a/packages/billing/gateway/src/components/line-item-details.tsx
+++ b/packages/billing/gateway/src/components/line-item-details.tsx
@@ -42,7 +42,7 @@ export function LineItemDetails(
           <If condition={item.setupFee}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans
@@ -65,7 +65,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span>
                     <Trans i18nKey={'billing:basePlan'} />
@@ -95,7 +95,7 @@ export function LineItemDetails(
 
             <If condition={item.tiers?.length}>
               <span className={'flex items-center space-x-1.5'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span className={'flex space-x-1 text-sm'}>
                   <span>
@@ -118,7 +118,7 @@ export function LineItemDetails(
           <div key={index} className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1.5'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans i18nKey={'billing:perTeamMember'} />
@@ -145,7 +145,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span className={'flex space-x-1'}>
                     <span>
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 0194ef02e..1dc0b2826 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -51,7 +51,7 @@ export function PricingTable({
   const [interval, setInterval] = useState(intervals[0]!);
 
   return (
-    <div className={'flex flex-col space-y-8'}>
+    <div className={'flex flex-col space-y-8 xl:space-y-12'}>
       <div className={'flex justify-center'}>
         {intervals.length ? (
           <PlanIntervalSwitcher
@@ -89,7 +89,6 @@ export function PricingTable({
 
           return (
             <PricingItem
-              className={cn('border')}
               selectable
               key={plan.id}
               plan={plan}
@@ -157,8 +156,8 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
+        `s-full relative flex flex-1 grow flex-col items-stretch justify-between 
+            self-stretch rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
         {
           ['border-primary']: highlighted,
           ['dark:shadow-primary/40 border-transparent shadow dark:shadow-sm']:
@@ -166,8 +165,21 @@ function PricingItem(
         },
       )}
     >
+      <If condition={props.product.badge}>
+        <div className={'absolute -top-2.5 left-0 flex w-full justify-center'}>
+          <Badge variant={highlighted ? 'default' : 'outline'}>
+            <span>
+              <Trans
+                i18nKey={props.product.badge}
+                defaults={props.product.badge}
+              />
+            </span>
+          </Badge>
+        </div>
+      </If>
+
       <div className={'flex flex-col space-y-6'}>
-        <div className={'flex flex-col space-y-4'}>
+        <div className={'flex flex-col space-y-2.5'}>
           <div className={'flex items-center space-x-6'}>
             <b
               className={
@@ -179,20 +191,9 @@ function PricingItem(
                 defaults={props.product.name}
               />
             </b>
-
-            <If condition={props.product.badge}>
-              <Badge variant={highlighted ? 'default' : 'outline'}>
-                <span>
-                  <Trans
-                    i18nKey={props.product.badge}
-                    defaults={props.product.badge}
-                  />
-                </span>
-              </Badge>
-            </If>
           </div>
 
-          <span className={cn(`text-muted-foreground h-10 text-base`)}>
+          <span className={cn(`text-muted-foreground h-6 text-sm`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}
@@ -282,6 +283,8 @@ function PricingItem(
         </div>
 
         <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
+          <Separator />
+
           <div className={'flex flex-col space-y-2'}>
             <h6 className={'text-sm font-semibold'}>
               <Trans i18nKey={'billing:detailsLabel'} />
diff --git a/packages/ui/src/shadcn/heading.tsx b/packages/ui/src/shadcn/heading.tsx
index 58807c71e..eca5354a9 100644
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -1,4 +1,4 @@
-import { cn } from '../utils/cn';
+import { cn } from '../utils';
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
diff --git a/tooling/tailwind/index.ts b/tooling/tailwind/index.ts
index 71faf2ca2..c3d41ff75 100644
--- a/tooling/tailwind/index.ts
+++ b/tooling/tailwind/index.ts
@@ -64,7 +64,7 @@ export default {
       },
       fontFamily: {
         cal: ['var(--font-cal)', ...fontFamily.sans],
-        sans: ['system-ui', 'var(--font-sans)', ...fontFamily.sans],
+        sans: ['-apple-system', 'var(--font-sans)', ...fontFamily.sans],
         heading: ['var(--font-heading)'],
       },
       keyframes: {