diff --git a/apps/www/components/Sections/ProductHeader.tsx b/apps/www/components/Sections/ProductHeader.tsx
index 77f32e0c328..f307cf2aec7 100644
--- a/apps/www/components/Sections/ProductHeader.tsx
+++ b/apps/www/components/Sections/ProductHeader.tsx
@@ -12,12 +12,14 @@ interface Types {
   image?: React.ReactNode
   footer?: React.ReactNode
   documentation_url?: string
+  callout?: React.ReactNode
 }
 
 const ProductHeader = (props: Types) => (
-  <div className="container relative mx-auto px-6 pt-16 pb-0 sm:px-16 lg:pt-32 xl:px-20">
+  <div className="container relative mx-auto px-6 pt-16 pb-0 sm:px-16 lg:pt-28 xl:px-20">
     <div className="grid grid-cols-12">
       <div className="col-span-12 space-y-8 lg:col-span-5">
+        {props.callout && props.callout}
         <div>
           {props.icon || props.title ? (
             <div className="mb-4 flex items-center gap-3">
diff --git a/apps/www/pages/auth.tsx b/apps/www/pages/auth.tsx
index f9885168f5f..34b7da5090e 100644
--- a/apps/www/pages/auth.tsx
+++ b/apps/www/pages/auth.tsx
@@ -7,11 +7,13 @@ import NextImage from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Button, Image } from 'ui'
+import { useBreakpoint } from 'common'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import ProductsNav from '~/components/Products/ProductsNav'
 import ProductHeader from '~/components/Sections/ProductHeader'
+import EventCallout from '~/components/EventCallout'
 
 import Solutions from 'data/Solutions'
 import { PRODUCT_NAMES } from 'shared-data/products'
@@ -26,7 +28,7 @@ const APISection = dynamic(() => import('~/components/Sections/APISection'))
 const GithubExamples = dynamic(() => import('~/components/Sections/GithubExamples'))
 
 function AuthPage() {
-  // base path for images
+  const isMobile = useBreakpoint(768)
   const { basePath } = useRouter()
 
   const meta_title = 'Auth | Built-in user management'
@@ -52,6 +54,12 @@ function AuthPage() {
       <DefaultLayout>
         <ProductsNav activePage={PRODUCT_NAMES.AUTHENTICATION} />
         <ProductHeader
+          callout={
+            <EventCallout
+              size={isMobile ? 'tiny' : 'small'}
+              className="mb-4 lg:mb-8 -mt-8 lg:-mt-10"
+            />
+          }
           icon={Solutions['authentication'].icon}
           title={Solutions['authentication'].name}
           h1={[