diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
new file mode 100644
index 0000000..db4a7d1
--- /dev/null
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,114 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import Link from "next/link";
+import { motion } from "framer-motion";
+
+export default function OnboardingPage() {
+  return (
+    <main className="min-h-screen bg-neutral-50 pt-24 pb-20">
+      <Container className="max-w-2xl">
+        <div className="mb-12">
+          <div className="flex justify-between items-center mb-4">
+            <span className="text-sm font-medium text-indigo-600">Langkah 1 dari 3</span>
+            <span className="text-sm text-neutral-500">33% Selesai</span>
+          </div>
+          <div className="w-full bg-neutral-200 h-2 rounded-full overflow-hidden">
+            <div className="bg-indigo-600 h-full w-1/3" />
+          </div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <Heading className="mb-2">Apa goal utama kamu?</Heading>
+          <Subheading className="mb-8">Kami akan mencocokkanmu dengan mentor yang paling relevan.</Subheading>
+
+          <Card className="border-none shadow-sm">
+            <CardContent className="p-8 space-y-8">
+              <div className="space-y-3">
+                <Label htmlFor="goal">Saya ingin fokus pada...</Label>
+                <Select>
+                  <SelectTrigger id="goal" className="h-12">
+                    <SelectValue placeholder="Pilih goal kamu" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="career">Persiapan Karier & Interview</SelectItem>
+                    <SelectItem value="technical">Skill Teknis (Coding, Design, dll)</SelectItem>
+                    <SelectItem value="leadership">Leadership & Management</SelectItem>
+                    <SelectItem value="business">Business & Entrepreneurship</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-3">
+                <Label>Target waktu pencapaian</Label>
+                <RadioGroup defaultValue="1-3" className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                  <div>
+                    <RadioGroupItem value="1" id="t1" className="peer sr-only" />
+                    <Label
+                      htmlFor="t1"
+                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
+                    >
+                      <span className="text-sm font-medium">Segera</span>
+                      <span className="text-xs text-neutral-500">{"< 1 bulan"}</span>
+                    </Label>
+                  </div>
+                  <div>
+                    <RadioGroupItem value="1-3" id="t2" className="peer sr-only" />
+                    <Label
+                      htmlFor="t2"
+                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
+                    >
+                      <span className="text-sm font-medium">Menengah</span>
+                      <span className="text-xs text-neutral-500">1-3 bulan</span>
+                    </Label>
+                  </div>
+                  <div>
+                    <RadioGroupItem value="3+" id="t3" className="peer sr-only" />
+                    <Label
+                      htmlFor="t3"
+                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
+                    >
+                      <span className="text-sm font-medium">Panjang</span>
+                      <span className="text-xs text-neutral-500">3+ bulan</span>
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-3">
+                <Label htmlFor="budget">Budget per sesi (IDR)</Label>
+                <Select>
+                  <SelectTrigger id="budget" className="h-12">
+                    <SelectValue placeholder="Pilih range budget" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="free">Gratis (Mentor Volunteer)</SelectItem>
+                    <SelectItem value="100-300">100rb - 300rb</SelectItem>
+                    <SelectItem value="300-500">300rb - 500rb</SelectItem>
+                    <SelectItem value="500+">Di atas 500rb</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-neutral-500 italic">
+                  * Tenang, kamu bisa mengubah filter ini nanti.
+                </p>
+              </div>
+
+              <Button className="w-full h-12 bg-indigo-600 hover:bg-indigo-700 text-lg" asChild>
+                <Link href="/mentors">Lihat Rekomendasi Mentor</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </Container>
+    </main>
+  );
+}