diff --git a/app/(app)/onboarding/page.tsx b/app/(app)/onboarding/page.tsx
deleted file mode 100644
index 92a053c..0000000
--- a/app/(app)/onboarding/page.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { ArrowRight, Globe, Loader2, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react'
-import type { ProductAnalysis } from '@/lib/types'
-
-const examples = [
-  { name: 'Notion', url: 'https://notion.so' },
-  { name: 'Stripe', url: 'https://stripe.com' },
-  { name: 'Figma', url: 'https://figma.com' },
-  { name: 'Linear', url: 'https://linear.app' },
-]
-
-export default function OnboardingPage() {
-  const router = useRouter()
-  const [url, setUrl] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [progress, setProgress] = useState('')
-  const [error, setError] = useState('')
-  const [showManualInput, setShowManualInput] = useState(false)
-
-  // Manual input fields
-  const [manualProductName, setManualProductName] = useState('')
-  const [manualDescription, setManualDescription] = useState('')
-  const [manualFeatures, setManualFeatures] = useState('')
-
-  async function analyzeWebsite() {
-    if (!url) return
-
-    setLoading(true)
-    setError('')
-    setProgress('Scraping website...')
-
-    try {
-      const response = await fetch('/api/analyze', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ url }),
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        if (data.needsManualInput) {
-          setShowManualInput(true)
-          setManualProductName(url.replace(/^https?:\/\//, '').replace(/\/$/, ''))
-          throw new Error(data.error)
-        }
-        throw new Error(data.error || 'Failed to analyze')
-      }
-
-      setProgress('Analyzing with AI...')
-
-      // Store in localStorage for dashboard
-      localStorage.setItem('productAnalysis', JSON.stringify(data.data))
-      localStorage.setItem('analysisStats', JSON.stringify(data.stats))
-
-      setProgress('Redirecting to dashboard...')
-
-      // Redirect to dashboard with product name in query
-      const params = new URLSearchParams({ product: data.data.productName })
-      router.push(`/dashboard?${params.toString()}`)
-    } catch (err: any) {
-      console.error('Analysis error:', err)
-      setError(err.message || 'Failed to analyze website')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  async function analyzeManually() {
-    if (!manualProductName || !manualDescription) return
-
-    setLoading(true)
-    setError('')
-    setProgress('Analyzing with AI...')
-
-    try {
-      // Create a mock analysis from manual input
-      const manualAnalysis: ProductAnalysis = {
-        productName: manualProductName,
-        tagline: manualDescription.split('.')[0],
-        description: manualDescription,
-        features: manualFeatures.split('\n').filter(f => f.trim()),
-        problemsSolved: [],
-        targetAudience: [],
-        valuePropositions: [],
-        keywords: manualProductName.toLowerCase().split(' '),
-        scrapedAt: new Date().toISOString()
-      }
-
-      // Send to API to enhance with AI
-      const response = await fetch('/api/analyze-manual', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          productName: manualProductName,
-          description: manualDescription,
-          features: manualFeatures
-        }),
-      })
-
-      let finalAnalysis = manualAnalysis
-
-      if (response.ok) {
-        const data = await response.json()
-        finalAnalysis = data.data
-      }
-
-      // Store in localStorage for dashboard
-      localStorage.setItem('productAnalysis', JSON.stringify(finalAnalysis))
-      localStorage.setItem('analysisStats', JSON.stringify({
-        features: finalAnalysis.features.length,
-        keywords: finalAnalysis.keywords.length,
-        personas: finalAnalysis.personas.length,
-        useCases: finalAnalysis.useCases.length,
-        competitors: finalAnalysis.competitors.length,
-        dorkQueries: finalAnalysis.dorkQueries.length
-      }))
-
-      // Redirect to dashboard
-      const params = new URLSearchParams({ product: finalAnalysis.productName })
-      router.push(`/dashboard?${params.toString()}`)
-    } catch (err: any) {
-      console.error('Manual analysis error:', err)
-      setError(err.message || 'Failed to analyze')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  if (showManualInput) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-background p-4">
-        <div className="w-full max-w-lg space-y-6">
-          <div className="text-center space-y-2">
-            <div className="flex justify-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/20 text-amber-400">
-                <AlertCircle className="h-6 w-6" />
-              </div>
-            </div>
-            <h1 className="text-2xl font-bold text-foreground">Couldn&apos;t Reach Website</h1>
-            <p className="text-muted-foreground">
-              No problem! Tell us about your product and we&apos;ll analyze it manually.
-            </p>
-          </div>
-
-          {error && (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Describe Your Product</CardTitle>
-              <CardDescription>
-                Enter your product details and we&apos;ll extract the key information.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="productName">Product Name *</Label>
-                <Input
-                  id="productName"
-                  placeholder="My Awesome Product"
-                  value={manualProductName}
-                  onChange={(e) => setManualProductName(e.target.value)}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="description">Description *</Label>
-                <Textarea
-                  id="description"
-                  placeholder="What does your product do? Who is it for? What problem does it solve?"
-                  value={manualDescription}
-                  onChange={(e) => setManualDescription(e.target.value)}
-                  rows={4}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="features">Key Features (one per line)</Label>
-                <Textarea
-                  id="features"
-                  placeholder="- Feature 1&#10;- Feature 2&#10;- Feature 3"
-                  value={manualFeatures}
-                  onChange={(e) => setManualFeatures(e.target.value)}
-                  rows={4}
-                />
-              </div>
-
-              {loading && (
-                <div className="space-y-3 py-4">
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    {progress}
-                  </div>
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-4/5" />
-                  </div>
-                </div>
-              )}
-
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setShowManualInput(false)
-                    setError('')
-                  }}
-                  disabled={loading}
-                  className="flex-1"
-                >
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  Back
-                </Button>
-                <Button
-                  onClick={analyzeManually}
-                  disabled={!manualProductName || !manualDescription || loading}
-                  className="flex-1 gap-2"
-                >
-                  {loading ? (
-                    <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Analyzing...
-                    </>
-                  ) : (
-                    <>
-                      Analyze
-                      <ArrowRight className="h-4 w-4" />
-                    </>
-                  )}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-4">
-      <div className="w-full max-w-lg space-y-6">
-        {/* Header */}
-        <div className="text-center space-y-2">
-          <div className="flex justify-center">
-            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
-              <Sparkles className="h-6 w-6" />
-            </div>
-          </div>
-          <h1 className="text-2xl font-bold text-foreground">Welcome to Sanati</h1>
-          <p className="text-muted-foreground">
-            Enter your website URL and we&apos;ll analyze your product to find opportunities.
-          </p>
-        </div>
-
-        {error && (
-          <Alert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        {/* Input Card */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Analyze Your Product</CardTitle>
-            <CardDescription>
-              We&apos;ll scrape your site and use AI to extract key information.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="url">Website URL</Label>
-              <div className="relative">
-                <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="url"
-                  placeholder="https://yourproduct.com"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && !loading && analyzeWebsite()}
-                  className="pl-10"
-                  disabled={loading}
-                />
-              </div>
-            </div>
-
-            {loading && (
-              <div className="space-y-3 py-4">
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  {progress}
-                </div>
-                <div className="space-y-2">
-                  <Skeleton className="h-4 w-full" />
-                  <Skeleton className="h-4 w-4/5" />
-                  <Skeleton className="h-4 w-3/5" />
-                </div>
-              </div>
-            )}
-
-            <Button
-              onClick={analyzeWebsite}
-              disabled={!url || loading}
-              className="w-full gap-2"
-            >
-              {loading ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  Analyzing...
-                </>
-              ) : (
-                <>
-                  Analyze Website
-                  <ArrowRight className="h-4 w-4" />
-                </>
-              )}
-            </Button>
-
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setShowManualInput(true)}
-              className="w-full text-muted-foreground"
-            >
-              Or enter details manually
-            </Button>
-          </CardContent>
-        </Card>
-
-        {/* Examples */}
-        <div className="text-center">
-          <p className="text-sm text-muted-foreground mb-3">Or try with an example:</p>
-          <div className="flex flex-wrap justify-center gap-2">
-            {examples.map((example) => (
-              <Button
-                key={example.url}
-                variant="outline"
-                size="sm"
-                onClick={() => setUrl(example.url)}
-                disabled={loading}
-              >
-                {example.name}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
new file mode 100644
index 0000000..0b7acb3
--- /dev/null
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,398 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { ArrowRight, Globe, Loader2, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react'
+import type { ProductAnalysis } from '@/lib/types'
+
+const examples = [
+  { name: 'Notion', url: 'https://notion.so' },
+  { name: 'Stripe', url: 'https://stripe.com' },
+  { name: 'Figma', url: 'https://figma.com' },
+  { name: 'Linear', url: 'https://linear.app' },
+]
+
+export default function OnboardingPage() {
+  const router = useRouter()
+  const [url, setUrl] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState('')
+  const [error, setError] = useState('')
+  const [showManualInput, setShowManualInput] = useState(false)
+
+  // Manual input fields
+  const [manualProductName, setManualProductName] = useState('')
+  const [manualDescription, setManualDescription] = useState('')
+  const [manualFeatures, setManualFeatures] = useState('')
+
+  async function analyzeWebsite() {
+    if (!url) return
+
+    setLoading(true)
+    setError('')
+    setProgress('Scraping website...')
+
+    try {
+      const response = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        if (data.needsManualInput) {
+          setShowManualInput(true)
+          setManualProductName(url.replace(/^https?:\/\//, '').replace(/\/$/, ''))
+          throw new Error(data.error)
+        }
+        throw new Error(data.error || 'Failed to analyze')
+      }
+
+      setProgress('Analyzing with AI...')
+
+      // Store in localStorage for dashboard
+      localStorage.setItem('productAnalysis', JSON.stringify(data.data))
+      localStorage.setItem('analysisStats', JSON.stringify(data.stats))
+
+      setProgress('Redirecting to dashboard...')
+
+      // Redirect to dashboard with product name in query
+      const params = new URLSearchParams({ product: data.data.productName })
+      router.push(`/dashboard?${params.toString()}`)
+    } catch (err: any) {
+      console.error('Analysis error:', err)
+      setError(err.message || 'Failed to analyze website')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function analyzeManually() {
+    if (!manualProductName || !manualDescription) return
+
+    setLoading(true)
+    setError('')
+    setProgress('Analyzing with AI...')
+
+    try {
+      // Create a mock analysis from manual input
+      const manualAnalysis: ProductAnalysis = {
+        productName: manualProductName,
+        tagline: manualDescription.split('.')[0],
+        description: manualDescription,
+        features: manualFeatures.split('\n').filter(f => f.trim()),
+        problemsSolved: [],
+        targetAudience: [],
+        valuePropositions: [],
+        keywords: manualProductName.toLowerCase().split(' '),
+        scrapedAt: new Date().toISOString()
+      }
+
+      // Send to API to enhance with AI
+      const response = await fetch('/api/analyze-manual', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          productName: manualProductName,
+          description: manualDescription,
+          features: manualFeatures
+        }),
+      })
+
+      let finalAnalysis = manualAnalysis
+
+      if (response.ok) {
+        const data = await response.json()
+        finalAnalysis = data.data
+      }
+
+      // Store in localStorage for dashboard
+      localStorage.setItem('productAnalysis', JSON.stringify(finalAnalysis))
+      localStorage.setItem('analysisStats', JSON.stringify({
+        features: finalAnalysis.features.length,
+        keywords: finalAnalysis.keywords.length,
+        personas: finalAnalysis.personas.length,
+        useCases: finalAnalysis.useCases.length,
+        competitors: finalAnalysis.competitors.length,
+        dorkQueries: finalAnalysis.dorkQueries.length
+      }))
+
+      // Redirect to dashboard
+      const params = new URLSearchParams({ product: finalAnalysis.productName })
+      router.push(`/dashboard?${params.toString()}`)
+    } catch (err: any) {
+      console.error('Manual analysis error:', err)
+      setError(err.message || 'Failed to analyze')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (showManualInput) {
+    return (
+      <div className="flex min-h-screen w-full">
+        {/* Left Side - Content */}
+        <div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-background">
+          <div className="w-full max-w-lg space-y-6">
+            <div className="text-center space-y-2">
+              <div className="flex justify-center">
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/20 text-amber-400">
+                  <AlertCircle className="h-6 w-6" />
+                </div>
+              </div>
+              <h1 className="text-2xl font-bold text-foreground">Couldn&apos;t Reach Website</h1>
+              <p className="text-muted-foreground">
+                No problem! Tell us about your product and we&apos;ll analyze it manually.
+              </p>
+            </div>
+
+            {error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <Card className="border-border/50 shadow-none">
+              <CardHeader>
+                <CardTitle>Describe Your Product</CardTitle>
+                <CardDescription>
+                  Enter your product details and we&apos;ll extract the key information.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="productName">Product Name *</Label>
+                  <Input
+                    id="productName"
+                    placeholder="My Awesome Product"
+                    value={manualProductName}
+                    onChange={(e) => setManualProductName(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="description">Description *</Label>
+                  <Textarea
+                    id="description"
+                    placeholder="What does your product do? Who is it for? What problem does it solve?"
+                    value={manualDescription}
+                    onChange={(e) => setManualDescription(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="features">Key Features (one per line)</Label>
+                  <Textarea
+                    id="features"
+                    placeholder="- Feature 1&#10;- Feature 2&#10;- Feature 3"
+                    value={manualFeatures}
+                    onChange={(e) => setManualFeatures(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+
+                {loading && (
+                  <div className="space-y-3 py-4">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      {progress}
+                    </div>
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-4/5" />
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setShowManualInput(false)
+                      setError('')
+                    }}
+                    disabled={loading}
+                    className="flex-1"
+                  >
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    Back
+                  </Button>
+                  <Button
+                    onClick={analyzeManually}
+                    disabled={!manualProductName || !manualDescription || loading}
+                    className="flex-1 gap-2"
+                  >
+                    {loading ? (
+                      <>
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Analyzing...
+                      </>
+                    ) : (
+                      <>
+                        Analyze
+                        <ArrowRight className="h-4 w-4" />
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block lg:w-1/2 relative">
+          <img
+            src="/onboarding-bg.png"
+            alt="Abstract Background"
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/40" /> {/* Optional overlay for contrast if needed */}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen w-full">
+      {/* Left Side - Content */}
+      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-background">
+        <div className="w-full max-w-lg space-y-8">
+          {/* Header */}
+          <div className="text-center space-y-2">
+            <div className="flex justify-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+                <Sparkles className="h-6 w-6" />
+              </div>
+            </div>
+            <h1 className="text-3xl font-bold text-foreground tracking-tight">Welcome to Sanati</h1>
+            <p className="text-muted-foreground">
+              Enter your website URL and we&apos;ll analyze your product to find opportunities.
+            </p>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Input Card */}
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="url">Website URL</Label>
+                <div className="relative">
+                  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="url"
+                    placeholder="https://yourproduct.com"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && !loading && analyzeWebsite()}
+                    className="pl-10 h-11"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              {loading && (
+                <div className="space-y-3 py-4">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {progress}
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-4/5" />
+                    <Skeleton className="h-4 w-3/5" />
+                  </div>
+                </div>
+              )}
+
+              <Button
+                onClick={analyzeWebsite}
+                disabled={!url || loading}
+                className="w-full gap-2 h-11"
+                size="lg"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Analyzing...
+                  </>
+                ) : (
+                  <>
+                    Analyze Website
+                    <ArrowRight className="h-4 w-4" />
+                  </>
+                )}
+              </Button>
+
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background px-2 text-muted-foreground">
+                    Or
+                  </span>
+                </div>
+              </div>
+
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={() => setShowManualInput(true)}
+                className="w-full"
+              >
+                Enter details manually
+              </Button>
+            </div>
+
+            {/* Examples */}
+            <div className="text-center">
+              <p className="text-sm text-muted-foreground mb-3">Try with an example:</p>
+              <div className="flex flex-wrap justify-center gap-2">
+                {examples.map((example) => (
+                  <Button
+                    key={example.url}
+                    variant="ghost"
+                    size="sm"
+                    className="bg-muted/50 hover:bg-muted"
+                    onClick={() => setUrl(example.url)}
+                    disabled={loading}
+                  >
+                    {example.name}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Side - Image */}
+      <div className="hidden lg:block lg:w-1/2 relative bg-zinc-900">
+        <img
+          src="/onboarding-bg.png"
+          alt="Abstract Background"
+          className="absolute inset-0 w-full h-full object-cover opacity-90"
+        />
+        <div className="absolute inset-0 bg-gradient-to-l from-transparent to-background/20" />
+      </div>
+    </div>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index ab48bc1..48e9487 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,8 @@ import { ArrowRight, Search, Zap, Target, Sparkles } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { DotPattern } from '@/components/magicui/dot-pattern'
 import { HeroShader } from '@/components/hero-shader'
+import { FeaturesSection } from '@/components/features-section'
+import { HeroSection } from '@/components/hero-section'
 import { cn } from '@/lib/utils'
 
 export default function LandingPage() {
@@ -15,28 +17,6 @@ export default function LandingPage() {
                 )}
             />
 
-            <HeroShader />
-
-            {/* Header */}
-            <header className="border-b border-border/40 backdrop-blur-md sticky top-0 z-50">
-                <div className="container mx-auto max-w-7xl px-4 py-4 flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                            <Search className="h-4 w-4" />
-                        </div>
-                        <span className="font-semibold text-foreground tracking-tight">Sanati</span>
-                    </div>
-                    <nav className="flex items-center gap-4">
-                        <Link href="/dashboard" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
-                            Dashboard
-                        </Link>
-                        <Link href="/auth">
-                            <Button size="sm" className="font-medium">Get Started</Button>
-                        </Link>
-                    </nav>
-                </div>
-            </header>
-
             {/* Header */}
             <header className="border-b border-border/40 backdrop-blur-md sticky top-0 z-50">
                 <div className="container mx-auto max-w-7xl px-4 py-4 flex items-center justify-between">
@@ -58,76 +38,16 @@ export default function LandingPage() {
             </header>
 
             {/* Hero */}
-            <section className="container mx-auto max-w-7xl px-4 min-h-[75vh] flex items-center relative z-10">
-                <div className="grid lg:grid-cols-2 gap-12 items-center w-full">
-                    <div className="flex flex-col items-start text-left space-y-8">
-                        <div className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
-                            <Sparkles className="mr-1 h-3 w-3" />
-                            AI-Powered Research
-                        </div>
-
-                        <h1 className="text-4xl font-light tracking-tight sm:text-5xl lg:text-7xl text-foreground">
-                            Find Your Next
-                            <br />
-                            <span className="font-bold">Customers.</span>
-                        </h1>
-
-                        <p className="max-w-xl text-lg text-muted-foreground font-light leading-relaxed">
-                            Sanati analyzes your product and finds people on Reddit, Hacker News, and forums
-                            who are actively expressing needs that your solution solves.
-                        </p>
-
-                        <div className="flex flex-col sm:flex-row gap-4 pt-2">
-                            <Link href="/auth">
-                                <Button size="lg" className="gap-2 px-8 text-base">
-                                    Start Finding Opportunities
-                                    <ArrowRight className="h-4 w-4" />
-                                </Button>
-                            </Link>
-                        </div>
-                    </div>
-
-                    {/* Right side is reserved for the shader visualization */}
-                    <div className="hidden lg:block h-full min-h-[400px]"></div>
-                </div>
+            <section className="relative w-full min-h-[75vh] overflow-hidden">
+                {/* Hero */}
+                <section className="relative w-full min-h-[75vh] overflow-hidden">
+                    <HeroShader />
+                    <HeroSection />
+                </section>
             </section>
 
             {/* Features */}
-            <section className="border-t border-border/40 bg-muted/20 backdrop-blur-sm relative z-10">
-                <div className="container mx-auto max-w-7xl px-4 py-24">
-                    <div className="grid md:grid-cols-3 gap-8">
-                        <div className="bg-card text-card-foreground p-6 rounded-xl border h-full w-full flex flex-col items-start text-left">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 mb-4">
-                                <Zap className="h-5 w-5 text-primary" />
-                            </div>
-                            <h3 className="text-lg font-semibold mb-2">AI Analysis</h3>
-                            <p className="text-muted-foreground text-sm">
-                                We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.
-                            </p>
-                        </div>
-
-                        <div className="bg-card text-card-foreground p-6 rounded-xl border h-full w-full flex flex-col items-start text-left">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 mb-4">
-                                <Search className="h-5 w-5 text-primary" />
-                            </div>
-                            <h3 className="text-lg font-semibold mb-2">Smart Dorking</h3>
-                            <p className="text-muted-foreground text-sm">
-                                Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.
-                            </p>
-                        </div>
-
-                        <div className="bg-card text-card-foreground p-6 rounded-xl border h-full w-full flex flex-col items-start text-left">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 mb-4">
-                                <Target className="h-5 w-5 text-primary" />
-                            </div>
-                            <h3 className="text-lg font-semibold mb-2">Scored Leads</h3>
-                            <p className="text-muted-foreground text-sm">
-                                Each opportunity is scored by relevance and comes with suggested engagement approaches.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
+            <FeaturesSection />
 
             {/* CTA */}
             <section className="container mx-auto max-w-7xl px-4 py-24 relative z-10">
diff --git a/components/auth/SignIn.tsx b/components/auth/SignIn.tsx
index 45da5d1..9a62ac2 100644
--- a/components/auth/SignIn.tsx
+++ b/components/auth/SignIn.tsx
@@ -37,6 +37,10 @@ export function SignIn() {
         }
     };
 
+    const handleGoogleSignIn = () => {
+        void signIn("google", { redirectTo: "/dashboard" });
+    };
+
     return (
         <Card className="w-full max-w-md mx-auto mt-20 shadow-lg">
             <CardHeader className="space-y-1">
@@ -50,50 +54,77 @@ export function SignIn() {
                 </CardDescription>
             </CardHeader>
             <CardContent>
-                <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-4">
                     {error && (
                         <div className="bg-destructive/15 text-destructive text-sm p-3 rounded-md text-center">
                             {error}
                         </div>
                     )}
-                    <div className="space-y-2">
-                        <Label htmlFor="email">Email</Label>
-                        <Input
-                            id="email"
-                            type="email"
-                            placeholder="m@example.com"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            required
-                        />
-                    </div>
-                    <div className="space-y-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input
-                            id="password"
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            required
-                            minLength={8}
-                        />
-                    </div>
-                    <Button type="submit" className="w-full">
-                        {step === "signIn" ? "Sign In" : "Sign Up"}
+                    <Button
+                        variant="outline"
+                        className="w-full flex items-center justify-center gap-2"
+                        onClick={handleGoogleSignIn}
+                    >
+                        <svg className="w-5 h-5" viewBox="0 0 24 24">
+                            <path
+                                fill="currentColor"
+                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                            />
+                            <path
+                                fill="currentColor"
+                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                            />
+                            <path
+                                fill="currentColor"
+                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                            />
+                            <path
+                                fill="currentColor"
+                                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                            />
+                        </svg>
+                        Sign in with Google
                     </Button>
-                </form>
+                    <div className="relative">
+                        <div className="absolute inset-0 flex items-center">
+                            <span className="w-full border-t" />
+                        </div>
+                        <div className="relative flex justify-center text-xs uppercase">
+                            <span className="bg-background px-2 text-muted-foreground">
+                                Or continue with email
+                            </span>
+                        </div>
+                    </div>
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="email">Email</Label>
+                            <Input
+                                id="email"
+                                type="email"
+                                placeholder="m@example.com"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="password">Password</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                                minLength={8}
+                            />
+                        </div>
+                        <Button type="submit" className="w-full">
+                            {step === "signIn" ? "Sign In" : "Sign Up"}
+                        </Button>
+                    </form>
+                </div>
             </CardContent>
             <CardFooter className="flex flex-col gap-4">
-                <div className="relative w-full">
-                    <div className="absolute inset-0 flex items-center">
-                        <span className="w-full border-t" />
-                    </div>
-                    <div className="relative flex justify-center text-xs uppercase">
-                        <span className="bg-background px-2 text-muted-foreground">
-                            Or
-                        </span>
-                    </div>
-                </div>
                 <Button
                     variant="link"
                     onClick={() => setStep(step === "signIn" ? "signUp" : "signIn")}
diff --git a/components/features-section.tsx b/components/features-section.tsx
new file mode 100644
index 0000000..2e42fed
--- /dev/null
+++ b/components/features-section.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Zap, Search, Target } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const features = [
+    {
+        title: "AI Analysis",
+        description:
+            "We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.",
+        icon: Zap,
+        className: "md:col-span-2",
+    },
+    {
+        title: "Smart Dorking",
+        description:
+            "Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.",
+        icon: Search,
+        className: "md:col-span-1",
+    },
+    {
+        title: "Scored Leads",
+        description:
+            "Each opportunity is scored by relevance and comes with suggested engagement approaches.",
+        icon: Target,
+        className: "md:col-span-3",
+    },
+];
+
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.2,
+        },
+    },
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.5,
+            ease: "easeOut",
+        },
+    },
+};
+
+export function FeaturesSection() {
+    return (
+        <section className="border-t border-border/40 bg-muted/20 backdrop-blur-sm relative z-10">
+            <div className="container mx-auto max-w-7xl px-4 py-24">
+                <motion.div
+                    className="grid md:grid-cols-3 gap-6"
+                    variants={containerVariants}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                >
+                    {features.map((feature, i) => (
+                        <motion.div
+                            key={i}
+                            variants={itemVariants}
+                            className={cn(
+                                "bg-card text-card-foreground p-8 rounded-2xl border h-full flex flex-col items-start text-left transition-all hover:border-primary/50 hover:shadow-lg",
+                                feature.className
+                            )}
+                        >
+                            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 mb-6">
+                                <feature.icon className="h-6 w-6 text-primary" />
+                            </div>
+                            <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                            <p className="text-muted-foreground leading-relaxed">
+                                {feature.description}
+                            </p>
+                        </motion.div>
+                    ))}
+                </motion.div>
+            </div>
+        </section>
+    );
+}
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
new file mode 100644
index 0000000..23f9cb8
--- /dev/null
+++ b/components/hero-section.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { ArrowRight, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.2,
+            delayChildren: 0.3,
+        },
+    },
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.8,
+            ease: [0.22, 1, 0.36, 1], // Custom easing (approx. easeOutQuint/Expo) for a premium feel
+        },
+    },
+};
+
+export function HeroSection() {
+    return (
+        <div className="container mx-auto max-w-7xl px-4 min-h-[75vh] flex items-center relative z-10">
+            <div className="grid lg:grid-cols-2 gap-12 items-center w-full">
+                <motion.div
+                    className="flex flex-col items-start text-left space-y-8"
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                >
+                    <motion.div
+                        variants={itemVariants}
+                        className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+                    >
+                        <Sparkles className="mr-1 h-3 w-3" />
+                        AI-Powered Research
+                    </motion.div>
+
+                    <motion.h1
+                        variants={itemVariants}
+                        className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground"
+                    >
+                        Find Your Next Customers
+                        <br />
+                        <span className="text-muted-foreground">
+                            Before They Know They Need You
+                        </span>
+                    </motion.h1>
+
+                    <motion.p
+                        variants={itemVariants}
+                        className="max-w-xl text-lg text-muted-foreground font-light leading-relaxed"
+                    >
+                        Sanati analyzes your product and finds people on Reddit, Hacker News,
+                        and forums who are actively expressing needs that your solution
+                        solves.
+                    </motion.p>
+
+                    <motion.div
+                        variants={itemVariants}
+                        className="flex flex-col sm:flex-row gap-4 pt-2"
+                    >
+                        <Link href="/auth">
+                            <Button size="lg" className="gap-2 px-8 text-base">
+                                Start Finding Opportunities
+                                <ArrowRight className="h-4 w-4" />
+                            </Button>
+                        </Link>
+                    </motion.div>
+                </motion.div>
+
+                {/* Right side is reserved for the shader visualization */}
+                <div className="hidden lg:block h-full min-h-[400px]"></div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/hero-shader.tsx b/components/hero-shader.tsx
index d9caff7..82cc46f 100644
--- a/components/hero-shader.tsx
+++ b/components/hero-shader.tsx
@@ -36,9 +36,9 @@ export function HeroShader() {
 
             ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // stroke(w, 116) approx white with alpha
 
-            // Center of drawing - offset to the right
-            const cx = canvas.width * 0.75;
-            const cy = canvas.height / 2;
+            // Center of drawing - positioned to the right and aligned with content
+            const cx = canvas.width * 0.7;
+            const cy = canvas.height * 0.4;
 
             // Loop for points
             // for(t+=PI/90,i=1e4;i--;)a()
@@ -87,7 +87,7 @@ export function HeroShader() {
                 const c = d / 4 - t / 2 + (i % 2) * 3;
 
                 // q = y * k / 5 * (2 + sin(d*2 + y - t*4)) + 80
-                const q = y * k / 5 * (2 + Math.sin(d * 2 + y - t * 4)) + 80;
+                const q = y * k / 5 * (2 + Math.sin(d * 2 + y - t * 4)) + 300;
 
                 // x = q * cos(c) + 200
                 // y_out = q * sin(c) + d * 9 + 60
@@ -97,7 +97,7 @@ export function HeroShader() {
                 const x = (q * Math.cos(c)) + cx;
                 const y_out = (q * Math.sin(c) + d * 9) + cy;
 
-                ctx.fillRect(x, y_out, 1.5, 1.5);
+                ctx.fillRect(x, y_out, 2.5, 2.5);
             }
 
             animationFrameId = requestAnimationFrame(draw);
diff --git a/convex/auth.config.ts b/convex/auth.config.ts
index 9feaa7a..329d679 100644
--- a/convex/auth.config.ts
+++ b/convex/auth.config.ts
@@ -1,3 +1,8 @@
 export default {
-    providers: [],
+    providers: [
+        {
+            domain: process.env.CONVEX_SITE_URL,
+            applicationID: "convex",
+        },
+    ],
 };
diff --git a/convex/auth.ts b/convex/auth.ts
index 0e36a55..b714486 100644
--- a/convex/auth.ts
+++ b/convex/auth.ts
@@ -1,6 +1,7 @@
 import { convexAuth } from "@convex-dev/auth/server";
 import { Password } from "@convex-dev/auth/providers/Password";
+import Google from "@auth/core/providers/google";
 
 export const { auth, signIn, signOut, store } = convexAuth({
-    providers: [Password],
+    providers: [Password, Google],
 });
diff --git a/docs/changelog.md b/docs/changelog.md
new file mode 100644
index 0000000..ee0ae9b
--- /dev/null
+++ b/docs/changelog.md
@@ -0,0 +1,2 @@
+2026-02-03 16:43:46 - Fixed 'NoAuthProvider' error by adding Password provider to `convex/auth.config.ts`.
+2026-02-03 16:46:52 - Added Google OAuth provider to `convex/auth.config.ts` to fix 'Provider google is not configured' error.
diff --git a/public/onboarding-bg.png b/public/onboarding-bg.png
new file mode 100644
index 0000000..73e9199
Binary files /dev/null and b/public/onboarding-bg.png differ