diff --git a/app/pre-session/page.tsx b/app/pre-session/page.tsx
new file mode 100644
index 0000000..fa6474f
--- /dev/null
+++ b/app/pre-session/page.tsx
@@ -0,0 +1,118 @@
+"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 { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/badge";
+import { Sparkles, MessageSquare, CheckCircle2, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function PreSessionPage() {
+  const [isGenerated, setIsGenerated] = useState(false);
+
+  return (
+    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
+      <Container className="max-w-3xl">
+        <div className="text-center mb-12">
+          <Badge className="bg-indigo-100 text-indigo-700 border-none mb-4 px-4 py-1">
+            Pembayaran Berhasil!
+          </Badge>
+          <Heading>Persiapkan Sesimu</Heading>
+          <Subheading>Bantu mentor memahami masalahmu agar sesi lebih efektif.</Subheading>
+        </div>
+
+        <div className="space-y-8">
+          <Card className="border-none shadow-sm">
+            <CardContent className="p-8">
+              <div className="flex items-center gap-2 mb-4 text-indigo-600">
+                <MessageSquare className="w-5 h-5" />
+                <span className="font-bold">Apa yang ingin kamu bahas?</span>
+              </div>
+              <Textarea 
+                placeholder="Contoh: Saya ingin review CV untuk posisi Associate PM dan tips menghadapi behavioral interview di startup unicorn..."
+                className="min-h-[150px] mb-4 text-lg"
+              />
+              <div className="flex items-center gap-2 text-sm text-neutral-500 mb-6">
+                <Sparkles className="w-4 h-4 text-indigo-400" />
+                <span>AI Assistant kami akan membantu menyusun agenda berdasarkan inputmu.</span>
+              </div>
+              <Button 
+                className="w-full bg-indigo-600 hover:bg-indigo-700 h-12"
+                onClick={() => setIsGenerated(true)}
+              >
+                Generate Agenda Sesi (AI)
+              </Button>
+            </CardContent>
+          </Card>
+
+          {isGenerated && (
+            <motion_div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-6"
+            >
+              <div className="flex items-center gap-2 font-bold text-lg">
+                <Sparkles className="w-5 h-5 text-indigo-600" />
+                <span>Rekomendasi Agenda Sesi</span>
+              </div>
+              
+              <Card className="border-indigo-100 bg-indigo-50/50">
+                <CardContent className="p-8 space-y-6">
+                  <div className="flex gap-4">
+                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">1</div>
+                    <div>
+                      <div className="font-bold mb-1">Review CV & Portfolio (20 mnt)</div>
+                      <p className="text-sm text-neutral-600">Menganalisis poin-poin pengalaman yang paling relevan untuk posisi PM.</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">2</div>
+                    <div>
+                      <div className="font-bold mb-1">Mock Interview: Behavioral (25 mnt)</div>
+                      <p className="text-sm text-neutral-600">Latihan menjawab pertanyaan STAR method dengan feedback langsung.</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">3</div>
+                    <div>
+                      <div className="font-bold mb-1">Q&A & Next Steps (15 mnt)</div>
+                      <p className="text-sm text-neutral-600">Menyusun action plan untuk 2 minggu ke depan.</p>
+                    </div>
+                  </div>
+
+                  <div className="pt-6 border-t border-indigo-100 flex flex-col sm:flex-row gap-4">
+                    <Button className="flex-1 bg-indigo-600 hover:bg-indigo-700 h-12" asChild>
+                      <Link href="/">Simpan & Selesai</Link>
+                    </Button>
+                    <Button variant="outline" className="flex-1 h-12 bg-white">
+                      Edit Agenda
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion_div>
+          )}
+        </div>
+
+        <div className="mt-12 flex items-center justify-center gap-8">
+          <div className="flex items-center gap-2 text-sm text-neutral-500">
+            <CheckCircle2 className="w-4 h-4 text-green-500" />
+            <span>Agenda dikirim ke Mentor</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-neutral-500">
+            <CheckCircle2 className="w-4 h-4 text-green-500" />
+            <span>Link Zoom akan dikirim via Email</span>
+          </div>
+        </div>
+      </Container>
+    </main>
+  );
+}
+
+// Simple motion replacement since we can't use framer-motion easily in this snippet without proper setup
+function motion_div({ children, className, ...props }: any) {
+  return <div className={className}>{children}</div>;
+}