diff --git a/packages/web/docs/src/components/pricing-page.tsx b/packages/web/docs/src/components/pricing-page.tsx
index aa24d84fc..0da02733b 100644
--- a/packages/web/docs/src/components/pricing-page.tsx
+++ b/packages/web/docs/src/components/pricing-page.tsx
@@ -16,9 +16,9 @@ export function PricingPage() {
     <Page className="text-green-1000 light mx-auto max-w-[90rem] overflow-hidden">
       <PricingPageHero className="mx-4 max-sm:mt-2 md:mx-6" />
 
-      <Pricing />
+      <Pricing className="mt-4" />
 
-      <PlanComparison className="mx-4 mt-6 md:mx-6" />
+      <PlanComparison className="mx-4 md:mx-6" />
 
       <CompanyTestimonialsSection className="mx-4 mt-6 md:mx-6" />
 
diff --git a/packages/web/docs/src/components/pricing.tsx b/packages/web/docs/src/components/pricing.tsx
index 37d21630e..1c00eb924 100644
--- a/packages/web/docs/src/components/pricing.tsx
+++ b/packages/web/docs/src/components/pricing.tsx
@@ -71,9 +71,15 @@ function PlanFeaturesListItem(props: HTMLAttributes<HTMLLIElement>) {
 const USAGE_DATA_RETENTION_EXPLAINER = 'How long your GraphQL operations are stored on Hive';
 const OPERATIONS_EXPLAINER = 'GraphQL operations reported to GraphQL Hive';
 
-export function Pricing({ children }: { children?: ReactNode }): ReactElement {
+export function Pricing({
+  children,
+  className,
+}: {
+  children?: ReactNode;
+  className?: string;
+}): ReactElement {
   return (
-    <section className="py-12 sm:py-24">
+    <section className={cn('py-12 sm:py-20', className)}>
       <div className="mx-auto box-border w-full max-w-[1200px]">
         {children}