diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 37acfa643..2c636bd1e 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -56,14 +56,8 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 function AuthButtons() {
   return (
     <div className={'hidden space-x-2 lg:flex'}>
-      <Button variant={'link'}>
-        <Link href={pathsConfig.auth.signIn}>
-          <Trans i18nKey={'auth:signIn'} />
-        </Link>
-      </Button>
-
       <Link href={pathsConfig.auth.signUp}>
-        <Button className={'rounded-full'}>
+        <Button variant={'outline'}>
           <Trans i18nKey={'auth:signUp'} />
           <ChevronRight className={'h-4'} />
         </Button>
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 1e7547651..4a86dc731 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -18,7 +18,7 @@ export function SiteHeader(props: { user?: User | null }) {
           <SiteNavigation />
         </div>
 
-        <div className={'flex flex-1 items-center justify-end space-x-2'}>
+        <div className={'flex flex-1 items-center justify-end space-x-4'}>
           <ModeToggle />
 
           <SiteHeaderAccountSection user={props.user ?? null} />
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index c5cb33814..154fe7d50 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -47,7 +47,7 @@ export function SiteNavigation() {
         <NavigationMenu>
           <NavigationMenuList
             className={
-              'space-x-1.5 rounded-full px-1 py-2 shadow-sm dark:shadow-primary/20'
+              'space-x-1.5 rounded-full px-1 py-2 shadow-sm dark:shadow-primary/10'
             }
           >
             {NavItems}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index ef7e8fff4..0757743d3 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, Sparkle } from 'lucide-react';
 
 import { PricingTable } from '@kit/billing-gateway/components';
 import { Button } from '@kit/ui/button';
@@ -22,9 +22,7 @@ function Home() {
             ' duration-1000 slide-in-from-top-12'
           }
         >
-          <div
-            className={'flex w-full flex-1 flex-col items-center space-y-12'}
-          >
+          <div className={'flex w-full flex-1 flex-col items-center space-y-8'}>
             <Pill>
               <span>The leading SaaS Starter Kit for ambitious developers</span>
             </Pill>
@@ -33,7 +31,9 @@ function Home() {
               <HeroTitle>
                 <span>The SaaS Starter Kit</span>
 
-                <span>without compromises</span>
+                <span>
+                  <span>for ambitious developers</span>
+                </span>
               </HeroTitle>
 
               <div>
@@ -63,7 +63,7 @@ function Home() {
 
         <div
           className={
-            'mx-auto flex max-w-5xl justify-center py-12 animate-in fade-in ' +
+            'mx-auto flex max-w-6xl justify-center py-12 animate-in fade-in ' +
             ' delay-300 duration-1000 slide-in-from-top-16 fill-mode-both'
           }
         >
@@ -71,12 +71,12 @@ function Home() {
             priority
             className={
               'rounded-2xl' +
-              ' shadow-primary/40 animate-in fade-in' +
+              ' border animate-in fade-in' +
               ' delay-300 duration-1000 ease-out zoom-in-50 fill-mode-both'
             }
-            width={2688}
-            height={1824}
-            src={`/assets/images/dashboard-dark.webp`}
+            width={3069}
+            height={1916}
+            src={`/assets/images/dashboard-demo.webp`}
             alt={`App Image`}
           />
         </div>
@@ -215,7 +215,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
   return (
     <h1
       className={
-        'flex flex-col text-center text-5xl font-bold xl:text-6xl 2xl:text-7xl'
+        'flex flex-col text-center text-4xl font-bold tracking-tight sm:text-6xl'
       }
     >
       {children}
@@ -225,7 +225,8 @@ function HeroTitle({ children }: React.PropsWithChildren) {
 
 function Pill(props: React.PropsWithChildren) {
   return (
-    <h2 className={'rounded-full border-primary px-4 py-2 text-sm shadow'}>
+    <h2 className={'rounded-full border px-4 py-2 text-sm'}>
+      <Sparkle className={'inline-block h-4'} />
       {props.children}
     </h2>
   );
@@ -258,19 +259,27 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
 
 function MainCallToActionButton() {
   return (
-    <Button className={'h-12 rounded-full px-5 text-[1em]'}>
-      <Link href={'/auth/sign-up'}>
-        <span className={'flex items-center space-x-0.5'}>
-          <span>Get Started</span>
+    <div className={'flex space-x-2'}>
+      <Button>
+        <Link href={'/auth/sign-up'}>
+          <span className={'flex items-center space-x-0.5'}>
+            <span>Get Started</span>
 
-          <ChevronRight
-            className={
-              'h-5 animate-in fade-in slide-in-from-left-8' +
-              ' delay-1000 duration-1000 zoom-in fill-mode-both'
-            }
-          />
-        </span>
-      </Link>
-    </Button>
+            <ChevronRight
+              className={
+                'h-5 animate-in fade-in slide-in-from-left-8' +
+                ' delay-1000 duration-1000 zoom-in fill-mode-both'
+              }
+            />
+          </span>
+        </Link>
+      </Button>
+
+      <Button variant={'ghost'}>
+        <Link href={'/auth/sign-in'}>
+          <span>Sign In</span>
+        </Link>
+      </Button>
+    </div>
   );
 }
diff --git a/apps/web/public/assets/images/dashboard-dark.webp b/apps/web/public/assets/images/dashboard-dark.webp
deleted file mode 100644
index 43dcf13bd..000000000
Binary files a/apps/web/public/assets/images/dashboard-dark.webp and /dev/null differ
diff --git a/apps/web/public/assets/images/dashboard-demo.webp b/apps/web/public/assets/images/dashboard-demo.webp
new file mode 100644
index 000000000..6e895efea
Binary files /dev/null and b/apps/web/public/assets/images/dashboard-demo.webp differ