diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ef18416..428dc86 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -57,7 +57,7 @@ function Home() {
             </div>
             <div className="flex items-center gap-2 text-primary opacity-100">
                 <Sparkles className="w-5 h-5" />
-                <span className="text-sm font-black uppercase tracking-tighter">Gemini 2.0 Powered</span>
+                <span className="text-sm font-black uppercase tracking-tighter">Gemini Powered</span>
             </div>
           </div>
         </motion.div>
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index 659eb7e..a42be4a 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -1,10 +1,10 @@
-import { useState, useEffect, useOptimistic, Activity } from 'react';
+import { useState, useEffect, useOptimistic } from 'react';
 import { useAuth } from '../context/AuthContext';
 import { 
   FileText, Briefcase, Calendar, Download, Loader2, 
   AlertCircle, Trash2, History, Eye, X,
   Plus, Search, TrendingUp, Clock, ChevronRight,
-  Github
+  Github, Sparkles
 } from 'lucide-react';
 import axios from 'axios';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -151,21 +151,31 @@ export default function Dashboard() {
     <div className="max-w-7xl mx-auto py-8">
       {/* Welcome Section */}
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
-        <div>
-          <h1 className="text-4xl font-black tracking-tight mb-2">
-            Workspace<span className="text-primary">.</span>
-          </h1>
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+        >
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-4xl font-black tracking-tight">
+              Workspace<span className="text-primary">.</span>
+            </h1>
+          </div>
           <p className="text-muted-foreground text-lg flex items-center gap-2">
-            Welcome back, <span className="text-foreground font-bold">{user?.username}</span>
+            Welcome back, <span className="text-foreground font-black underline decoration-primary/30 decoration-4 underline-offset-4">{user?.username}</span>
           </p>
-        </div>
-        <Link 
-          to="/" 
-          className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-2xl font-bold shadow-xl shadow-primary/20 transition-smooth"
+        </motion.div>
+        <motion.div
+           initial={{ opacity: 0, x: 20 }}
+           animate={{ opacity: 1, x: 0 }}
         >
-          <Plus className="w-5 h-5" />
-          Create New Resume
-        </Link>
+          <Link 
+            to="/" 
+            className="group inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-2xl font-black shadow-xl shadow-primary/20 transition-smooth hover:-translate-y-1 active:translate-y-0"
+          >
+            <Plus className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" />
+            Create New Resume
+          </Link>
+        </motion.div>
       </div>
 
       {error && (
@@ -181,49 +191,68 @@ export default function Dashboard() {
 
       {/* Stats Dashboard */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
-        <div className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-md transition-smooth">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-xl transition-smooth group"
+        >
           <div className="flex items-center gap-3 mb-4">
-            <div className="bg-primary/10 p-2.5 rounded-xl">
+            <div className="bg-primary/10 p-2.5 rounded-xl group-hover:scale-110 transition-transform">
                 <FileText className="w-5 h-5 text-primary" />
             </div>
             <span className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Resumes</span>
           </div>
           <div className="flex items-end justify-between">
-            <p className="text-4xl font-black">{resumes.length}</p>
-            <TrendingUp className="w-5 h-5 text-primary mb-1" />
+            <p className="text-4xl font-black tabular-nums">{resumes.length}</p>
+            <TrendingUp className="w-5 h-5 text-primary mb-1 animate-pulse" />
           </div>
-        </div>
+        </motion.div>
         
-        <div className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-md transition-smooth">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-xl transition-smooth group"
+        >
           <div className="flex items-center gap-3 mb-4">
-            <div className="bg-success/10 p-2.5 rounded-xl">
+            <div className="bg-success/10 p-2.5 rounded-xl group-hover:scale-110 transition-transform">
                 <Briefcase className="w-5 h-5 text-success" />
             </div>
             <span className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Applications</span>
           </div>
           <div className="flex items-end justify-between">
-            <p className="text-4xl font-black">{applications.length}</p>
-            <div className="bg-success text-white text-[10px] font-black px-2 py-0.5 rounded-full mb-1">LIVE</div>
+            <p className="text-4xl font-black tabular-nums">{applications.length}</p>
+            <div className="bg-success text-white text-[10px] font-black px-2 py-0.5 rounded-full mb-1 shadow-sm shadow-success/20">LIVE</div>
           </div>
-        </div>
+        </motion.div>
 
-        <div className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-md transition-smooth md:col-span-2 bg-gradient-to-br from-primary/5 to-transparent flex items-center justify-between overflow-hidden relative">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="glass p-6 rounded-3xl border border-white/5 shadow-sm hover:shadow-xl transition-smooth md:col-span-2 bg-gradient-to-br from-primary/10 via-background to-transparent flex items-center justify-between overflow-hidden relative group"
+        >
             <div className="relative z-10">
-                <h3 className="font-bold text-foreground mb-1">Career Insights</h3>
-                <p className="text-sm text-muted-foreground max-w-[200px]">You've generated {resumes.length} tailored resumes this month. Keep up the momentum!</p>
+                <h3 className="font-black text-foreground mb-1 flex items-center gap-2">
+                    Career Insights
+                    <Sparkles className="w-4 h-4 text-primary" />
+                </h3>
+                <p className="text-sm font-medium text-muted-foreground max-w-[280px]">You've generated <span className="text-primary font-black">{resumes.length} optimized resumes</span>. Your profile matching score is increasing!</p>
             </div>
-            <Clock className="w-24 h-24 text-primary/10 absolute -right-4 -bottom-4 rotate-12" />
-        </div>
+            <Clock className="w-24 h-24 text-primary/10 absolute -right-4 -bottom-4 rotate-12 group-hover:scale-125 transition-transform duration-500" />
+            <div className="absolute top-0 left-0 w-1 h-full bg-primary/20" />
+        </motion.div>
       </div>
 
       {/* Control Bar */}
-      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-8">
-        <div className="flex bg-muted p-1.5 rounded-2xl w-full sm:w-auto">
+      <div className="flex flex-col sm:flex-row items-center justify-between gap-6 mb-12 bg-muted/30 p-4 rounded-[2rem] border border-white/5">
+        <div className="flex bg-background/50 backdrop-blur-sm p-1.5 rounded-2xl w-full sm:w-auto shadow-inner">
           <button
             onClick={() => setActiveTab('resumes')}
-            className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-smooth ${
+            className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-8 py-3 rounded-xl font-black text-sm transition-smooth ${
               activeTab === 'resumes' 
-                ? 'bg-card text-foreground shadow-sm px-8' 
+                ? 'bg-card text-primary shadow-lg shadow-black/5 ring-1 ring-black/5' 
                 : 'text-muted-foreground hover:text-foreground'
             }`}
           >
@@ -232,9 +261,9 @@ export default function Dashboard() {
           </button>
           <button
             onClick={() => setActiveTab('applications')}
-            className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-smooth ${
+            className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-8 py-3 rounded-xl font-black text-sm transition-smooth ${
               activeTab === 'applications' 
-                ? 'bg-card text-foreground shadow-sm px-8' 
+                ? 'bg-card text-primary shadow-lg shadow-black/5 ring-1 ring-black/5' 
                 : 'text-muted-foreground hover:text-foreground'
             }`}
           >
@@ -243,27 +272,37 @@ export default function Dashboard() {
           </button>
         </div>
 
-        <div className="relative w-full sm:w-72 group">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
+        <div className="relative w-full sm:w-96 group">
+            <Search className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
             <input 
                 type="text" 
-                placeholder={`Search ${activeTab}...`}
+                placeholder={`Search ${activeTab === 'resumes' ? 'resumes by job title' : 'applications'}...`}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-11 pr-4 py-2.5 bg-muted border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-primary/20 transition-smooth"
+                className="w-full pl-12 pr-6 py-3.5 bg-card border-none rounded-2xl text-sm font-bold shadow-sm focus:ring-4 focus:ring-primary/10 transition-smooth placeholder:text-muted-foreground/40"
             />
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                className="absolute right-4 top-1/2 -translate-y-1/2 p-1 hover:bg-muted rounded-md transition-colors"
+              >
+                <X className="w-3.5 h-3.5 text-muted-foreground" />
+              </button>
+            )}
         </div>
       </div>
 
-      {/* Content Area with React 19.2 <Activity> */}
+      {/* Content Area */}
       <div className="relative min-h-[400px]">
-        {/* Resumes Tab */}
-        <Activity mode={activeTab === 'resumes' ? 'visible' : 'hidden'}>
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-          >
+        <AnimatePresence mode="wait">
+          {activeTab === 'resumes' ? (
+            <motion.div
+              key="resumes-tab"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+            >
             {filteredResumes.length > 0 ? (
               filteredResumes.map(resume => (
                 <motion.div 
@@ -344,13 +383,12 @@ export default function Dashboard() {
               </div>
             )}
           </motion.div>
-        </Activity>
-
-        {/* Applications Tab */}
-        <Activity mode={activeTab === 'applications' ? 'visible' : 'hidden'}>
+        ) : (
           <motion.div
+            key="applications-tab"
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
             className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
           >
             {applications.length > 0 ? (
@@ -398,7 +436,8 @@ export default function Dashboard() {
               </div>
             )}
           </motion.div>
-        </Activity>
+        )}
+        </AnimatePresence>
       </div>
 
       {/* Modern Preview Modal */}
diff --git a/frontend/src/components/InterviewPrepPlan.tsx b/frontend/src/components/InterviewPrepPlan.tsx
index 1c4cc43..14892b5 100644
--- a/frontend/src/components/InterviewPrepPlan.tsx
+++ b/frontend/src/components/InterviewPrepPlan.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Trophy, Check, Copy, Lightbulb, CheckCircle2, Brain, MessageSquare, Rocket } from 'lucide-react';
+import { Trophy, Check, Copy, Lightbulb, CheckCircle2, Brain, MessageSquare, Briefcase } from 'lucide-react';
 import QuestionCard from './QuestionCard';
 
 interface InterviewPrepData {
@@ -150,7 +150,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n   Context: ${q?.context}`
               <PrepSection 
                 title="Situational Awareness" 
                 subtitle="Scenario Based Challenges"
-                icon={<Rocket className="w-5 h-5 text-indigo-600" />} 
+                icon={<Briefcase className="w-5 h-5 text-indigo-600" />} 
                 questions={situationalQs}
               />
             )}
diff --git a/frontend/src/components/MockInterview.tsx b/frontend/src/components/MockInterview.tsx
index c1988fc..96c6489 100644
--- a/frontend/src/components/MockInterview.tsx
+++ b/frontend/src/components/MockInterview.tsx
@@ -125,47 +125,61 @@ export default function MockInterview() {
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {/* Interview Controls */}
-        <div className="bg-card rounded-[3rem] p-10 border border-muted shadow-xl relative overflow-hidden">
-          <div className="absolute top-0 right-0 p-8 opacity-5">
-            <Mic className="w-32 h-32" />
+        <div className="bg-card rounded-[3rem] p-10 border border-white/10 shadow-2xl relative overflow-hidden group">
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-50" />
+          <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+            <Mic className="w-40 h-40 -mr-10 -mt-10 rotate-12" />
           </div>
 
-          <div className="flex flex-col items-center justify-center space-y-8 relative z-10">
-            <div className={`w-32 h-32 rounded-full flex items-center justify-center transition-all duration-500 ${
-              status === 'connected' ? 'bg-primary shadow-2xl shadow-primary/50 scale-110 animate-pulse' : 'bg-muted'
+          <div className="flex flex-col items-center justify-center space-y-10 relative z-10">
+            <motion.div 
+               animate={status === 'connected' ? { scale: [1, 1.05, 1] } : {}}
+               transition={{ duration: 2, repeat: Infinity }}
+               className={`w-40 h-40 rounded-[2.5rem] flex items-center justify-center transition-all duration-700 shadow-inner ${
+              status === 'connected' 
+              ? 'bg-primary shadow-2xl shadow-primary/30 rotate-3' 
+              : 'bg-muted/50 -rotate-3 hover:rotate-0'
             }`}>
-              {status === 'connected' ? (
-                <Mic className="w-12 h-12 text-white" />
-              ) : (
-                <MicOff className="w-12 h-12 text-muted-foreground" />
-              )}
-            </div>
+              <div className={`w-36 h-36 rounded-[2.2rem] border-4 border-white/5 flex items-center justify-center ${
+                status === 'connected' ? 'bg-primary' : 'bg-muted'
+              }`}>
+                {status === 'connected' ? (
+                  <Mic className="w-16 h-16 text-white animate-pulse" />
+                ) : (
+                  <MicOff className="w-16 h-16 text-muted-foreground" />
+                )}
+              </div>
+            </motion.div>
 
             <div className="text-center">
-              <p className="font-black uppercase tracking-widest text-xs opacity-50 mb-2">Connection Status</p>
-              <p className={`text-xl font-bold ${status === 'connected' ? 'text-primary' : 'text-muted-foreground'}`}>
-                {status === 'connected' ? 'Live Interviewing...' : status === 'connecting' ? 'Establishing Line...' : 'Ready to Start'}
+              <span className="inline-block px-3 py-1 bg-primary/5 text-primary text-[10px] font-black uppercase tracking-[0.2em] rounded-full mb-3 ring-1 ring-primary/20">
+                AI Voice Interface
+              </span>
+              <p className={`text-2xl font-black tracking-tight ${status === 'connected' ? 'text-primary' : 'text-foreground'}`}>
+                {status === 'connected' ? 'Session Active' : status === 'connecting' ? 'Handshaking...' : 'Standby'}
               </p>
             </div>
 
-            {status !== 'connected' ? (
-              <button 
-                onClick={startInterview}
-                disabled={status === 'connecting'}
-                className="w-full bg-primary text-white py-4 rounded-2xl font-black text-lg hover:shadow-lg hover:shadow-primary/30 transition-all flex items-center justify-center gap-3 disabled:opacity-50"
-              >
-                <Mic className="w-5 h-5" />
-                {status === 'connecting' ? 'Connecting...' : 'Start Voice Interview'}
-              </button>
-            ) : (
-              <button 
-                onClick={stopInterview}
-                className="w-full bg-danger text-white py-4 rounded-2xl font-black text-lg hover:shadow-lg hover:shadow-danger/30 transition-all flex items-center justify-center gap-3"
-              >
-                <PhoneOff className="w-5 h-5" />
-                End Interview Session
-              </button>
-            )}
+            <div className="w-full pt-4">
+              {status !== 'connected' ? (
+                <button 
+                  onClick={startInterview}
+                  disabled={status === 'connecting'}
+                  className="w-full bg-foreground hover:bg-primary text-white py-5 rounded-[1.5rem] font-black text-lg shadow-xl shadow-primary/10 transition-smooth flex items-center justify-center gap-3 disabled:opacity-50 active:scale-95"
+                >
+                  <Mic className="w-5 h-5" />
+                  {status === 'connecting' ? 'Establishing Link...' : 'Initialize Voice Agent'}
+                </button>
+              ) : (
+                <button 
+                  onClick={stopInterview}
+                  className="w-full bg-danger text-white py-5 rounded-[1.5rem] font-black text-lg shadow-xl shadow-danger/20 hover:bg-danger-dark transition-smooth flex items-center justify-center gap-3 active:scale-95"
+                >
+                  <PhoneOff className="w-5 h-5" />
+                  Terminate Session
+                </button>
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index b423a7d..56bdf34 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
-import { Rocket, LogOut, LayoutDashboard, Menu, X, Mic } from 'lucide-react';
+import { Briefcase, LogOut, LayoutDashboard, Menu, X, Mic } from 'lucide-react';
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -24,7 +24,7 @@ export default function Navbar() {
                 whileHover={{ rotate: 12, scale: 1.1 }}
                 className="bg-primary p-2 rounded-xl shadow-lg shadow-primary/20"
               >
-                <Rocket className="w-5 h-5 text-white" />
+                <Briefcase className="w-5 h-5 text-white" />
               </motion.div>
               <span className="text-2xl font-black tracking-tight text-foreground">
                 LLMployable<span className="text-primary">.</span>
@@ -33,54 +33,59 @@ export default function Navbar() {
           </div>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-8">
+          <div className="hidden md:flex items-center gap-10">
             {isAuthenticated && (
-              <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2 bg-muted/50 p-1.5 rounded-2xl">
                 {navLinks.map((link) => (
                   <Link
                     key={link.path}
                     to={link.path}
-                    className={`flex items-center gap-2 text-sm font-semibold transition-smooth ${
+                    className={`flex items-center gap-2.5 px-5 py-2 rounded-xl text-sm font-black transition-smooth ${
                       location.pathname === link.path 
-                        ? 'text-primary' 
-                        : 'text-muted-foreground hover:text-foreground'
+                        ? 'bg-card text-primary shadow-sm ring-1 ring-black/5' 
+                        : 'text-muted-foreground hover:text-foreground hover:bg-card/50'
                     }`}
                   >
-                    <link.icon className="w-4 h-4" />
+                    <link.icon className={`w-4 h-4 ${location.pathname === link.path ? 'text-primary' : 'text-muted-foreground'}`} />
                     {link.name}
                   </Link>
                 ))}
               </div>
             )}
 
-            <div className="flex items-center gap-4 ml-4 pl-4 border-l border-white/10">
+            <div className="flex items-center gap-4 ml-2">
               {isAuthenticated ? (
-                <div className="flex items-center gap-6">
-                  <div className="flex flex-col items-end">
-                    <span className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Member</span>
-                    <span className="text-sm font-semibold text-foreground">{user?.username}</span>
+                <div className="flex items-center gap-8">
+                  <div className="flex items-center gap-3 group">
+                    <div className="flex flex-col items-end">
+                      <span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Verified</span>
+                      <span className="text-sm font-black text-foreground group-hover:text-primary transition-colors">{user?.username}</span>
+                    </div>
+                    <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20 ring-2 ring-white/10">
+                        {user?.username?.[0]?.toUpperCase()}
+                    </div>
                   </div>
                   <button
                     onClick={logout}
-                    className="flex items-center gap-2 text-sm font-bold text-muted-foreground hover:text-danger transition-smooth bg-muted px-4 py-2 rounded-xl"
+                    className="flex items-center gap-2 group text-sm font-black text-muted-foreground hover:text-danger hover:bg-danger/5 transition-smooth px-4 py-2.5 rounded-xl border border-transparent hover:border-danger/10"
                   >
-                    <LogOut className="w-4 h-4" />
+                    <LogOut className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
                     Logout
                   </button>
                 </div>
               ) : (
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-4">
                   <Link 
                     to="/login" 
-                    className="px-4 py-2 text-sm font-bold text-muted-foreground hover:text-foreground transition-smooth"
+                    className="px-5 py-2.5 text-sm font-black text-muted-foreground hover:text-primary transition-smooth"
                   >
                     Login
                   </Link>
                   <Link 
                     to="/register" 
-                    className="bg-primary hover:bg-primary-dark text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-primary/25 transition-smooth"
+                    className="bg-foreground hover:bg-primary text-white px-7 py-3 rounded-2xl text-sm font-black shadow-xl shadow-primary/10 transition-smooth hover:-translate-y-1"
                   >
-                    Sign Up Free
+                    Get Started Free
                   </Link>
                 </div>
               )}
@@ -99,53 +104,68 @@ export default function Navbar() {
         </div>
       </div>
 
-      {/* Mobile menu */}
+      {/* Mobile Menu */}
       <AnimatePresence>
         {isMobileMenuOpen && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: 'auto' }}
             exit={{ opacity: 0, height: 0 }}
-            className="md:hidden border-t border-white/10 bg-background/95 backdrop-blur-md overflow-hidden"
+            className="md:hidden bg-card border-b border-white/10 overflow-hidden shadow-2xl"
           >
-            <div className="px-4 pt-2 pb-6 space-y-1">
+            <div className="px-4 pt-4 pb-8 space-y-4">
               {isAuthenticated ? (
                 <>
-                  <Link
-                    to="/dashboard"
-                    onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-3 py-4 text-base font-bold text-foreground border-b border-white/5"
-                  >
-                    Dashboard
-                  </Link>
-                  <div className="pt-4 flex items-center justify-between">
-                    <span className="text-sm font-semibold text-muted-foreground">{user?.username}</span>
-                    <button
-                      onClick={() => {
-                        logout();
-                        setIsMobileMenuOpen(false);
-                      }}
-                      className="text-sm font-bold text-danger"
-                    >
-                      Logout
-                    </button>
+                  <div className="flex items-center gap-4 px-4 py-6 bg-muted/50 rounded-[2rem] mb-6 shadow-inner ring-1 ring-white/5">
+                    <div className="w-12 h-12 bg-gradient-to-br from-primary to-primary-dark rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20">
+                      {user?.username?.[0]?.toUpperCase()}
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Active Member</p>
+                      <p className="text-xl font-black text-foreground">{user?.username}</p>
+                    </div>
                   </div>
+                  {navLinks.map((link) => (
+                    <Link
+                      key={link.path}
+                      to={link.path}
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className={`flex items-center gap-4 px-6 py-4 rounded-2xl text-base font-black transition-smooth ${
+                        location.pathname === link.path 
+                          ? 'bg-primary text-white shadow-xl shadow-primary/20' 
+                          : 'text-muted-foreground hover:bg-muted/50'
+                      }`}
+                    >
+                      <link.icon className="w-5 h-5" />
+                      {link.name}
+                    </Link>
+                  ))}
+                  <button
+                    onClick={() => {
+                      logout();
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className="w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-base font-black text-danger hover:bg-danger/5 transition-smooth"
+                  >
+                    <LogOut className="w-5 h-5" />
+                    Logout
+                  </button>
                 </>
               ) : (
-                <div className="grid grid-cols-2 gap-4 pt-4">
+                <div className="grid grid-cols-1 gap-4 p-4">
                   <Link
                     to="/login"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="flex items-center justify-center px-4 py-3 rounded-xl font-bold bg-muted text-foreground"
+                    className="flex items-center justify-center py-4 rounded-2xl font-black text-muted-foreground hover:bg-muted/50 transition-smooth"
                   >
                     Login
                   </Link>
                   <Link
                     to="/register"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="flex items-center justify-center px-4 py-3 rounded-xl font-bold bg-primary text-white"
+                    className="flex items-center justify-center bg-primary py-4 rounded-2xl font-black text-white shadow-xl shadow-primary/20 transition-smooth"
                   >
-                    Sign Up
+                    Get Started Free
                   </Link>
                 </div>
               )}
diff --git a/frontend/src/components/ResumeForm.tsx b/frontend/src/components/ResumeForm.tsx
index 4fc5c3d..8edaf2e 100644
--- a/frontend/src/components/ResumeForm.tsx
+++ b/frontend/src/components/ResumeForm.tsx
@@ -1,6 +1,6 @@
 import { useState, useActionState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Github, Linkedin, Briefcase, Download, Loader2, Rocket, AlertCircle, CheckCircle2, Info, ArrowRight, ShieldCheck, Mic, Sparkles } from 'lucide-react';
+import { Github, Linkedin, Briefcase, Download, Loader2, AlertCircle, CheckCircle2, Info, ArrowRight, ShieldCheck, Mic, Sparkles } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import axios from 'axios';
 import { useAuth } from '../context/AuthContext';
@@ -146,87 +146,115 @@ export default function ResumeForm() {
         >
           <div className="bg-card rounded-[3rem] shadow-2xl shadow-primary/5 border border-white/10 overflow-hidden">
             <div className="p-8 sm:p-12">
-              <div className="flex items-center gap-4 mb-10">
-                <div className="p-3 bg-primary/10 rounded-2xl text-primary">
-                    <Rocket className="w-6 h-6" />
+              <div className="flex items-center gap-5 mb-12">
+                <div className="p-4 bg-primary/10 rounded-2xl text-primary shadow-inner">
+                    <Sparkles className="w-8 h-8" />
                 </div>
                 <div>
-                    <h2 className="text-2xl font-black">Generator Configuration</h2>
-                    <p className="text-muted-foreground font-medium text-sm">Fill in your details to start the magic</p>
+                    <h2 className="text-3xl font-black text-foreground tracking-tight">Generator<span className="text-primary">.</span></h2>
+                    <p className="text-muted-foreground font-medium flex items-center gap-2 text-sm">
+                        Configure your AI agent for optimal results
+                        <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
+                    </p>
                 </div>
               </div>
 
               <form action={formAction} className="space-y-10">
                 {user?.id && <input type="hidden" name="user_id" value={user.id} />}
 
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
-                  <div className="space-y-3">
-                    <label htmlFor="github_username" className="text-sm font-black text-foreground flex items-center gap-2 uppercase tracking-widest">
-                      <Github className="w-4 h-4 text-primary" /> GitHub Profile
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-10">
+                  <div className="space-y-4">
+                    <label htmlFor="github_username" className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground ml-1 flex items-center gap-2">
+                      <Github className="w-3.5 h-3.5" /> Technical Background
                     </label>
                     <div className="relative group">
                         <input
                         type="text"
                         name="github_username"
                         id="github_username"
-                        placeholder="e.g. torvalds"
-                        className="w-full pl-6 pr-6 py-5 rounded-2xl bg-muted border-none focus:ring-4 focus:ring-primary/10 focus:bg-card transition-smooth outline-none font-bold text-lg placeholder:text-muted-foreground/50"
+                        placeholder="GitHub Username"
+                        className="w-full px-8 py-5 rounded-2xl bg-muted/50 border-none focus:ring-4 focus:ring-primary/10 focus:bg-white transition-smooth outline-none font-black text-lg placeholder:text-muted-foreground/30 shadow-inner"
                         />
                     </div>
                   </div>
 
-                  <div className="space-y-3">
-                    <label className="text-sm font-black text-foreground flex items-center gap-2 uppercase tracking-widest">
-                      <Linkedin className="w-4 h-4 text-primary" /> LinkedIn Export
+                  <div className="space-y-4">
+                    <label className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground ml-1 flex items-center gap-2">
+                      <Linkedin className="w-3.5 h-3.5" /> Experience Profile
                     </label>
                     <div className="relative group overflow-hidden">
                       <input
                         type="file"
                         name="linkedin_data"
-                        accept=".zip"
+                        accept=".zip,.json"
                         onChange={(e) => setFileName(e.target.files?.[0]?.name || '')}
                         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                       />
-                      <div className="w-full px-6 py-5 rounded-2xl bg-muted border-none group-hover:bg-slate-200 transition-smooth flex items-center justify-between border-2 border-transparent group-focus-within:border-primary/20">
-                        <span className={`text-lg font-bold truncate ${fileName ? 'text-primary' : 'text-muted-foreground/50'}`}>
-                          {fileName || 'Upload Archive (.zip)'}
+                      <div className="w-full px-8 py-5 rounded-2xl bg-muted/50 border-2 border-dashed border-muted-foreground/20 group-hover:bg-muted group-hover:border-primary/50 transition-smooth flex items-center justify-between shadow-inner">
+                        <span className={`text-lg font-black truncate ${fileName ? 'text-primary' : 'text-muted-foreground/30'}`}>
+                          {fileName || 'Upload Archive'}
                         </span>
-                        <Download className="w-5 h-5 text-muted-foreground" />
+                        <div className="p-2 bg-background rounded-xl shadow-sm">
+                            <Download className="w-5 h-5 text-muted-foreground" />
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
 
-                <div className="space-y-3">
-                  <label htmlFor="job_description" className="text-sm font-black text-foreground flex items-center gap-2 uppercase tracking-widest">
-                    <Briefcase className="w-4 h-4 text-primary" /> Target Job Description
-                  </label>
-                  <textarea
-                    name="job_description"
-                    id="job_description"
-                    rows={10}
-                    placeholder="Describe the opportunity you're targeting..."
-                    className="w-full px-6 py-6 rounded-[2rem] bg-muted border-none focus:ring-4 focus:ring-primary/10 focus:bg-card transition-smooth outline-none font-medium text-lg resize-none placeholder:text-muted-foreground/50"
-                  />
+                <div className="space-y-4">
+                  <div className="flex justify-between items-end mb-1">
+                    <label htmlFor="job_description" className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground ml-1 flex items-center gap-2">
+                      <Briefcase className="w-3.5 h-3.5" /> Objective Analysis
+                    </label>
+                    <div className="flex items-center gap-1 text-[10px] font-black text-primary uppercase tracking-tighter bg-primary/5 px-2 py-0.5 rounded">
+                        Target Role Description
+                    </div>
+                  </div>
+                  <div className="relative group">
+                    <textarea
+                      name="job_description"
+                      id="job_description"
+                      rows={10}
+                      placeholder="Paste the target job description here. The more detailed, the better our AI can tailor your profile."
+                      className="w-full p-8 rounded-[2.5rem] bg-muted/50 border-none focus:ring-4 focus:ring-primary/10 focus:bg-background transition-smooth outline-none font-medium text-lg leading-relaxed placeholder:text-muted-foreground/30 shadow-inner resize-none text-foreground"
+                    />
+                  </div>
                 </div>
 
-                <button
-                  type="submit"
-                  disabled={isPending}
-                  className="w-full group relative flex items-center justify-center gap-4 py-6 px-8 rounded-2xl bg-foreground text-white font-black text-xl hover:bg-primary transition-smooth disabled:opacity-50 disabled:bg-muted shadow-2xl shadow-primary/10"
-                >
-                  {isPending ? (
-                    <>
-                      <Loader2 className="w-6 h-6 animate-spin" />
-                      Generating Excellence...
-                    </>
-                  ) : (
-                    <>
-                      Begin Transformation
-                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-                    </>
-                  )}
-                </button>
+                <div className="pt-4">
+                  <button
+                    type="submit"
+                    disabled={isPending}
+                    className="w-full group bg-foreground hover:bg-primary disabled:opacity-50 text-white font-black py-6 rounded-[2rem] transition-smooth shadow-2xl shadow-primary/20 flex items-center justify-center gap-4 overflow-hidden relative active:scale-[0.98]"
+                  >
+                    <AnimatePresence mode="wait">
+                      {isPending ? (
+                        <motion.div 
+                          key="loading"
+                          initial={{ opacity: 0, y: 20 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: -20 }}
+                          className="flex items-center gap-3"
+                        >
+                          <Loader2 className="w-6 h-6 animate-spin" />
+                          <span className="tracking-tight">Initializing LLM Core...</span>
+                        </motion.div>
+                      ) : (
+                        <motion.div 
+                          key="idle"
+                          initial={{ opacity: 0, y: 20 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: -20 }}
+                          className="flex items-center gap-3"
+                        >
+                          <Briefcase className="w-6 h-6 group-hover:scale-110 transition-transform" />
+                          <span className="text-xl font-black">Generate Performance Suite</span>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </button>
+                </div>
               </form>
 
               <AnimatePresence>
@@ -379,7 +407,7 @@ export default function ResumeForm() {
                      }}
                      transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
                   >
-                    <Rocket className="w-16 h-16" />
+                    <Briefcase className="w-16 h-16" />
                   </motion.div>
                 </div>
               </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1373829..2a5aa1a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -74,3 +74,28 @@ button:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 10px;
+  border: 3px solid var(--background);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #cbd5e1;
+}
+
+/* Modern Text Selection */
+::selection {
+  background-color: var(--color-primary);
+  color: white;
+}