From 1eef12c369eb62646b0d9132ce4dddeafcfcefab Mon Sep 17 00:00:00 2001
From: Tanushree-RD <217297962+Tanushree-RD@users.noreply.github.com>
Date: Sun, 13 Sep 2026 23:15:37 +0530
Subject: [PATCH 1/5] refactor(student): adopt shadcn/ui components for
 onboarding

---
 apps/web/app/(onboarding)/student/page.tsx | 110 +++++++++++----------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index 29f7b3e..91a53ab 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -7,6 +7,9 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
 import { useForm } from 'react-hook-form'
 
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
 import { useSaveStudentProfile } from '@/lib/hooks/use-onboarding'
 import {
   studentCompleteOnboardingSchema,
@@ -602,11 +605,11 @@ export default function StudentOnboardingPage() {
                       <label className="block text-xs font-bold text-slate-800 mb-1">
                         Full Name <span className="text-red-500">*</span>
                       </label>
-                      <input
+                      <Input
                         type="text"
                         {...register('fullName')}
                         placeholder="e.g. Alex Chen"
-                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                       />
                     </div>
 
@@ -620,12 +623,12 @@ export default function StudentOnboardingPage() {
                           {headline.length}/80
                         </span>
                       </div>
-                      <input
+                      <Input
                         type="text"
                         maxLength={80}
                         {...register('headline')}
                         placeholder="e.g. CS Student | Full-Stack Developer | Open to Internships"
-                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                       />
                     </div>
 
@@ -683,11 +686,11 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           School / University <span className="text-red-500">*</span>
                         </label>
-                        <input
+                        <Input
                           type="text"
                           {...register('school')}
                           placeholder="e.g. Stanford University or MIT"
-                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
                       </div>
 
@@ -696,11 +699,11 @@ export default function StudentOnboardingPage() {
                           <label className="block text-xs font-bold text-slate-800 mb-1">
                             Degree &amp; Major <span className="text-red-500">*</span>
                           </label>
-                          <input
+                          <Input
                             type="text"
                             {...register('degree')}
                             placeholder="e.g. B.S. Computer Science"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
 
@@ -726,11 +729,11 @@ export default function StudentOnboardingPage() {
                           <label className="block text-xs font-bold text-slate-800 mb-1">
                             GPA (Optional)
                           </label>
-                          <input
+                          <Input
                             type="text"
                             {...register('gpa')}
                             placeholder="e.g. 3.8 / 4.0"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
 
@@ -738,11 +741,11 @@ export default function StudentOnboardingPage() {
                           <label className="block text-xs font-bold text-slate-800 mb-1">
                             Specialization (Optional)
                           </label>
-                          <input
+                          <Input
                             type="text"
                             {...register('specialization')}
                             placeholder="e.g. AI / Machine Learning"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                       </div>
@@ -777,7 +780,7 @@ export default function StudentOnboardingPage() {
                         Technical Skills
                       </label>
                       <div className="flex gap-2">
-                        <input
+                        <Input
                           type="text"
                           value={newSkillInput}
                           onChange={(e) => setNewSkillInput(e.target.value)}
@@ -788,34 +791,38 @@ export default function StudentOnboardingPage() {
                             }
                           }}
                           placeholder="Type a skill and press Enter..."
-                          className="flex-1 px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                          className="flex-1 px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
-                        <button
+                        <Button
                           type="button"
                           onClick={() => handleAddSkill()}
-                          className="px-3.5 py-2 bg-brand hover:bg-brand-hover text-white font-semibold rounded-xl text-xs sm:text-sm transition cursor-pointer flex items-center gap-1 shrink-0"
+                          className="px-3.5 py-2 bg-brand hover:bg-brand-hover text-white font-semibold rounded-xl text-xs sm:text-sm flex items-center gap-1 shrink-0 h-auto"
                         >
                           <Plus className="w-3.5 h-3.5" />
                           <span>Add</span>
-                        </button>
+                        </Button>
                       </div>
 
                       {/* Added Skills Badges */}
                       <div className="flex flex-wrap gap-1.5 max-h-[58px] overflow-hidden">
                         {skills.map((s) => (
-                          <span
+                          <Badge
                             key={s}
+                            variant="secondary"
                             className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-brand-light text-brand-dark text-xs font-bold border border-brand/20 shadow-2xs"
                           >
-                            {s}
-                            <button
+                            <span>{s}</span>
+                            <Button
                               type="button"
+                              variant="ghost"
+                              size="icon"
                               onClick={() => handleRemoveSkill(s)}
-                              className="hover:text-red-500 cursor-pointer"
+                              className="h-3.5 w-3.5 p-0 hover:bg-transparent hover:text-red-500 text-brand-dark"
+                              aria-label={`Remove skill ${s}`}
                             >
                               <X className="w-3 h-3" />
-                            </button>
-                          </span>
+                            </Button>
+                          </Badge>
                         ))}
                       </div>
 
@@ -828,14 +835,16 @@ export default function StudentOnboardingPage() {
                           .filter((s) => !skills.includes(s))
                           .slice(0, 5)
                           .map((suggestion) => (
-                            <button
+                            <Button
                               key={suggestion}
                               type="button"
+                              variant="ghost"
+                              size="xs"
                               onClick={() => handleAddSkill(suggestion)}
-                              className="text-[10px] font-medium bg-slate-100 hover:bg-brand-light hover:text-brand-hover text-slate-600 px-2 py-0.5 rounded-md transition cursor-pointer"
+                              className="text-[10px] font-medium bg-slate-100 hover:bg-brand-light hover:text-brand-hover text-slate-600 px-2 py-0.5 rounded-md h-auto"
                             >
                               + {suggestion}
-                            </button>
+                            </Button>
                           ))}
                       </div>
                     </div>
@@ -847,25 +856,25 @@ export default function StudentOnboardingPage() {
                       </h4>
 
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
-                        <input
+                        <Input
                           type="text"
                           {...register('experienceRole')}
                           placeholder="Role (e.g. Frontend Intern)"
-                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
+                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
                         />
-                        <input
+                        <Input
                           type="text"
                           {...register('experienceCompany')}
                           placeholder="Company (e.g. DK24 Labs)"
-                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
+                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
                         />
                       </div>
 
-                      <input
+                      <Input
                         type="text"
                         {...register('experienceSummary')}
                         placeholder="Brief summary of achievements or projects..."
-                        className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
+                        className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
                       />
                     </div>
                   </motion.div>
@@ -899,12 +908,12 @@ export default function StudentOnboardingPage() {
                           GitHub Profile URL
                         </label>
                         <div className="relative flex items-center">
-                          <GithubIcon className="w-4 h-4 text-slate-400 absolute left-3" />
-                          <input
+                          <GithubIcon className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                          <Input
                             type="url"
                             {...register('githubUrl')}
                             placeholder="https://github.com/yourusername"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.githubUrl && (
@@ -920,12 +929,12 @@ export default function StudentOnboardingPage() {
                           LinkedIn Profile URL
                         </label>
                         <div className="relative flex items-center">
-                          <LinkedinIcon className="w-4 h-4 text-linkedin absolute left-3" />
-                          <input
+                          <LinkedinIcon className="w-4 h-4 text-linkedin absolute left-3 z-10" />
+                          <Input
                             type="url"
                             {...register('linkedinUrl')}
                             placeholder="https://linkedin.com/in/yourusername"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.linkedinUrl && (
@@ -941,12 +950,12 @@ export default function StudentOnboardingPage() {
                           Portfolio / Website (Optional)
                         </label>
                         <div className="relative flex items-center">
-                          <Globe className="w-4 h-4 text-slate-400 absolute left-3" />
-                          <input
+                          <Globe className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                          <Input
                             type="url"
                             {...register('portfolioUrl')}
                             placeholder="https://yourportfolio.dev"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.portfolioUrl && (
@@ -962,12 +971,12 @@ export default function StudentOnboardingPage() {
                           Resume / CV Link (Optional)
                         </label>
                         <div className="relative flex items-center">
-                          <FileText className="w-4 h-4 text-slate-400 absolute left-3" />
-                          <input
+                          <FileText className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                          <Input
                             type="url"
                             {...register('resumeUrl')}
                             placeholder="https://drive.google.com/... or resume URL"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
+                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.resumeUrl && (
@@ -985,21 +994,22 @@ export default function StudentOnboardingPage() {
             {/* Bottom Actions Bar (Fixed at bottom of right column) */}
             <div className="flex items-center justify-between pt-3 border-t border-border-subtle/50 shrink-0">
               {/* Back Button */}
-              <button
+              <Button
                 type="button"
+                variant="secondary"
                 onClick={handleBack}
-                className="flex items-center gap-2 px-4 sm:px-5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs sm:text-sm transition cursor-pointer active:scale-[0.98]"
+                className="flex items-center gap-2 px-4 sm:px-5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs sm:text-sm transition cursor-pointer active:scale-[0.98] h-auto shadow-none"
               >
                 <ArrowLeft className="w-4 h-4" />
                 <span>Back</span>
-              </button>
+              </Button>
 
               {/* Next / Complete Button */}
-              <button
+              <Button
                 type="button"
                 onClick={handleNext}
                 disabled={isCompleted || saveStudentMutation.isPending}
-                className="flex items-center gap-2 px-5 sm:px-6 py-2 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98] disabled:opacity-70"
+                className="flex items-center gap-2 px-5 sm:px-6 py-2 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98] disabled:opacity-70 h-auto"
               >
                 {step < 4 ? (
                   <>
@@ -1012,7 +1022,7 @@ export default function StudentOnboardingPage() {
                     <Sparkles className="w-4 h-4 text-brand-emerald" />
                   </>
                 )}
-              </button>
+              </Button>
             </div>
           </div>
         </div>

From e30685a2ab023add128aed255ec01e8b6d87eb13 Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Wed, 16 Sep 2026 01:17:18 +0530
Subject: [PATCH 2/5] Update icons for GitHub and LinkedIn profile inputs

Replaced GitHub and LinkedIn icons with Code and Link icons respectively.
---
 apps/web/app/(onboarding)/student/page.tsx | 26 +++-------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index 91a53ab..f90a612 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { motion, AnimatePresence } from 'motion/react'
-import { ArrowLeft, ArrowRight, Check, FileText, Globe, Plus, Sparkles, X } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Check, Code, FileText, Globe, Link, Plus, Sparkles, X } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
 import { useForm } from 'react-hook-form'
@@ -17,26 +17,6 @@ import {
 } from '@/lib/schemas/student-onboarding.schema'
 import { showConfetti, ONBOARDING_REDIRECT_DELAY_MS } from '@/lib/utils/confetti'
 
-function GithubIcon({ className = 'w-4 h-4' }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-      />
-    </svg>
-  )
-}
-
-function LinkedinIcon({ className = 'w-4 h-4' }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" />
-    </svg>
-  )
-}
-
 const DEFAULT_STUDENT_VALUES: StudentOnboardingInput = {
   fullName: '',
   headline: '',
@@ -908,7 +888,7 @@ export default function StudentOnboardingPage() {
                           GitHub Profile URL
                         </label>
                         <div className="relative flex items-center">
-                          <GithubIcon className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                          <Code className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
                           <Input
                             type="url"
                             {...register('githubUrl')}
@@ -929,7 +909,7 @@ export default function StudentOnboardingPage() {
                           LinkedIn Profile URL
                         </label>
                         <div className="relative flex items-center">
-                          <LinkedinIcon className="w-4 h-4 text-linkedin absolute left-3 z-10" />
+                          <Link className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
                           <Input
                             type="url"
                             {...register('linkedinUrl')}

From 8cce91e5094eac1fc0f0f6efe6da08350972a39e Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Wed, 16 Sep 2026 01:32:37 +0530
Subject: [PATCH 3/5] Format student onboarding imports

---
 apps/web/app/(onboarding)/student/page.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index f90a612..935c1dd 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -2,7 +2,18 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { motion, AnimatePresence } from 'motion/react'
-import { ArrowLeft, ArrowRight, Check, Code, FileText, Globe, Link, Plus, Sparkles, X } from 'lucide-react'
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  Code,
+  FileText,
+  Globe,
+  Link,
+  Plus,
+  Sparkles,
+  X,
+} from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
 import { useForm } from 'react-hook-form'

From f17bae2a3b5f064405c6fe275f749ce975550427 Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Fri, 18 Sep 2026 21:37:23 +0530
Subject: [PATCH 4/5] Refactor student onboarding UI and add components

---
 apps/web/app/(onboarding)/student/page.tsx    | 932 ++++++------------
 .../onboarding/student-mascot-hero.tsx        | 207 ++++
 .../onboarding/student-onboarding-stepper.tsx |  89 ++
 3 files changed, 580 insertions(+), 648 deletions(-)
 create mode 100644 apps/web/components/onboarding/student-mascot-hero.tsx
 create mode 100644 apps/web/components/onboarding/student-onboarding-stepper.tsx

diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index 935c1dd..a9a8708 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -2,25 +2,19 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { motion, AnimatePresence } from 'motion/react'
-import {
-  ArrowLeft,
-  ArrowRight,
-  Check,
-  Code,
-  FileText,
-  Globe,
-  Link,
-  Plus,
-  Sparkles,
-  X,
-} from 'lucide-react'
+import { ArrowLeft, ArrowRight, Code, FileText, Globe, Link, Plus, Sparkles, X } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
+import { StudentMascotHero } from '@/components/onboarding/student-mascot-hero'
+import {
+  StudentOnboardingStepper,
+  type StepNumber,
+} from '@/components/onboarding/student-onboarding-stepper'
 import { useSaveStudentProfile } from '@/lib/hooks/use-onboarding'
 import {
   studentCompleteOnboardingSchema,
@@ -47,13 +41,22 @@ const DEFAULT_STUDENT_VALUES: StudentOnboardingInput = {
   resumeUrl: '',
 }
 
+const GRADUATION_YEAR_OPTIONS = ['2024', '2025', '2026', '2027', '2028', '2029', '2030']
+const POPULAR_SKILL_SUGGESTIONS = [
+  'Python',
+  'JavaScript',
+  'Node.js',
+  'SQL',
+  'Docker',
+  'Git',
+  'Java',
+]
+
 export default function StudentOnboardingPage() {
   const router = useRouter()
-  const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
+  const [step, setStep] = useState<StepNumber>(1)
   const [isCompleted, setIsCompleted] = useState(false)
   const [newSkillInput, setNewSkillInput] = useState('')
-  const [step1Error, setStep1Error] = useState('')
-  const [step2Error, setStep2Error] = useState('')
 
   const saveStudentMutation = useSaveStudentProfile()
 
@@ -61,8 +64,9 @@ export default function StudentOnboardingPage() {
     register,
     handleSubmit,
     setValue,
-    watch,
     trigger,
+    control,
+    getValues,
     formState: { errors },
   } = useForm<StudentOnboardingInput>({
     resolver: zodResolver(studentCompleteOnboardingSchema),
@@ -70,12 +74,8 @@ export default function StudentOnboardingPage() {
     defaultValues: DEFAULT_STUDENT_VALUES,
   })
 
-  const fullName = watch('fullName') || ''
-  const headline = watch('headline') || ''
-  const bio = watch('bio') || ''
-  const school = watch('school') || ''
-  const degree = watch('degree') || ''
-  const skills = watch('skills') || []
+  // Watch skills array specifically for rendering skill badges in Step 3
+  const skills = useWatch({ control, name: 'skills' }) || []
 
   // Interactive Character Eye Tracking & Blinking
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
@@ -94,30 +94,38 @@ export default function StudentOnboardingPage() {
   }
 
   useEffect(() => {
-    const interval = setInterval(
+    let timeoutId: NodeJS.Timeout
+
+    const intervalId = setInterval(
       () => {
         setBlink(true)
-        setTimeout(() => setBlink(false), 140)
+        timeoutId = setTimeout(() => setBlink(false), 140)
       },
       3200 + Math.random() * 2600,
     )
-    return () => clearInterval(interval)
+
+    return () => {
+      clearInterval(intervalId)
+      if (timeoutId) clearTimeout(timeoutId)
+    }
   }, [])
 
-  // Skills handlers
+  // Skills management handlers
   const handleAddSkill = (skillToAdd?: string) => {
     const target = (skillToAdd || newSkillInput).trim()
     if (!target) return
-    if (!skills.includes(target)) {
-      setValue('skills', [...skills, target], { shouldValidate: true })
+    const currentSkills = getValues('skills') || []
+    if (!currentSkills.includes(target)) {
+      setValue('skills', [...currentSkills, target], { shouldValidate: true })
     }
     setNewSkillInput('')
   }
 
   const handleRemoveSkill = (skillToRemove: string) => {
+    const currentSkills = getValues('skills') || []
     setValue(
       'skills',
-      skills.filter((s) => s !== skillToRemove),
+      currentSkills.filter((s) => s !== skillToRemove),
       { shouldValidate: true },
     )
   }
@@ -132,30 +140,21 @@ export default function StudentOnboardingPage() {
         router.push('/landing')
       }, ONBOARDING_REDIRECT_DELAY_MS)
     } catch {
-      // Error handled in mutation
+      // Error handled by mutation hook
     }
   }
 
-  // Stepper navigation
+  // Stepper navigation with Zod schema validation
   const handleNext = async () => {
     if (step === 1) {
       const valid = await trigger(['fullName', 'headline'])
-      if (!fullName.trim() || !headline.trim() || !valid) {
-        setStep1Error('Please fill in your full name and headline.')
-        return
-      }
-      setStep1Error('')
-      setStep(2)
+      if (valid) setStep(2)
     } else if (step === 2) {
       const valid = await trigger(['school', 'degree'])
-      if (!school.trim() || !degree.trim() || !valid) {
-        setStep2Error('Please provide your School/University and Degree.')
-        return
-      }
-      setStep2Error('')
-      setStep(3)
+      if (valid) setStep(3)
     } else if (step === 3) {
-      setStep(4)
+      const valid = await trigger('skills')
+      if (valid) setStep(4)
     } else if (step === 4) {
       void handleSubmit(onFinalSubmit)()
     }
@@ -165,530 +164,165 @@ export default function StudentOnboardingPage() {
     if (step === 1) {
       router.push('/role-select')
     } else {
-      setStep((prev) => (prev - 1) as 1 | 2 | 3 | 4)
+      setStep((prev) => (prev - 1) as StepNumber)
     }
   }
 
-  const gradYearOptions = ['2024', '2025', '2026', '2027', '2028', '2029', '2030']
-  const popularSkills = ['Python', 'JavaScript', 'Node.js', 'SQL', 'Docker', 'Git', 'Java']
-
   return (
     <div
       ref={containerRef}
       onMouseMove={handleMouseMove}
-      className="h-screen w-screen bg-bg-page text-text-main flex flex-col justify-between overflow-hidden font-['Plus_Jakarta_Sans',sans-serif] select-none selection:bg-brand/20 selection:text-text-main"
+      className="h-screen w-screen bg-bg-page text-text-main flex flex-col justify-between overflow-hidden font-sans select-none selection:bg-brand/20 selection:text-text-main"
     >
       {/* Top Navbar */}
       <header className="w-full z-20 shrink-0">
-        <div className="w-full max-w-[1440px] mx-auto px-6 sm:px-10 py-3 sm:py-4 flex items-center justify-between">
+        <div className="w-full max-w-7xl mx-auto px-6 sm:px-10 py-3 sm:py-4 flex items-center justify-between">
           {/* Logo */}
-          <div
-            className="flex items-center gap-1.5 text-2xl tracking-tight cursor-pointer"
+          <button
+            type="button"
+            className="flex items-center gap-1.5 text-2xl tracking-tight cursor-pointer bg-transparent border-0 text-left p-0 outline-none"
             onClick={() => router.push('/')}
           >
             <span className="font-extrabold text-brand">DK24</span>
             <span className="font-bold text-text-main">CareerLink</span>
-          </div>
+          </button>
         </div>
       </header>
 
       {/* Main Container Fixed-Height Card */}
       <main className="flex-1 w-full flex items-center justify-center px-4 sm:px-8 py-2 z-10 overflow-hidden">
-        <div className="w-full max-w-[1240px] h-[550px] sm:h-[570px] lg:h-[580px] bg-card rounded-3xl sm:rounded-[32px] border border-border-subtle shadow-[0_12px_44px_-12px_rgba(0,0,0,0.06)] overflow-hidden grid grid-cols-1 lg:grid-cols-12">
-          {/* ========================================================================= */}
-          {/* LEFT COLUMN: HERO & 3D STUDENT WITH LAPTOP (Fixed Height) */}
-          {/* ========================================================================= */}
-          <div className="lg:col-span-5 bg-gradient-to-b from-surface-hero-start to-surface-hero-end border-b lg:border-b-0 lg:border-r border-border-subtle/50 p-6 sm:p-8 lg:p-9 flex flex-col justify-between h-full relative overflow-hidden">
-            {/* Top Content */}
-            <div className="space-y-4 z-10">
-              {/* Title & Subtitle */}
-              <div>
-                <h1 className="text-2xl sm:text-3xl font-extrabold text-text-main tracking-tight leading-[1.2]">
-                  Let&apos;s build your <br />
-                  <span className="text-brand inline-flex items-center gap-1.5">
-                    career profile
-                  </span>
-                </h1>
-                <p className="text-text-muted text-xs sm:text-sm font-medium leading-relaxed mt-2 max-w-[360px]">
-                  A complete profile helps recruiters discover you and gives you better
-                  opportunities.
-                </p>
-              </div>
-            </div>
-
-            {/* Bottom 3D Scene: Student Character with Laptop */}
-            <div className="relative w-full flex-1 min-h-[220px] max-h-[340px] flex items-center justify-center select-none py-1">
-              <svg
-                viewBox="35 65 310 195"
-                className="w-full h-full max-h-[320px] overflow-visible drop-shadow-sm"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <defs>
-                  <filter id="clayShadow" x="-20%" y="-20%" width="140%" height="140%">
-                    <feDropShadow
-                      dx="0"
-                      dy="8"
-                      stdDeviation="12"
-                      floodColor="#0F172A"
-                      floodOpacity="0.12"
-                    />
-                  </filter>
-                  <filter id="badgeShadow" x="-30%" y="-30%" width="160%" height="160%">
-                    <feDropShadow
-                      dx="0"
-                      dy="4"
-                      stdDeviation="5"
-                      floodColor="#0F172A"
-                      floodOpacity="0.1"
-                    />
-                  </filter>
-                  <filter id="laptopShadow" x="-20%" y="-20%" width="140%" height="140%">
-                    <feDropShadow
-                      dx="0"
-                      dy="10"
-                      stdDeviation="8"
-                      floodColor="#0F172A"
-                      floodOpacity="0.13"
-                    />
-                  </filter>
-
-                  <radialGradient id="greenClaySphere" cx="35%" cy="30%" r="68%">
-                    <stop offset="0%" stopColor="var(--clay-sphere-start)" />
-                    <stop offset="28%" stopColor="var(--brand-green)" />
-                    <stop offset="70%" stopColor="var(--clay-sphere-mid2)" />
-                    <stop offset="90%" stopColor="var(--clay-sphere-dark)" />
-                    <stop offset="100%" stopColor="var(--clay-sphere-end)" />
-                  </radialGradient>
-
-                  <linearGradient id="capTop" x1="0" y1="0" x2="1" y2="1">
-                    <stop offset="0%" stopColor="#333A44" />
-                    <stop offset="50%" stopColor="#22272E" />
-                    <stop offset="100%" stopColor="#14181F" />
-                  </linearGradient>
-                  <linearGradient id="capBevel" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="#181D24" />
-                    <stop offset="100%" stopColor="#0D1015" />
-                  </linearGradient>
-
-                  <linearGradient id="laptopLid" x1="0" y1="0" x2="1" y2="1">
-                    <stop offset="0%" stopColor="#F1F5F9" />
-                    <stop offset="50%" stopColor="#E2E8F0" />
-                    <stop offset="100%" stopColor="#CBD5E1" />
-                  </linearGradient>
-                  <linearGradient id="laptopBase" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="#E2E8F0" />
-                    <stop offset="100%" stopColor="#94A3B8" />
-                  </linearGradient>
-                </defs>
-
-                {/* Ground Shadow */}
-                <ellipse cx="200" cy="245" rx="130" ry="10" fill="#0F172A" opacity="0.07" />
-
-                {/* 3D Student Character */}
-                <g transform="translate(130, 165)">
-                  <circle
-                    cx="0"
-                    cy="0"
-                    r="62"
-                    fill="url(#greenClaySphere)"
-                    filter="url(#clayShadow)"
-                  />
-
-                  {/* Graduation Cap */}
-                  <g transform="translate(-22, -60) rotate(-16)">
-                    <path
-                      d="M -24,10 C -24,-2 24,-2 24,10 C 24,18 -24,18 -24,10 Z"
-                      fill="#12161D"
-                    />
-                    <polygon points="-52,0 -52,5 0,22 52,5 52,0 0,17" fill="url(#capBevel)" />
-                    <polygon
-                      points="-52,0 0,-18 52,0 0,17"
-                      fill="url(#capTop)"
-                      stroke="#14181F"
-                      strokeWidth="1"
-                    />
-                    <ellipse cx="0" cy="0" rx="3.5" ry="2.5" fill="#10141A" />
-                    <path
-                      d="M 0,0 C -28,10 -38,22 -40,42"
-                      stroke="var(--brand-green)"
-                      strokeWidth="2.8"
-                      fill="none"
-                      strokeLinecap="round"
-                    />
-                    <ellipse cx="-40" cy="42" rx="3.5" ry="3" fill="var(--clay-sphere-mid2)" />
-                    <path d="M -44,43 C -44,56 -36,56 -36,43 Z" fill="var(--brand-green)" />
-                  </g>
-
-                  {/* Left Eye */}
-                  <g transform="translate(-8, -4) rotate(-3)">
-                    <ellipse cx="0" cy="0" rx="13" ry="12" fill="#FFFFFF" />
-                    <motion.circle
-                      cx={mousePos.x * 3 + 1.5}
-                      cy={mousePos.y * 2 + 3.5}
-                      r={5}
-                      fill="#1A202C"
-                      animate={{ scaleY: blink ? 0.1 : 1 }}
-                      transition={{ duration: 0.1 }}
-                    />
-                    {!blink && (
-                      <circle
-                        cx={mousePos.x * 1.8}
-                        cy={mousePos.y * 1.8 + 1.8}
-                        r="1.8"
-                        fill="#FFFFFF"
-                      />
-                    )}
-                  </g>
-
-                  {/* Right Eye */}
-                  <g transform="translate(22, -8) rotate(3)">
-                    <ellipse cx="0" cy="0" rx="13" ry="12" fill="#FFFFFF" />
-                    <motion.circle
-                      cx={mousePos.x * 3 + 1.5}
-                      cy={mousePos.y * 2 + 3.5}
-                      r={5}
-                      fill="#1A202C"
-                      animate={{ scaleY: blink ? 0.1 : 1 }}
-                      transition={{ duration: 0.1 }}
-                    />
-                    {!blink && (
-                      <circle
-                        cx={mousePos.x * 1.8}
-                        cy={mousePos.y * 1.8 + 1.8}
-                        r="1.8"
-                        fill="#FFFFFF"
-                      />
-                    )}
-                  </g>
-
-                  {/* Smile */}
-                  <g transform="translate(8, 14)">
-                    <path d="M -10,-2 Q 0,12 10,-2 Q 0,3 -10,-2 Z" fill="#1A202C" />
-                  </g>
-                </g>
-
-                {/* 3D Laptop */}
-                <g transform="translate(195, 180)" filter="url(#laptopShadow)">
-                  <polygon
-                    points="0,32 14,-32 96,-32 82,32"
-                    fill="url(#laptopLid)"
-                    stroke="#CBD5E1"
-                    strokeWidth="1.2"
-                  />
-                  <polygon points="4,30 16,-28 92,-28 80,30" fill="#1E293B" />
-                  <line
-                    x1="25"
-                    y1="-14"
-                    x2="74"
-                    y2="-14"
-                    stroke="var(--brand-green)"
-                    strokeWidth="2.2"
-                    strokeLinecap="round"
-                  />
-                  <line
-                    x1="22"
-                    y1="-5"
-                    x2="65"
-                    y2="-5"
-                    stroke="#38BDF8"
-                    strokeWidth="1.8"
-                    strokeLinecap="round"
-                  />
-                  <line
-                    x1="20"
-                    y1="4"
-                    x2="55"
-                    y2="4"
-                    stroke="#818CF8"
-                    strokeWidth="1.8"
-                    strokeLinecap="round"
-                  />
-                  <polygon
-                    points="-12,42 0,32 82,32 100,42"
-                    fill="url(#laptopBase)"
-                    stroke="#94A3B8"
-                    strokeWidth="1.2"
-                  />
-                  <polygon points="32,39 36,35 58,35 55,39" fill="#CBD5E1" />
-                </g>
-              </svg>
-            </div>
-          </div>
+        <div className="w-full max-w-6xl h-full max-h-[580px] bg-card rounded-3xl sm:rounded-2xl border border-border-subtle shadow-xl overflow-hidden grid grid-cols-1 lg:grid-cols-12">
+          {/* LEFT COLUMN: HERO & 3D MASCOT */}
+          <StudentMascotHero mousePos={mousePos} blink={blink} />
 
-          {/* ========================================================================= */}
-          {/* RIGHT COLUMN: MULTI-STEP WIZARD FORM (Fixed Height, No Scrolling) */}
-          {/* ========================================================================= */}
+          {/* RIGHT COLUMN: MULTI-STEP WIZARD FORM */}
           <div className="lg:col-span-7 p-6 sm:p-8 lg:p-9 flex flex-col justify-between h-full overflow-hidden">
             {/* Top Stepper Indicator */}
-            <div className="w-full shrink-0 pb-3 border-b border-border-subtle/50">
-              <div className="w-full flex items-start justify-between">
-                {/* Step 1: Basic Info */}
-                <div
-                  className="flex flex-col items-center gap-1.5 cursor-pointer group shrink-0"
-                  onClick={() => setStep(1)}
-                >
-                  <div
-                    className={`w-[34px] h-[34px] rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
-                      step > 1
-                        ? 'bg-brand text-white shadow-xs'
-                        : step === 1
-                          ? 'bg-brand text-white shadow-[0_0_0_5px_var(--brand-green-glow)]'
-                          : 'bg-card border-2 border-border-subtle text-text-muted group-hover:border-slate-300'
-                    }`}
-                  >
-                    {step > 1 ? <Check className="w-4 h-4 stroke-[3]" /> : '1'}
-                  </div>
-                  <span
-                    className={`text-[11px] whitespace-nowrap transition-colors ${
-                      step === 1
-                        ? 'font-bold text-brand'
-                        : step > 1
-                          ? 'font-semibold text-slate-700'
-                          : 'font-medium text-text-muted'
-                    }`}
-                  >
-                    Basic Info
-                  </span>
-                </div>
-
-                {/* Connector Line 1 -> 2 */}
-                <div className="flex-1 h-[2px] bg-border-subtle mt-[16px] mx-1 sm:mx-2 relative overflow-hidden rounded-full">
-                  <div
-                    className="h-full bg-brand transition-all duration-400 ease-out"
-                    style={{ width: step > 1 ? '100%' : '0%' }}
-                  />
-                </div>
-
-                {/* Step 2: Education */}
-                <div
-                  className="flex flex-col items-center gap-1.5 cursor-pointer group shrink-0"
-                  onClick={() => step > 1 && setStep(2)}
-                >
-                  <div
-                    className={`w-[34px] h-[34px] rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
-                      step > 2
-                        ? 'bg-brand text-white shadow-xs'
-                        : step === 2
-                          ? 'bg-brand text-white shadow-[0_0_0_5px_var(--brand-green-glow)]'
-                          : 'bg-card border-2 border-border-subtle text-text-muted group-hover:border-slate-300'
-                    }`}
-                  >
-                    {step > 2 ? <Check className="w-4 h-4 stroke-[3]" /> : '2'}
-                  </div>
-                  <span
-                    className={`text-[11px] whitespace-nowrap transition-colors ${
-                      step === 2
-                        ? 'font-bold text-brand'
-                        : step > 2
-                          ? 'font-semibold text-slate-700'
-                          : 'font-medium text-text-muted'
-                    }`}
-                  >
-                    Education
-                  </span>
-                </div>
-
-                {/* Connector Line 2 -> 3 */}
-                <div className="flex-1 h-[2px] bg-border-subtle mt-[16px] mx-1 sm:mx-2 relative overflow-hidden rounded-full">
-                  <div
-                    className="h-full bg-brand transition-all duration-400 ease-out"
-                    style={{ width: step > 2 ? '100%' : '0%' }}
-                  />
-                </div>
-
-                {/* Step 3: Skills & Exp */}
-                <div
-                  className="flex flex-col items-center gap-1.5 cursor-pointer group shrink-0"
-                  onClick={() => step > 2 && setStep(3)}
-                >
-                  <div
-                    className={`w-[34px] h-[34px] rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
-                      step > 3
-                        ? 'bg-brand text-white shadow-xs'
-                        : step === 3
-                          ? 'bg-brand text-white shadow-[0_0_0_5px_var(--brand-green-glow)]'
-                          : 'bg-card border-2 border-border-subtle text-text-muted group-hover:border-slate-300'
-                    }`}
-                  >
-                    {step > 3 ? <Check className="w-4 h-4 stroke-[3]" /> : '3'}
-                  </div>
-                  <span
-                    className={`text-[11px] whitespace-nowrap transition-colors ${
-                      step === 3
-                        ? 'font-bold text-brand'
-                        : step > 3
-                          ? 'font-semibold text-slate-700'
-                          : 'font-medium text-text-muted'
-                    }`}
-                  >
-                    Skills &amp; Exp
-                  </span>
-                </div>
-
-                {/* Connector Line 3 -> 4 */}
-                <div className="flex-1 h-[2px] bg-border-subtle mt-[16px] mx-1 sm:mx-2 relative overflow-hidden rounded-full">
-                  <div
-                    className="h-full bg-brand transition-all duration-400 ease-out"
-                    style={{ width: step > 3 ? '100%' : '0%' }}
-                  />
-                </div>
-
-                {/* Step 4: Links & Finish */}
-                <div
-                  className="flex flex-col items-center gap-1.5 cursor-pointer group shrink-0"
-                  onClick={() => step > 3 && setStep(4)}
-                >
-                  <div
-                    className={`w-[34px] h-[34px] rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
-                      step === 4
-                        ? 'bg-brand text-white shadow-[0_0_0_5px_var(--brand-green-glow)]'
-                        : 'bg-card border-2 border-border-subtle text-text-muted'
-                    }`}
-                  >
-                    <span>4</span>
-                  </div>
-                  <span
-                    className={`text-[11px] whitespace-nowrap transition-colors ${
-                      step === 4 ? 'font-bold text-brand' : 'font-medium text-text-muted'
-                    }`}
-                  >
-                    Links &amp; Finish
-                  </span>
-                </div>
-              </div>
-            </div>
+            <StudentOnboardingStepper currentStep={step} onStepClick={setStep} />
 
-            {/* Step Form Content Body (Fixed Area, perfectly fitted) */}
-            <div className="flex-1 flex flex-col justify-center overflow-hidden py-1">
+            {/* Scrollable Form Content */}
+            <div className="flex-1 overflow-y-auto py-4 sm:py-5 pr-1 space-y-5 scrollbar-thin">
               <AnimatePresence mode="wait">
-                {/* ------------------------------------------------------------- */}
-                {/* STEP 1: BASIC DETAILS */}
-                {/* ------------------------------------------------------------- */}
+                {/* STEP 1: BASIC INFO */}
                 {step === 1 && (
                   <motion.div
-                    key="step-1"
-                    initial={{ opacity: 0, y: 6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    transition={{ duration: 0.18 }}
-                    className="space-y-3.5"
+                    key="step1"
+                    initial={{ opacity: 0, x: 15 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -15 }}
+                    transition={{ duration: 0.25 }}
+                    className="space-y-4"
                   >
                     <div>
-                      <h2 className="text-xl sm:text-2xl font-extrabold text-text-main tracking-tight">
-                        Basic Details
+                      <h2 className="text-lg sm:text-xl font-bold text-slate-900 tracking-tight">
+                        Personal Information
                       </h2>
-                      <p className="text-xs text-text-muted font-medium mt-0.5">
-                        Start with the basics. You can update these anytime.
+                      <p className="text-xs text-text-muted mt-0.5">
+                        Tell us your name and how you want recruiters to see you.
                       </p>
                     </div>
 
-                    {(step1Error || errors.fullName || errors.headline) && (
-                      <div
-                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
-                        role="alert"
-                      >
-                        {step1Error || errors.fullName?.message || errors.headline?.message}
+                    <div className="space-y-3.5">
+                      {/* Full Name */}
+                      <div>
+                        <label className="block text-xs font-bold text-slate-800 mb-1">
+                          Full Name <span className="text-rose-500">*</span>
+                        </label>
+                        <Input
+                          type="text"
+                          {...register('fullName')}
+                          placeholder="e.g. Alex Rivera"
+                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                        />
+                        {errors.fullName && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.fullName.message}
+                          </p>
+                        )}
                       </div>
-                    )}
 
-                    {/* Full Name */}
-                    <div>
-                      <label className="block text-xs font-bold text-slate-800 mb-1">
-                        Full Name <span className="text-red-500">*</span>
-                      </label>
-                      <Input
-                        type="text"
-                        {...register('fullName')}
-                        placeholder="e.g. Alex Chen"
-                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                      />
-                    </div>
-
-                    {/* Headline */}
-                    <div>
-                      <div className="flex items-center justify-between mb-1">
-                        <label className="text-xs font-bold text-slate-800">
-                          Headline <span className="text-red-500">*</span>
+                      {/* Headline */}
+                      <div>
+                        <label className="block text-xs font-bold text-slate-800 mb-1">
+                          Headline / Role <span className="text-rose-500">*</span>
                         </label>
-                        <span className="text-[11px] text-text-muted font-mono">
-                          {headline.length}/80
-                        </span>
+                        <Input
+                          type="text"
+                          {...register('headline')}
+                          placeholder="e.g. Computer Science Student | Aspiring Full-Stack Dev"
+                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                        />
+                        {errors.headline && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.headline.message}
+                          </p>
+                        )}
                       </div>
-                      <Input
-                        type="text"
-                        maxLength={80}
-                        {...register('headline')}
-                        placeholder="e.g. CS Student | Full-Stack Developer | Open to Internships"
-                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                      />
-                    </div>
 
-                    {/* Bio / Summary */}
-                    <div>
-                      <div className="flex items-center justify-between mb-1">
-                        <label className="text-xs font-bold text-slate-800">Bio / Summary</label>
-                        <span className="text-[11px] text-text-muted font-mono">
-                          {bio.length}/300
-                        </span>
+                      {/* Bio */}
+                      <div>
+                        <label className="block text-xs font-bold text-slate-800 mb-1">
+                          Short Bio (Optional)
+                        </label>
+                        <textarea
+                          {...register('bio')}
+                          rows={3}
+                          placeholder="Brief introduction about your passion, key achievements, or career goals..."
+                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card outline-none resize-none transition"
+                        />
+                        {errors.bio && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.bio.message}
+                          </p>
+                        )}
                       </div>
-                      <textarea
-                        rows={3}
-                        maxLength={300}
-                        {...register('bio')}
-                        placeholder="Tell recruiters a bit about yourself, your interests, and goals..."
-                        className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card resize-none"
-                      />
                     </div>
                   </motion.div>
                 )}
 
-                {/* ------------------------------------------------------------- */}
                 {/* STEP 2: EDUCATION */}
-                {/* ------------------------------------------------------------- */}
                 {step === 2 && (
                   <motion.div
-                    key="step-2"
-                    initial={{ opacity: 0, y: 6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    transition={{ duration: 0.18 }}
-                    className="space-y-3.5"
+                    key="step2"
+                    initial={{ opacity: 0, x: 15 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -15 }}
+                    transition={{ duration: 0.25 }}
+                    className="space-y-4"
                   >
                     <div>
-                      <h2 className="text-xl sm:text-2xl font-extrabold text-text-main tracking-tight">
-                        Education
+                      <h2 className="text-lg sm:text-xl font-bold text-slate-900 tracking-tight">
+                        Education & Academics
                       </h2>
-                      <p className="text-xs text-text-muted font-medium mt-0.5">
-                        Where are you studying or what is your academic background?
+                      <p className="text-xs text-text-muted mt-0.5">
+                        Share your academic background and expected graduation.
                       </p>
                     </div>
 
-                    {(step2Error || errors.school || errors.degree) && (
-                      <div
-                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
-                        role="alert"
-                      >
-                        {step2Error || errors.school?.message || errors.degree?.message}
-                      </div>
-                    )}
-
-                    <div className="space-y-3">
+                    <div className="space-y-3.5">
+                      {/* School / University */}
                       <div>
                         <label className="block text-xs font-bold text-slate-800 mb-1">
-                          School / University <span className="text-red-500">*</span>
+                          School / University <span className="text-rose-500">*</span>
                         </label>
                         <Input
                           type="text"
                           {...register('school')}
-                          placeholder="e.g. Stanford University or MIT"
+                          placeholder="e.g. Stanford University"
                           className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
+                        {errors.school && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.school.message}
+                          </p>
+                        )}
                       </div>
 
+                      {/* Degree & Specialization Grid */}
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         <div>
                           <label className="block text-xs font-bold text-slate-800 mb-1">
-                            Degree &amp; Major <span className="text-red-500">*</span>
+                            Degree <span className="text-rose-500">*</span>
                           </label>
                           <Input
                             type="text"
@@ -696,26 +330,44 @@ export default function StudentOnboardingPage() {
                             placeholder="e.g. B.S. Computer Science"
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
+                          {errors.degree && (
+                            <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                              {errors.degree.message}
+                            </p>
+                          )}
                         </div>
 
                         <div>
                           <label className="block text-xs font-bold text-slate-800 mb-1">
-                            Graduation Year <span className="text-red-500">*</span>
+                            Specialization / Major
+                          </label>
+                          <Input
+                            type="text"
+                            {...register('specialization')}
+                            placeholder="e.g. Artificial Intelligence"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                          />
+                        </div>
+                      </div>
+
+                      {/* Grad Year & GPA Grid */}
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        <div>
+                          <label className="block text-xs font-bold text-slate-800 mb-1">
+                            Expected Grad Year
                           </label>
                           <select
                             {...register('graduationYear')}
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card cursor-pointer"
+                            className="w-full px-3 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 text-xs sm:text-sm bg-card outline-none transition cursor-pointer"
                           >
-                            {gradYearOptions.map((year) => (
+                            {GRADUATION_YEAR_OPTIONS.map((year) => (
                               <option key={year} value={year}>
                                 {year}
                               </option>
                             ))}
                           </select>
                         </div>
-                      </div>
 
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         <div>
                           <label className="block text-xs font-bold text-slate-800 mb-1">
                             GPA (Optional)
@@ -727,172 +379,156 @@ export default function StudentOnboardingPage() {
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
-
-                        <div>
-                          <label className="block text-xs font-bold text-slate-800 mb-1">
-                            Specialization (Optional)
-                          </label>
-                          <Input
-                            type="text"
-                            {...register('specialization')}
-                            placeholder="e.g. AI / Machine Learning"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                          />
-                        </div>
                       </div>
                     </div>
                   </motion.div>
                 )}
 
-                {/* ------------------------------------------------------------- */}
                 {/* STEP 3: SKILLS & EXPERIENCE */}
-                {/* ------------------------------------------------------------- */}
                 {step === 3 && (
                   <motion.div
-                    key="step-3"
-                    initial={{ opacity: 0, y: 6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    transition={{ duration: 0.18 }}
-                    className="space-y-3"
+                    key="step3"
+                    initial={{ opacity: 0, x: 15 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -15 }}
+                    transition={{ duration: 0.25 }}
+                    className="space-y-4"
                   >
                     <div>
-                      <h2 className="text-xl sm:text-2xl font-extrabold text-text-main tracking-tight">
-                        Skills &amp; Experience
+                      <h2 className="text-lg sm:text-xl font-bold text-slate-900 tracking-tight">
+                        Skills & Experience
                       </h2>
-                      <p className="text-xs text-text-muted font-medium mt-0.5">
-                        Showcase your technical superpowers and past work or projects.
+                      <p className="text-xs text-text-muted mt-0.5">
+                        Add technical skills and optional prior internship or project experience.
                       </p>
                     </div>
 
-                    {/* Skills Input & Badges */}
-                    <div className="space-y-2">
-                      <label className="block text-xs font-bold text-slate-800">
-                        Technical Skills
-                      </label>
-                      <div className="flex gap-2">
-                        <Input
-                          type="text"
-                          value={newSkillInput}
-                          onChange={(e) => setNewSkillInput(e.target.value)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault()
-                              handleAddSkill()
-                            }
-                          }}
-                          placeholder="Type a skill and press Enter..."
-                          className="flex-1 px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                        />
-                        <Button
-                          type="button"
-                          onClick={() => handleAddSkill()}
-                          className="px-3.5 py-2 bg-brand hover:bg-brand-hover text-white font-semibold rounded-xl text-xs sm:text-sm flex items-center gap-1 shrink-0 h-auto"
-                        >
-                          <Plus className="w-3.5 h-3.5" />
-                          <span>Add</span>
-                        </Button>
-                      </div>
-
-                      {/* Added Skills Badges */}
-                      <div className="flex flex-wrap gap-1.5 max-h-[58px] overflow-hidden">
-                        {skills.map((s) => (
-                          <Badge
-                            key={s}
-                            variant="secondary"
-                            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-brand-light text-brand-dark text-xs font-bold border border-brand/20 shadow-2xs"
+                    <div className="space-y-4">
+                      {/* Skills Input */}
+                      <div>
+                        <label className="block text-xs font-bold text-slate-800 mb-1">
+                          Technical Skills <span className="text-rose-500">*</span>
+                        </label>
+                        <div className="flex gap-2">
+                          <Input
+                            type="text"
+                            value={newSkillInput}
+                            onChange={(e) => setNewSkillInput(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                e.preventDefault()
+                                handleAddSkill()
+                              }
+                            }}
+                            placeholder="Add a skill (e.g. React, TypeScript)..."
+                            className="flex-1 px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                          />
+                          <Button
+                            type="button"
+                            onClick={() => handleAddSkill()}
+                            className="px-4 py-2 rounded-xl bg-brand hover:bg-brand-hover text-white text-xs font-bold transition flex items-center gap-1 h-auto cursor-pointer"
                           >
-                            <span>{s}</span>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => handleRemoveSkill(s)}
-                              className="h-3.5 w-3.5 p-0 hover:bg-transparent hover:text-red-500 text-brand-dark"
-                              aria-label={`Remove skill ${s}`}
-                            >
-                              <X className="w-3 h-3" />
-                            </Button>
-                          </Badge>
-                        ))}
-                      </div>
+                            <Plus className="w-4 h-4" />
+                            <span>Add</span>
+                          </Button>
+                        </div>
 
-                      {/* Quick Add Suggestions */}
-                      <div className="flex flex-wrap items-center gap-1 pt-0.5">
-                        <span className="text-[11px] font-medium text-text-muted mr-1">
-                          Popular:
-                        </span>
-                        {popularSkills
-                          .filter((s) => !skills.includes(s))
-                          .slice(0, 5)
-                          .map((suggestion) => (
-                            <Button
-                              key={suggestion}
-                              type="button"
-                              variant="ghost"
-                              size="xs"
-                              onClick={() => handleAddSkill(suggestion)}
-                              className="text-[10px] font-medium bg-slate-100 hover:bg-brand-light hover:text-brand-hover text-slate-600 px-2 py-0.5 rounded-md h-auto"
-                            >
-                              + {suggestion}
-                            </Button>
-                          ))}
-                      </div>
-                    </div>
+                        {/* Current Skill Badges */}
+                        {skills.length > 0 && (
+                          <div className="flex flex-wrap gap-1.5 mt-2.5">
+                            {skills.map((skill) => (
+                              <Badge
+                                key={skill}
+                                className="px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200/60 text-xs font-semibold flex items-center gap-1.5 shadow-none"
+                              >
+                                <span>{skill}</span>
+                                <button
+                                  type="button"
+                                  onClick={() => handleRemoveSkill(skill)}
+                                  className="hover:text-rose-600 transition cursor-pointer bg-transparent border-0 p-0"
+                                >
+                                  <X className="w-3 h-3" />
+                                </button>
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
 
-                    {/* Past Experience */}
-                    <div className="border-t border-border-subtle/50 pt-2.5 space-y-2">
-                      <h4 className="text-xs font-bold text-slate-800">
-                        Experience / Internships (Optional)
-                      </h4>
+                        {/* Popular Skill Suggestions */}
+                        <div className="mt-2.5">
+                          <span className="text-xs font-semibold text-slate-500">
+                            Popular suggestions:
+                          </span>
+                          <div className="flex flex-wrap gap-1 mt-1">
+                            {POPULAR_SKILL_SUGGESTIONS.map((ps) => (
+                              <button
+                                type="button"
+                                key={ps}
+                                onClick={() => handleAddSkill(ps)}
+                                disabled={skills.includes(ps)}
+                                className={`text-xs px-2 py-0.5 rounded-md border transition cursor-pointer ${
+                                  skills.includes(ps)
+                                    ? 'bg-slate-100 text-slate-400 border-slate-200 cursor-default'
+                                    : 'bg-card text-slate-600 border-border-subtle hover:border-brand hover:text-brand'
+                                }`}
+                              >
+                                + {ps}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
 
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
-                        <Input
-                          type="text"
-                          {...register('experienceRole')}
-                          placeholder="Role (e.g. Frontend Intern)"
-                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
-                        />
-                        <Input
-                          type="text"
-                          {...register('experienceCompany')}
-                          placeholder="Company (e.g. DK24 Labs)"
-                          className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
-                        />
+                        {errors.skills && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.skills.message}
+                          </p>
+                        )}
                       </div>
 
-                      <Input
-                        type="text"
-                        {...register('experienceSummary')}
-                        placeholder="Brief summary of achievements or projects..."
-                        className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs bg-card h-auto"
-                      />
+                      {/* Recent Experience */}
+                      <div className="pt-2 border-t border-border-subtle/50 space-y-3">
+                        <span className="text-xs font-bold text-slate-800 block">
+                          Most Recent Role / Internship (Optional)
+                        </span>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <Input
+                            type="text"
+                            {...register('experienceRole')}
+                            placeholder="Role (e.g. Frontend Intern)"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                          />
+                          <Input
+                            type="text"
+                            {...register('experienceCompany')}
+                            placeholder="Company (e.g. Acme Corp)"
+                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
+                          />
+                        </div>
+                      </div>
                     </div>
                   </motion.div>
                 )}
 
-                {/* ------------------------------------------------------------- */}
-                {/* STEP 4: LINKS & FINISH */}
-                {/* ------------------------------------------------------------- */}
+                {/* STEP 4: PROFILES & LINKS */}
                 {step === 4 && (
                   <motion.div
-                    key="step-4"
-                    initial={{ opacity: 0, y: 6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    transition={{ duration: 0.18 }}
-                    className="space-y-3.5"
+                    key="step4"
+                    initial={{ opacity: 0, x: 15 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -15 }}
+                    transition={{ duration: 0.25 }}
+                    className="space-y-4"
                   >
                     <div>
-                      <h2 className="text-xl sm:text-2xl font-extrabold text-text-main tracking-tight">
-                        Links &amp; Finish
+                      <h2 className="text-lg sm:text-xl font-bold text-slate-900 tracking-tight">
+                        Online Profiles & Links
                       </h2>
-                      <p className="text-xs text-text-muted font-medium mt-0.5">
-                        Connect your online profiles so verified recruiters can check your work.
+                      <p className="text-xs text-text-muted mt-0.5">
+                        Add links to your code repositories, LinkedIn, or portfolio.
                       </p>
                     </div>
 
-                    <div className="space-y-2.5">
+                    <div className="space-y-3">
                       {/* GitHub */}
                       <div>
                         <label className="block text-xs font-bold text-slate-800 mb-1">
@@ -903,7 +539,7 @@ export default function StudentOnboardingPage() {
                           <Input
                             type="url"
                             {...register('githubUrl')}
-                            placeholder="https://github.com/yourusername"
+                            placeholder="https://github.com/username"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
@@ -924,7 +560,7 @@ export default function StudentOnboardingPage() {
                           <Input
                             type="url"
                             {...register('linkedinUrl')}
-                            placeholder="https://linkedin.com/in/yourusername"
+                            placeholder="https://linkedin.com/in/username"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
@@ -938,14 +574,14 @@ export default function StudentOnboardingPage() {
                       {/* Portfolio */}
                       <div>
                         <label className="block text-xs font-bold text-slate-800 mb-1">
-                          Portfolio / Website (Optional)
+                          Portfolio Website URL
                         </label>
                         <div className="relative flex items-center">
                           <Globe className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
                           <Input
                             type="url"
                             {...register('portfolioUrl')}
-                            placeholder="https://yourportfolio.dev"
+                            placeholder="https://alexrivera.dev"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
@@ -982,7 +618,7 @@ export default function StudentOnboardingPage() {
               </AnimatePresence>
             </div>
 
-            {/* Bottom Actions Bar (Fixed at bottom of right column) */}
+            {/* Bottom Actions Bar */}
             <div className="flex items-center justify-between pt-3 border-t border-border-subtle/50 shrink-0">
               {/* Back Button */}
               <Button
diff --git a/apps/web/components/onboarding/student-mascot-hero.tsx b/apps/web/components/onboarding/student-mascot-hero.tsx
new file mode 100644
index 0000000..478f8ce
--- /dev/null
+++ b/apps/web/components/onboarding/student-mascot-hero.tsx
@@ -0,0 +1,207 @@
+'use client'
+
+import { motion } from 'motion/react'
+
+/** Eye pupil movement multipliers for relative mouse position [-1, 1] */
+const PUPIL_MOVE_X = 3
+const PUPIL_MOVE_Y = 2
+const PUPIL_CENTER_OFFSET_X = 1.5
+const PUPIL_CENTER_OFFSET_Y = 3.5
+
+const HIGHLIGHT_MOVE_SCALE = 1.8
+const HIGHLIGHT_OFFSET_Y = 1.8
+
+interface StudentMascotHeroProps {
+  mousePos: { x: number; y: number }
+  blink: boolean
+}
+
+export function StudentMascotHero({ mousePos, blink }: StudentMascotHeroProps) {
+  const pupilCx = mousePos.x * PUPIL_MOVE_X + PUPIL_CENTER_OFFSET_X
+  const pupilCy = mousePos.y * PUPIL_MOVE_Y + PUPIL_CENTER_OFFSET_Y
+  const highlightCx = mousePos.x * HIGHLIGHT_MOVE_SCALE
+  const highlightCy = mousePos.y * HIGHLIGHT_MOVE_SCALE + HIGHLIGHT_OFFSET_Y
+
+  return (
+    <div className="lg:col-span-5 bg-gradient-to-b from-surface-hero-start to-surface-hero-end border-b lg:border-b-0 lg:border-r border-border-subtle/50 p-6 sm:p-8 lg:p-9 flex flex-col justify-between h-full relative overflow-hidden">
+      {/* Top Header Content */}
+      <div className="space-y-4 z-10">
+        <div>
+          <h1 className="text-2xl sm:text-3xl font-extrabold text-text-main tracking-tight leading-[1.2]">
+            Let&apos;s build your <br />
+            <span className="text-brand inline-flex items-center gap-1.5">career profile</span>
+          </h1>
+          <p className="text-text-muted text-xs sm:text-sm font-medium leading-relaxed mt-2 max-w-[360px]">
+            A complete profile helps recruiters discover you and gives you better opportunities.
+          </p>
+        </div>
+      </div>
+
+      {/* Interactive 3D Mascot Character with Laptop */}
+      <div className="relative w-full flex-1 min-h-[220px] max-h-[340px] flex items-center justify-center select-none py-1">
+        <svg
+          viewBox="35 65 310 195"
+          className="w-full h-full max-h-[320px] overflow-visible drop-shadow-sm"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <filter id="clayShadow" x="-20%" y="-20%" width="140%" height="140%">
+              <feDropShadow
+                dx="0"
+                dy="8"
+                stdDeviation="12"
+                floodColor="#0F172A"
+                floodOpacity="0.12"
+              />
+            </filter>
+            <filter id="laptopShadow" x="-20%" y="-20%" width="140%" height="140%">
+              <feDropShadow
+                dx="0"
+                dy="10"
+                stdDeviation="8"
+                floodColor="#0F172A"
+                floodOpacity="0.13"
+              />
+            </filter>
+
+            <radialGradient id="greenClaySphere" cx="35%" cy="30%" r="68%">
+              <stop offset="0%" stopColor="var(--clay-sphere-start)" />
+              <stop offset="28%" stopColor="var(--brand-green)" />
+              <stop offset="70%" stopColor="var(--clay-sphere-mid2)" />
+              <stop offset="90%" stopColor="var(--clay-sphere-dark)" />
+              <stop offset="100%" stopColor="var(--clay-sphere-end)" />
+            </radialGradient>
+
+            <linearGradient id="capTop" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#333A44" />
+              <stop offset="50%" stopColor="#22272E" />
+              <stop offset="100%" stopColor="#14181F" />
+            </linearGradient>
+            <linearGradient id="capBevel" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#181D24" />
+              <stop offset="100%" stopColor="#0D1015" />
+            </linearGradient>
+
+            <linearGradient id="laptopLid" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#F1F5F9" />
+              <stop offset="50%" stopColor="#E2E8F0" />
+              <stop offset="100%" stopColor="#CBD5E1" />
+            </linearGradient>
+            <linearGradient id="laptopBase" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#E2E8F0" />
+              <stop offset="100%" stopColor="#94A3B8" />
+            </linearGradient>
+          </defs>
+
+          {/* Ground Shadow */}
+          <ellipse cx="200" cy="245" rx="130" ry="10" fill="#0F172A" opacity="0.07" />
+
+          {/* 3D Student Character */}
+          <g transform="translate(130, 165)">
+            <circle cx="0" cy="0" r="62" fill="url(#greenClaySphere)" filter="url(#clayShadow)" />
+
+            {/* Graduation Cap */}
+            <g transform="translate(-22, -60) rotate(-16)">
+              <path d="M -24,10 C -24,-2 24,-2 24,10 C 24,18 -24,18 -24,10 Z" fill="#12161D" />
+              <polygon points="-52,0 -52,5 0,22 52,5 52,0 0,17" fill="url(#capBevel)" />
+              <polygon
+                points="-52,0 0,-18 52,0 0,17"
+                fill="url(#capTop)"
+                stroke="#14181F"
+                strokeWidth="1"
+              />
+              <ellipse cx="0" cy="0" rx="3.5" ry="2.5" fill="#10141A" />
+              <path
+                d="M 0,0 C -28,10 -38,22 -40,42"
+                stroke="var(--brand-green)"
+                strokeWidth="2.8"
+                fill="none"
+                strokeLinecap="round"
+              />
+              <ellipse cx="-40" cy="42" rx="3.5" ry="3" fill="var(--clay-sphere-mid2)" />
+              <path d="M -44,43 C -44,56 -36,56 -36,43 Z" fill="var(--brand-green)" />
+            </g>
+
+            {/* Left Eye */}
+            <g transform="translate(-8, -4) rotate(-3)">
+              <ellipse cx="0" cy="0" rx="13" ry="12" fill="#FFFFFF" />
+              <motion.circle
+                cx={pupilCx}
+                cy={pupilCy}
+                r={5}
+                fill="#1A202C"
+                animate={{ scaleY: blink ? 0.1 : 1 }}
+                transition={{ duration: 0.1 }}
+              />
+              {!blink && <circle cx={highlightCx} cy={highlightCy} r="1.8" fill="#FFFFFF" />}
+            </g>
+
+            {/* Right Eye */}
+            <g transform="translate(22, -8) rotate(3)">
+              <ellipse cx="0" cy="0" rx="13" ry="12" fill="#FFFFFF" />
+              <motion.circle
+                cx={pupilCx}
+                cy={pupilCy}
+                r={5}
+                fill="#1A202C"
+                animate={{ scaleY: blink ? 0.1 : 1 }}
+                transition={{ duration: 0.1 }}
+              />
+              {!blink && <circle cx={highlightCx} cy={highlightCy} r="1.8" fill="#FFFFFF" />}
+            </g>
+
+            {/* Smile */}
+            <g transform="translate(8, 14)">
+              <path d="M -10,-2 Q 0,12 10,-2 Q 0,3 -10,-2 Z" fill="#1A202C" />
+            </g>
+          </g>
+
+          {/* 3D Laptop */}
+          <g transform="translate(195, 180)" filter="url(#laptopShadow)">
+            <polygon
+              points="0,32 14,-32 96,-32 82,32"
+              fill="url(#laptopLid)"
+              stroke="#CBD5E1"
+              strokeWidth="1.2"
+            />
+            <polygon points="4,30 16,-28 92,-28 80,30" fill="#1E293B" />
+            <line
+              x1="25"
+              y1="-14"
+              x2="74"
+              y2="-14"
+              stroke="var(--brand-green)"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+            />
+            <line
+              x1="22"
+              y1="-5"
+              x2="65"
+              y2="-5"
+              stroke="#38BDF8"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+            />
+            <line
+              x1="20"
+              y1="4"
+              x2="55"
+              y2="4"
+              stroke="#818CF8"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+            />
+            <polygon
+              points="-12,42 0,32 82,32 100,42"
+              fill="url(#laptopBase)"
+              stroke="#94A3B8"
+              strokeWidth="1.2"
+            />
+            <polygon points="32,39 36,35 58,35 55,39" fill="#CBD5E1" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/onboarding/student-onboarding-stepper.tsx b/apps/web/components/onboarding/student-onboarding-stepper.tsx
new file mode 100644
index 0000000..10d74f8
--- /dev/null
+++ b/apps/web/components/onboarding/student-onboarding-stepper.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { Check } from 'lucide-react'
+
+export type StepNumber = 1 | 2 | 3 | 4
+
+interface StepItem {
+  id: StepNumber
+  label: string
+}
+
+const STEPS: StepItem[] = [
+  { id: 1, label: 'Basic Info' },
+  { id: 2, label: 'Education' },
+  { id: 3, label: 'Skills & Exp' },
+  { id: 4, label: 'Profiles' },
+]
+
+interface StudentOnboardingStepperProps {
+  currentStep: StepNumber
+  onStepClick: (step: StepNumber) => void
+}
+
+export function StudentOnboardingStepper({
+  currentStep,
+  onStepClick,
+}: StudentOnboardingStepperProps) {
+  return (
+    <div
+      role="tablist"
+      aria-label="Student onboarding wizard steps"
+      className="w-full shrink-0 pb-3 border-b border-border-subtle/50"
+    >
+      <div className="w-full flex items-start justify-between">
+        {STEPS.map((step, idx) => {
+          const isPassed = currentStep > step.id
+          const isCurrent = currentStep === step.id
+
+          return (
+            <div key={step.id} className="contents">
+              {/* Step Button */}
+              <button
+                type="button"
+                role="tab"
+                aria-selected={isCurrent}
+                aria-label={`Step ${step.id}: ${step.label}`}
+                onClick={() => onStepClick(step.id)}
+                className="flex flex-col items-center gap-1.5 cursor-pointer group shrink-0 bg-transparent border-0 outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 rounded-lg transition-transform active:scale-95"
+              >
+                <div
+                  className={`size-8.5 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
+                    isPassed
+                      ? 'bg-brand text-white shadow-xs'
+                      : isCurrent
+                        ? 'bg-brand text-white ring-4 ring-brand/25'
+                        : 'bg-card border-2 border-border-subtle text-text-muted group-hover:border-slate-300'
+                  }`}
+                >
+                  {isPassed ? <Check className="w-4 h-4 stroke-2" /> : step.id}
+                </div>
+                <span
+                  className={`text-xs whitespace-nowrap transition-colors ${
+                    isCurrent
+                      ? 'font-bold text-brand'
+                      : isPassed
+                        ? 'font-semibold text-slate-700'
+                        : 'font-medium text-text-muted'
+                  }`}
+                >
+                  {step.label}
+                </span>
+              </button>
+
+              {/* Connector Line (between steps) */}
+              {idx < STEPS.length - 1 && (
+                <div className="flex-1 h-0.5 bg-border-subtle mt-4 mx-1 sm:mx-2 relative overflow-hidden rounded-full">
+                  <div
+                    className="h-full bg-brand transition-all duration-300 ease-out"
+                    style={{ width: currentStep > step.id ? '100%' : '0%' }}
+                  />
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

From f09c746ac8dd73420cbd60a6cd286ec6e99d4d19 Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Fri, 18 Sep 2026 22:57:51 +0530
Subject: [PATCH 5/5] Refine student onboarding form

---
 apps/web/app/(onboarding)/student/page.tsx | 95 ++++++++--------------
 1 file changed, 34 insertions(+), 61 deletions(-)

diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index a9a8708..0597f57 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -232,7 +232,6 @@ export default function StudentOnboardingPage() {
                           type="text"
                           {...register('fullName')}
                           placeholder="e.g. Alex Rivera"
-                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
                         {errors.fullName && (
                           <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
@@ -250,7 +249,6 @@ export default function StudentOnboardingPage() {
                           type="text"
                           {...register('headline')}
                           placeholder="e.g. Computer Science Student | Aspiring Full-Stack Dev"
-                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
                         {errors.headline && (
                           <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
@@ -309,7 +307,6 @@ export default function StudentOnboardingPage() {
                           type="text"
                           {...register('school')}
                           placeholder="e.g. Stanford University"
-                          className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                         />
                         {errors.school && (
                           <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
@@ -328,7 +325,6 @@ export default function StudentOnboardingPage() {
                             type="text"
                             {...register('degree')}
                             placeholder="e.g. B.S. Computer Science"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                           {errors.degree && (
                             <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
@@ -345,7 +341,6 @@ export default function StudentOnboardingPage() {
                             type="text"
                             {...register('specialization')}
                             placeholder="e.g. Artificial Intelligence"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                       </div>
@@ -372,12 +367,7 @@ export default function StudentOnboardingPage() {
                           <label className="block text-xs font-bold text-slate-800 mb-1">
                             GPA (Optional)
                           </label>
-                          <Input
-                            type="text"
-                            {...register('gpa')}
-                            placeholder="e.g. 3.8 / 4.0"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                          />
+                          <Input type="text" {...register('gpa')} placeholder="e.g. 3.8 / 4.0" />
                         </div>
                       </div>
                     </div>
@@ -409,26 +399,23 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           Technical Skills <span className="text-rose-500">*</span>
                         </label>
-                        <div className="flex gap-2">
-                          <Input
-                            type="text"
-                            value={newSkillInput}
-                            onChange={(e) => setNewSkillInput(e.target.value)}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault()
-                                handleAddSkill()
-                              }
-                            }}
-                            placeholder="Add a skill (e.g. React, TypeScript)..."
-                            className="flex-1 px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
-                          />
-                          <Button
-                            type="button"
-                            onClick={() => handleAddSkill()}
-                            className="px-4 py-2 rounded-xl bg-brand hover:bg-brand-hover text-white text-xs font-bold transition flex items-center gap-1 h-auto cursor-pointer"
-                          >
-                            <Plus className="w-4 h-4" />
+                        <div className="flex items-center gap-2">
+                          <div className="flex-1">
+                            <Input
+                              type="text"
+                              value={newSkillInput}
+                              onChange={(e) => setNewSkillInput(e.target.value)}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                  e.preventDefault()
+                                  handleAddSkill()
+                                }
+                              }}
+                              placeholder="Add a skill (e.g. React, TypeScript)..."
+                            />
+                          </div>
+                          <Button type="button" size="sm" onClick={() => handleAddSkill()}>
+                            <Plus />
                             <span>Add</span>
                           </Button>
                         </div>
@@ -437,17 +424,15 @@ export default function StudentOnboardingPage() {
                         {skills.length > 0 && (
                           <div className="flex flex-wrap gap-1.5 mt-2.5">
                             {skills.map((skill) => (
-                              <Badge
-                                key={skill}
-                                className="px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200/60 text-xs font-semibold flex items-center gap-1.5 shadow-none"
-                              >
+                              <Badge key={skill} variant="secondary">
                                 <span>{skill}</span>
                                 <button
                                   type="button"
                                   onClick={() => handleRemoveSkill(skill)}
-                                  className="hover:text-rose-600 transition cursor-pointer bg-transparent border-0 p-0"
+                                  aria-label={`Remove ${skill}`}
+                                  className="hover:text-destructive transition-colors bg-transparent border-0 p-0 cursor-pointer"
                                 >
-                                  <X className="w-3 h-3" />
+                                  <X className="size-3" />
                                 </button>
                               </Badge>
                             ))}
@@ -495,13 +480,11 @@ export default function StudentOnboardingPage() {
                             type="text"
                             {...register('experienceRole')}
                             placeholder="Role (e.g. Frontend Intern)"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                           <Input
                             type="text"
                             {...register('experienceCompany')}
                             placeholder="Company (e.g. Acme Corp)"
-                            className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                       </div>
@@ -534,13 +517,12 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           GitHub Profile URL
                         </label>
-                        <div className="relative flex items-center">
-                          <Code className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                        <div className="flex items-center gap-2">
+                          <Code className="size-4 shrink-0 text-text-muted" />
                           <Input
                             type="url"
                             {...register('githubUrl')}
                             placeholder="https://github.com/username"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.githubUrl && (
@@ -555,13 +537,12 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           LinkedIn Profile URL
                         </label>
-                        <div className="relative flex items-center">
-                          <Link className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                        <div className="flex items-center gap-2">
+                          <Link className="size-4 shrink-0 text-text-muted" />
                           <Input
                             type="url"
                             {...register('linkedinUrl')}
                             placeholder="https://linkedin.com/in/username"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.linkedinUrl && (
@@ -576,13 +557,12 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           Portfolio Website URL
                         </label>
-                        <div className="relative flex items-center">
-                          <Globe className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                        <div className="flex items-center gap-2">
+                          <Globe className="size-4 shrink-0 text-text-muted" />
                           <Input
                             type="url"
                             {...register('portfolioUrl')}
                             placeholder="https://alexrivera.dev"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.portfolioUrl && (
@@ -597,13 +577,12 @@ export default function StudentOnboardingPage() {
                         <label className="block text-xs font-bold text-slate-800 mb-1">
                           Resume / CV Link (Optional)
                         </label>
-                        <div className="relative flex items-center">
-                          <FileText className="w-4 h-4 text-slate-400 absolute left-3 z-10" />
+                        <div className="flex items-center gap-2">
+                          <FileText className="size-4 shrink-0 text-text-muted" />
                           <Input
                             type="url"
                             {...register('resumeUrl')}
                             placeholder="https://drive.google.com/... or resume URL"
-                            className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus-visible:border-brand focus-visible:ring-brand/15 text-xs sm:text-sm bg-card h-auto"
                           />
                         </div>
                         {errors.resumeUrl && (
@@ -621,13 +600,8 @@ export default function StudentOnboardingPage() {
             {/* Bottom Actions Bar */}
             <div className="flex items-center justify-between pt-3 border-t border-border-subtle/50 shrink-0">
               {/* Back Button */}
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={handleBack}
-                className="flex items-center gap-2 px-4 sm:px-5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs sm:text-sm transition cursor-pointer active:scale-[0.98] h-auto shadow-none"
-              >
-                <ArrowLeft className="w-4 h-4" />
+              <Button type="button" variant="secondary" onClick={handleBack}>
+                <ArrowLeft />
                 <span>Back</span>
               </Button>
 
@@ -636,17 +610,16 @@ export default function StudentOnboardingPage() {
                 type="button"
                 onClick={handleNext}
                 disabled={isCompleted || saveStudentMutation.isPending}
-                className="flex items-center gap-2 px-5 sm:px-6 py-2 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98] disabled:opacity-70 h-auto"
               >
                 {step < 4 ? (
                   <>
                     <span>Next</span>
-                    <ArrowRight className="w-4 h-4" />
+                    <ArrowRight />
                   </>
                 ) : (
                   <>
                     <span>{isCompleted ? 'Profile Created!' : 'Finish Setup'}</span>
-                    <Sparkles className="w-4 h-4 text-brand-emerald" />
+                    <Sparkles />
                   </>
                 )}
               </Button>