diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index f853b49a..9dcff16c 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -2,6 +2,7 @@
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import { announcementConfig } from '../config/site'
 import GitHubIcon from '~icons/radix-icons/github-logo'
@@ -31,7 +32,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
       apps. Accessible. Customizable. Open Source.
     </PageHeaderDescription>
 
-    <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+    <PageAction>
       <a
         href="/docs/introduction"
         :class="cn(buttonVariants(), 'rounded-[6px]')"
@@ -49,7 +50,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
         <GitHubIcon class="mr-2 h-4 w-4" />
         GitHub
       </a>
-    </section>
+    </PageAction>
   </PageHeader>
   <ExamplesNav />
   <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
diff --git a/apps/www/.vitepress/theme/components/PageAction.vue b/apps/www/.vitepress/theme/components/PageAction.vue
new file mode 100644
index 00000000..4564c959
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/PageAction.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </section>
+</template>
diff --git a/apps/www/.vitepress/theme/components/PageHeader.vue b/apps/www/.vitepress/theme/components/PageHeader.vue
index 824c3068..72fc028c 100644
--- a/apps/www/.vitepress/theme/components/PageHeader.vue
+++ b/apps/www/.vitepress/theme/components/PageHeader.vue
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12',
+      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
index 40df01f2..24e04dd5 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <WrapBalancer :class="cn('max-w-[750px] text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
+  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
     <slot />
   </WrapBalancer>
 </template>
diff --git a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
index 32ad81a9..bab35a82 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :class="cn(
-      'text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
+      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/config/site.ts b/apps/www/.vitepress/theme/config/site.ts
index 060adca5..b1ba1608 100644
--- a/apps/www/.vitepress/theme/config/site.ts
+++ b/apps/www/.vitepress/theme/config/site.ts
@@ -15,6 +15,6 @@ export const siteConfig = {
 
 export const announcementConfig = {
   icon: '✨',
-  title: 'VSCode extension',
-  link: '/docs/installation.html#vscode-extension',
+  title: 'New components!',
+  link: '/docs/components/carousel.html',
 }
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index c81a3f9f..b1252643 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -2,6 +2,7 @@
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import { announcementConfig } from '../config/site'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
@@ -36,7 +37,7 @@ import { cn } from '@/lib/utils'
         components. Use this as a guide to build your own.
       </PageHeaderDescription>
 
-      <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+      <PageAction>
         <a
           href="/docs/introduction"
           :class="cn(buttonVariants(), 'rounded-[6px]')"
@@ -52,7 +53,7 @@ import { cn } from '@/lib/utils'
         >
           Components
         </a>
-      </section>
+      </PageAction>
     </PageHeader>
     <section>
       <ExamplesNav />