diff --git a/apps/app/src/app/(app)/[orgId]/integrations/components/IntegrationsGrid.tsx b/apps/app/src/app/(app)/[orgId]/integrations/components/IntegrationsGrid.tsx
index 73ce80a10..c73fae35a 100644
--- a/apps/app/src/app/(app)/[orgId]/integrations/components/IntegrationsGrid.tsx
+++ b/apps/app/src/app/(app)/[orgId]/integrations/components/IntegrationsGrid.tsx
@@ -10,8 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@comp/ui/dialog';
-import { Input } from '@comp/ui/input';
-import { ArrowRight, Search, Sparkles, X } from 'lucide-react';
+import { ArrowRight, Sparkles } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
@@ -23,6 +22,7 @@ import {
   type Integration,
   type IntegrationCategory,
 } from '../data/integrations';
+import { SearchInput } from './SearchInput';
 
 const LOGO_TOKEN = 'pk_AZatYxV5QDSfWpRDaBxzRQ';
 
@@ -63,27 +63,16 @@ export function IntegrationsGrid() {
   };
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-4">
       {/* Search and Filters */}
-      <div className="space-y-4">
+      <div className="flex items-center gap-2">
         {/* Search Bar */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            placeholder="Search integrations..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10"
-          />
-          {searchQuery && (
-            <button
-              onClick={() => setSearchQuery('')}
-              className="absolute right-3 top-1/2 -translate-y-1/2"
-            >
-              <X className="w-4 h-4 text-muted-foreground hover:text-foreground" />
-            </button>
-          )}
-        </div>
+        <SearchInput
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder="Search integrations..."
+          className="w-80 flex-shrink-0"
+        />
 
         {/* Category Filters */}
         <div className="flex gap-2 flex-wrap">
@@ -107,59 +96,60 @@ export function IntegrationsGrid() {
         </div>
       </div>
 
-      {/* Results info - only show when filtering */}
-      {(searchQuery || selectedCategory !== 'All') && filteredIntegrations.length > 0 && (
-        <div className="text-sm text-muted-foreground">
-          Showing {filteredIntegrations.length}{' '}
-          {filteredIntegrations.length === 1 ? 'match' : 'matches'}
-        </div>
-      )}
-
-      {/* Integration Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {filteredIntegrations.map((integration) => (
-          <Card
-            key={integration.id}
-            className="group relative overflow-hidden hover:shadow-md transition-all hover:border-primary/30 cursor-pointer"
-            onClick={() => setSelectedIntegration(integration)}
-          >
-            <CardHeader className="pb-3">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 rounded-xl bg-background border border-border flex items-center justify-center overflow-hidden">
-                    <Image
-                      src={`https://img.logo.dev/${integration.domain}?token=${LOGO_TOKEN}`}
-                      alt={`${integration.name} logo`}
-                      width={32}
-                      height={32}
-                      unoptimized
-                      className="object-contain rounded-md"
-                    />
-                  </div>
-                  <div>
-                    <CardTitle className="text-base font-semibold flex items-center gap-2">
-                      {integration.name}
-                      {integration.popular && (
-                        <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
-                          Popular
-                        </Badge>
-                      )}
-                    </CardTitle>
-                    <p className="text-xs text-muted-foreground mt-0.5">{integration.category}</p>
+      <div className="space-y-2">
+        {/* Integration Cards */}
+        {(searchQuery || selectedCategory !== 'All') && filteredIntegrations.length > 0 && (
+          <div className="text-sm text-muted-foreground">
+            Showing {filteredIntegrations.length}{' '}
+            {filteredIntegrations.length === 1 ? 'match' : 'matches'}
+          </div>
+        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {/* Results info - only show when filtering */}
+          {filteredIntegrations.map((integration) => (
+            <Card
+              key={integration.id}
+              className="group relative overflow-hidden hover:shadow-md transition-all hover:border-primary/30 cursor-pointer"
+              onClick={() => setSelectedIntegration(integration)}
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-xl bg-background border border-border flex items-center justify-center overflow-hidden">
+                      <Image
+                        src={`https://img.logo.dev/${integration.domain}?token=${LOGO_TOKEN}`}
+                        alt={`${integration.name} logo`}
+                        width={32}
+                        height={32}
+                        unoptimized
+                        className="object-contain rounded-md"
+                      />
+                    </div>
+                    <div>
+                      <CardTitle className="text-base font-semibold flex items-center gap-2">
+                        {integration.name}
+                        {integration.popular && (
+                          <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                            Popular
+                          </Badge>
+                        )}
+                      </CardTitle>
+                      <p className="text-xs text-muted-foreground mt-0.5">{integration.category}</p>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <CardDescription className="text-sm leading-relaxed line-clamp-2">
-                {integration.description}
-              </CardDescription>
-            </CardContent>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-sm leading-relaxed line-clamp-2">
+                  {integration.description}
+                </CardDescription>
+              </CardContent>
 
-            {/* Hover overlay */}
-            <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-          </Card>
-        ))}
+              {/* Hover overlay */}
+              <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+            </Card>
+          ))}
+        </div>
       </div>
 
       {/* Empty state - opportunity, not limitation */}
diff --git a/apps/app/src/app/(app)/[orgId]/integrations/components/SearchInput.tsx b/apps/app/src/app/(app)/[orgId]/integrations/components/SearchInput.tsx
new file mode 100644
index 000000000..1f57da770
--- /dev/null
+++ b/apps/app/src/app/(app)/[orgId]/integrations/components/SearchInput.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '@comp/ui/utils/cn';
+import { Search, X } from 'lucide-react';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function SearchInput({ value, onChange, placeholder, className }: SearchInputProps) {
+  return (
+    <div className={cn('relative w-full py-1 rounded-md border border-input', className)}>
+      <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+        <Search className="w-4 h-4 text-muted-foreground" />
+      </div>
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-10 pr-10"
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          className="absolute inset-y-0 right-0 flex items-center pr-3"
+          type="button"
+        >
+          <X className="w-4 h-4 text-muted-foreground hover:text-foreground transition-colors" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/app/src/app/(app)/[orgId]/integrations/page.tsx b/apps/app/src/app/(app)/[orgId]/integrations/page.tsx
index 3cf7fe5d1..36b219929 100644
--- a/apps/app/src/app/(app)/[orgId]/integrations/page.tsx
+++ b/apps/app/src/app/(app)/[orgId]/integrations/page.tsx
@@ -5,7 +5,7 @@ export default function IntegrationsPage() {
     <div className="container mx-auto p-8">
       <div className="max-w-7xl mx-auto space-y-10">
         {/* Header */}
-        <div className="space-y-4">
+        <div className="space-y-2">
           <div className="flex items-baseline gap-3">
             <h1 className="text-3xl font-bold tracking-tight">Integrations</h1>
             <span className="text-2xl text-muted-foreground/40 font-light">∞</span>
diff --git a/apps/app/src/app/(app)/onboarding/[orgId]/layout.tsx b/apps/app/src/app/(app)/onboarding/[orgId]/layout.tsx
index 8152247a3..c270f5c48 100644
--- a/apps/app/src/app/(app)/onboarding/[orgId]/layout.tsx
+++ b/apps/app/src/app/(app)/onboarding/[orgId]/layout.tsx
@@ -1,9 +1,10 @@
 import { CheckoutCompleteDialog } from '@/components/dialogs/checkout-complete-dialog';
-import { OnboardingLayout } from '@/components/onboarding/OnboardingLayout';
+import { MinimalHeader } from '@/components/layout/MinimalHeader';
 import { auth } from '@/utils/auth';
 import { db } from '@db';
 import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
+import { OnboardingSidebar } from '../../setup/components/OnboardingSidebar';
 
 interface OnboardingRouteLayoutProps {
   children: React.ReactNode;
@@ -42,9 +43,24 @@ export default async function OnboardingRouteLayout({
   }
 
   return (
-    <OnboardingLayout variant="onboarding" currentOrganization={organization}>
-      {children}
+    <main className="flex min-h-dvh flex-col">
+      <div className="flex flex-1 min-h-0">
+        {/* Form Section - Left Side */}
+        <div className="flex-1 flex flex-col">
+          <MinimalHeader
+            user={session.user}
+            organizations={[]}
+            currentOrganization={organization}
+          />
+          {children}
+        </div>
+
+        {/* Sidebar Section - Right Side, Hidden on Mobile */}
+        <div className="hidden md:flex md:w-1/2 min-h-screen bg-[#FAFAFA] items-end justify-center py-16 px-8">
+          <OnboardingSidebar className="w-full max-w-xl mx-auto h-1/2 mt-auto" />
+        </div>
+      </div>
       <CheckoutCompleteDialog orgId={organization.id} />
-    </OnboardingLayout>
+    </main>
   );
 }
diff --git a/apps/app/src/app/(app)/onboarding/[orgId]/page.tsx b/apps/app/src/app/(app)/onboarding/[orgId]/page.tsx
index e1b081bd0..a8a5e59ce 100644
--- a/apps/app/src/app/(app)/onboarding/[orgId]/page.tsx
+++ b/apps/app/src/app/(app)/onboarding/[orgId]/page.tsx
@@ -77,7 +77,7 @@ export default async function OnboardingPage({ params }: OnboardingPageProps) {
     Object.assign(initialData, {
       describe:
         initialData.describe ||
-        'comp ai is a grc platform saas that gets companies compliant with soc2 iso and hipaa in days',
+        'Bubba AI, Inc. is the company behind Comp AI - the fastest way to get SOC 2 compliant.',
       industry: initialData.industry || 'SaaS',
       teamSize: initialData.teamSize || '1-10',
       devices: initialData.devices || 'Personal laptops',
diff --git a/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx b/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
index a5116e889..9af1b2431 100644
--- a/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
+++ b/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import { OnboardingStepInput } from '@/app/(app)/setup/components/OnboardingStepInput';
+import { AnimatedWrapper } from '@/components/animated-wrapper';
 import { LogoSpinner } from '@/components/logo-spinner';
 import { Button } from '@comp/ui/button';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@comp/ui/card';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@comp/ui/form';
 import type { Organization } from '@db';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
+import Balancer from 'react-wrap-balancer';
 import { usePostPaymentOnboarding } from '../hooks/usePostPaymentOnboarding';
 
 interface PostPaymentOnboardingProps {
@@ -51,6 +53,17 @@ export function PostPaymentOnboarding({
     );
   }, []);
 
+  // Check if current step has valid input
+  const currentStepValue = form.watch(step?.key);
+  const isCurrentStepValid = (() => {
+    if (!step) return false;
+    if (step.key === 'frameworkIds') {
+      return Array.isArray(currentStepValue) && currentStepValue.length > 0;
+    }
+    // For other fields, check if they have a value
+    return Boolean(currentStepValue) && String(currentStepValue).trim().length > 0;
+  })();
+
   // Dispatch custom event for background animation when step changes
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -73,132 +86,166 @@ export function PostPaymentOnboarding({
     }
   }, [stepIndex, isFinalizing, totalSteps]);
 
-  return (
-    <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">
-      <div className="relative w-full max-w-6xl">
-        <Card className="scrollbar-hide relative mx-auto flex w-full max-w-3xl flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl md:w-[680px] lg:w-[820px] xl:w-[920px]">
-          {(isLoading || isFinalizing) && (
-            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
-              <LogoSpinner />
-            </div>
-          )}
-          <CardHeader className="flex min-h-[140px] flex-col items-center justify-center pb-0">
-            <div className="flex flex-col items-center gap-2">
-              <LogoSpinner />
-              <div className="text-muted-foreground text-sm">
-                Step {stepIndex + 1} of {totalSteps}
-              </div>
-              <CardTitle className="flex min-h-[56px] items-center justify-center text-center leading-6">
-                {step?.question || ''}
-              </CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex min-h-[150px] flex-1 flex-col overflow-y-auto">
-            {!isLoading && (
-              <Form {...form}>
+  return isFinalizing ? (
+    <div className="flex min-h-dvh items-center justify-center">
+      <LogoSpinner />
+    </div>
+  ) : (
+    <div className="flex flex-1 flex-col md:px-18 md:py-12 px-4 py-6">
+      {/* Progress Stepper */}
+      <AnimatedWrapper
+        delay={700}
+        animationKey={`progress-${step?.key}`}
+        className="mb-8 md:max-w-sm"
+      >
+        <div className="w-full bg-muted h-1.5 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-primary transition-all duration-300"
+            style={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
+          />
+        </div>
+      </AnimatedWrapper>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col">
+        {/* Title */}
+        <div className="mb-8">
+          <AnimatedWrapper delay={800} animationKey={`title-${step?.key}`}>
+            <h1 className="text-2xl md:text-4xl font-bold text-foreground mb-2">
+              <Balancer>{step?.question || ''}</Balancer>
+            </h1>
+          </AnimatedWrapper>
+          <AnimatedWrapper delay={1000} animationKey={`subtitle-${step?.key}`}>
+            <p className="text-md md:text-lg text-muted-foreground flex items-center flex-wrap">
+              <Balancer>Our AI will personalize the platform based on your answers.</Balancer>
+            </p>
+          </AnimatedWrapper>
+        </div>
+
+        {/* Form Content */}
+        <div className="flex-1">
+          {!isLoading && step && (
+            <AnimatedWrapper delay={1200} animationKey={`form-${step.key}`}>
+              <Form {...form} key={step.key}>
                 <form
                   id="onboarding-form"
                   onSubmit={form.handleSubmit(onSubmit)}
-                  className="mt-4 w-full"
+                  className="w-full"
                   autoComplete="off"
                 >
-                  {steps.map((s, idx) => (
-                    <div key={s.key} style={{ display: idx === stepIndex ? 'block' : 'none' }}>
-                      <FormField
-                        name={s.key}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <OnboardingStepInput
-                                currentStep={s}
-                                form={form}
-                                savedAnswers={savedAnswers}
-                              />
-                            </FormControl>
-                            {s.key !== 'shipping' && (
-                              <div className="min-h-[20px]">
-                                <FormMessage />
-                              </div>
-                            )}
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  ))}
+                  <FormField
+                    name={step.key}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <OnboardingStepInput
+                            currentStep={step}
+                            form={form}
+                            savedAnswers={savedAnswers}
+                          />
+                        </FormControl>
+                        <div className="min-h-[20px]">
+                          <FormMessage />
+                        </div>
+                      </FormItem>
+                    )}
+                  />
                 </form>
               </Form>
+            </AnimatedWrapper>
+          )}
+        </div>
+
+        {/* Action Buttons - Fixed at bottom */}
+        <div className="flex items-center gap-2 justify-end">
+          <AnimatePresence>
+            {stepIndex > 0 && (
+              <motion.div
+                key="back"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                transition={{ duration: 0.25 }}
+              >
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="flex items-center gap-2"
+                  onClick={handleBack}
+                  disabled={isOnboarding || isLoading}
+                >
+                  Previous
+                </Button>
+              </motion.div>
             )}
-          </CardContent>
-          <CardFooter className="flex flex-col gap-4">
-            <div className="flex w-full items-center justify-between">
+          </AnimatePresence>
+          {isLocal && (
+            <motion.div
+              key="complete-now"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.25, delay: 0.05 }}
+            >
               <Button
                 type="button"
-                variant="outline"
-                onClick={handleBack}
-                disabled={stepIndex === 0 || isOnboarding || isLoading}
-                className="group transition-all hover:pr-3"
+                variant="secondary"
+                onClick={completeNow}
+                disabled={isOnboarding || isFinalizing || isLoading}
               >
-                <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-                Back
+                Complete
               </Button>
-
-              <div className="flex items-center gap-2">
-                {isLocal && (
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={completeNow}
-                    disabled={isOnboarding || isFinalizing || isLoading}
-                    className="group transition-all"
-                  >
-                    Complete now
-                  </Button>
-                )}
-                <Button
-                  type="submit"
-                  form="onboarding-form"
-                  disabled={isOnboarding || isFinalizing || isLoading}
-                  className="group transition-all hover:pl-3"
-                  data-testid="onboarding-next-button"
+            </motion.div>
+          )}
+          <motion.div
+            key="next-finish"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+            transition={{ duration: 0.25, delay: 0.05 }}
+          >
+            {isLastStep ? (
+              <Button
+                type="submit"
+                form="onboarding-form"
+                className="flex items-center gap-2"
+                disabled={!isCurrentStepValid || isOnboarding || isFinalizing || isLoading}
+                data-testid="onboarding-next-button"
+              >
+                <motion.span
+                  key="finish-label"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex items-center gap-2"
                 >
-                  {isFinalizing ? (
-                    'Setting up...'
-                  ) : isLastStep ? (
-                    'Complete Setup'
-                  ) : (
-                    <>
-                      Next
-                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-                    </>
-                  )}
-                </Button>
-              </div>
-            </div>
-            <div className="w-full border-t border-border/30 pt-3">
-              <p className="text-center text-xs text-muted-foreground/70">
-                <span className="inline-flex items-center justify-center gap-1.5 flex-wrap">
-                  <svg
-                    className="h-3.5 w-3.5 flex-shrink-0"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                    />
-                  </svg>
-                  <span className="max-w-[280px] sm:max-w-none">
-                    AI personalizes your plan based on your answers
-                  </span>
-                </span>
-              </p>
-            </div>
-          </CardFooter>
-        </Card>
+                  {isOnboarding && <Loader2 className="h-4 w-4 animate-spin" />}
+                  Complete
+                </motion.span>
+              </Button>
+            ) : (
+              <Button
+                type="submit"
+                form="onboarding-form"
+                className="flex items-center gap-2"
+                disabled={!isCurrentStepValid || isOnboarding || isFinalizing || isLoading}
+                data-testid="onboarding-next-button"
+              >
+                <motion.span
+                  key="next-label"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex items-center"
+                >
+                  Continue
+                </motion.span>
+              </Button>
+            )}
+          </motion.div>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/app/src/app/(app)/setup/[setupId]/page.tsx b/apps/app/src/app/(app)/setup/[setupId]/page.tsx
index 13ade6e4d..16e4bac81 100644
--- a/apps/app/src/app/(app)/setup/[setupId]/page.tsx
+++ b/apps/app/src/app/(app)/setup/[setupId]/page.tsx
@@ -1,9 +1,9 @@
-import { getOrganizations } from '@/data/getOrganizations';
+import { MinimalHeader } from '@/components/layout/MinimalHeader';
 import { auth } from '@/utils/auth';
-import type { Organization } from '@db';
 import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { OnboardingSidebar } from '../components/OnboardingSidebar';
 import { OrganizationSetupForm } from '../components/OrganizationSetupForm';
 import { getSetupSession } from '../lib/setup-session';
 
@@ -41,23 +41,23 @@ export default async function SetupWithIdPage({ params, searchParams }: SetupPag
     return redirect(`/invite/${inviteCode}`);
   }
 
-  // Fetch existing organizations
-  let organizations: Organization[] = [];
-
-  try {
-    const result = await getOrganizations();
-    organizations = result.organizations;
-  } catch (error) {
-    // If user has no organizations, continue with empty array
-    console.error('Failed to fetch organizations:', error);
-  }
-
   return (
-    <OrganizationSetupForm
-      existingOrganizations={organizations}
-      setupId={setupId}
-      initialData={setupSession.formData}
-      currentStep={setupSession.currentStep}
-    />
+    <div className="flex flex-1 min-h-0">
+      {/* Form Section - Left Side */}
+      <div className="flex-1 flex flex-col">
+        <MinimalHeader user={user} organizations={[]} currentOrganization={null} />
+
+        <OrganizationSetupForm
+          setupId={setupId}
+          initialData={setupSession.formData}
+          currentStep={setupSession.currentStep}
+        />
+      </div>
+
+      {/* Sidebar Section - Right Side, Hidden on Mobile */}
+      <div className="hidden md:flex md:w-1/2 min-h-screen bg-[#FAFAFA] items-end justify-center py-16 px-8">
+        <OnboardingSidebar className="w-full max-w-xl mx-auto h-1/2 mt-auto" />
+      </div>
+    </div>
   );
 }
diff --git a/apps/app/src/app/(app)/setup/components/FrameworkSelection.tsx b/apps/app/src/app/(app)/setup/components/FrameworkSelection.tsx
index 27fbd5ca4..28287c9a3 100644
--- a/apps/app/src/app/(app)/setup/components/FrameworkSelection.tsx
+++ b/apps/app/src/app/(app)/setup/components/FrameworkSelection.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { FrameworkCard } from '@/components/framework-card';
+import { FrameworkPill } from '@/components/framework-pill';
 import type { FrameworkEditorFramework } from '@db';
 import { useEffect, useRef, useState } from 'react';
 
@@ -58,11 +58,11 @@ export function FrameworkSelection({ value, onChange, onLoadingChange }: Framewo
   }
 
   return (
-    <div className="max-h-80 space-y-3 overflow-y-auto pr-1">
+    <div className="flex flex-wrap gap-3 overflow-y-auto pr-1">
       {frameworks
         .filter((framework) => framework.visible)
         .map((framework) => (
-          <FrameworkCard
+          <FrameworkPill
             key={framework.id}
             framework={framework}
             isSelected={value.includes(framework.id)}
diff --git a/apps/app/src/app/(app)/setup/components/Logo.tsx b/apps/app/src/app/(app)/setup/components/Logo.tsx
new file mode 100644
index 000000000..6b15e62ea
--- /dev/null
+++ b/apps/app/src/app/(app)/setup/components/Logo.tsx
@@ -0,0 +1,17 @@
+import { SVGProps } from 'react';
+
+export const Logo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={178}
+    height={43}
+    viewBox="0 0 178 43"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m31.791 10.24-1.253-.901-8.215-5.898a.88.88 0 0 0-1.024 0L2.211 17.143a.88.88 0 0 0-.366.713v7.29c0 .283.136.548.366.713l19.088 13.704c.306.22.718.22 1.024 0l19.085-13.704a.88.88 0 0 0 .365-.713v-7.29a.88.88 0 0 0-.365-.713zM21.3 7.05a.88.88 0 0 1 1.024 0l4.709 3.38a.878.878 0 0 1 0 1.426l-2.2 1.577a.49.49 0 0 1-.57 0l-1.94-1.393a.88.88 0 0 0-1.023 0l-6.48 4.653a.878.878 0 0 0 0 1.425l1.743 1.252 2.512 1.806 2.225 1.597c.306.22.718.22 1.024 0l6.48-4.657a.878.878 0 0 0 0-1.425l-1.457-1.047a.252.252 0 0 1 .001-.409l2.681-1.922a.88.88 0 0 1 1.023 0l4.708 3.38a.878.878 0 0 1 0 1.425l-2.2 1.58-11.235 8.067a.88.88 0 0 1-1.023 0l-5.704-4.094-2.512-1.802-3.022-2.169-2.2-1.58a.878.878 0 0 1 .001-1.425zm46.056 25.441q-2.948 0-5.19-1.351-2.242-1.382-3.502-3.931t-1.259-6.082q0-3.501 1.229-6.05 1.26-2.58 3.501-3.963 2.243-1.413 5.252-1.413 4.054 0 6.297 2.028t2.917 5.62l-3.47.185q-.43-2.242-1.843-3.502-1.413-1.29-3.9-1.29-1.998 0-3.472 1.014-1.444 1.013-2.272 2.887-.8 1.874-.799 4.484 0 2.61.799 4.484.828 1.875 2.303 2.857t3.41.983q2.64 0 4.084-1.382 1.475-1.413 1.843-3.87l3.471.184q-.4 2.488-1.597 4.3a8.26 8.26 0 0 1-3.164 2.826q-1.965.982-4.638.982m19.23-.122q-2.334 0-4.085-1.045t-2.703-2.979-.952-4.515q0-2.61.952-4.515.953-1.904 2.703-2.949 1.75-1.074 4.085-1.075t4.085 1.075q1.75 1.045 2.703 2.949t.952 4.515q0 2.58-.952 4.515-.953 1.935-2.703 2.98-1.75 1.043-4.085 1.044m0-2.826q2.088 0 3.225-1.505 1.136-1.536 1.136-4.208t-1.136-4.177q-1.137-1.536-3.225-1.536-2.058 0-3.225 1.536-1.136 1.505-1.136 4.177t1.136 4.208q1.167 1.505 3.225 1.505M97.463 32V15.66h2.979l.092 4.054-.368-.123q.276-1.35.952-2.303a4.94 4.94 0 0 1 1.72-1.474 4.76 4.76 0 0 1 2.211-.523q2.088 0 3.409 1.198 1.321 1.167 1.659 3.225h-.522q.276-1.443.921-2.395a4.5 4.5 0 0 1 1.72-1.505q1.044-.522 2.365-.523 1.72 0 2.918.738 1.228.706 1.843 2.088.645 1.383.645 3.379V32h-3.256v-9.706q0-2.119-.768-3.194t-2.334-1.075q-1.014 0-1.781.522-.769.522-1.198 1.505-.399.983-.399 2.365V32h-3.103v-9.583q0-2.088-.706-3.225-.676-1.167-2.334-1.167-1.045 0-1.812.522-.738.522-1.168 1.536-.43.983-.43 2.334V32zm26.451 4.607V15.66h3.072l.092 3.501-.369-.184q.614-1.813 2.027-2.733 1.413-.953 3.256-.953 2.396 0 3.931 1.198 1.567 1.167 2.304 3.102.768 1.935.768 4.239t-.768 4.239q-.737 1.935-2.304 3.132-1.535 1.168-3.931 1.168a6.2 6.2 0 0 1-2.304-.43 5.4 5.4 0 0 1-1.842-1.198 4.6 4.6 0 0 1-1.045-1.874l.369-.368v8.108zm7.494-7.064q1.967 0 3.072-1.505 1.136-1.505 1.136-4.208t-1.136-4.208q-1.105-1.505-3.072-1.505-1.29 0-2.242.645-.952.614-1.474 1.904t-.522 3.164.491 3.164q.522 1.29 1.475 1.935.982.615 2.272.614M148.073 32l7.863-21.807h4.208L168.006 32h-3.532l-1.996-5.682h-8.907L151.605 32zm6.542-8.692h6.849l-3.44-9.952zM170.463 32V10.193h3.317V32z"
+      fill="#09090B"
+    />
+  </svg>
+);
diff --git a/apps/app/src/app/(app)/setup/components/OnboardingFormActions.tsx b/apps/app/src/app/(app)/setup/components/OnboardingFormActions.tsx
index 33c605ca3..1bd5361c2 100644
--- a/apps/app/src/app/(app)/setup/components/OnboardingFormActions.tsx
+++ b/apps/app/src/app/(app)/setup/components/OnboardingFormActions.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@comp/ui/button';
 import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 
 interface OnboardingFormActionsProps {
   onBack: () => void;
@@ -32,13 +32,12 @@ export function OnboardingFormActions({
           >
             <Button
               type="button"
-              variant="ghost"
+              variant="outline"
               className="flex items-center gap-2"
               onClick={onBack}
               disabled={isSubmitting || stepIndex === 0} // stepIndex === 0 check is redundant due to conditional rendering but good for safety
             >
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              Back
+              Previous
             </Button>
           </motion.div>
         )}
@@ -67,8 +66,7 @@ export function OnboardingFormActions({
               className="flex items-center gap-2"
             >
               {isOnboarding && <Loader2 className="h-4 w-4 animate-spin" />}
-              Finish
-              <ArrowRight className="ml-2 h-4 w-4" />
+              Complete
             </motion.span>
           </Button>
         ) : (
@@ -87,8 +85,7 @@ export function OnboardingFormActions({
               transition={{ duration: 0.2 }}
               className="flex items-center"
             >
-              Next
-              <ArrowRight className="ml-2 h-4 w-4" />
+              Continue
             </motion.span>
           </Button>
         )}
diff --git a/apps/app/src/app/(app)/setup/components/OnboardingSidebar.tsx b/apps/app/src/app/(app)/setup/components/OnboardingSidebar.tsx
new file mode 100644
index 000000000..3ec78ef1e
--- /dev/null
+++ b/apps/app/src/app/(app)/setup/components/OnboardingSidebar.tsx
@@ -0,0 +1,136 @@
+import { SVGProps } from 'react';
+
+export const OnboardingSidebar = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 470 394"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m415.265 327.283-2.797 1.616m22.055-5.073-27.585 15.894m38.376-14.476-35.91 20.679m43.736-17.56-38.33 22.078m7.779 3.154 36.027-20.749m-25.336 22.22 27.87-16.055m-9.209 12.933 2.347-1.354"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M453.204 336.285c5.277-3.041 7.926-7.026 7.95-11.011h.008v-11.476l-.021.008c.13-4.091-2.494-8.193-7.897-11.301-10.569-6.096-27.729-6.08-38.33.025-5.403 3.108-8.035 7.201-7.942 11.276h-.019v11.46c-.011 4.001 2.623 8 7.917 11.049 10.567 6.088 27.729 6.08 38.334-.03"
+      fill="#FAFAFA"
+    />
+    <path
+      d="M453.204 336.285c5.277-3.041 7.926-7.026 7.95-11.011h.008v-11.476l-.021.008c.13-4.091-2.494-8.193-7.897-11.301-10.569-6.096-27.729-6.08-38.33.025-5.403 3.108-8.035 7.201-7.942 11.276h-.019v11.46c-.011 4.001 2.623 8 7.917 11.049 10.567 6.088 27.729 6.08 38.334-.03"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M406.953 313.554c-.017 4.002 2.618 8.006 7.915 11.057 10.569 6.089 27.734 6.073 38.333-.03 5.288-3.048 7.94-7.036 7.953-11.024m-404.47 48.315-27.927 16.085m34.55-12.273-27.927 16.09m34.551-12.275-27.927 16.089m6.629 3.821 27.927-16.093m-21.312 19.902 27.933-16.084"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m84.013 347.379-27.997-16.133-27.933 16.09v21.136l27.998 16.133 27.932-16.09z"
+      fill="#FAFAFA"
+    />
+    <path
+      d="m84.013 347.379-27.997-16.133-27.933 16.09v21.136l27.998 16.133 27.932-16.09zM56.08 363.464l27.933-16.087M56.08 363.463l-27.997-16.131m27.998 16.131v21.139M204.93 63.131l-16.01 9.224m22.633-5.41-16.012 9.225m6.626 3.82 16.01-9.227"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m219.63 11.204-16.053-9.25-16.015 9.229V62.31l16.053 9.25 16.015-9.22z"
+      fill="#FAFAFA"
+    />
+    <path
+      d="m219.63 11.204-16.053-9.25-16.015 9.229V62.31l16.053 9.25 16.015-9.22zm-16.015 9.22 16.015-9.221m-16.015 9.22-16.053-9.243m16.052 9.242v51.136M28.047 190.881 1.984 205.89m26.098.018-26.13-15.05m269.822 169.75-4.444 7.573 8.325 6.416-13.893-.105-8.011 6.521-4.143-7.634-13.261-2.393 11.332-4.614-.193-8 11.136 4.797zM448.236 110.06l-19.852-11.433 19.803-11.41 19.855 11.438zM203.884 217.946l76.085-43.829m-84.09 56.068 105.331-60.674m-104.506 67.835 116.937-67.358m9.774 1.995-123.232 70.992m131.228-67.965-125.978 72.57m6.51 3.885 126.211-72.711m6.621 3.815L218.564 255.28m132.84-68.896L225.19 259.089m132.843-68.885-126.22 72.702m132.833-68.893-126.209 72.705m6.621 3.817 126.214-72.705m6.629 3.817-126.214 72.706m132.83-68.888-126.215 72.7m132.844-68.886-126.209 72.703m132.83-68.888-126.215 72.703m6.751 3.744 125.97-72.565M286.295 292.57l123.226-70.98m3.468 5.623-116.921 67.353m117.754-60.195-105.337 60.674m21.239-4.603 76.028-43.793"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m290.196 87.26-87.42 50.362c-9.079 5.228-14.672 14.888-14.666 25.341v34.394a29.23 29.23 0 0 0 14.658 25.337l87.428 50.359a29.35 29.35 0 0 0 29.322 0l87.422-50.359a29.24 29.24 0 0 0 14.664-25.34v-34.399a29.24 29.24 0 0 0-14.664-25.338l-87.42-50.36a29.39 29.39 0 0 0-29.324 0z"
+      fill="#FAFAFA"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m365.246 234.183-26.654 15.353-.006-21.128 26.657-15.359zm40.161-55.834 6.691-3.853M188.11 162.963c.04 3.66 2.485 7.315 7.34 10.112l91.853 52.915c9.78 5.631 25.61 5.639 35.368.019l74.02-42.641"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M364.354 113.089a29.39 29.39 0 0 0-29.324 0l-87.428 50.353c-9.074 5.236-14.664 14.896-14.664 25.344v14.893l27.092 15.605v-14.893c0-10.448 5.587-20.108 14.663-25.344l87.423-50.353a29.39 29.39 0 0 1 29.324 0l-27.088-15.605z"
+      fill="#FAFAFA"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m89.327 293.586 25.396-14.631m-18.772 18.448 25.398-14.63m6.621 3.814-25.396 14.631m32.022-10.816-25.398 14.63m6.626 3.818 25.396-14.631m-18.775 18.448 25.398-14.63m6.629 3.809-25.4 14.63m6.623 3.817 25.395-14.63m6.621 3.815-25.395 14.633m32.024-10.813-25.4 14.63m6.62 3.809 25.396-14.63m-18.772 18.448 25.395-14.631m6.629 3.818-25.395 14.63m32.022-10.813-25.398 14.63"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M155.245 111.294c-23.086 7.253-59.72-15.917-59.72-15.917l-20.322 11.704v86.616c0 37.908 47.708 105.242 59.724 112.17 6.373 3.665 22.793 1.911 36.805-6.219l20.319-11.704c12.405-7.177 22.915-19.355 22.915-37.144v-86.613s-36.635-19.035-59.721-52.893"
+      fill="#FAFAFA"
+    />
+    <path
+      d="M155.245 111.294c-23.086 7.253-59.72-15.917-59.72-15.917l-20.322 11.704v86.616c0 37.908 47.708 105.242 59.724 112.17 6.374 3.665 22.793 1.911 36.805-6.219l20.319-11.704c12.405-7.177 22.915-19.354 22.915-37.144v-86.613s-36.635-19.035-59.721-52.893"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M104.314 110.974a153 153 0 0 1-9.904-4.668m50.68 10.843c-9.913 3.113-22.332.62-33.262-3.241m47.697 21.074a157 157 0 0 1-8.919-10.318m16.924 18.245c18.916 17.587 37.275 27.127 37.275 27.127m.004 28.57V183m-22.918 110.798c12.406-7.177 22.918-19.355 22.918-37.145v-45.366"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M134.927 122.997c-23.092 7.258-59.724-15.914-59.724-15.914v86.616c0 37.908 47.708 105.242 59.724 112.17 12.009 6.912 59.723-5.456 59.723-43.364V175.89s-36.637-19.033-59.723-52.89z"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M164.173 228.656c-.003-18.572-13.093-41.162-29.246-50.47-16.156-9.299-29.246-1.795-29.246 16.772s13.093 41.157 29.249 50.462c16.145 9.3 29.243 1.795 29.243-16.764"
+      stroke="#068D49"
+      strokeWidth={1.77}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m150.887 211.618-19.705 11.298-12.216-21.077"
+      stroke="#068D49"
+      strokeWidth={2.53}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m134.923 122.995 20.318-11.702m39.413 64.597 20.313-11.699"
+      stroke="#09090B"
+      strokeOpacity={0.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/apps/app/src/app/(app)/setup/components/OnboardingStepInput.tsx b/apps/app/src/app/(app)/setup/components/OnboardingStepInput.tsx
index f0f38a230..4d3505048 100644
--- a/apps/app/src/app/(app)/setup/components/OnboardingStepInput.tsx
+++ b/apps/app/src/app/(app)/setup/components/OnboardingStepInput.tsx
@@ -1,23 +1,23 @@
+import { AnimatedWrapper } from '@/components/animated-wrapper';
+import { SelectablePill } from '@/components/selectable-pill';
 import { FormLabel } from '@comp/ui/form';
 import { Input } from '@comp/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@comp/ui/select';
-import { SelectPills } from '@comp/ui/select-pills';
 import { Textarea } from '@comp/ui/textarea';
+import { X } from 'lucide-react';
+import { useRef, useState } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import type { CompanyDetails, Step } from '../lib/types';
 import { FrameworkSelection } from './FrameworkSelection';
 import { WebsiteInput } from './WebsiteInput';
 
-// Type for form fields used in this component.
-// For now, defining it here to match OrganizationSetupForm.tsx structure.
 export type OnboardingFormFields = Partial<CompanyDetails> & {
   [K in keyof CompanyDetails as `${K}Other`]?: string;
 };
 
 interface OnboardingStepInputProps {
   currentStep: Step;
-  form: UseFormReturn<OnboardingFormFields>; // Or a more generic form type if preferred
+  form: UseFormReturn<OnboardingFormFields>;
   savedAnswers: Partial<CompanyDetails>;
   onLoadingChange?: (loading: boolean) => void;
 }
@@ -28,153 +28,251 @@ export function OnboardingStepInput({
   savedAnswers,
   onLoadingChange,
 }: OnboardingStepInputProps) {
+  // Hooks must be called at the top level
+  const [customValue, setCustomValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   if (currentStep.key === 'frameworkIds') {
     return (
-      <div data-testid={`onboarding-input-${currentStep.key}`}>
-        <FrameworkSelection
-          value={form.getValues(currentStep.key) || []}
-          onChange={(value) => form.setValue(currentStep.key, value)}
-          onLoadingChange={onLoadingChange}
-        />
-      </div>
+      <AnimatedWrapper delay={100} animationKey={`framework-${currentStep.key}`}>
+        <div data-testid={`onboarding-input-${currentStep.key}`}>
+          <FrameworkSelection
+            value={form.getValues(currentStep.key) || []}
+            onChange={(value) => form.setValue(currentStep.key, value)}
+            onLoadingChange={onLoadingChange}
+          />
+        </div>
+      </AnimatedWrapper>
     );
   }
 
   if (currentStep.key === 'shipping') {
     return (
       <div className="space-y-4" data-testid={`onboarding-input-${currentStep.key}`}>
-        <div className="flex flex-col gap-4 sm:flex-row">
-          <div className="flex-1">
-            <FormLabel>Full Name</FormLabel>
-            <Input
-              {...form.register('shipping.fullName')}
-              placeholder="John Doe"
-              autoFocus
-              data-testid={`onboarding-input-${currentStep.key}-fullName`}
-            />
-            <p className="text-destructive text-[0.8rem] font-medium">
-              {form.formState.errors.shipping?.fullName?.message}
-            </p>
+        <AnimatedWrapper delay={100}>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <div className="flex-1">
+              <FormLabel>Full Name</FormLabel>
+              <Input
+                {...form.register('shipping.fullName')}
+                placeholder="John Doe"
+                autoFocus
+                data-testid={`onboarding-input-${currentStep.key}-fullName`}
+              />
+              <p className="text-destructive text-[0.8rem] font-medium">
+                {form.formState.errors.shipping?.fullName?.message}
+              </p>
+            </div>
+            <div className="flex-1">
+              <FormLabel>Phone</FormLabel>
+              <Input
+                {...form.register('shipping.phone')}
+                placeholder="+1 (555) 123-4567"
+                autoFocus
+                data-testid={`onboarding-input-${currentStep.key}-phone`}
+              />
+              <p className="text-destructive text-[0.8rem] font-medium">
+                {form.formState.errors.shipping?.phone?.message}
+              </p>
+            </div>
           </div>
-          <div className="flex-1">
-            <FormLabel>Phone</FormLabel>
-            <Input
-              {...form.register('shipping.phone')}
-              placeholder="+1 (555) 123-4567"
-              autoFocus
-              data-testid={`onboarding-input-${currentStep.key}-phone`}
+        </AnimatedWrapper>
+        <AnimatedWrapper delay={200}>
+          <div>
+            <FormLabel>Address</FormLabel>
+            <Textarea
+              {...form.register('shipping.address')}
+              placeholder="123 Main St, Apt 4B, Springfield, IL, USA"
+              rows={2}
+              maxLength={300}
+              data-testid={`onboarding-input-${currentStep.key}-address`}
             />
             <p className="text-destructive text-[0.8rem] font-medium">
-              {form.formState.errors.shipping?.phone?.message}
+              {form.formState.errors.shipping?.address?.message}
             </p>
           </div>
-        </div>
-        <div>
-          <FormLabel>Address</FormLabel>
-          <Textarea
-            {...form.register('shipping.address')}
-            placeholder="123 Main St, Apt 4B, Springfield, IL, USA"
-            rows={2}
-            maxLength={300}
-            data-testid={`onboarding-input-${currentStep.key}-address`}
-          />
-          <p className="text-destructive text-[0.8rem] font-medium">
-            {form.formState.errors.shipping?.address?.message}
+        </AnimatedWrapper>
+        <AnimatedWrapper delay={300}>
+          <p className="text-xs text-center sm:text-left text-muted-foreground">
+            * We won't use your shipping details for any marketing.
           </p>
-        </div>
-        <p className="text-xs text-center sm:text-left text-muted-foreground">
-          * We won't use your shipping details for any marketing.
-        </p>
+        </AnimatedWrapper>
       </div>
     );
   }
 
   if (currentStep.key === 'website') {
     return (
-      <Controller
-        name={currentStep.key}
-        control={form.control}
-        render={({ field }) => (
-          <WebsiteInput
-            {...field}
-            placeholder="example.com"
-            autoFocus
-            data-testid={`onboarding-input-${currentStep.key}`}
-          />
-        )}
-      />
+      <AnimatedWrapper delay={100} animationKey={`website-${currentStep.key}`}>
+        <Controller
+          name={currentStep.key}
+          control={form.control}
+          render={({ field }) => (
+            <WebsiteInput
+              {...field}
+              placeholder="example.com"
+              autoFocus
+              data-testid={`onboarding-input-${currentStep.key}`}
+            />
+          )}
+        />
+      </AnimatedWrapper>
     );
   }
 
   if (currentStep.key === 'describe') {
     return (
-      <Textarea
-        {...form.register(currentStep.key)}
-        placeholder={`${savedAnswers.organizationName || ''} is a company that...`}
-        rows={2}
-        maxLength={300}
-        className="h-24 resize-none"
-        data-testid={`onboarding-input-${currentStep.key}`}
-      />
+      <AnimatedWrapper delay={100} animationKey={`describe-${currentStep.key}`}>
+        <Textarea
+          {...form.register(currentStep.key)}
+          placeholder={`${savedAnswers.organizationName || ''} is a company that...`}
+          rows={2}
+          maxLength={300}
+          className="h-24 resize-none"
+          data-testid={`onboarding-input-${currentStep.key}`}
+        />
+      </AnimatedWrapper>
     );
   }
 
   if (currentStep.options) {
+    // Single-select fields
     if (
       currentStep.key === 'industry' ||
       currentStep.key === 'teamSize' ||
       currentStep.key === 'workLocation'
     ) {
+      const selectedValue = form.watch(currentStep.key);
+
       return (
-        <Select
-          onValueChange={(value) => form.setValue(currentStep.key, value)}
-          defaultValue={form.watch(currentStep.key)}
-        >
-          <SelectTrigger data-testid={`onboarding-input-${currentStep.key}`}>
-            <SelectValue placeholder={currentStep.placeholder} />
-          </SelectTrigger>
-          <SelectContent>
+        <AnimatedWrapper delay={100} animationKey={`select-${currentStep.key}`}>
+          <div className="flex flex-wrap gap-2" data-testid={`onboarding-input-${currentStep.key}`}>
             {currentStep.options.map((option) => (
-              <SelectItem
+              <SelectablePill
                 key={option}
-                value={option}
-                data-testid={`onboarding-option-${option.toLowerCase().replace(/\s+/g, '-')}`}
-              >
-                {option}
-              </SelectItem>
+                label={option}
+                isSelected={selectedValue === option}
+                onSelectionChange={(selected) => {
+                  if (selected) {
+                    form.setValue(currentStep.key, option);
+                  }
+                }}
+              />
             ))}
-          </SelectContent>
-        </Select>
+          </div>
+        </AnimatedWrapper>
       );
     }
 
-    const options = currentStep.options.map((option) => ({
-      name: option,
-      value: option,
-    }));
-    const selected = (form.watch(currentStep.key) || '').split(',').filter(Boolean);
+    // Multi-select fields with custom value support
+    const selectedValues = (form.watch(currentStep.key) || '').split(',').filter(Boolean);
+
+    const handlePillToggle = (option: string) => {
+      const isSelected = selectedValues.includes(option);
+      let newValues;
+
+      if (isSelected) {
+        newValues = selectedValues.filter((v) => v !== option);
+      } else {
+        newValues = [...selectedValues, option];
+      }
+
+      form.setValue(currentStep.key, newValues.join(','));
+    };
+
+    const handleAddCustom = () => {
+      if (customValue.trim() && !selectedValues.includes(customValue.trim())) {
+        const newValues = [...selectedValues, customValue.trim()];
+        form.setValue(currentStep.key, newValues.join(','));
+        setCustomValue('');
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleAddCustom();
+      } else if (e.key === 'Backspace' && customValue === '' && selectedValues.length > 0) {
+        e.preventDefault();
+        const newValues = selectedValues.slice(0, -1);
+        form.setValue(currentStep.key, newValues.join(','));
+      }
+    };
+
+    const predefinedOptions = currentStep.options;
 
     return (
-      <div data-testid={`onboarding-input-${currentStep.key}`}>
-        <SelectPills
-          data={options}
-          value={selected}
-          onValueChange={(values: string[]) => {
-            form.setValue(currentStep.key, values.join(','));
-          }}
-          placeholder={`Search or add custom (press Enter) • ${currentStep.placeholder}`}
-          data-testid={`onboarding-input-${currentStep.key}-search`}
-        />
-      </div>
+      <AnimatedWrapper delay={100} animationKey={`pills-${currentStep.key}`}>
+        <div className="space-y-4" data-testid={`onboarding-input-${currentStep.key}`}>
+          {/* Tag input container */}
+          <div
+            ref={containerRef}
+            onClick={() => inputRef.current?.focus()}
+            className="flex flex-wrap items-center gap-2 p-3 border border-input rounded-md min-h-[3.25rem] bg-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text transition-all duration-200 ease-in-out"
+          >
+            {selectedValues.map((value) => (
+              <span
+                key={value}
+                className="inline-flex items-center gap-1 bg-primary/10 text-primary px-2 py-1 rounded-md text-xs font-medium"
+              >
+                {value}
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePillToggle(value);
+                  }}
+                  className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
+                  aria-label={`Remove ${value}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </span>
+            ))}
+            <input
+              ref={inputRef}
+              type="text"
+              value={customValue}
+              onChange={(e) => setCustomValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={selectedValues.length === 0 ? 'Search or add custom (press Enter)' : ''}
+              className="flex-1 min-w-[120px] outline-none bg-transparent text-sm placeholder:text-muted-foreground"
+              autoFocus
+            />
+          </div>
+
+          {/* Suggested options */}
+          {predefinedOptions.filter((option) => !selectedValues.includes(option)).length > 0 && (
+            <div className="space-y-2">
+              <div className="flex flex-wrap gap-2">
+                {predefinedOptions
+                  .filter((option) => !selectedValues.includes(option))
+                  .map((option) => (
+                    <SelectablePill
+                      key={option}
+                      label={option}
+                      isSelected={false}
+                      onSelectionChange={() => handlePillToggle(option)}
+                      showIcon={true}
+                    />
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </AnimatedWrapper>
     );
   }
 
   return (
-    <Input
-      {...form.register(currentStep.key)}
-      placeholder={currentStep.placeholder}
-      autoFocus
-      data-testid={`onboarding-input-${currentStep.key}`}
-    />
+    <AnimatedWrapper delay={100} animationKey={`input-${currentStep.key}`}>
+      <Input
+        {...form.register(currentStep.key)}
+        placeholder={currentStep.placeholder}
+        autoFocus
+        data-testid={`onboarding-input-${currentStep.key}`}
+      />
+    </AnimatedWrapper>
   );
 }
diff --git a/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx b/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
index 15e5509f6..ab2f3ef2c 100644
--- a/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
+++ b/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
@@ -1,26 +1,21 @@
 'use client';
 
-import { changeOrganizationAction } from '@/actions/change-organization';
+import { AnimatedWrapper } from '@/components/animated-wrapper';
 import { LogoSpinner } from '@/components/logo-spinner';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@comp/ui/card';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@comp/ui/form';
-import type { Organization } from '@db';
-import { useAction } from 'next-safe-action/hooks';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import Balancer from 'react-wrap-balancer';
 import { useOnboardingForm } from '../hooks/useOnboardingForm';
 import { OnboardingFormActions } from './OnboardingFormActions';
 import { OnboardingStepInput } from './OnboardingStepInput';
-
 interface OrganizationSetupFormProps {
-  existingOrganizations?: Organization[];
   setupId?: string;
   initialData?: Record<string, any>;
   currentStep?: string;
 }
 
 export function OrganizationSetupForm({
-  existingOrganizations = [],
   setupId,
   initialData,
   currentStep,
@@ -28,15 +23,6 @@ export function OrganizationSetupForm({
   const [isLoadingFrameworks, setIsLoadingFrameworks] = useState(false);
   const router = useRouter();
 
-  const changeOrgAction = useAction(changeOrganizationAction, {
-    onSuccess: (result) => {
-      const orgId = result.data?.data?.id;
-      if (orgId) {
-        router.push(`/${orgId}/`);
-      }
-    },
-  });
-
   const {
     stepIndex,
     steps,
@@ -55,8 +41,6 @@ export function OrganizationSetupForm({
     currentStep,
   });
 
-  const hasExistingOrgs = existingOrganizations.length > 0;
-
   // Check if current step has valid input
   const currentStepValue = form.watch(step.key);
   const isCurrentStepValid = (() => {
@@ -94,31 +78,45 @@ export function OrganizationSetupForm({
       <LogoSpinner />
     </div>
   ) : (
-    <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">
-      <div className="relative w-full max-w-5xl">
-        <Card className="scrollbar-hide relative mx-auto flex w-full min-w-[640px] sm:min-w-[720px] flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl">
-          {isLoadingFrameworks && step.key === 'frameworkIds' && (
-            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
-              <LogoSpinner />
-            </div>
-          )}
-          <CardHeader className="flex min-h-[140px] flex-col items-center justify-center pb-0">
-            <div className="flex flex-col items-center gap-2">
-              <LogoSpinner />
-              <div className="text-muted-foreground text-sm">
-                Step {stepIndex + 1} of {steps.length}
-              </div>
-              <CardTitle className="flex min-h-[56px] items-center justify-center text-center">
-                {step.question}
-              </CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex min-h-[150px] flex-1 flex-col overflow-y-auto">
+    <div className="flex flex-1 flex-col md:px-18 md:py-12 px-4 py-6">
+      {/* Progress Stepper */}
+      <AnimatedWrapper
+        delay={700}
+        animationKey={`progress-${step.key}`}
+        className="mb-8 md:max-w-sm"
+      >
+        <div className="w-full bg-muted h-1 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-primary transition-all duration-300"
+            style={{ width: `${((stepIndex + 1) / steps.length) * 100}%` }}
+          />
+        </div>
+      </AnimatedWrapper>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col">
+        {/* Title */}
+        <div className="mb-8">
+          <AnimatedWrapper delay={800} animationKey={`title-${step.key}`}>
+            <h1 className="text-2xl md:text-4xl font-bold text-foreground mb-2">
+              <Balancer>{step.question}</Balancer>
+            </h1>
+          </AnimatedWrapper>
+          <AnimatedWrapper delay={1000} animationKey={`subtitle-${step.key}`}>
+            <p className="text-md md:text-lg text-muted-foreground flex items-center flex-wrap">
+              <Balancer>Our AI will personalize the platform based on your answers.</Balancer>
+            </p>
+          </AnimatedWrapper>
+        </div>
+
+        {/* Form Content */}
+        <div className="flex-1">
+          <AnimatedWrapper delay={1200} animationKey={`form-${step.key}`}>
             <Form {...form} key={step.key}>
               <form
                 id="onboarding-form"
                 onSubmit={form.handleSubmit(onSubmit)}
-                className="mt-4 w-full"
+                className="w-full"
                 autoComplete="off"
               >
                 <FormField
@@ -141,46 +139,22 @@ export function OrganizationSetupForm({
                 />
               </form>
             </Form>
-          </CardContent>
-          <CardFooter className="flex flex-col gap-4">
-            <div className="flex w-full items-center justify-between">
-              <div className="flex flex-1 items-center" suppressHydrationWarning>
-                {/* Skip button removed - forcing all questions */}
-              </div>
-              <OnboardingFormActions
-                onBack={handleBack}
-                isSubmitting={isOnboarding || isFinalizing}
-                stepIndex={stepIndex}
-                isLastStep={isLastStep}
-                isOnboarding={isOnboarding}
-                isCurrentStepValid={isCurrentStepValid}
-              />
-            </div>
-            <div className="w-full border-t border-border/30 pt-3">
-              <p className="text-center text-xs text-muted-foreground/70">
-                <span className="inline-flex items-center justify-center gap-1.5 flex-wrap">
-                  <svg
-                    className="h-3.5 w-3.5 flex-shrink-0"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                    />
-                  </svg>
-                  <span className="max-w-[280px] sm:max-w-none">
-                    AI personalizes your plan based on your answers
-                  </span>
-                </span>
-              </p>
-            </div>
-          </CardFooter>
-        </Card>
+          </AnimatedWrapper>
+        </div>
+
+        {/* Action Buttons - Fixed at bottom */}
+        <AnimatedWrapper delay={1400} animationKey={`actions-${step.key}`}>
+          <div className="flex justify-end">
+            <OnboardingFormActions
+              onBack={handleBack}
+              isSubmitting={isOnboarding || isFinalizing}
+              stepIndex={stepIndex}
+              isLastStep={isLastStep}
+              isOnboarding={isOnboarding}
+              isCurrentStepValid={isCurrentStepValid}
+            />
+          </div>
+        </AnimatedWrapper>
       </div>
     </div>
   );
diff --git a/apps/app/src/app/(app)/setup/layout.tsx b/apps/app/src/app/(app)/setup/layout.tsx
index 21a451885..fb43ad136 100644
--- a/apps/app/src/app/(app)/setup/layout.tsx
+++ b/apps/app/src/app/(app)/setup/layout.tsx
@@ -1,4 +1,3 @@
-import { OnboardingLayout } from '@/components/onboarding/OnboardingLayout';
 import { auth } from '@/utils/auth';
 import { db } from '@db';
 import { headers } from 'next/headers';
@@ -27,5 +26,5 @@ export default async function SetupLayout({ children }: { children: React.ReactN
     }
   }
 
-  return <OnboardingLayout variant="setup">{children}</OnboardingLayout>;
+  return <>{children}</>;
 }
diff --git a/apps/app/src/components/animated-wrapper.tsx b/apps/app/src/components/animated-wrapper.tsx
new file mode 100644
index 000000000..23cabf7b7
--- /dev/null
+++ b/apps/app/src/components/animated-wrapper.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { cn } from '@comp/ui/cn';
+import { useEffect, useState } from 'react';
+
+interface AnimatedWrapperProps {
+  children: React.ReactNode;
+  delay?: number;
+  direction?: 'up' | 'down' | 'left' | 'right';
+  className?: string;
+  duration?: number;
+  animationKey?: string | number; // Use animationKey instead of key
+}
+
+export function AnimatedWrapper({
+  children,
+  delay = 0,
+  direction = 'up',
+  className,
+  duration = 500,
+  animationKey,
+}: AnimatedWrapperProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  const getTransformClass = () => {
+    if (!isVisible) {
+      switch (direction) {
+        case 'up':
+          return 'translate-y-4';
+        case 'down':
+          return '-translate-y-4';
+        case 'left':
+          return 'translate-x-4';
+        case 'right':
+          return '-translate-x-4';
+        default:
+          return 'translate-y-4';
+      }
+    }
+    return 'translate-y-0 translate-x-0';
+  };
+
+  return (
+    <div
+      className={cn(
+        'transition-all ease-out',
+        `duration-${duration}`,
+        isVisible ? 'opacity-100' : 'opacity-0',
+        getTransformClass(),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/app/src/components/framework-pill.tsx b/apps/app/src/components/framework-pill.tsx
new file mode 100644
index 000000000..8210b3c2b
--- /dev/null
+++ b/apps/app/src/components/framework-pill.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import type { FrameworkEditorFramework } from '@db';
+import { SelectablePill } from './selectable-pill';
+
+type FrameworkPillProps = {
+  framework: Pick<FrameworkEditorFramework, 'id' | 'name' | 'version'>;
+  isSelected: boolean;
+  onSelectionChange: (checked: boolean) => void;
+  className?: string;
+};
+
+export function FrameworkPill({
+  framework,
+  isSelected,
+  onSelectionChange,
+  className,
+}: FrameworkPillProps) {
+  return (
+    <SelectablePill
+      label={`${framework.name}`}
+      isSelected={isSelected}
+      onSelectionChange={onSelectionChange}
+      className={className}
+    />
+  );
+}
diff --git a/apps/app/src/components/layout/MinimalHeader.tsx b/apps/app/src/components/layout/MinimalHeader.tsx
index b9779cd42..0621a014a 100644
--- a/apps/app/src/components/layout/MinimalHeader.tsx
+++ b/apps/app/src/components/layout/MinimalHeader.tsx
@@ -1,12 +1,9 @@
 'use client';
 
 import { changeOrganizationAction } from '@/actions/change-organization';
-import { MinimalOrganizationSwitcher } from '@/components/layout/MinimalOrganizationSwitcher';
-import { MinimalUserMenu } from '@/components/layout/MinimalUserMenu';
-import { Icons } from '@comp/ui/icons';
+import { Logo } from '@/app/(app)/setup/components/Logo';
 import type { Organization } from '@db';
 import type { User } from 'better-auth';
-import { ArrowLeft } from 'lucide-react';
 import { useAction } from 'next-safe-action/hooks';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -38,39 +35,10 @@ export function MinimalHeader({
   const hasExistingOrgs = organizations.length > 0;
 
   return (
-    <header className="bg-background/95 sticky top-0 z-10 flex items-center justify-between border-b px-4 py-2 backdrop-blur-sm">
-      <div className="flex items-center gap-4">
-        <Link href="/" className="flex items-center gap-2">
-          <Icons.Logo className="h-6 w-6" />
-          <span className="hidden sm:inline text-lg font-semibold">Comp AI</span>
-        </Link>
-        {variant === 'upgrade' || variant === 'onboarding' ? (
-          <div className="w-auto">
-            <MinimalOrganizationSwitcher
-              organizations={organizations}
-              currentOrganization={currentOrganization}
-            />
-          </div>
-        ) : variant === 'setup' && hasExistingOrgs ? (
-          <button
-            className="flex items-center gap-1.5 text-sm text-foreground/80 hover:text-foreground transition-colors"
-            onClick={() => changeOrgAction.execute({ organizationId: organizations[0].id })}
-            disabled={changeOrgAction.status === 'executing'}
-          >
-            <ArrowLeft className="h-3.5 w-3.5" />
-            <span className="hidden md:inline">
-              {organizations.length === 1 ? (
-                <>Continue with {organizations[0].name || 'your organization'}</>
-              ) : (
-                <>Back to your organizations</>
-              )}
-            </span>
-            <span className="hidden sm:inline md:hidden">Back</span>
-          </button>
-        ) : null}
-      </div>
-
-      <MinimalUserMenu user={user} />
+    <header className="sticky top-0 z-10 bg-background flex items-center h-[90px] w-full px-4  md:px-18">
+      <Link href="/" className="flex items-center">
+        <Logo />
+      </Link>
     </header>
   );
 }
diff --git a/apps/app/src/components/onboarding/OnboardingLayout.tsx b/apps/app/src/components/onboarding/OnboardingLayout.tsx
index eed6964dc..792fae7d7 100644
--- a/apps/app/src/components/onboarding/OnboardingLayout.tsx
+++ b/apps/app/src/components/onboarding/OnboardingLayout.tsx
@@ -1,7 +1,5 @@
 'use server';
 
-import { AnimatedGradientBackgroundWrapper } from '@/app/(app)/setup/components/AnimatedGradientBackgroundWrapper';
-import { MinimalHeader } from '@/components/layout/MinimalHeader';
 import { getOrganizations } from '@/data/getOrganizations';
 import { auth } from '@/utils/auth';
 import type { Organization } from '@db';
@@ -32,14 +30,7 @@ export async function OnboardingLayout({
 
   return (
     <main className="flex min-h-dvh flex-col">
-      <AnimatedGradientBackgroundWrapper />
-      <MinimalHeader
-        user={session.user}
-        organizations={organizations}
-        currentOrganization={currentOrganization}
-        variant={variant}
-      />
-      <div className="flex flex-1 items-center justify-center px-4">{children}</div>
+      <div className="flex flex-1">{children}</div>
     </main>
   );
 }
diff --git a/apps/app/src/components/selectable-pill.tsx b/apps/app/src/components/selectable-pill.tsx
new file mode 100644
index 000000000..e41e3e726
--- /dev/null
+++ b/apps/app/src/components/selectable-pill.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { cn } from '@comp/ui/cn';
+import { Plus, X } from 'lucide-react';
+
+type SelectablePillProps = {
+  label: string;
+  isSelected: boolean;
+  onSelectionChange: (selected: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  showIcon?: boolean;
+};
+
+export function SelectablePill({
+  label,
+  isSelected,
+  onSelectionChange,
+  className,
+  disabled = false,
+  showIcon = false,
+}: SelectablePillProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => !disabled && onSelectionChange(!isSelected)}
+      disabled={disabled}
+      className={cn(
+        'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all duration-200',
+        'disabled:cursor-not-allowed disabled:opacity-50 hover:shadow-sm',
+        isSelected
+          ? 'bg-primary/10 text-foreground border border-primary shadow-sm'
+          : 'border border-border text-foreground hover:bg-muted/30',
+        className,
+      )}
+    >
+      {label}
+      {showIcon && (
+        <span className="ml-1">
+          {isSelected ? (
+            <X className="h-3 w-3" />
+          ) : (
+            <div className="flex items-center justify-center w-5 h-5 rounded-full border">
+              <Plus className="h-3 w-3 text-black" />
+            </div>
+          )}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/apps/app/src/hooks/usePageLoadAnimation.ts b/apps/app/src/hooks/usePageLoadAnimation.ts
new file mode 100644
index 000000000..c5e7c0cf9
--- /dev/null
+++ b/apps/app/src/hooks/usePageLoadAnimation.ts
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+interface UsePageLoadAnimationOptions {
+  delay?: number;
+  staggerDelay?: number;
+}
+
+export function usePageLoadAnimation({
+  delay = 0,
+  staggerDelay = 100,
+}: UsePageLoadAnimationOptions = {}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [animationStep, setAnimationStep] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+
+      // Stagger animations
+      const staggerTimer = setTimeout(() => {
+        setAnimationStep(1);
+      }, staggerDelay);
+
+      return () => clearTimeout(staggerTimer);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [delay, staggerDelay]);
+
+  return {
+    isVisible,
+    animationStep,
+    getAnimationClass: (step: number) => {
+      if (!isVisible) return 'opacity-0 translate-y-4';
+      if (animationStep < step) return 'opacity-0 translate-y-4';
+      return 'opacity-100 translate-y-0';
+    },
+    getTransitionClass: (step: number, duration = 500) =>
+      `transition-all duration-${duration} ease-out delay-${step * 100}`,
+  };
+}