diff --git a/apps/web/public/comp-logo-black.png b/apps/web/public/comp-logo-black.png
new file mode 100644
index 0000000000..2f405528dd
Binary files /dev/null and b/apps/web/public/comp-logo-black.png differ
diff --git a/apps/web/public/comp-logo-white.png b/apps/web/public/comp-logo-white.png
new file mode 100644
index 0000000000..e8912aa1e2
Binary files /dev/null and b/apps/web/public/comp-logo-white.png differ
diff --git a/apps/web/src/app/components/logo.tsx b/apps/web/src/app/components/logo.tsx
new file mode 100644
index 0000000000..43c202d93b
--- /dev/null
+++ b/apps/web/src/app/components/logo.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import Image from "next/image";
+
+export function Logo({ 
+  className,
+  width = 64, 
+  height = 64,
+  alt = "Comp Logo",
+  ...props
+}: { 
+  className?: string; 
+  width?: number; 
+  height?: number;
+  alt?: string;
+} & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt' | 'width' | 'height'>) {
+  return (
+    <>
+      <Image 
+        src="/comp-logo-black.png"
+        alt={alt}
+        width={width} 
+        height={height}
+        className={`${className} dark:hidden`}
+        {...props}
+      />
+      <Image 
+        src="/comp-logo-white.png"
+        alt={alt}
+        width={width} 
+        height={height}
+        className={`${className} hidden dark:block`}
+        {...props}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/app/components/waitlist-form.tsx b/apps/web/src/app/components/waitlist-form.tsx
index d7cc0559e8..5bb1c71486 100644
--- a/apps/web/src/app/components/waitlist-form.tsx
+++ b/apps/web/src/app/components/waitlist-form.tsx
@@ -50,14 +50,16 @@ export function WaitlistForm() {
 
   if (isSent) {
     return (
-      <div className="flex flex-col space-y-4">
-        <span>Check your email for a confirmation link to continue.</span>
+      <div className="flex flex-col items-center space-y-4 p-4 bg-muted/50 rounded-lg">
+        <p className="text-lg font-medium text-center">
+          Check your email for a confirmation link to continue.
+        </p>
         <Button
           variant="outline"
-          className="text-sm font-medium text-primary underline"
+          className="text-sm font-medium"
           onClick={() => setSent(false)}
         >
-          Try again
+          Try another email
         </Button>
       </div>
     );
@@ -67,44 +69,47 @@ export function WaitlistForm() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-4"
+        className="relative flex flex-col sm:flex-row gap-2"
       >
         <FormField
           control={form.control}
           name="email"
           render={({ field }) => (
-            <FormItem>
+            <FormItem className="flex-1">
               <FormControl>
                 <Input
                   {...field}
                   autoFocus
                   type="email"
-                  placeholder="Enter your email"
+                  placeholder="Enter your work email"
+                  className="h-12 px-4 text-base bg-background border-border/50 focus:border-primary"
+                  autoComplete="email"
                   autoCorrect="off"
                 />
               </FormControl>
-              <FormMessage />
+              <FormMessage className="absolute -bottom-6 left-0 text-sm" />
             </FormItem>
           )}
         />
 
-        <div className="flex">
-          <Button
-            type="submit"
-            disabled={waitlistAction.isExecuting || !form.formState.isValid}
-          >
-            {waitlistAction.isExecuting ? (
-              <span className="flex items-center gap-2">
-                <Loader2 className="h-4 w-4 animate-spin" />
-                Get Started <ArrowRight className="w-4 h-4" />
-              </span>
-            ) : (
-              <span className="flex items-center gap-2">
-                Get Started <ArrowRight className="w-4 h-4" />
-              </span>
-            )}
-          </Button>
-        </div>
+        <Button
+          type="submit"
+          size="lg"
+          className="h-12 px-6 text-base font-medium"
+          disabled={waitlistAction.isExecuting || !form.formState.isValid}
+        >
+          {waitlistAction.isExecuting ? (
+            <span className="flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Joining...
+            </span>
+          ) : (
+            <span className="flex items-center gap-2">
+              Get Started
+              <ArrowRight className="w-4 h-4" />
+            </span>
+          )}
+        </Button>
       </form>
     </Form>
   );
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 82f632575f..8484eb8709 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,36 +1,127 @@
+import Image from "next/image";
 import { WaitlistForm } from "@/app/components/waitlist-form";
 import Link from "next/link";
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-  PageHeaderSubheading,
-} from "./components/page-header";
+import { Card } from "@bubba/ui/card";
+import { Logo } from "./components/logo";
+import type { Metadata } from "next";
+import { Button } from "@bubba/ui/button";
+import { Shield, Clock, DollarSign } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Comp AI: SOC 2, ISO 27001 and GDPR compliance",
+  description: "The first open-source compliance automation platform that cuts your security certification time by 50%",
+};
 
 export default function Home() {
   return (
     <>
-      <PageHeader>
-        <PageHeaderHeading>
-          Get SOC 2, ISO 27001 and GDPR compliant.
-        </PageHeaderHeading>
-        <PageHeaderDescription>
-          We want to help 100,000 companies SOC 2, ISO 27001 and GDPR compliant
-          by 2032. To achieve this, we're building the first ever open source
-          compliance automation platform.
-        </PageHeaderDescription>
-      </PageHeader>
-      <div className="border-grid border-b">
-        <div className="container-wrapper">
-          <div className="container flex py-4 flex-col gap-4 max-w-[600px]">
-            <PageHeaderSubheading>
-              Join the waitlist to get early access
-            </PageHeaderSubheading>
-            <WaitlistForm />
+      <section className="border-b border-border/50">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-col items-center py-16 md:py-24 text-center">
+            <Logo
+              width={64}
+              height={64}
+              className="h-16 w-16 mb-10"
+            />
+            
+            <h1 className="text-4xl md:text-5xl font-bold leading-tight tracking-tighter lg:leading-[1.1] max-w-[800px] mx-auto bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
+              Get SOC 2, ISO 27001 and GDPR certified 5x faster, at 1/4 the cost
+            </h1>
+            
+            <p className="text-lg md:text-xl font-light text-muted-foreground mt-6 max-w-[600px] mx-auto">
+              The first open-source compliance automation platform that cuts your security certification time by 50%
+            </p>
+
+            <div className="mt-10 w-full max-w-md">
+              <WaitlistForm />
+              <p className="text-sm text-muted-foreground mt-2 text-center">
+                Join our waitlist to help make 100,000 companies compliant by 2032.
+              </p>
+            </div>
+
+            <div className="mt-16 w-full max-w-[800px]">
+              <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">
+                Why Comp AI?
+              </h2>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Card className="p-6 hover:border-primary/50 transition-colors">
+                  <div className="text-center space-y-4">
+                    <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Shield className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="text-4xl font-bold text-primary">
+                      55%
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground text-sm">
+                        face record-high security risks
+                      </p>
+                      <div className="mt-4 p-2 bg-primary/5 rounded-md">
+                        <p className="text-sm font-medium text-primary">
+                          Automated checks with live monitoring
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+
+                <Card className="p-6 hover:border-primary/50 transition-colors">
+                  <div className="text-center space-y-4">
+                    <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Clock className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="text-4xl font-bold text-primary">
+                      11 weeks
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground text-sm">
+                        lost yearly on compliance
+                      </p>
+                      <div className="mt-4 p-2 bg-primary/5 rounded-md">
+                        <p className="text-sm font-medium text-primary">
+                          AI automation reduces time to just 2 weeks
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+
+                <Card className="p-6 hover:border-primary/50 transition-colors">
+                  <div className="text-center space-y-4">
+                    <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                      <DollarSign className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="text-4xl font-bold text-primary">
+                      $46,000
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground text-sm">
+                        spent on compliance tools
+                      </p>
+                      <div className="mt-4 p-2 bg-primary/5 rounded-md">
+                        <p className="text-sm font-medium text-primary">
+                          Save 75% with our open-source platform
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+
+              <div className="mt-8 text-center">
+                <Link 
+                  href="/pitch" 
+                  className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 transition-colors text-primary"
+                >
+                  See our pitch deck 
+                  <span>→</span>
+                </Link>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </section>
     </>
   );
 }